diff --git a/App.tsx b/App.tsx
index e00140b3..bc631fa8 100644
--- a/App.tsx
+++ b/App.tsx
@@ -69,7 +69,10 @@ import { PushOnboardingPrompt } from './src/components/PushOnboardingPrompt';
 import { ToastHost } from './src/components/ToastHost';
 import { UndoSnackbar } from './src/components/UndoSnackbar';
 import { AppIconBadge } from './src/components/AppIconBadge';
-import { getEmails } from './src/api/email';
+import { getEmails, getFullEmail } from './src/api/email';
+import { signOutWidgets, startWidgetSync } from './src/widgets/sync';
+import { draftContextFromEmail } from './src/lib/draft-context';
+import { replyComposeParams } from './src/lib/reply-compose';
 import { handleDeepLink, parseDeepLink, shareToDeepLink, type DeepLink } from './src/navigation/linking';
 import { addShareListener, getInitialShare, shareAttachments } from './src/lib/share-intent';
 import { OfflineCacheBanner } from './src/components/OfflineCacheBanner';
@@ -133,14 +136,34 @@ async function openCalendarReminder(target: CalendarReminderTarget): Promise<voi
 async function openDeepLink(link: DeepLink): Promise<void> {
   await handleDeepLink(link, {
     navigation: navigationRef,
-    resolveThreadId: async (emailId) => {
+    resolveThreadId: async (emailId, jmapAccountId) => {
       try {
-        const [email] = await getEmails([emailId]);
+        const [email] = await getEmails([emailId], jmapAccountId);
         return email?.threadId ?? null;
       } catch {
         return null;
       }
     },
+    openReply: async (emailId, jmapAccountId) => {
+      try {
+        const params = replyComposeParams('reply', await getFullEmail(emailId, jmapAccountId), jmapAccountId);
+        if (!params || !navigationRef.isReady()) return false;
+        navigationRef.navigate('Compose', params);
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    openDraft: async (emailId, jmapAccountId) => {
+      try {
+        const draft = draftContextFromEmail(await getFullEmail(emailId, jmapAccountId), jmapAccountId);
+        if (!navigationRef.isReady()) return false;
+        navigationRef.navigate('Compose', { draft });
+        return true;
+      } catch {
+        return false;
+      }
+    },
     switchAccount: async (accountId) => {
       const auth = useAuthStore.getState();
       if (auth.activeAccountId === accountId) return true;
@@ -385,6 +408,14 @@ export default function App() {
     return useNetworkStore.getState().init();
   }, []);
 
+  // Home-screen widgets follow the signed-in data; once the last account is
+  // gone they are wiped so no mail stays visible on the launcher.
+  React.useEffect(() => {
+    if (isAuthenticated) return startWidgetSync();
+    if (hasRestoredSession) void signOutWidgets();
+    return undefined;
+  }, [isAuthenticated, hasRestoredSession]);
+
   // When the network flips back on while we're authenticated-but-offline
   // (no live JMAP session), retry the session so the user lands back on
   // live data without needing to relaunch.
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index a1318459..1c2731e4 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -66,5 +66,232 @@
       </intent-filter>
     </service>
     <meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="bulwark_mail"/>
+    <!-- BEGIN WIDGETS: generated by scripts/sync-android-widgets.mjs, do not edit by hand -->
+    <service android:name="com.reactnativeandroidwidget.RNWidgetCollectionService" android:permission="android.permission.BIND_REMOTEVIEWS"/>
+    <receiver android:name=".widget.InboxWidget" android:exported="false" android:label="@string/widgetprovider_inboxwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_inboxwidget"/>
+    </receiver>
+    <receiver android:name=".widget.TriageWidget" android:exported="false" android:label="@string/widgetprovider_triagewidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_triagewidget"/>
+    </receiver>
+    <receiver android:name=".widget.UnreadCountWidget" android:exported="false" android:label="@string/widgetprovider_unreadcountwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_unreadcountwidget"/>
+    </receiver>
+    <receiver android:name=".widget.LatestMessageWidget" android:exported="false" android:label="@string/widgetprovider_latestmessagewidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_latestmessagewidget"/>
+    </receiver>
+    <receiver android:name=".widget.FolderCountsWidget" android:exported="false" android:label="@string/widgetprovider_foldercountswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_foldercountswidget"/>
+    </receiver>
+    <receiver android:name=".widget.MailShortcutsWidget" android:exported="false" android:label="@string/widgetprovider_mailshortcutswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_mailshortcutswidget"/>
+    </receiver>
+    <receiver android:name=".widget.AllAccountsWidget" android:exported="false" android:label="@string/widgetprovider_allaccountswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_allaccountswidget"/>
+    </receiver>
+    <receiver android:name=".widget.StarredWidget" android:exported="false" android:label="@string/widgetprovider_starredwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_starredwidget"/>
+    </receiver>
+    <receiver android:name=".widget.FavouritePeopleWidget" android:exported="false" android:label="@string/widgetprovider_favouritepeoplewidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_favouritepeoplewidget"/>
+    </receiver>
+    <receiver android:name=".widget.MailSearchWidget" android:exported="false" android:label="@string/widgetprovider_mailsearchwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_mailsearchwidget"/>
+    </receiver>
+    <receiver android:name=".widget.OutboxWidget" android:exported="false" android:label="@string/widgetprovider_outboxwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_outboxwidget"/>
+    </receiver>
+    <receiver android:name=".widget.TagWidget" android:exported="false" android:label="@string/widgetprovider_tagwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_tagwidget"/>
+    </receiver>
+    <receiver android:name=".widget.LastDraftWidget" android:exported="false" android:label="@string/widgetprovider_lastdraftwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_lastdraftwidget"/>
+    </receiver>
+    <receiver android:name=".widget.AgendaWidget" android:exported="false" android:label="@string/widgetprovider_agendawidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_agendawidget"/>
+    </receiver>
+    <receiver android:name=".widget.WeekWidget" android:exported="false" android:label="@string/widgetprovider_weekwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_weekwidget"/>
+    </receiver>
+    <receiver android:name=".widget.MonthWidget" android:exported="false" android:label="@string/widgetprovider_monthwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_monthwidget"/>
+    </receiver>
+    <receiver android:name=".widget.TodayEventsWidget" android:exported="false" android:label="@string/widgetprovider_todayeventswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_todayeventswidget"/>
+    </receiver>
+    <receiver android:name=".widget.NextEventWidget" android:exported="false" android:label="@string/widgetprovider_nexteventwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_nexteventwidget"/>
+    </receiver>
+    <receiver android:name=".widget.DateNextWidget" android:exported="false" android:label="@string/widgetprovider_datenextwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_datenextwidget"/>
+    </receiver>
+    <receiver android:name=".widget.UpNextWidget" android:exported="false" android:label="@string/widgetprovider_upnextwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_upnextwidget"/>
+    </receiver>
+    <receiver android:name=".widget.InvitationsWidget" android:exported="false" android:label="@string/widgetprovider_invitationswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_invitationswidget"/>
+    </receiver>
+    <receiver android:name=".widget.FreeTimeWidget" android:exported="false" android:label="@string/widgetprovider_freetimewidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_freetimewidget"/>
+    </receiver>
+    <receiver android:name=".widget.TasksWidget" android:exported="false" android:label="@string/widgetprovider_taskswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_taskswidget"/>
+    </receiver>
+    <receiver android:name=".widget.TaskProgressWidget" android:exported="false" android:label="@string/widgetprovider_taskprogresswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_taskprogresswidget"/>
+    </receiver>
+    <receiver android:name=".widget.CountdownWidget" android:exported="false" android:label="@string/widgetprovider_countdownwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_countdownwidget"/>
+    </receiver>
+    <receiver android:name=".widget.BirthdaysWidget" android:exported="false" android:label="@string/widgetprovider_birthdayswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_birthdayswidget"/>
+    </receiver>
+    <receiver android:name=".widget.TodayHubWidget" android:exported="false" android:label="@string/widgetprovider_todayhubwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_todayhubwidget"/>
+    </receiver>
+    <receiver android:name=".widget.MailAndNextWidget" android:exported="false" android:label="@string/widgetprovider_mailandnextwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_mailandnextwidget"/>
+    </receiver>
+    <receiver android:name=".widget.RecentFilesWidget" android:exported="false" android:label="@string/widgetprovider_recentfileswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_recentfileswidget"/>
+    </receiver>
+    <receiver android:name=".widget.AttachmentsWidget" android:exported="false" android:label="@string/widgetprovider_attachmentswidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_attachmentswidget"/>
+    </receiver>
+    <receiver android:name=".widget.VacationWidget" android:exported="false" android:label="@string/widgetprovider_vacationwidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_vacationwidget"/>
+    </receiver>
+    <receiver android:name=".widget.StorageWidget" android:exported="false" android:label="@string/widgetprovider_storagewidget_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.anonymous.bulwarkmobile.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_storagewidget"/>
+    </receiver>
+    <!-- END WIDGETS -->
   </application>
 </manifest>
\ No newline at end of file
diff --git a/android/app/src/main/java/com/anonymous/bulwarkmobile/widget/WidgetProviders.kt b/android/app/src/main/java/com/anonymous/bulwarkmobile/widget/WidgetProviders.kt
new file mode 100644
index 00000000..3a4efe0b
--- /dev/null
+++ b/android/app/src/main/java/com/anonymous/bulwarkmobile/widget/WidgetProviders.kt
@@ -0,0 +1,40 @@
+// Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json.
+// react-native-android-widget names a widget after its provider class, so each
+// widget needs its own subclass; the JS side (src/widgets/task-handler.tsx)
+// renders by that name.
+package com.anonymous.bulwarkmobile.widget
+
+import com.reactnativeandroidwidget.RNWidgetProvider
+
+class InboxWidget : RNWidgetProvider()
+class TriageWidget : RNWidgetProvider()
+class UnreadCountWidget : RNWidgetProvider()
+class LatestMessageWidget : RNWidgetProvider()
+class FolderCountsWidget : RNWidgetProvider()
+class MailShortcutsWidget : RNWidgetProvider()
+class AllAccountsWidget : RNWidgetProvider()
+class StarredWidget : RNWidgetProvider()
+class FavouritePeopleWidget : RNWidgetProvider()
+class MailSearchWidget : RNWidgetProvider()
+class OutboxWidget : RNWidgetProvider()
+class TagWidget : RNWidgetProvider()
+class LastDraftWidget : RNWidgetProvider()
+class AgendaWidget : RNWidgetProvider()
+class WeekWidget : RNWidgetProvider()
+class MonthWidget : RNWidgetProvider()
+class TodayEventsWidget : RNWidgetProvider()
+class NextEventWidget : RNWidgetProvider()
+class DateNextWidget : RNWidgetProvider()
+class UpNextWidget : RNWidgetProvider()
+class InvitationsWidget : RNWidgetProvider()
+class FreeTimeWidget : RNWidgetProvider()
+class TasksWidget : RNWidgetProvider()
+class TaskProgressWidget : RNWidgetProvider()
+class CountdownWidget : RNWidgetProvider()
+class BirthdaysWidget : RNWidgetProvider()
+class TodayHubWidget : RNWidgetProvider()
+class MailAndNextWidget : RNWidgetProvider()
+class RecentFilesWidget : RNWidgetProvider()
+class AttachmentsWidget : RNWidgetProvider()
+class VacationWidget : RNWidgetProvider()
+class StorageWidget : RNWidgetProvider()
diff --git a/android/app/src/main/res/drawable-nodpi/agendawidget_preview.png b/android/app/src/main/res/drawable-nodpi/agendawidget_preview.png
new file mode 100644
index 00000000..23530cdc
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/agendawidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/allaccountswidget_preview.png b/android/app/src/main/res/drawable-nodpi/allaccountswidget_preview.png
new file mode 100644
index 00000000..07288c8e
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/allaccountswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/attachmentswidget_preview.png b/android/app/src/main/res/drawable-nodpi/attachmentswidget_preview.png
new file mode 100644
index 00000000..c9b13319
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/attachmentswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/birthdayswidget_preview.png b/android/app/src/main/res/drawable-nodpi/birthdayswidget_preview.png
new file mode 100644
index 00000000..4d572809
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/birthdayswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/countdownwidget_preview.png b/android/app/src/main/res/drawable-nodpi/countdownwidget_preview.png
new file mode 100644
index 00000000..2ef9baf1
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/countdownwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/datenextwidget_preview.png b/android/app/src/main/res/drawable-nodpi/datenextwidget_preview.png
new file mode 100644
index 00000000..82e3c71e
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/datenextwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/favouritepeoplewidget_preview.png b/android/app/src/main/res/drawable-nodpi/favouritepeoplewidget_preview.png
new file mode 100644
index 00000000..026e9b71
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/favouritepeoplewidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/foldercountswidget_preview.png b/android/app/src/main/res/drawable-nodpi/foldercountswidget_preview.png
new file mode 100644
index 00000000..0aed2541
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/foldercountswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/freetimewidget_preview.png b/android/app/src/main/res/drawable-nodpi/freetimewidget_preview.png
new file mode 100644
index 00000000..95631e05
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/freetimewidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/inboxwidget_preview.png b/android/app/src/main/res/drawable-nodpi/inboxwidget_preview.png
new file mode 100644
index 00000000..0ef3d992
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/inboxwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/invitationswidget_preview.png b/android/app/src/main/res/drawable-nodpi/invitationswidget_preview.png
new file mode 100644
index 00000000..9e1573c5
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/invitationswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/lastdraftwidget_preview.png b/android/app/src/main/res/drawable-nodpi/lastdraftwidget_preview.png
new file mode 100644
index 00000000..79642042
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/lastdraftwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/latestmessagewidget_preview.png b/android/app/src/main/res/drawable-nodpi/latestmessagewidget_preview.png
new file mode 100644
index 00000000..63b680c8
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/latestmessagewidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/mailandnextwidget_preview.png b/android/app/src/main/res/drawable-nodpi/mailandnextwidget_preview.png
new file mode 100644
index 00000000..14f5c077
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/mailandnextwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/mailsearchwidget_preview.png b/android/app/src/main/res/drawable-nodpi/mailsearchwidget_preview.png
new file mode 100644
index 00000000..b74ce6df
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/mailsearchwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/mailshortcutswidget_preview.png b/android/app/src/main/res/drawable-nodpi/mailshortcutswidget_preview.png
new file mode 100644
index 00000000..e1a0a3d3
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/mailshortcutswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/monthwidget_preview.png b/android/app/src/main/res/drawable-nodpi/monthwidget_preview.png
new file mode 100644
index 00000000..f386255d
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/monthwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/nexteventwidget_preview.png b/android/app/src/main/res/drawable-nodpi/nexteventwidget_preview.png
new file mode 100644
index 00000000..28eb7c5d
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/nexteventwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/outboxwidget_preview.png b/android/app/src/main/res/drawable-nodpi/outboxwidget_preview.png
new file mode 100644
index 00000000..e3530b98
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/outboxwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/recentfileswidget_preview.png b/android/app/src/main/res/drawable-nodpi/recentfileswidget_preview.png
new file mode 100644
index 00000000..7796ef45
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/recentfileswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/starredwidget_preview.png b/android/app/src/main/res/drawable-nodpi/starredwidget_preview.png
new file mode 100644
index 00000000..dbe92bdd
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/starredwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/storagewidget_preview.png b/android/app/src/main/res/drawable-nodpi/storagewidget_preview.png
new file mode 100644
index 00000000..29a3fa57
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/storagewidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/tagwidget_preview.png b/android/app/src/main/res/drawable-nodpi/tagwidget_preview.png
new file mode 100644
index 00000000..f2b1feb4
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/tagwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/taskprogresswidget_preview.png b/android/app/src/main/res/drawable-nodpi/taskprogresswidget_preview.png
new file mode 100644
index 00000000..db963368
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/taskprogresswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/taskswidget_preview.png b/android/app/src/main/res/drawable-nodpi/taskswidget_preview.png
new file mode 100644
index 00000000..758c181a
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/taskswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/todayeventswidget_preview.png b/android/app/src/main/res/drawable-nodpi/todayeventswidget_preview.png
new file mode 100644
index 00000000..18ed45db
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/todayeventswidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/todayhubwidget_preview.png b/android/app/src/main/res/drawable-nodpi/todayhubwidget_preview.png
new file mode 100644
index 00000000..4edb42ef
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/todayhubwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/triagewidget_preview.png b/android/app/src/main/res/drawable-nodpi/triagewidget_preview.png
new file mode 100644
index 00000000..d3c6f1c9
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/triagewidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/unreadcountwidget_preview.png b/android/app/src/main/res/drawable-nodpi/unreadcountwidget_preview.png
new file mode 100644
index 00000000..19e9e6be
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/unreadcountwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/upnextwidget_preview.png b/android/app/src/main/res/drawable-nodpi/upnextwidget_preview.png
new file mode 100644
index 00000000..4fa8657f
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/upnextwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/vacationwidget_preview.png b/android/app/src/main/res/drawable-nodpi/vacationwidget_preview.png
new file mode 100644
index 00000000..55cbcf1f
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/vacationwidget_preview.png differ
diff --git a/android/app/src/main/res/drawable-nodpi/weekwidget_preview.png b/android/app/src/main/res/drawable-nodpi/weekwidget_preview.png
new file mode 100644
index 00000000..2ad380dc
Binary files /dev/null and b/android/app/src/main/res/drawable-nodpi/weekwidget_preview.png differ
diff --git a/android/app/src/main/res/values/widget_strings.xml b/android/app/src/main/res/values/widget_strings.xml
new file mode 100644
index 00000000..c8011188
--- /dev/null
+++ b/android/app/src/main/res/values/widget_strings.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<resources>
+  <string name="widgetprovider_inboxwidget_label">Inbox</string>
+  <string name="widgetprovider_inboxwidget_description">Newest messages with sender, time and subject. Taller sizes add avatars and a line of preview.</string>
+  <string name="widgetprovider_triagewidget_label">Triage</string>
+  <string name="widgetprovider_triagewidget_description">One unread message at a time with archive, delete and reply buttons.</string>
+  <string name="widgetprovider_unreadcountwidget_label">Unread count</string>
+  <string name="widgetprovider_unreadcountwidget_description">Unread count for the inbox, with the latest senders.</string>
+  <string name="widgetprovider_latestmessagewidget_label">Latest message</string>
+  <string name="widgetprovider_latestmessagewidget_description">Only the newest unread message.</string>
+  <string name="widgetprovider_foldercountswidget_label">Folder counts</string>
+  <string name="widgetprovider_foldercountswidget_description">Unread counts for up to four folders.</string>
+  <string name="widgetprovider_mailshortcutswidget_label">Shortcuts</string>
+  <string name="widgetprovider_mailshortcutswidget_description">Compose, calendar, contacts and files.</string>
+  <string name="widgetprovider_allaccountswidget_label">All accounts</string>
+  <string name="widgetprovider_allaccountswidget_description">The unified inbox across every signed-in account.</string>
+  <string name="widgetprovider_starredwidget_label">Starred</string>
+  <string name="widgetprovider_starredwidget_description">Starred messages, newest first.</string>
+  <string name="widgetprovider_favouritepeoplewidget_label">Favourite people</string>
+  <string name="widgetprovider_favouritepeoplewidget_description">The people you hear from most, with their unread count.</string>
+  <string name="widgetprovider_mailsearchwidget_label">Search mail</string>
+  <string name="widgetprovider_mailsearchwidget_description">Search bar with your recent searches.</string>
+  <string name="widgetprovider_outboxwidget_label">Scheduled and outbox</string>
+  <string name="widgetprovider_outboxwidget_description">Scheduled messages and anything waiting in the outbox.</string>
+  <string name="widgetprovider_tagwidget_label">Tag</string>
+  <string name="widgetprovider_tagwidget_description">Unread count for your busiest tag.</string>
+  <string name="widgetprovider_lastdraftwidget_label">Last draft</string>
+  <string name="widgetprovider_lastdraftwidget_description">Back into the draft you left.</string>
+  <string name="widgetprovider_agendawidget_label">Agenda</string>
+  <string name="widgetprovider_agendawidget_description">Upcoming events by day with time, colour and place.</string>
+  <string name="widgetprovider_weekwidget_label">This week</string>
+  <string name="widgetprovider_weekwidget_description">The week at a glance from 8:00 to 18:00.</string>
+  <string name="widgetprovider_monthwidget_label">Month</string>
+  <string name="widgetprovider_monthwidget_description">Month grid with a dot per calendar and the next two events.</string>
+  <string name="widgetprovider_todayeventswidget_label">Today</string>
+  <string name="widgetprovider_todayeventswidget_description">Today\'s date with the rest of today and tomorrow.</string>
+  <string name="widgetprovider_nexteventwidget_label">Next event</string>
+  <string name="widgetprovider_nexteventwidget_description">What\'s next, when and where.</string>
+  <string name="widgetprovider_datenextwidget_label">Date and next two</string>
+  <string name="widgetprovider_datenextwidget_description">Today\'s date with the next two events.</string>
+  <string name="widgetprovider_upnextwidget_label">Up next</string>
+  <string name="widgetprovider_upnextwidget_description">Countdown to the next event with join and running-late buttons.</string>
+  <string name="widgetprovider_invitationswidget_label">Invitations</string>
+  <string name="widgetprovider_invitationswidget_description">Pending invitations with accept, maybe and decline.</string>
+  <string name="widgetprovider_freetimewidget_label">Free time</string>
+  <string name="widgetprovider_freetimewidget_description">When you\'re free this week.</string>
+  <string name="widgetprovider_taskswidget_label">Tasks</string>
+  <string name="widgetprovider_taskswidget_description">Open tasks with tick boxes that work from the home screen.</string>
+  <string name="widgetprovider_taskprogresswidget_label">Task progress</string>
+  <string name="widgetprovider_taskprogresswidget_description">How many tasks are done.</string>
+  <string name="widgetprovider_countdownwidget_label">Countdown</string>
+  <string name="widgetprovider_countdownwidget_description">Days until your next all-day event.</string>
+  <string name="widgetprovider_birthdayswidget_label">Birthdays</string>
+  <string name="widgetprovider_birthdayswidget_description">Upcoming birthdays from your contacts.</string>
+  <string name="widgetprovider_todayhubwidget_label">Today overview</string>
+  <string name="widgetprovider_todayhubwidget_description">Next event, newest unread mail and tasks due, in one widget.</string>
+  <string name="widgetprovider_mailandnextwidget_label">Mail and next event</string>
+  <string name="widgetprovider_mailandnextwidget_description">Unread mail on one side, the next event on the other.</string>
+  <string name="widgetprovider_recentfileswidget_label">Recent files</string>
+  <string name="widgetprovider_recentfileswidget_description">Recently changed items in Files.</string>
+  <string name="widgetprovider_attachmentswidget_label">Recent attachments</string>
+  <string name="widgetprovider_attachmentswidget_description">The newest attachments from your mail.</string>
+  <string name="widgetprovider_vacationwidget_label">Vacation responder</string>
+  <string name="widgetprovider_vacationwidget_description">Vacation responder status with an on/off switch.</string>
+  <string name="widgetprovider_storagewidget_label">Storage</string>
+  <string name="widgetprovider_storagewidget_description">How much of your mailbox quota is used.</string>
+</resources>
diff --git a/android/app/src/main/res/xml/widgetprovider_agendawidget.xml b/android/app/src/main/res/xml/widgetprovider_agendawidget.xml
new file mode 100644
index 00000000..dbe5aaa1
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_agendawidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="250dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="4"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_agendawidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/agendawidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_allaccountswidget.xml b/android/app/src/main/res/xml/widgetprovider_allaccountswidget.xml
new file mode 100644
index 00000000..6a7f0518
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_allaccountswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_allaccountswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/allaccountswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_attachmentswidget.xml b/android/app/src/main/res/xml/widgetprovider_attachmentswidget.xml
new file mode 100644
index 00000000..8a5a3539
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_attachmentswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_attachmentswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/attachmentswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_birthdayswidget.xml b/android/app/src/main/res/xml/widgetprovider_birthdayswidget.xml
new file mode 100644
index 00000000..050009b7
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_birthdayswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_birthdayswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/birthdayswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_countdownwidget.xml b/android/app/src/main/res/xml/widgetprovider_countdownwidget.xml
new file mode 100644
index 00000000..cb6f174f
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_countdownwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_countdownwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/countdownwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_datenextwidget.xml b/android/app/src/main/res/xml/widgetprovider_datenextwidget.xml
new file mode 100644
index 00000000..2c97b57e
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_datenextwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_datenextwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/datenextwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_favouritepeoplewidget.xml b/android/app/src/main/res/xml/widgetprovider_favouritepeoplewidget.xml
new file mode 100644
index 00000000..5195a43f
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_favouritepeoplewidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_favouritepeoplewidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/favouritepeoplewidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_foldercountswidget.xml b/android/app/src/main/res/xml/widgetprovider_foldercountswidget.xml
new file mode 100644
index 00000000..d6acc336
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_foldercountswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_foldercountswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/foldercountswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_freetimewidget.xml b/android/app/src/main/res/xml/widgetprovider_freetimewidget.xml
new file mode 100644
index 00000000..dfb312ec
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_freetimewidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_freetimewidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/freetimewidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_inboxwidget.xml b/android/app/src/main/res/xml/widgetprovider_inboxwidget.xml
new file mode 100644
index 00000000..5602c37a
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_inboxwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_inboxwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/inboxwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_invitationswidget.xml b/android/app/src/main/res/xml/widgetprovider_invitationswidget.xml
new file mode 100644
index 00000000..8a19f0f2
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_invitationswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_invitationswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/invitationswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_lastdraftwidget.xml b/android/app/src/main/res/xml/widgetprovider_lastdraftwidget.xml
new file mode 100644
index 00000000..d6868790
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_lastdraftwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_lastdraftwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/lastdraftwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_latestmessagewidget.xml b/android/app/src/main/res/xml/widgetprovider_latestmessagewidget.xml
new file mode 100644
index 00000000..b3f29e33
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_latestmessagewidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_latestmessagewidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/latestmessagewidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_mailandnextwidget.xml b/android/app/src/main/res/xml/widgetprovider_mailandnextwidget.xml
new file mode 100644
index 00000000..5e36edbe
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_mailandnextwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_mailandnextwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/mailandnextwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_mailsearchwidget.xml b/android/app/src/main/res/xml/widgetprovider_mailsearchwidget.xml
new file mode 100644
index 00000000..7fb3e15e
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_mailsearchwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="40dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_mailsearchwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/mailsearchwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_mailshortcutswidget.xml b/android/app/src/main/res/xml/widgetprovider_mailshortcutswidget.xml
new file mode 100644
index 00000000..d0dbca8f
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_mailshortcutswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_mailshortcutswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/mailshortcutswidget_preview"
+    android:updatePeriodMillis="0"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_monthwidget.xml b/android/app/src/main/res/xml/widgetprovider_monthwidget.xml
new file mode 100644
index 00000000..0e298659
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_monthwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="250dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="180dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="4"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_monthwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/monthwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_nexteventwidget.xml b/android/app/src/main/res/xml/widgetprovider_nexteventwidget.xml
new file mode 100644
index 00000000..6f6a8e8c
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_nexteventwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_nexteventwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/nexteventwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_outboxwidget.xml b/android/app/src/main/res/xml/widgetprovider_outboxwidget.xml
new file mode 100644
index 00000000..8635b1df
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_outboxwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_outboxwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/outboxwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_recentfileswidget.xml b/android/app/src/main/res/xml/widgetprovider_recentfileswidget.xml
new file mode 100644
index 00000000..afa8712b
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_recentfileswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_recentfileswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/recentfileswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_starredwidget.xml b/android/app/src/main/res/xml/widgetprovider_starredwidget.xml
new file mode 100644
index 00000000..a69ef5d7
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_starredwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_starredwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/starredwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_storagewidget.xml b/android/app/src/main/res/xml/widgetprovider_storagewidget.xml
new file mode 100644
index 00000000..98fd3fd9
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_storagewidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_storagewidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/storagewidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_tagwidget.xml b/android/app/src/main/res/xml/widgetprovider_tagwidget.xml
new file mode 100644
index 00000000..4e9275f6
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_tagwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_tagwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/tagwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_taskprogresswidget.xml b/android/app/src/main/res/xml/widgetprovider_taskprogresswidget.xml
new file mode 100644
index 00000000..3a15f164
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_taskprogresswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_taskprogresswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/taskprogresswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_taskswidget.xml b/android/app/src/main/res/xml/widgetprovider_taskswidget.xml
new file mode 100644
index 00000000..ecb6a9a4
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_taskswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="250dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="4"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_taskswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/taskswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_todayeventswidget.xml b/android/app/src/main/res/xml/widgetprovider_todayeventswidget.xml
new file mode 100644
index 00000000..961a96be
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_todayeventswidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_todayeventswidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/todayeventswidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_todayhubwidget.xml b/android/app/src/main/res/xml/widgetprovider_todayhubwidget.xml
new file mode 100644
index 00000000..c053e67a
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_todayhubwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="250dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="180dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="4"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_todayhubwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/todayhubwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_triagewidget.xml b/android/app/src/main/res/xml/widgetprovider_triagewidget.xml
new file mode 100644
index 00000000..0d731a32
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_triagewidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_triagewidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/triagewidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_unreadcountwidget.xml b/android/app/src/main/res/xml/widgetprovider_unreadcountwidget.xml
new file mode 100644
index 00000000..c39dcd8d
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_unreadcountwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_unreadcountwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/unreadcountwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_upnextwidget.xml b/android/app/src/main/res/xml/widgetprovider_upnextwidget.xml
new file mode 100644
index 00000000..cc956c56
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_upnextwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="180dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_upnextwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/upnextwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_vacationwidget.xml b/android/app/src/main/res/xml/widgetprovider_vacationwidget.xml
new file mode 100644
index 00000000..18a0ee3f
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_vacationwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="110dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="110dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="2"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_vacationwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/vacationwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/android/app/src/main/res/xml/widgetprovider_weekwidget.xml b/android/app/src/main/res/xml/widgetprovider_weekwidget.xml
new file mode 100644
index 00000000..6541f415
--- /dev/null
+++ b/android/app/src/main/res/xml/widgetprovider_weekwidget.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="250dp"
+    android:minHeight="110dp"
+    android:minResizeWidth="250dp"
+    android:minResizeHeight="110dp"
+    android:targetCellWidth="4"
+    android:targetCellHeight="2"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/widgetprovider_weekwidget_description"
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/weekwidget_preview"
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/index.ts b/index.ts
index c68d2075..e1ae8026 100644
--- a/index.ts
+++ b/index.ts
@@ -1,13 +1,22 @@
 import { createElement } from 'react';
 import { AppRegistry } from 'react-native';
 import { registerRootComponent } from 'expo';
+import { registerWidgetTaskHandler } from 'react-native-android-widget';
 
 import { pushBackgroundTask } from './src/lib/push-background-task';
+import { widgetTaskHandler } from './src/widgets/task-handler';
+import { refreshWidgetsInBackground } from './src/widgets/sync';
 
 // Runs in a fresh headless JS runtime when BulwarkPushTaskService is started
 // from BulwarkMessagingService on an FCM data message. Must be registered
-// before the native service tries to invoke the task.
-AppRegistry.registerHeadlessTask('BulwarkPushTask', () => pushBackgroundTask);
+// before the native service tries to invoke the task. New mail also refreshes
+// any home-screen widgets (a no-op when none are placed).
+AppRegistry.registerHeadlessTask('BulwarkPushTask', () => async (data: Parameters<typeof pushBackgroundTask>[0]) => {
+  await Promise.allSettled([pushBackgroundTask(data), refreshWidgetsInBackground()]);
+});
+
+// Home-screen widgets (Android): every widget event runs this headless task.
+registerWidgetTaskHandler(widgetTaskHandler);
 
 // A headless push task evaluates this file too, so App is required when the
 // UI first renders instead of imported above: importing it here would load
diff --git a/locales/rn/en.json b/locales/rn/en.json
index ecbfe47f..cabbed7d 100644
--- a/locales/rn/en.json
+++ b/locales/rn/en.json
@@ -1038,5 +1038,188 @@
     "severity_deprecated": "Required",
     "severity_security": "Security",
     "title": "App updates"
+  },
+  "widgets": {
+    "attachments": {
+      "empty": "No recent attachments",
+      "from_mail": "from mail",
+      "title": "Attachments",
+      "unknown_sender": "Unknown sender"
+    },
+    "birthdays": {
+      "empty": "No birthdays coming up",
+      "empty_body": "Birthdays come from your contacts.",
+      "in_days": "{count, plural, one {in # day} other {in # days}}",
+      "send_wishes": "Send wishes",
+      "title": "Birthdays",
+      "wishes_subject": "Happy birthday!"
+    },
+    "calendar": {
+      "agenda": "Agenda",
+      "agenda_more": "{day}: {events}",
+      "all_day": "All day",
+      "join": "Join",
+      "join_named": "Join {name}",
+      "more_this_week": "{count, plural, one {# more this week} other {# more this week}}",
+      "no_more_today": "No more events today",
+      "nothing_planned": "Nothing on the calendar",
+      "now": "Now",
+      "open": "Open",
+      "running_late": "Running late",
+      "running_late_body": "I'm running a few minutes late for {title}.",
+      "running_late_subject": "Running late: {title}",
+      "today": "Today",
+      "tomorrow": "Tomorrow",
+      "unit_days": "{count, plural, one {day} other {days}}",
+      "unit_hours": "{count, plural, one {hour} other {hours}}",
+      "unit_minutes": "{count, plural, one {min} other {min}}",
+      "unsupported": "Calendar isn't available on this server",
+      "untitled": "(no title)",
+      "video_call": "Video call"
+    },
+    "countdown": {
+      "days": "{count, plural, one {day} other {days}}",
+      "empty": "No upcoming events"
+    },
+    "draft": {
+      "edited_at": "Edited {when}",
+      "edited_minutes": "{count, plural, one {Edited # min ago} other {Edited # min ago}}",
+      "edited_now": "Edited just now",
+      "empty": "No drafts",
+      "empty_body": "Messages you start and do not send wait here.",
+      "keep_writing": "Keep writing",
+      "title": "Drafts"
+    },
+    "files": {
+      "empty": "No files yet",
+      "recent": "Recently changed",
+      "unsupported": "Files aren't available on this server"
+    },
+    "free": {
+      "busy_until": "Busy until {time}",
+      "free_rest": "Free for the rest of the day",
+      "free_until": "Free until {time}",
+      "mail": "Mail my free times",
+      "mail_subject": "My free times this week",
+      "no_calendar": "No calendar on this account",
+      "then": "then {title}",
+      "then_free": "then free"
+    },
+    "hub": {
+      "all_clear": "You're all caught up",
+      "mail_unread": "Mail · {count} unread",
+      "next": "Next",
+      "next_on": "Next · {day}",
+      "no_events": "No upcoming events",
+      "now": "Now",
+      "tasks_due": "Tasks · {count} due"
+    },
+    "invites": {
+      "accept": "Accept",
+      "decline": "Decline",
+      "empty": "No invitations waiting",
+      "label": "Invitation · {name}",
+      "label_plain": "Invitation",
+      "maybe": "Maybe",
+      "position": "{index} of {count}"
+    },
+    "mail": {
+      "all_accounts": "All accounts",
+      "all_caught_up": "All caught up",
+      "archive": "Archive",
+      "delete": "Delete",
+      "empty_all_accounts": "Your inboxes are empty",
+      "empty_inbox": "Your inbox is empty",
+      "folders": "Folders",
+      "in_outbox": "{count, plural, one {# change waiting} other {# changes waiting}}",
+      "in_outbox_short": "{count} waiting",
+      "inbox": "Inbox",
+      "more_unread": "+{count} more unread",
+      "no_starred": "No starred mail",
+      "no_starred_body": "Star a message to keep it here.",
+      "no_subject": "(no subject)",
+      "no_unread": "No unread messages in your inbox.",
+      "position": "{index} of {count}",
+      "reply": "Reply",
+      "scheduled": "Scheduled",
+      "starred": "Starred",
+      "unread": "unread"
+    },
+    "people": {
+      "empty": "No favourites yet",
+      "empty_body": "The people you hear from most show up here.",
+      "favourites": "Favourites"
+    },
+    "relative": {
+      "days": "{count, plural, one {in # day} other {in # days}}",
+      "hours": "in {count} h",
+      "minutes": "in {count} min",
+      "now": "now"
+    },
+    "scheduled": {
+      "day_at": "{day}, {time}",
+      "empty": "Nothing scheduled",
+      "empty_body": "Messages you schedule to send later show up here.",
+      "no_recipient": "(no recipient)",
+      "sending": "Sending now",
+      "to": "To: {name}",
+      "today_at": "Today, {time}",
+      "tomorrow_at": "Tomorrow, {time}",
+      "waiting": "Waiting for network",
+      "waiting_body": "Changes you made offline go out when you are back online."
+    },
+    "search": {
+      "no_recent": "Your recent searches show up here.",
+      "placeholder": "Search mail…",
+      "recent": "Recent searches"
+    },
+    "shortcuts": {
+      "calendar": "Calendar",
+      "compose": "Compose",
+      "contacts": "Contacts",
+      "files": "Files"
+    },
+    "state": {
+      "error": "Couldn't show this widget",
+      "loading": "Loading…",
+      "open_app": "Open the app once if this stays empty.",
+      "open_to_load": "Open Bulwark to load this",
+      "signed_out": "Sign in to Bulwark"
+    },
+    "storage": {
+      "no_limit": "No storage limit",
+      "title": "Storage",
+      "unavailable": "No quota information",
+      "used_of": "{used} of {total}"
+    },
+    "tag": {
+      "empty": "No tags yet",
+      "empty_body": "Tags you add in the app show up here.",
+      "messages": "{count, plural, one {message} other {messages}}",
+      "total": "{count, plural, one {# message} other {# messages}}"
+    },
+    "tasks": {
+      "all_done": "All done",
+      "empty": "No open tasks",
+      "mark_complete": "Mark as done",
+      "mark_incomplete": "Mark as not done",
+      "no_title": "(no title)",
+      "off": "Tasks are off",
+      "off_body": "Turn on tasks in the app's calendar settings",
+      "open_count": "{count} open",
+      "overdue": "Overdue",
+      "still_open": "{count} still open",
+      "title": "Tasks",
+      "today": "Today",
+      "tomorrow": "Tomorrow"
+    },
+    "vacation": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "subject": "Subject: {subject}",
+      "title": "Vacation Responder",
+      "unsupported": "Vacation replies aren't available",
+      "until": "Until {date}"
+    }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 0880af09..533444d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "postal-mime": "^3.0.0",
         "react": "19.1.0",
         "react-native": "0.81.5",
+        "react-native-android-widget": "0.22.1",
         "react-native-safe-area-context": "~5.6.0",
         "react-native-screens": "~4.16.0",
         "react-native-sse": "^1.2.1",
@@ -9004,6 +9005,22 @@
         }
       }
     },
+    "node_modules/react-native-android-widget": {
+      "version": "0.22.1",
+      "resolved": "https://registry.npmjs.org/react-native-android-widget/-/react-native-android-widget-0.22.1.tgz",
+      "integrity": "sha512-BBMuqShRrxV23Z09Rn5zNHJaPegCnH3DhhZQgXbhw2GMh45Gez0RbwKTIWHftuW4nLrqWy6esz8XwecUZLiZKA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": ">=54.0.0",
+        "react": "*",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-is-edge-to-edge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.3.1.tgz",
diff --git a/package.json b/package.json
index 5d9fb4e1..02c2662e 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "bump": "node scripts/bump-version.mjs",
     "sync-locales": "node scripts/sync-locales.mjs",
     "i18n:harvest": "node scripts/harvest-rn-keys.mjs",
-    "i18n:check": "node scripts/harvest-rn-keys.mjs --check"
+    "i18n:check": "node scripts/harvest-rn-keys.mjs --check",
+    "widgets:sync": "node scripts/sync-android-widgets.mjs"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
@@ -45,6 +46,7 @@
     "postal-mime": "^3.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-android-widget": "0.22.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
     "react-native-sse": "^1.2.1",
diff --git a/scripts/sync-android-widgets.mjs b/scripts/sync-android-widgets.mjs
new file mode 100644
index 00000000..28678dc6
--- /dev/null
+++ b/scripts/sync-android-widgets.mjs
@@ -0,0 +1,193 @@
+// Generate the Android side of the home-screen widgets from
+// src/widgets/catalog.json. Run from the RN repo root:
+//   node scripts/sync-android-widgets.mjs [--check]
+//
+// android/ is committed and hand-maintained (no `expo prebuild`), so the
+// react-native-android-widget config plugin never runs for it. This script
+// does the same job: one RNWidgetProvider subclass per widget (the library
+// uses the class name as the widget name), a provider XML per widget, the
+// picker labels and descriptions, and the manifest receivers between the
+// BEGIN/END WIDGETS markers. With --check it only reports drift and exits 1.
+import { readFile, writeFile, readdir, unlink, mkdir } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
+const CATALOG = join(ROOT, 'src', 'widgets', 'catalog.json');
+const MAIN = join(ROOT, 'android', 'app', 'src', 'main');
+const PACKAGE = 'com.anonymous.bulwarkmobile';
+const KOTLIN = join(MAIN, 'java', ...PACKAGE.split('.'), 'widget', 'WidgetProviders.kt');
+const XML_DIR = join(MAIN, 'res', 'xml');
+const STRINGS = join(MAIN, 'res', 'values', 'widget_strings.xml');
+// Optional picker previews: src/widgets/previews/<WidgetName>.png is copied to
+// res/drawable-nodpi and set as the widget's previewImage.
+const PREVIEWS = join(ROOT, 'src', 'widgets', 'previews');
+const PREVIEW_DIR = join(MAIN, 'res', 'drawable-nodpi');
+const MANIFEST = join(MAIN, 'AndroidManifest.xml');
+const CHECK_ONLY = process.argv.includes('--check');
+
+// Android's sizing table: n cells is roughly 70n - 30 dp in either direction.
+const dp = (cells) => 70 * cells - 30;
+// Launchers refresh at most every 30 minutes; the app pushes fresher data
+// itself whenever it has some (see src/widgets/sync.ts).
+const UPDATE_PERIOD_MS = 30 * 60 * 1000;
+
+const escapeXml = (s) =>
+  s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, "\\'");
+const resName = (name) => `widgetprovider_${name.toLowerCase()}`;
+
+const hasPreview = (w) => existsSync(join(PREVIEWS, `${w.name}.png`));
+const previewRes = (w) => `${w.name.toLowerCase()}_preview`;
+
+function providerXml(w) {
+  const preview = hasPreview(w) ? `\n    android:previewImage="@drawable/${previewRes(w)}"` : '';
+  return `<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="${dp(w.cols)}dp"
+    android:minHeight="${dp(w.rows)}dp"
+    android:minResizeWidth="${dp(w.minCols ?? w.cols)}dp"
+    android:minResizeHeight="${dp(w.minRows ?? w.rows)}dp"
+    android:targetCellWidth="${w.cols}"
+    android:targetCellHeight="${w.rows}"
+    android:resizeMode="horizontal|vertical"
+    android:description="@string/${resName(w.name)}_description"
+    android:initialLayout="@layout/rn_widget"${preview}
+    android:updatePeriodMillis="${w.static ? 0 : UPDATE_PERIOD_MS}"
+    android:widgetCategory="home_screen">
+</appwidget-provider>
+`;
+}
+
+function kotlinFile(widgets) {
+  const classes = widgets.map((w) => `class ${w.name} : RNWidgetProvider()`).join('\n');
+  return `// Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json.
+// react-native-android-widget names a widget after its provider class, so each
+// widget needs its own subclass; the JS side (src/widgets/task-handler.tsx)
+// renders by that name.
+package ${PACKAGE}.widget
+
+import com.reactnativeandroidwidget.RNWidgetProvider
+
+${classes}
+`;
+}
+
+function stringsFile(widgets) {
+  const lines = widgets.flatMap((w) => [
+    `  <string name="${resName(w.name)}_label">${escapeXml(w.label)}</string>`,
+    `  <string name="${resName(w.name)}_description">${escapeXml(w.description)}</string>`,
+  ]);
+  return `<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by scripts/sync-android-widgets.mjs from src/widgets/catalog.json. -->
+<resources>
+${lines.join('\n')}
+</resources>
+`;
+}
+
+function manifestBlock(widgets) {
+  const receivers = widgets.map(
+    (w) => `    <receiver android:name=".widget.${w.name}" android:exported="false" android:label="@string/${resName(w.name)}_label">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="${PACKAGE}.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/${resName(w.name)}"/>
+    </receiver>`,
+  );
+  return `    <!-- BEGIN WIDGETS: generated by scripts/sync-android-widgets.mjs, do not edit by hand -->
+    <service android:name="com.reactnativeandroidwidget.RNWidgetCollectionService" android:permission="android.permission.BIND_REMOTEVIEWS"/>
+${receivers.join('\n')}
+    <!-- END WIDGETS -->`;
+}
+
+function withManifestBlock(manifest, block) {
+  const begin = manifest.indexOf('    <!-- BEGIN WIDGETS');
+  const endMarker = '<!-- END WIDGETS -->';
+  const end = manifest.indexOf(endMarker);
+  if (begin !== -1 && end !== -1) {
+    return manifest.slice(0, begin) + block + manifest.slice(end + endMarker.length);
+  }
+  const close = manifest.lastIndexOf('  </application>');
+  if (close === -1) throw new Error('AndroidManifest.xml has no </application>');
+  return manifest.slice(0, close) + block + '\n' + manifest.slice(close);
+}
+
+const { widgets } = JSON.parse(await readFile(CATALOG, 'utf8'));
+const names = new Set();
+for (const w of widgets) {
+  if (!/^[A-Z][A-Za-z0-9]*Widget$/.test(w.name)) throw new Error(`Bad widget name ${w.name}`);
+  if (names.has(w.name)) throw new Error(`Duplicate widget name ${w.name}`);
+  names.add(w.name);
+}
+
+const outputs = new Map();
+outputs.set(KOTLIN, kotlinFile(widgets));
+outputs.set(STRINGS, stringsFile(widgets));
+for (const w of widgets) outputs.set(join(XML_DIR, `${resName(w.name)}.xml`), providerXml(w));
+outputs.set(MANIFEST, withManifestBlock(await readFile(MANIFEST, 'utf8'), manifestBlock(widgets)));
+
+// Provider XML for widgets that were removed from the catalog.
+const stale = existsSync(XML_DIR)
+  ? (await readdir(XML_DIR))
+      .filter((f) => f.startsWith('widgetprovider_'))
+      .map((f) => join(XML_DIR, f))
+      .filter((f) => !outputs.has(f))
+  : [];
+
+// Preview images are binary; compare them byte for byte.
+const binaryOutputs = new Map();
+for (const w of widgets) {
+  if (hasPreview(w)) binaryOutputs.set(join(PREVIEW_DIR, `${previewRes(w)}.png`), await readFile(join(PREVIEWS, `${w.name}.png`)));
+}
+const stalePreviews = existsSync(PREVIEW_DIR)
+  ? (await readdir(PREVIEW_DIR))
+      .filter((f) => /widget_preview\.png$/.test(f))
+      .map((f) => join(PREVIEW_DIR, f))
+      .filter((f) => !binaryOutputs.has(f))
+  : [];
+stale.push(...stalePreviews);
+
+let drift = stale.length;
+for (const [path, bytes] of binaryOutputs) {
+  const current = existsSync(path) ? await readFile(path) : null;
+  if (current && current.equals(bytes)) continue;
+  drift++;
+  if (CHECK_ONLY) {
+    console.log(`out of date: ${path}`);
+  } else {
+    await mkdir(dirname(path), { recursive: true });
+    await writeFile(path, bytes);
+    console.log(`wrote ${path}`);
+  }
+}
+// Checkouts with core.autocrlf have CRLF files: compare without line endings
+// and write back in whatever the file already uses.
+const lf = (text) => text.replace(/\r\n/g, '\n');
+for (const [path, content] of outputs) {
+  const current = existsSync(path) ? await readFile(path, 'utf8') : null;
+  if (current !== null && lf(current) === lf(content)) continue;
+  drift++;
+  if (CHECK_ONLY) {
+    console.log(`out of date: ${path}`);
+  } else {
+    await mkdir(dirname(path), { recursive: true });
+    await writeFile(path, current?.includes('\r\n') ? lf(content).replace(/\n/g, '\r\n') : lf(content));
+    console.log(`wrote ${path}`);
+  }
+}
+for (const path of stale) {
+  if (CHECK_ONLY) console.log(`stale: ${path}`);
+  else {
+    await unlink(path);
+    console.log(`removed ${path}`);
+  }
+}
+
+if (CHECK_ONLY && drift > 0) {
+  console.error(`${drift} widget file(s) out of date; run node scripts/sync-android-widgets.mjs`);
+  process.exit(1);
+}
+console.log(drift === 0 ? 'Android widget files are up to date.' : `${widgets.length} widgets synced.`);
diff --git a/src/lib/reply-compose.ts b/src/lib/reply-compose.ts
new file mode 100644
index 00000000..dc762589
--- /dev/null
+++ b/src/lib/reply-compose.ts
@@ -0,0 +1,50 @@
+import type { Email } from '../api/types';
+import type { RootStackParamList } from '../navigation/types';
+import { pickEmailBody, plainTextBody } from './email-body';
+
+/**
+ * Composer params for a reply / reply-all / forward of `source`. Shared by
+ * the thread viewer and the `mail/message/<id>?action=reply` deep link (the
+ * triage widget). Null when there is nobody to reply to.
+ */
+export function replyComposeParams(
+  mode: 'reply' | 'replyAll' | 'forward',
+  source: Email,
+  ownerAccountId?: string,
+): NonNullable<RootStackParamList['Compose']> | null {
+  const from = source.from?.[0];
+  if (!from && mode !== 'forward') return null;
+  // Quote the HTML part when there is one so layout and inline images
+  // survive (#163). RFC 8621 §4.1.4: an HTML-only message exposes the same
+  // part in `textBody` and `htmlBody`, so the text part is only a real
+  // alternative when its partId differs - otherwise the composer would be
+  // handed raw HTML source (#649, native #46).
+  const picked = pickEmailBody(source);
+  const quoteHtml = picked.html ?? undefined;
+  const body = !quoteHtml || picked.text ? plainTextBody(source) : undefined;
+  return {
+    mode,
+    replyTo: {
+      from: from ?? { email: '' },
+      to: source.to,
+      cc: source.cc,
+      // RFC 5322: a reply goes to Reply-To when the sender set one.
+      replyToAddresses: source.replyTo,
+      subject: source.subject ?? '',
+      body,
+      htmlBody: quoteHtml,
+      receivedAt: source.receivedAt,
+      sentAt: source.sentAt,
+      // Threading needs the RFC Message-ID, never the JMAP object id (#234).
+      messageId: source.messageId ?? undefined,
+      references: source.references ?? undefined,
+      // Forward carries the original attachments as blob refs; cid-embedded
+      // inline images are already part of the quoted HTML.
+      attachments: mode === 'forward'
+        ? (source.attachments ?? []).filter((a) => !(a.disposition === 'inline' && a.cid))
+        : undefined,
+      originalEmailId: source.id,
+      jmapAccountId: ownerAccountId,
+    },
+  };
+}
diff --git a/src/navigation/__tests__/linking.test.ts b/src/navigation/__tests__/linking.test.ts
index 07a64684..a701f962 100644
--- a/src/navigation/__tests__/linking.test.ts
+++ b/src/navigation/__tests__/linking.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { handleDeepLink, parseDeepLink, shareToDeepLink } from '../linking';
 import { usePendingSettingsTab } from '../pending-settings-tab';
 import { usePendingCalendarOpen } from '../pending-calendar-open';
+import { usePendingMailSearch } from '../pending-mail-search';
 
 describe('parseDeepLink', () => {
   it('parses app-scheme mail links', () => {
@@ -75,6 +76,18 @@ describe('parseDeepLink', () => {
     });
   });
 
+  it('parses the widget links: reply, draft, unified views, scheduled and search', () => {
+    expect(parseDeepLink('bulwarkmobile://mail/message/M1?account=a%40b&jmapAccount=team&action=reply')).toEqual({
+      kind: 'message', emailId: 'M1', accountId: 'a@b', jmapAccountId: 'team', action: 'reply',
+    });
+    expect(parseDeepLink('bulwarkmobile://mail/draft/D1')).toEqual({ kind: 'draft', emailId: 'D1', accountId: undefined });
+    expect(parseDeepLink('bulwarkmobile://mail/unified?view=starred')).toEqual({ kind: 'unified', view: 'starred' });
+    expect(parseDeepLink('bulwarkmobile://mail/unified?role=drafts&view=bogus')).toEqual({ kind: 'unified', role: 'drafts' });
+    expect(parseDeepLink('bulwarkmobile://mail/scheduled')).toEqual({ kind: 'scheduled' });
+    expect(parseDeepLink('bulwarkmobile://mail/search?q=from%3Aada')).toEqual({ kind: 'search', query: 'from:ada' });
+    expect(parseDeepLink('bulwarkmobile://mail/search')).toEqual({ kind: 'search', query: '' });
+  });
+
   it('rejects unknown links', () => {
     expect(parseDeepLink('bulwarkmobile://whatever')).toBeNull();
     expect(parseDeepLink('garbage')).toBeNull();
@@ -166,6 +179,40 @@ describe('handleDeepLink', () => {
     }));
   });
 
+  it('opens a group-mailbox message in its JMAP account and hands replies to the composer opener', async () => {
+    const navigation = nav();
+    const resolveThreadId = vi.fn(async () => 'T1');
+    await handleDeepLink(
+      { kind: 'message', emailId: 'M1', jmapAccountId: 'team' },
+      { navigation: navigation as never, resolveThreadId },
+    );
+    expect(resolveThreadId).toHaveBeenCalledWith('M1', 'team');
+    expect(navigation.navigate).toHaveBeenCalledWith('EmailThread', { emailId: 'M1', threadId: 'T1', jmapAccountId: 'team' });
+
+    const openReply = vi.fn(async () => true);
+    const ok = await handleDeepLink(
+      { kind: 'message', emailId: 'M2', action: 'reply' },
+      { navigation: nav() as never, resolveThreadId, openReply },
+    );
+    expect(ok).toBe(true);
+    expect(openReply).toHaveBeenCalledWith('M2', undefined);
+  });
+
+  it('opens drafts, unified views, scheduled mail and searches', async () => {
+    const openDraft = vi.fn(async () => true);
+    const navigation = nav();
+    const deps = { navigation: navigation as never, resolveThreadId: async () => 'T', openDraft };
+    expect(await handleDeepLink({ kind: 'draft', emailId: 'D1' }, deps)).toBe(true);
+    expect(openDraft).toHaveBeenCalledWith('D1', undefined);
+    await handleDeepLink({ kind: 'unified', view: 'starred' }, deps);
+    expect(navigation.navigate).toHaveBeenCalledWith('UnifiedInbox', { view: 'starred' });
+    await handleDeepLink({ kind: 'scheduled' }, deps);
+    expect(navigation.navigate).toHaveBeenCalledWith('Scheduled');
+    await handleDeepLink({ kind: 'search', query: 'from:ada' }, deps);
+    expect(usePendingMailSearch.getState().consume()).toBe('from:ada');
+    expect(navigation.navigate).toHaveBeenCalledWith('MainTabs', { screen: 'Mail' });
+  });
+
   it('refuses when the linked account is not signed in', async () => {
     const navigation = nav();
     const ok = await handleDeepLink(
diff --git a/src/navigation/linking.ts b/src/navigation/linking.ts
index 14a8bf48..9149f94d 100644
--- a/src/navigation/linking.ts
+++ b/src/navigation/linking.ts
@@ -8,13 +8,25 @@ import { parseMailtoUrl } from '../lib/mailto';
 import type { RootStackParamList } from './types';
 import { setPendingSettingsTab } from './pending-settings-tab';
 import { setPendingCalendarOpen } from './pending-calendar-open';
+import { setPendingMailSearch } from './pending-mail-search';
 
 export const APP_SCHEME = 'bulwarkmobile';
 
+const UNIFIED_ROLES = ['inbox', 'sent', 'drafts', 'junk', 'archive', 'trash'] as const;
+const UNIFIED_VIEWS = ['all', 'unread', 'starred'] as const;
+type UnifiedRole = typeof UNIFIED_ROLES[number];
+type UnifiedView = typeof UNIFIED_VIEWS[number];
+
 export type DeepLink =
-  | { kind: 'message'; emailId: string; accountId?: string }
+  // `jmapAccountId`: the JMAP account owning a message in a group/shared
+  // mailbox (`?jmapAccount=`); `action: 'reply'` opens a reply to it.
+  | { kind: 'message'; emailId: string; accountId?: string; jmapAccountId?: string; action?: 'reply' }
+  | { kind: 'draft'; emailId: string; accountId?: string; jmapAccountId?: string }
   | { kind: 'thread'; threadId: string; accountId?: string }
   | { kind: 'folder'; ref: string; accountId?: string }
+  | { kind: 'unified'; role?: UnifiedRole; view?: UnifiedView }
+  | { kind: 'scheduled' }
+  | { kind: 'search'; query: string }
   // `jmapAccountId`: the JMAP account owning the event (`?account=`), for
   // one on a calendar shared with the user.
   | { kind: 'calendar'; eventId?: string; date?: string; jmapAccountId?: string }
@@ -82,7 +94,30 @@ export function parseDeepLink(url: string): DeepLink | null {
 
   switch (area) {
     case 'mail': {
-      if (kind === 'message' && value) return { kind: 'message', emailId: decodeSegment(value), accountId };
+      const jmapAccountId = search.get('jmapAccount') ?? undefined;
+      if (kind === 'message' && value) {
+        return {
+          kind: 'message',
+          emailId: decodeSegment(value),
+          accountId,
+          ...(jmapAccountId ? { jmapAccountId } : {}),
+          ...(search.get('action') === 'reply' ? { action: 'reply' as const } : {}),
+        };
+      }
+      if (kind === 'draft' && value) {
+        return { kind: 'draft', emailId: decodeSegment(value), accountId, ...(jmapAccountId ? { jmapAccountId } : {}) };
+      }
+      if (kind === 'unified') {
+        const role = search.get('role');
+        const view = search.get('view');
+        return {
+          kind: 'unified',
+          ...(role && (UNIFIED_ROLES as readonly string[]).includes(role) ? { role: role as UnifiedRole } : {}),
+          ...(view && (UNIFIED_VIEWS as readonly string[]).includes(view) ? { view: view as UnifiedView } : {}),
+        };
+      }
+      if (kind === 'scheduled') return { kind: 'scheduled' };
+      if (kind === 'search') return { kind: 'search', query: search.get('q') ?? '' };
       if (kind === 'thread' && value) return { kind: 'thread', threadId: decodeSegment(value), accountId };
       if (kind === 'folder' && value) return { kind: 'folder', ref: decodeSegment(value), accountId };
       // Legacy `?email=<id>` from the webmail's older service worker.
@@ -131,8 +166,13 @@ export function parseDeepLink(url: string): DeepLink | null {
 export interface DeepLinkNavigator {
   navigation: NavigationContainerRefWithCurrent<RootStackParamList>;
   // Resolve a message id to its thread (EmailThread needs both). Returns
-  // null when the message cannot be loaded.
-  resolveThreadId: (emailId: string) => Promise<string | null>;
+  // null when the message cannot be loaded. `jmapAccountId` names the
+  // group/shared account holding it, when it is not the user's own.
+  resolveThreadId: (emailId: string, jmapAccountId?: string) => Promise<string | null>;
+  // Open the composer on a reply to / on a server draft of this message.
+  // Resolve false when the message cannot be loaded.
+  openReply?: (emailId: string, jmapAccountId?: string) => Promise<boolean>;
+  openDraft?: (emailId: string, jmapAccountId?: string) => Promise<boolean>;
   // Switch to the account a permalink names (`?account=`); resolves false
   // when that account is not signed in on this device.
   switchAccount?: (accountId: string) => Promise<boolean>;
@@ -149,11 +189,33 @@ export async function handleDeepLink(link: DeepLink, nav: DeepLinkNavigator): Pr
 
   switch (link.kind) {
     case 'message': {
-      const threadId = await nav.resolveThreadId(link.emailId);
+      if (link.action === 'reply' && nav.openReply) {
+        return nav.openReply(link.emailId, link.jmapAccountId);
+      }
+      const threadId = await nav.resolveThreadId(link.emailId, link.jmapAccountId);
       if (!threadId) return false;
-      navigation.navigate('EmailThread', { emailId: link.emailId, threadId });
+      navigation.navigate('EmailThread', {
+        emailId: link.emailId,
+        threadId,
+        ...(link.jmapAccountId ? { jmapAccountId: link.jmapAccountId } : {}),
+      });
       return true;
     }
+    case 'draft':
+      return nav.openDraft ? nav.openDraft(link.emailId, link.jmapAccountId) : false;
+    case 'unified':
+      navigation.navigate('UnifiedInbox', {
+        ...(link.role ? { role: link.role } : {}),
+        ...(link.view ? { view: link.view } : {}),
+      });
+      return true;
+    case 'scheduled':
+      navigation.navigate('Scheduled');
+      return true;
+    case 'search':
+      setPendingMailSearch(link.query);
+      navigation.navigate('MainTabs', { screen: 'Mail' } as never);
+      return true;
     case 'thread':
       // The reader keys on the message; without one, open the list.
       navigation.navigate('MainTabs', { screen: 'Mail' } as never);
diff --git a/src/navigation/pending-mail-search.ts b/src/navigation/pending-mail-search.ts
new file mode 100644
index 00000000..1f5677ae
--- /dev/null
+++ b/src/navigation/pending-mail-search.ts
@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+// A `mail/search` deep link (the search widget) arrives before the mail list
+// is mounted, or while it shows a folder. The query is parked here and
+// consumed by EmailListScreen, which runs it like a submitted search; an
+// empty query just opens the search field.
+interface PendingMailSearchState {
+  query: string | null;
+  set: (query: string | null) => void;
+  consume: () => string | null;
+}
+
+export const usePendingMailSearch = create<PendingMailSearchState>((set, get) => ({
+  query: null,
+  set: (query) => set({ query }),
+  consume: () => {
+    const query = get().query;
+    if (query !== null) set({ query: null });
+    return query;
+  },
+}));
+
+export function setPendingMailSearch(query: string | null): void {
+  usePendingMailSearch.getState().set(query);
+}
diff --git a/src/screens/EmailListScreen.tsx b/src/screens/EmailListScreen.tsx
index 969a31f1..9a399042 100644
--- a/src/screens/EmailListScreen.tsx
+++ b/src/screens/EmailListScreen.tsx
@@ -49,6 +49,7 @@ import { isPermanentDelete, confirmPermanentDelete } from '../lib/delete-confirm
 import { draftContextFromEmail, isDraftEmail } from '../lib/draft-context';
 import { getFullEmail, emptyMailbox as apiEmptyMailbox } from '../api/email';
 import type { RootStackParamList } from '../navigation/types';
+import { usePendingMailSearch } from '../navigation/pending-mail-search';
 import type { Attachment, Email } from '../api/types';
 
 function getSenderName(email: Email, unknownLabel: string): string {
@@ -824,6 +825,17 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
     if (value.trim()) addRecentSearch(value);
     setSearchFocused(false);
   }, [setSearchQuery, addRecentSearch]);
+  // A search handed over by a deep link (the search widget): run it, or with
+  // no query just put the cursor in the search field.
+  const searchInputRef = React.useRef<TextInput>(null);
+  const pendingSearch = usePendingMailSearch((s) => s.query);
+  React.useEffect(() => {
+    if (pendingSearch === null) return;
+    const query = usePendingMailSearch.getState().consume();
+    if (query === null) return;
+    if (query.trim()) submitSearch(query);
+    else setTimeout(() => searchInputRef.current?.focus(), 300);
+  }, [pendingSearch, submitSearch]);
   // People whose name/address matches what is being typed (#845); picking
   // one turns the search into a `from:` filter like the webmail.
   const contactSuggestions = React.useMemo(() => {
@@ -1120,6 +1132,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
         <View style={styles.searchInputArea}>
           <Search size={16} color={c.textMuted} />
           <TextInput
+            ref={searchInputRef}
             style={styles.searchInput}
             placeholder={t('email_list.search_placeholder', 'Search mail...')}
             placeholderTextColor={c.textMuted}
diff --git a/src/screens/EmailThreadScreen.tsx b/src/screens/EmailThreadScreen.tsx
index 104f3852..747213a3 100644
--- a/src/screens/EmailThreadScreen.tsx
+++ b/src/screens/EmailThreadScreen.tsx
@@ -38,7 +38,7 @@ import { useLocaleStore } from '../stores/locale-store';
 import {
   findArchiveMailbox, findTrashMailbox, mailboxAccountId, mailboxesOfAccount, mailboxOfEmail,
 } from '../lib/mailbox-tree';
-import { pickEmailBody, plainTextBody } from '../lib/email-body';
+import { replyComposeParams } from '../lib/reply-compose';
 import { singleLine } from '../lib/single-line';
 import { buildForwardAsAttachmentPayload } from '../lib/forward-as-attachment';
 import { viewerInstance, viewerPages, type ViewerInstance } from '../lib/viewer-pages';
@@ -532,41 +532,8 @@ function EmailViewer({ route, navigation }: Props) {
   const navigateCompose = React.useCallback((mode: 'reply' | 'replyAll' | 'forward', target?: Email) => {
     const source = target ?? email;
     if (!source) return;
-    const from = source.from?.[0];
-    if (!from && mode !== 'forward') return;
-    // Quote the HTML part when there is one so layout and inline images
-    // survive (#163). RFC 8621 §4.1.4: an HTML-only message exposes the same
-    // part in `textBody` and `htmlBody`, so the text part is only a real
-    // alternative when its partId differs - otherwise the composer would be
-    // handed raw HTML source (#649, native #46).
-    const picked = pickEmailBody(source);
-    const quoteHtml = picked.html ?? undefined;
-    const body = !quoteHtml || picked.text ? plainTextBody(source) : undefined;
-    navigation.navigate('Compose', {
-      mode,
-      replyTo: {
-        from: from ?? { email: '' },
-        to: source.to,
-        cc: source.cc,
-        // RFC 5322: a reply goes to Reply-To when the sender set one.
-        replyToAddresses: source.replyTo,
-        subject: source.subject ?? '',
-        body,
-        htmlBody: quoteHtml,
-        receivedAt: source.receivedAt,
-        sentAt: source.sentAt,
-        // Threading needs the RFC Message-ID, never the JMAP object id (#234).
-        messageId: source.messageId ?? undefined,
-        references: source.references ?? undefined,
-        // Forward carries the original attachments as blob refs; cid-embedded
-        // inline images are already part of the quoted HTML.
-        attachments: mode === 'forward'
-          ? (source.attachments ?? []).filter((a) => !(a.disposition === 'inline' && a.cid))
-          : undefined,
-        originalEmailId: source.id,
-        jmapAccountId: ownerAccountId,
-      },
-    });
+    const params = replyComposeParams(mode, source, ownerAccountId);
+    if (params) navigation.navigate('Compose', params);
   }, [email, navigation, ownerAccountId]);
 
   // Forward the raw message as a message/rfc822 attachment (webmail 1.8.1).
diff --git a/src/stores/email-store.ts b/src/stores/email-store.ts
index 47d51270..f1009c4f 100644
--- a/src/stores/email-store.ts
+++ b/src/stores/email-store.ts
@@ -552,8 +552,11 @@ export function spansAccounts(state: Pick<EmailState, 'searchQuery' | 'filters'>
  */
 export function spannedAccounts(mailboxes: Mailbox[]): Array<string | undefined> {
   const out: Array<string | undefined> = [undefined];
+  // The drawer renders the persisted mailboxes before the session is back,
+  // and `accountId` throws while the client is not connected.
+  const own = jmapClient.isConnected ? jmapClient.accountId : undefined;
   for (const m of mailboxes) {
-    if (m.isShared && m.accountId && m.accountId !== jmapClient.accountId && !out.includes(m.accountId)) {
+    if (m.isShared && m.accountId && m.accountId !== own && !out.includes(m.accountId)) {
       out.push(m.accountId);
     }
   }
diff --git a/src/widgets/__tests__/derive.test.ts b/src/widgets/__tests__/derive.test.ts
new file mode 100644
index 00000000..154ff5cd
--- /dev/null
+++ b/src/widgets/__tests__/derive.test.ts
@@ -0,0 +1,117 @@
+import { describe, expect, it } from 'vitest';
+import {
+  agendaDays,
+  busyBlocks,
+  countdownTarget,
+  dueKind,
+  eventsOnDay,
+  freeTime,
+  monthGrid,
+  nextEvent,
+  sortTasks,
+  startOfWeek,
+} from '../derive';
+import type { EventItem, TaskItem } from '../snapshot';
+
+// Monday 28 September 2026, 09:05 local time.
+const NOW = new Date(2026, 8, 28, 9, 5).getTime();
+const at = (day: number, h: number, m = 0) => new Date(2026, 8, day, h, m).getTime();
+
+function ev(id: string, start: number, end: number, extra: Partial<EventItem> = {}): EventItem {
+  return {
+    id,
+    serverId: id,
+    title: id,
+    start,
+    end,
+    allDay: false,
+    color: '#22c55e',
+    calendarName: 'Work',
+    participants: [],
+    ...extra,
+  };
+}
+
+const standup = ev('standup', at(28, 9, 30), at(28, 10));
+const dentist = ev('dentist', at(29, 10), at(29, 11), { color: '#3b82f6' });
+const lunch = ev('lunch', at(30, 12, 30), at(30, 13, 30));
+const party = ev('party', new Date(2026, 9, 1).getTime(), new Date(2026, 9, 2).getTime(), { allDay: true, color: '#3b82f6' });
+const review = ev('review', new Date(2026, 9, 1, 14).getTime(), new Date(2026, 9, 1, 16).getTime());
+const trip = ev('trip', new Date(2026, 9, 4).getTime(), new Date(2026, 9, 5).getTime(), { allDay: true, color: '#3b82f6' });
+const earlier = ev('earlier', at(28, 7), at(28, 8));
+const EVENTS = [earlier, standup, dentist, lunch, party, review, trip];
+
+describe('calendar views', () => {
+  it('finds the next timed event and whether it is running', () => {
+    expect(nextEvent(EVENTS, NOW)?.event.id).toBe('standup');
+    expect(nextEvent(EVENTS, NOW)?.running).toBe(false);
+    expect(nextEvent(EVENTS, at(28, 9, 45))?.running).toBe(true);
+  });
+
+  it('lists a day with all-day events first', () => {
+    const thursday = new Date(2026, 9, 1).getTime();
+    expect(eventsOnDay(EVENTS, thursday).map((e) => e.id)).toEqual(['party', 'review']);
+  });
+
+  it('drops finished events from today in the agenda', () => {
+    const days = agendaDays(EVENTS, NOW, 3);
+    expect(days.map((d) => d.events.map((e) => e.id))).toEqual([['standup'], ['dentist'], ['lunch']]);
+  });
+
+  it('starts the week on the configured day', () => {
+    expect(new Date(startOfWeek(NOW, 1)).getDate()).toBe(28);
+    expect(new Date(startOfWeek(NOW, 0)).getDate()).toBe(27);
+  });
+
+  it('builds the month as whole weeks with dots and today', () => {
+    const weeks = monthGrid(EVENTS, NOW, 1);
+    expect(weeks).toHaveLength(5);
+    expect(weeks[0][0].day).toBe(31);
+    expect(weeks[0][0].inMonth).toBe(false);
+    const today = weeks.flat().find((c) => c.isToday);
+    expect(today?.day).toBe(28);
+    expect(today?.dots).toEqual(['#22c55e']);
+  });
+
+  it('places busy blocks inside working hours', () => {
+    const [block] = busyBlocks(EVENTS, new Date(2026, 8, 29).getTime());
+    expect(block.from).toBeCloseTo(0.2);
+    expect(block.to).toBeCloseTo(0.3);
+  });
+
+  it('works out free time and the longest gap left today', () => {
+    const free = freeTime(EVENTS, NOW);
+    expect(free.busyNow).toBe(false);
+    expect(free.next?.id).toBe('standup');
+    expect(free.longestGap).toEqual({ from: at(28, 10), to: at(28, 18) });
+  });
+
+  it('counts down to the next all-day or multi-day event', () => {
+    expect(countdownTarget(EVENTS, NOW)?.id).toBe('party');
+  });
+});
+
+describe('tasks', () => {
+  const task = (id: string, due: number | undefined, done = false, dueHasTime = false): TaskItem => ({
+    id, serverId: id, title: id, due, dueHasTime, done, calendarName: 'Personal', color: '#3b82f6',
+  });
+
+  it('classifies due dates', () => {
+    expect(dueKind(task('a', at(26, 0)), NOW)).toBe('overdue');
+    expect(dueKind(task('b', at(28, 0)), NOW)).toBe('today');
+    expect(dueKind(task('c', at(28, 8), false, true), NOW)).toBe('overdue');
+    expect(dueKind(task('d', at(29, 0)), NOW)).toBe('tomorrow');
+    expect(dueKind(task('e', undefined), NOW)).toBe('none');
+  });
+
+  it('puts overdue first and done last', () => {
+    const sorted = sortTasks([
+      task('done', at(20, 0), true),
+      task('later', new Date(2026, 9, 3).getTime()),
+      task('none', undefined),
+      task('today', at(28, 0)),
+      task('overdue', at(26, 0)),
+    ], NOW);
+    expect(sorted.map((t) => t.id)).toEqual(['overdue', 'today', 'later', 'none', 'done']);
+  });
+});
diff --git a/src/widgets/__tests__/jmap.test.ts b/src/widgets/__tests__/jmap.test.ts
new file mode 100644
index 00000000..132b14b2
--- /dev/null
+++ b/src/widgets/__tests__/jmap.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import type { Email, Mailbox } from '../../api/types';
+import { folderCounts, rankPeople, toMailItem } from '../jmap';
+
+function email(id: string, from: string, name: string, seen: boolean, receivedAt = '2026-09-28T08:00:00Z'): Email {
+  return {
+    id,
+    threadId: `t-${id}`,
+    mailboxIds: { inbox: true },
+    keywords: seen ? { $seen: true } : {},
+    receivedAt,
+    from: [{ email: from, name }],
+    subject: `Subject ${id}`,
+    preview: '  line one\n  line two ',
+    hasAttachment: false,
+    size: 1,
+  } as Email;
+}
+
+describe('toMailItem', () => {
+  it('maps a list email to what the widgets draw', () => {
+    const item = toMailItem(email('1', 'sofia.russo@example.com', 'Sofia Russo', false), 'acc', { threadSize: 2 });
+    expect(item).toMatchObject({
+      id: '1',
+      accountId: 'acc',
+      fromName: 'Sofia Russo',
+      initials: 'SR',
+      unread: true,
+      threadSize: 2,
+      preview: 'line one line two',
+    });
+    // Same hue as the webmail's Avatar for this name.
+    expect(item.color).toBe('#6826d9');
+  });
+});
+
+describe('rankPeople', () => {
+  it('ranks senders by volume, skips the user and no-reply senders, and counts unread', () => {
+    const people = rankPeople([
+      email('1', 'ada@example.com', 'Ada', false),
+      email('2', 'ada@example.com', 'Ada', true),
+      email('3', 'bob@example.com', 'Bob', false),
+      email('4', 'me@example.com', 'Me', false),
+      email('5', 'noreply@shop.example', 'Shop', false),
+    ], ['Me@example.com']);
+    expect(people.map((p) => [p.email, p.unread])).toEqual([['ada@example.com', 1], ['bob@example.com', 1]]);
+  });
+});
+
+describe('folderCounts', () => {
+  it('orders the roles like the sidebar and finds junk by role or name', () => {
+    const boxes = [
+      { id: 'j', name: 'Spam', role: 'junk', unreadEmails: 3, totalEmails: 3 },
+      { id: 'i', name: 'Inbox', role: 'inbox', unreadEmails: 10, totalEmails: 23 },
+      { id: 'd', name: 'Drafts', role: 'drafts', unreadEmails: 0, totalEmails: 2 },
+    ] as Mailbox[];
+    expect(folderCounts(boxes).map((f) => [f.role, f.unread, f.total])).toEqual([
+      ['inbox', 10, 23],
+      ['drafts', 0, 2],
+      ['junk', 3, 3],
+    ]);
+  });
+});
diff --git a/src/widgets/__tests__/layouts.test.ts b/src/widgets/__tests__/layouts.test.ts
new file mode 100644
index 00000000..c7b24767
--- /dev/null
+++ b/src/widgets/__tests__/layouts.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// The package entry pulls in the native module, so hand the layouts the plain
+// widget components and run them through the library's own tree builder: it
+// is what throws on the device when a layout returns null, puts null in a
+// mapped list or uses a Fragment. Colours are checked on the way in, because
+// the library quietly turns any it cannot parse (a name, `transparent`) into
+// white.
+vi.mock('react-native-android-widget', async () => {
+  const COLOR = /^(#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|rgba\(.*\))$/i;
+  const checkColors = (widget: string, style: Record<string, unknown> = {}) => {
+    for (const [key, value] of Object.entries(style)) {
+      if (/colou?r$/i.test(key) && !(typeof value === 'string' && COLOR.test(value))) {
+        throw new Error(`${widget} ${key}: ${JSON.stringify(value)} is not a colour the widget renderer reads`);
+      }
+    }
+  };
+  type Widget = { __name__: string; convertProps: (props: { style?: Record<string, unknown> }) => unknown };
+  const checked = (module: Record<string, unknown>) => {
+    for (const value of Object.values(module)) {
+      if (typeof value !== 'function' || !('__name__' in value)) continue;
+      const widget = value as unknown as Widget;
+      const convert = widget.convertProps;
+      widget.convertProps = (props) => {
+        checkColors(widget.__name__, props.style);
+        return convert(props);
+      };
+    }
+    return module;
+  };
+  // The compiled SvgWidget requires react-native (past the stub) to resolve
+  // bundled images; the widgets only draw inline SVG strings, so rebuild it
+  // from the library's own style and click converters.
+  const { convertCommonStyle } = await import('react-native-android-widget/lib/commonjs/widgets/utils/style.utils' as string);
+  const { convertClickAction } = await import('react-native-android-widget/lib/commonjs/widgets/utils/click-action' as string);
+  function SvgWidget() {
+    return null;
+  }
+  SvgWidget.__name__ = 'SvgWidget';
+  SvgWidget.convertProps = (props: { style?: object; svg: unknown }) => {
+    if (typeof props.svg !== 'string') throw new Error('widgets draw inline SVG strings only');
+    return { ...convertCommonStyle(props.style ?? {}), ...convertClickAction(props), svgString: props.svg };
+  };
+  return {
+    ...checked(await import('react-native-android-widget/lib/commonjs/widgets/FlexWidget' as string)),
+    ...checked(await import('react-native-android-widget/lib/commonjs/widgets/ListWidget' as string)),
+    ...checked(await import('react-native-android-widget/lib/commonjs/widgets/OverlapWidget' as string)),
+    ...checked(await import('react-native-android-widget/lib/commonjs/widgets/TextWidget' as string)),
+    ...checked({ SvgWidget }),
+    getWidgetInfo: vi.fn(async () => []),
+    requestWidgetUpdate: vi.fn(async () => undefined),
+  };
+});
+
+import { createElement } from 'react';
+import { FlexWidget } from 'react-native-android-widget';
+import catalog from '../catalog.json';
+import { renderFor } from '../render';
+import { PREVIEW_NOW, sampleSnapshot } from '../sample-snapshot';
+import { emptySnapshot, type WidgetSnapshot } from '../snapshot';
+
+const { buildWidgetTree } = (await import(
+  'react-native-android-widget/lib/commonjs/api/build-widget-tree' as string
+)) as { buildWidgetTree: (tree: unknown) => { type: string } };
+
+// Launcher cells to dp, roughly what a phone launcher reports.
+const dp = (cells: number) => cells * 90 - 15;
+
+function build(name: string, s: WidgetSnapshot, cols: number, rows: number, local = {}) {
+  const trees = renderFor(name, s, { width: dp(cols), height: dp(rows), widgetId: 1 }, local, PREVIEW_NOW);
+  for (const tree of 'light' in trees ? [trees.light, trees.dark] : [trees]) {
+    expect(buildWidgetTree(tree).type).toBeTruthy();
+  }
+}
+
+const sizes = (w: (typeof catalog.widgets)[number]) => [
+  [w.minCols, w.minRows],
+  [w.cols, w.rows],
+  [4, 4],
+  [5, 5],
+];
+
+describe('widget layouts', () => {
+  it('uses a builder that rejects what the device rejects', () => {
+    const Nothing = () => null;
+    expect(() => buildWidgetTree(createElement(Nothing))).toThrow();
+    expect(() => buildWidgetTree(createElement(FlexWidget, null, createElement(FlexWidget), [null]))).toThrow();
+    expect(() => buildWidgetTree(createElement(FlexWidget, { style: { backgroundColor: 'teal' } } as never))).toThrow();
+  });
+
+  const sample = { ...sampleSnapshot(PREVIEW_NOW), theme: 'system' as const };
+  const empty: WidgetSnapshot = {
+    ...emptySnapshot(),
+    generatedAt: PREVIEW_NOW,
+    appDataAt: PREVIEW_NOW,
+    signedIn: true,
+    theme: 'system',
+    accounts: [{ id: 'a', label: 'Work', color: '#2563eb', unread: 0 }],
+    activeAccountId: 'a',
+    calendar: { supported: true, events: [], invitations: [], birthdays: [] },
+    tasks: { supported: true, items: [] },
+    files: { supported: true, items: [] },
+  };
+
+  it.each(catalog.widgets.map((w) => [w.name, w] as const))('%s builds with demo data at every size', (name, w) => {
+    for (const [cols, rows] of sizes(w)) build(name, sample, cols, rows);
+  });
+
+  it.each(catalog.widgets.map((w) => [w.name, w] as const))('%s builds with nothing to show', (name, w) => {
+    for (const [cols, rows] of sizes(w)) build(name, empty, cols, rows);
+  });
+
+  it('builds the signed-out, loading and not-loaded-yet states', () => {
+    for (const w of catalog.widgets) {
+      build(w.name, { ...emptySnapshot(), generatedAt: PREVIEW_NOW }, w.cols, w.rows);
+      build(w.name, emptySnapshot(), w.cols, w.rows);
+      build(w.name, { ...sample, appDataAt: 0 }, w.cols, w.rows);
+    }
+  });
+
+  it('builds the triage card on a message that is gone', () => {
+    build('TriageWidget', sample, 4, 2, { triageId: 'no-such-message' });
+    build('TriageWidget', { ...sample, mail: { ...sample.mail, inbox: [] } }, 4, 2, { triageId: 'm1' });
+  });
+});
diff --git a/src/widgets/actions.ts b/src/widgets/actions.ts
new file mode 100644
index 00000000..ec506ddc
--- /dev/null
+++ b/src/widgets/actions.ts
@@ -0,0 +1,163 @@
+// Buttons that act without opening the app: archive / delete / next on the
+// triage card, RSVP on the invitation card, ticking a task. Each one updates
+// the stored snapshot first so every widget redraws at once, then makes the
+// JMAP call, then refreshes from the server; a failed call is undone by that
+// refresh.
+
+import { jmapClient } from '../api/jmap-client';
+import type { JMAPClient } from '../api/jmap-client';
+import { noteLocalChange, refreshSnapshot, singletonServes } from './build';
+import { markRead, moveTo, openClient, rsvp, setTaskDone } from './jmap';
+import { loadLocal, saveLocal } from './local-state';
+import { updateAllWidgets } from './render';
+import { emptySnapshot, loadSnapshot, saveSnapshot, type MailItem, type WidgetSnapshot } from './snapshot';
+
+async function clientFor(registryAccountId: string | null | undefined): Promise<JMAPClient | null> {
+  if (!registryAccountId) return null;
+  if (singletonServes(registryAccountId)) return jmapClient;
+  return openClient(registryAccountId);
+}
+
+async function applyLocally(mutate: (s: WidgetSnapshot) => void): Promise<WidgetSnapshot> {
+  noteLocalChange();
+  const s = (await loadSnapshot()) ?? emptySnapshot();
+  mutate(s);
+  await saveSnapshot(s);
+  await updateAllWidgets(s);
+  return s;
+}
+
+function withoutMessage(s: WidgetSnapshot, id: string): void {
+  const removed = s.mail.inbox.find((m) => m.id === id);
+  const drop = (list: MailItem[]) => list.filter((m) => m.id !== id);
+  s.mail.inbox = drop(s.mail.inbox);
+  s.mail.unified = drop(s.mail.unified);
+  s.mail.starred = drop(s.mail.starred);
+  const inbox = s.mail.folders.find((f) => f.role === 'inbox');
+  if (inbox && removed) {
+    inbox.total = Math.max(0, inbox.total - 1);
+    if (removed.unread) inbox.unread = Math.max(0, inbox.unread - 1);
+  }
+}
+
+async function afterServerCall(ok: boolean): Promise<void> {
+  if (!ok) console.warn('[widgets] action was not applied on the server');
+  const fresh = await refreshSnapshot({ after: 'change' });
+  await updateAllWidgets(fresh);
+}
+
+type Data = Record<string, unknown>;
+const str = (v: unknown): string | undefined => (typeof v === 'string' && v ? v : undefined);
+
+export async function handleWidgetAction(name: string, data: Data, widgetId: number): Promise<void> {
+  switch (name) {
+    case 'refresh':
+      await afterServerCall(true);
+      return;
+
+    case 'triageNext': {
+      const s = (await loadSnapshot()) ?? emptySnapshot();
+      const unread = s.mail.inbox.filter((m) => m.unread);
+      if (unread.length === 0) return;
+      const index = unread.findIndex((m) => m.id === data.id);
+      const next = unread[(index + 1) % unread.length];
+      const local = await loadLocal(widgetId);
+      await saveLocal(widgetId, { ...local, triageId: next.id });
+      await updateAllWidgets(s);
+      return;
+    }
+
+    case 'archive':
+    case 'trash':
+    case 'markRead': {
+      const id = str(data.id);
+      if (!id) return;
+      if (name === 'markRead') {
+        await applyLocally((s) => {
+          const hit = s.mail.inbox.find((m) => m.id === id);
+          const inbox = s.mail.folders.find((f) => f.role === 'inbox');
+          if (hit?.unread && inbox) inbox.unread = Math.max(0, inbox.unread - 1);
+          for (const list of [s.mail.inbox, s.mail.unified, s.mail.starred]) {
+            for (const m of list) if (m.id === id) m.unread = false;
+          }
+        });
+      } else {
+        // The triage card moves on to the next unread message, not back to
+        // the first one.
+        const before = (await loadSnapshot()) ?? emptySnapshot();
+        const unread = before.mail.inbox.filter((m) => m.unread);
+        const index = unread.findIndex((m) => m.id === id);
+        const next = index >= 0 ? unread[index + 1] ?? unread[index - 1] : undefined;
+        if (typeof data.widgetId === 'number') {
+          await saveLocal(data.widgetId, { ...(await loadLocal(data.widgetId)), triageId: next?.id ?? null });
+        }
+        await applyLocally((s) => withoutMessage(s, id));
+      }
+      let ok = false;
+      try {
+        const client = await clientFor(str(data.accountId));
+        if (client) {
+          ok = name === 'markRead'
+            ? await markRead(client, id, str(data.jmapAccountId))
+            : await moveTo(client, id, name, str(data.jmapAccountId));
+        }
+      } catch (err) {
+        console.warn(`[widgets] ${name} failed`, err);
+      }
+      await afterServerCall(ok);
+      return;
+    }
+
+    case 'rsvp': {
+      const id = str(data.id);
+      const status = data.status;
+      if (!id || (status !== 'accepted' && status !== 'tentative' && status !== 'declined')) return;
+      const before = (await loadSnapshot()) ?? emptySnapshot();
+      const invitation = before.calendar.invitations.find((i) => i.id === id);
+      if (!invitation) return;
+      await applyLocally((s) => {
+        s.calendar.invitations = s.calendar.invitations.filter((i) => i.id !== id);
+        for (const e of s.calendar.events) if (e.serverId === invitation.serverId) e.myStatus = status;
+      });
+      let ok = false;
+      try {
+        const client = await clientFor(before.activeAccountId);
+        if (client) ok = await rsvp(client, invitation.serverId, invitation.participantId, status, invitation.jmapAccountId);
+      } catch (err) {
+        console.warn('[widgets] rsvp failed', err);
+      }
+      await afterServerCall(ok);
+      return;
+    }
+
+    case 'toggleTask': {
+      const id = str(data.id);
+      if (!id) return;
+      const before = (await loadSnapshot()) ?? emptySnapshot();
+      const task = before.tasks.items.find((t) => t.id === id);
+      if (!task) return;
+      const done = !task.done;
+      await applyLocally((s) => {
+        for (const t of s.tasks.items) if (t.id === id) t.done = done;
+      });
+      let ok = false;
+      try {
+        const client = await clientFor(before.activeAccountId);
+        if (client) ok = await setTaskDone(client, task.serverId, done, task.jmapAccountId);
+        // In the live app the snapshot's tasks come from the calendar store,
+        // which did not see this change; reload it so the refresh keeps it.
+        if (ok && before.activeAccountId && singletonServes(before.activeAccountId)) {
+          const { useCalendarStore } = require('../stores/calendar-store') as typeof import('../stores/calendar-store');
+          await useCalendarStore.getState().fetchTasks();
+        }
+      } catch (err) {
+        console.warn('[widgets] task toggle failed', err);
+      }
+      await afterServerCall(ok);
+      return;
+    }
+
+    default:
+      console.warn(`[widgets] unknown action ${name}`);
+  }
+}
diff --git a/src/widgets/build.ts b/src/widgets/build.ts
new file mode 100644
index 00000000..29aad5ed
--- /dev/null
+++ b/src/widgets/build.ts
@@ -0,0 +1,484 @@
+// Builds the widget snapshot. Mail comes from JMAP on a client of the widgets'
+// own (./jmap.ts) and works from a cold headless start. Calendar, tasks,
+// birthdays, files and scheduled sends reuse the app's helpers, which are
+// bound to the `jmapClient` singleton; they only run when that singleton is
+// already connected to the active account (the app's JS runtime is alive).
+// Otherwise those parts carry over from the previous snapshot, and the
+// time-dependent views are still recomputed when a widget draws.
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { jmapClient } from '../api/jmap-client';
+import { CAPABILITIES, type CalendarEvent, type ContactCard } from '../api/types';
+import { generateAccountId } from '../lib/account-utils';
+import { generateEmailAvatarColor, getEmailInitials } from '../lib/avatar-utils';
+import { getEventEndDate, getEventStartDate } from '../lib/calendar-utils';
+import { getUserParticipantId, getUserStatus } from '../lib/calendar-participants';
+import { getBirthday, getContactDisplayName, getDateParts } from '../lib/contact-utils';
+import { notificationLocale } from '../lib/push-background-task';
+import { useSettingsStore } from '../stores/settings-store';
+import { useKeywordsStore, keywordToken } from '../stores/keywords-store';
+import { LIGHT_COLORS } from '../theme/tokens';
+import { addDays, startOfDay } from './format';
+import { startOfWeek } from './derive';
+import { fetchInboxPreview, fetchMailSection, openClient, type MailSection } from './jmap';
+import { normalizeHex } from './theme';
+import {
+  emptySnapshot,
+  loadSnapshot,
+  saveSnapshot,
+  type AccountSummary,
+  type Birthday,
+  type EventItem,
+  type FileItem,
+  type Invitation,
+  type ScheduledItem,
+  type TagCount,
+  type TaskItem,
+  type WidgetSnapshot,
+} from './snapshot';
+
+interface RegistryAccount {
+  id: string;
+  email?: string;
+  displayName?: string;
+  username?: string;
+  avatarColor?: string;
+}
+
+export async function readRegistry(): Promise<{ accounts: RegistryAccount[]; activeAccountId: string | null }> {
+  try {
+    const raw = await AsyncStorage.getItem('account-registry');
+    const state = raw ? (JSON.parse(raw) as { state?: { accounts?: RegistryAccount[]; activeAccountId?: string | null } }).state : null;
+    const accounts = Array.isArray(state?.accounts) ? state!.accounts! : [];
+    const active = state?.activeAccountId && accounts.some((a) => a.id === state.activeAccountId)
+      ? state.activeAccountId
+      : accounts[0]?.id ?? null;
+    return { accounts, activeAccountId: active };
+  } catch {
+    return { accounts: [], activeAccountId: null };
+  }
+}
+
+async function readRecentSearches(): Promise<string[]> {
+  try {
+    const raw = await AsyncStorage.getItem('search-history-storage');
+    const list = raw ? (JSON.parse(raw) as { state?: { recentSearches?: unknown } }).state?.recentSearches : null;
+    return Array.isArray(list) ? list.filter((s): s is string => typeof s === 'string').slice(0, 8) : [];
+  } catch {
+    return [];
+  }
+}
+
+async function readPendingChanges(accountId: string): Promise<number> {
+  try {
+    const raw = await AsyncStorage.getItem(`webmail:outbox:v1:${accountId}`);
+    const list = raw ? JSON.parse(raw) : null;
+    return Array.isArray(list) ? list.length : 0;
+  } catch {
+    return 0;
+  }
+}
+
+/** True when the app's singleton is signed in to `registryAccountId` (live runtime). */
+export function singletonServes(registryAccountId: string): boolean {
+  if (!jmapClient.isConnected) return false;
+  const { username, serverUrl } = jmapClient;
+  return !!username && !!serverUrl && generateAccountId(username, serverUrl) === registryAccountId;
+}
+
+function tagColor(color: string): string {
+  const tags = LIGHT_COLORS.tags;
+  return (color in tags ? tags[color as keyof typeof tags] : tags.gray).dot;
+}
+
+function tagCounts(section: MailSection): TagCount[] {
+  const { keywords } = useKeywordsStore.getState();
+  const out: TagCount[] = [];
+  for (const kw of keywords) {
+    const counts = section.tagCounts.get(keywordToken(kw.id));
+    if (!counts || counts.total === 0) continue;
+    out.push({
+      keyword: keywordToken(kw.id),
+      name: kw.label,
+      color: tagColor(kw.color),
+      unread: counts.unread,
+      total: counts.total,
+      ...(counts.latest ? { latestFrom: counts.latest.fromName, latestAt: counts.latest.receivedAt } : {}),
+    });
+  }
+  return out.sort((a, b) => b.unread - a.unread || b.total - a.total);
+}
+
+// ── App-backed sections (live runtime only) ──────────────────────────────
+
+function participantAddress(p: { email?: string; calendarAddress?: string; sendTo?: Record<string, string> }): string {
+  const raw = p.email || p.calendarAddress || p.sendTo?.imip || '';
+  return raw.replace(/^mailto:/i, '');
+}
+
+function toEventItem(
+  event: CalendarEvent,
+  calendarsById: Map<string, { name: string; color?: string }>,
+  selfEmails: string[],
+): EventItem {
+  const calId = Object.keys(event.calendarIds ?? {}).find((id) => event.calendarIds[id]);
+  const cal = calId ? calendarsById.get(calId) : undefined;
+  const start = getEventStartDate(event).getTime();
+  const end = Math.max(start, getEventEndDate(event).getTime());
+  const location = Object.values(event.locations ?? {}).find((l) => l?.name)?.name;
+  const video = Object.values(event.virtualLocations ?? {}).find((v) => /^https?:\/\//i.test(v?.uri ?? ''));
+  const self = new Set(selfEmails.map((e) => e.toLowerCase()));
+  // Other people only: "who is coming" and the running-late mail leave the
+  // user out.
+  const participants = Object.values(event.participants ?? {})
+    .filter((p) => !self.has(participantAddress(p).toLowerCase()))
+    .map((p) => {
+      const email = participantAddress(p);
+      const name = p.name?.trim() || email;
+      return {
+        name,
+        email,
+        initials: getEmailInitials(p.name ?? '', email) || '?',
+        color: normalizeHex(generateEmailAvatarColor(p.name ?? '', email)),
+      };
+    })
+    .filter((p) => p.name);
+  const organizer = Object.values(event.participants ?? {}).find((p) => p.roles?.owner);
+  const status = getUserStatus(event, selfEmails);
+  // A timed event from midnight to midnight is a whole-day event in all but
+  // name (some clients write holidays that way); show it as all-day rather
+  // than as "00:00 - 00:00".
+  const wholeDays = !event.showWithoutTime
+    && start === startOfDay(start)
+    && end > start
+    && end === startOfDay(end);
+  return {
+    id: event.id,
+    serverId: event.originalId || event.id,
+    ...(event.accountId ? { jmapAccountId: event.accountId } : {}),
+    title: event.title || '',
+    start,
+    end,
+    allDay: !!event.showWithoutTime || wholeDays,
+    color: normalizeHex(event.color || cal?.color),
+    calendarName: cal?.name ?? '',
+    ...(location ? { location } : {}),
+    ...(video ? { videoUrl: video.uri, videoName: video.name || '' } : {}),
+    participants,
+    ...(status === 'needs-action' || status === 'accepted' || status === 'tentative' || status === 'declined'
+      ? { myStatus: status }
+      : {}),
+    ...(organizer ? { organizerName: organizer.name || participantAddress(organizer) } : {}),
+  };
+}
+
+async function buildCalendar(now: number, selfEmails: string[], previous: WidgetSnapshot): Promise<WidgetSnapshot['calendar']> {
+  const calendarsSupported = jmapClient.hasAccountCapability(CAPABILITIES.CALENDARS);
+  if (!calendarsSupported) return { supported: false, events: [], invitations: [], birthdays: await buildBirthdays(now) };
+  const { useCalendarStore, loadEventsInRange } = require('../stores/calendar-store') as typeof import('../stores/calendar-store');
+  // Always refetch: the persisted list can predate a calendar deleted and
+  // re-created on the server under the same id, which would put events under
+  // the old name and colour.
+  try {
+    await useCalendarStore.getState().fetchCalendars();
+  } catch {
+    // fall back to the cached list
+  }
+  const { calendars, hiddenCalendarIds } = useCalendarStore.getState();
+  const visible = calendars.filter((c) => !hiddenCalendarIds.includes(c.id));
+  const byId = new Map(calendars.map((c) => [c.id, { name: c.name, color: c.color }]));
+
+  const first = new Date(now);
+  first.setDate(1);
+  const rangeStart = startOfWeek(first.getTime(), useSettingsStore.getState().calendarFirstDayOfWeek === 0 ? 0 : 1);
+  const rangeEnd = Math.max(addDays(startOfDay(now), 36), addDays(rangeStart, 42));
+  let raw: CalendarEvent[];
+  try {
+    raw = visible.length === 0
+      ? []
+      : await loadEventsInRange(calendars, visible.map((c) => c.id), new Date(rangeStart).toISOString(), new Date(rangeEnd).toISOString());
+  } catch (err) {
+    console.warn('[widgets] calendar refresh failed', err);
+    return { ...previous.calendar, birthdays: await buildBirthdays(now) };
+  }
+  const live = raw.filter((e) => e.status !== 'cancelled');
+  const events = live
+    .map((e) => toEventItem(e, byId, selfEmails))
+    .filter((e) => e.end >= rangeStart && e.start < rangeEnd)
+    .sort((a, b) => a.start - b.start);
+
+  // One entry per series: answering an invitation answers the whole event.
+  const invitations: Invitation[] = [];
+  const seen = new Set<string>();
+  for (const e of live) {
+    if (getUserStatus(e, selfEmails) !== 'needs-action') continue;
+    const participantId = getUserParticipantId(e, selfEmails);
+    const key = e.originalId || e.id;
+    if (!participantId || seen.has(key)) continue;
+    const item = toEventItem(e, byId, selfEmails);
+    if (item.end < now) continue;
+    seen.add(key);
+    invitations.push({ ...item, participantId });
+  }
+
+  return {
+    supported: true,
+    events,
+    invitations: invitations.sort((a, b) => a.start - b.start).slice(0, 10),
+    birthdays: await buildBirthdays(now),
+  };
+}
+
+async function buildBirthdays(now: number): Promise<Birthday[]> {
+  const { useContactsStore } = require('../stores/contacts-store') as typeof import('../stores/contacts-store');
+  // The Contacts tab loads the address book lazily; the widget may be first.
+  if (jmapClient.isConnected) {
+    try {
+      await useContactsStore.getState().fetchContactsIfStale();
+    } catch {
+      // use whatever is cached
+    }
+  }
+  const contacts: ContactCard[] = useContactsStore.getState().contacts ?? [];
+  const today = startOfDay(now);
+  const out: Birthday[] = [];
+  for (const contact of contacts) {
+    const date = getBirthday(contact);
+    if (!date) continue;
+    const { month, day } = getDateParts(date);
+    if (!month || !day) continue;
+    const thisYear = new Date(new Date(today).getFullYear(), month - 1, day).getTime();
+    const next = thisYear >= today ? thisYear : new Date(new Date(today).getFullYear() + 1, month - 1, day).getTime();
+    const name = getContactDisplayName(contact);
+    const email = Object.values(contact.emails ?? {})[0]?.address;
+    out.push({
+      name,
+      ...(email ? { email } : {}),
+      initials: getEmailInitials(name, email) || '?',
+      color: normalizeHex(generateEmailAvatarColor(name, email)),
+      date: next,
+    });
+  }
+  return out.sort((a, b) => a.date - b.date).slice(0, 20);
+}
+
+async function buildTasks(previous: WidgetSnapshot): Promise<WidgetSnapshot['tasks']> {
+  if (!useSettingsStore.getState().enableCalendarTasks) return { supported: false, items: [] };
+  const { useCalendarStore } = require('../stores/calendar-store') as typeof import('../stores/calendar-store');
+  try {
+    const store = useCalendarStore.getState();
+    if (store.tasks.length === 0) await store.fetchTasks();
+    const { tasks, calendars } = useCalendarStore.getState();
+    const byId = new Map(calendars.map((c) => [c.id, c]));
+    const items: TaskItem[] = tasks
+      .filter((t) => t.progress !== 'cancelled')
+      .map((t) => {
+        const calId = Object.keys(t.calendarIds ?? {}).find((id) => t.calendarIds[id]);
+        const cal = calId ? byId.get(calId) : undefined;
+        // A LocalDateTime without an offset parses as device-local time.
+        const due = t.due ? Date.parse(t.due) : NaN;
+        return {
+          id: t.id,
+          serverId: t.originalId || t.id,
+          ...(t.accountId ? { jmapAccountId: t.accountId } : {}),
+          title: t.title || '',
+          ...(Number.isFinite(due) ? { due } : {}),
+          dueHasTime: !!t.due && !t.showWithoutTime && !/T00:00(:00)?$/.test(t.due),
+          done: t.progress === 'completed',
+          calendarName: cal?.name ?? '',
+          color: normalizeHex(t.color || cal?.color),
+        };
+      });
+    return { supported: true, items: items.slice(0, 40) };
+  } catch {
+    return previous.tasks;
+  }
+}
+
+async function buildFiles(previous: WidgetSnapshot): Promise<WidgetSnapshot['files']> {
+  const files = require('../api/files') as typeof import('../api/files');
+  if (!files.supportsFiles()) return { supported: false, items: [] };
+  try {
+    const nodes = await files.getAllFileNodes();
+    const items: FileItem[] = nodes
+      .filter((n) => !!n.name)
+      .map((n) => ({
+        id: n.id,
+        name: n.name,
+        isFolder: files.isFolder(n),
+        size: n.size ?? 0,
+        modified: Date.parse(n.modified || n.created || '') || 0,
+        type: n.type || '',
+      }))
+      .sort((a, b) => b.modified - a.modified)
+      .slice(0, 6);
+    return { supported: true, items };
+  } catch {
+    return previous.files;
+  }
+}
+
+async function buildScheduled(previous: WidgetSnapshot): Promise<ScheduledItem[]> {
+  try {
+    if (!jmapClient.hasDelayedSend()) return [];
+    const { listScheduledEmails } = require('../api/email') as typeof import('../api/email');
+    const list = await listScheduledEmails();
+    return list.slice(0, 6).map((s) => {
+      const to = s.to?.[0];
+      return {
+        id: s.emailSubmissionId,
+        to: to?.name || to?.email || '',
+        subject: s.subject ?? '',
+        sendAt: Date.parse(s.sendAt) || 0,
+      };
+    });
+  } catch {
+    return previous.mail.scheduled;
+  }
+}
+
+// ── Assembly ─────────────────────────────────────────────────────────────
+
+async function buildSnapshot(previous: WidgetSnapshot): Promise<WidgetSnapshot> {
+  const now = Date.now();
+  const { accounts, activeAccountId } = await readRegistry();
+  if (!activeAccountId) return { ...emptySnapshot(), generatedAt: now };
+
+  const settings = useSettingsStore.getState();
+  if (!settings.hydrated) await settings.hydrate();
+  const keywordsState = useKeywordsStore.getState();
+  if (!keywordsState.hydrated) await keywordsState.hydrate();
+  const { theme, timeFormat, calendarFirstDayOfWeek } = useSettingsStore.getState();
+
+  const live = singletonServes(activeAccountId);
+  const client = live ? jmapClient : await openClient(activeAccountId);
+  const next: WidgetSnapshot = {
+    ...previous,
+    version: 1,
+    generatedAt: now,
+    signedIn: true,
+    theme,
+    locale: await notificationLocale(),
+    hour12: timeFormat === '12h',
+    weekStart: calendarFirstDayOfWeek === 0 ? 0 : 1,
+    activeAccountId,
+  };
+  if (previous.activeAccountId !== activeAccountId) {
+    // Nothing of another account's data may linger in a widget.
+    const blank = emptySnapshot();
+    next.mail = blank.mail;
+    next.calendar = blank.calendar;
+    next.tasks = blank.tasks;
+    next.files = blank.files;
+    next.vacation = null;
+    next.quota = null;
+    next.appDataAt = 0;
+  }
+  if (!client) return next;
+
+  const keywordTokens = useKeywordsStore.getState().keywords.map((k) => keywordToken(k.id));
+  const section = await fetchMailSection(client, activeAccountId, keywordTokens);
+
+  const others = accounts.filter((a) => a.id !== activeAccountId);
+  const previews = await Promise.all(others.map(async (a) => {
+    try {
+      const c = await openClient(a.id);
+      return c ? { account: a, ...(await fetchInboxPreview(c, a.id)) } : null;
+    } catch {
+      return null;
+    }
+  }));
+  const inboxUnread = section.folders.find((f) => f.role === 'inbox')?.unread ?? 0;
+  const summaries: AccountSummary[] = accounts.map((a) => {
+    const preview = previews.find((p) => p?.account.id === a.id);
+    return {
+      id: a.id,
+      label: a.displayName || a.email || a.username || a.id,
+      color: normalizeHex(a.avatarColor),
+      unread: a.id === activeAccountId ? inboxUnread : preview?.unread ?? 0,
+    };
+  });
+  const unified = [
+    ...section.inbox.slice(0, 6),
+    ...previews.flatMap((p) => p?.items ?? []),
+  ].sort((a, b) => b.receivedAt - a.receivedAt).slice(0, 8);
+
+  next.accounts = summaries;
+  next.mail = {
+    ...next.mail,
+    folders: section.folders,
+    inbox: section.inbox,
+    unified,
+    starred: section.starred,
+    starredCount: section.starredCount,
+    drafts: section.drafts,
+    draftCount: section.draftCount,
+    favourites: section.favourites,
+    recentSearches: await readRecentSearches(),
+    tags: tagCounts(section),
+    attachments: section.attachments,
+    pendingChanges: await readPendingChanges(activeAccountId),
+  };
+  next.vacation = section.vacation;
+  next.quota = section.quota;
+
+  if (live) {
+    const [calendar, tasks, files, scheduled] = await Promise.all([
+      buildCalendar(now, section.selfEmails, next),
+      buildTasks(next),
+      buildFiles(next),
+      buildScheduled(next),
+    ]);
+    next.calendar = calendar;
+    next.tasks = tasks;
+    next.files = files;
+    next.mail.scheduled = scheduled;
+    next.appDataAt = now;
+  }
+  return next;
+}
+
+let inflight: Promise<WidgetSnapshot> | null = null;
+let localChanges = 0;
+
+/**
+ * A widget button just edited the stored snapshot. A refresh that started
+ * before it read the server before the change, so its result is dropped
+ * rather than saved over the edit.
+ */
+export function noteLocalChange(): void {
+  localChanges++;
+}
+
+/**
+ * Fetch fresh data and store it. Concurrent callers share one run: every
+ * placed widget gets its own update broadcast, and they would otherwise each
+ * start a refresh. On failure the previous snapshot is returned unchanged.
+ *
+ * `after` is for callers that just changed something on the server (a widget
+ * button): a run already in flight may have read the server before that
+ * change, so they wait for it and start (or join) the next one instead.
+ */
+export async function refreshSnapshot(opts?: { after?: 'change' }): Promise<WidgetSnapshot> {
+  if (opts?.after === 'change' && inflight) {
+    await inflight.catch(() => undefined);
+    return refreshSnapshot();
+  }
+  if (inflight) return inflight;
+  inflight = (async () => {
+    const changesAtStart = localChanges;
+    const previous = (await loadSnapshot()) ?? emptySnapshot();
+    try {
+      const next = await buildSnapshot(previous);
+      if (localChanges !== changesAtStart) return (await loadSnapshot()) ?? next;
+      await saveSnapshot(next);
+      return next;
+    } catch (err) {
+      console.warn('[widgets] refresh failed', err);
+      return previous;
+    } finally {
+      inflight = null;
+    }
+  })();
+  return inflight;
+}
diff --git a/src/widgets/catalog.json b/src/widgets/catalog.json
new file mode 100644
index 00000000..319c0bfd
--- /dev/null
+++ b/src/widgets/catalog.json
@@ -0,0 +1,40 @@
+{
+  "$comment": "Home-screen widgets. scripts/sync-android-widgets.mjs turns this into the Android provider classes, provider XML, labels and manifest receivers; run it after editing. cols/rows are launcher cells (Android 2x2 is roughly the iOS small widget, 4x2 medium, 4x4 large).",
+  "widgets": [
+    { "name": "InboxWidget", "label": "Inbox", "description": "Newest messages with sender, time and subject. Taller sizes add avatars and a line of preview.", "cols": 4, "rows": 2, "minCols": 2, "minRows": 2, "board": "mail" },
+    { "name": "TriageWidget", "label": "Triage", "description": "One unread message at a time with archive, delete and reply buttons.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "mail" },
+    { "name": "UnreadCountWidget", "label": "Unread count", "description": "Unread count for the inbox, with the latest senders.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "mail" },
+    { "name": "LatestMessageWidget", "label": "Latest message", "description": "Only the newest unread message.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "mail" },
+    { "name": "FolderCountsWidget", "label": "Folder counts", "description": "Unread counts for up to four folders.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "mail" },
+    { "name": "MailShortcutsWidget", "label": "Shortcuts", "description": "Compose, calendar, contacts and files.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "mail", "static": true },
+    { "name": "AllAccountsWidget", "label": "All accounts", "description": "The unified inbox across every signed-in account.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "mail" },
+    { "name": "StarredWidget", "label": "Starred", "description": "Starred messages, newest first.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "mail" },
+    { "name": "FavouritePeopleWidget", "label": "Favourite people", "description": "The people you hear from most, with their unread count.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "mail" },
+    { "name": "MailSearchWidget", "label": "Search mail", "description": "Search bar with your recent searches.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 1, "board": "mail" },
+    { "name": "OutboxWidget", "label": "Scheduled and outbox", "description": "Scheduled messages and anything waiting in the outbox.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "mail" },
+    { "name": "TagWidget", "label": "Tag", "description": "Unread count for your busiest tag.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "mail" },
+    { "name": "LastDraftWidget", "label": "Last draft", "description": "Back into the draft you left.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "mail" },
+
+    { "name": "AgendaWidget", "label": "Agenda", "description": "Upcoming events by day with time, colour and place.", "cols": 4, "rows": 4, "minCols": 3, "minRows": 2, "board": "calendar" },
+    { "name": "WeekWidget", "label": "This week", "description": "The week at a glance from 8:00 to 18:00.", "cols": 4, "rows": 2, "minCols": 4, "minRows": 2, "board": "calendar" },
+    { "name": "MonthWidget", "label": "Month", "description": "Month grid with a dot per calendar and the next two events.", "cols": 4, "rows": 4, "minCols": 3, "minRows": 3, "board": "calendar" },
+    { "name": "TodayEventsWidget", "label": "Today", "description": "Today's date with the rest of today and tomorrow.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "calendar" },
+    { "name": "NextEventWidget", "label": "Next event", "description": "What's next, when and where.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "calendar" },
+    { "name": "DateNextWidget", "label": "Date and next two", "description": "Today's date with the next two events.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "calendar" },
+    { "name": "UpNextWidget", "label": "Up next", "description": "Countdown to the next event with join and running-late buttons.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "calendar" },
+
+    { "name": "InvitationsWidget", "label": "Invitations", "description": "Pending invitations with accept, maybe and decline.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "plans" },
+    { "name": "FreeTimeWidget", "label": "Free time", "description": "When you're free this week.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "plans" },
+    { "name": "TasksWidget", "label": "Tasks", "description": "Open tasks with tick boxes that work from the home screen.", "cols": 4, "rows": 4, "minCols": 3, "minRows": 2, "board": "plans" },
+    { "name": "TaskProgressWidget", "label": "Task progress", "description": "How many tasks are done.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "plans" },
+    { "name": "CountdownWidget", "label": "Countdown", "description": "Days until your next all-day event.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "plans" },
+    { "name": "BirthdaysWidget", "label": "Birthdays", "description": "Upcoming birthdays from your contacts.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "plans" },
+
+    { "name": "TodayHubWidget", "label": "Today overview", "description": "Next event, newest unread mail and tasks due, in one widget.", "cols": 4, "rows": 4, "minCols": 3, "minRows": 3, "board": "hubs" },
+    { "name": "MailAndNextWidget", "label": "Mail and next event", "description": "Unread mail on one side, the next event on the other.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "hubs" },
+    { "name": "RecentFilesWidget", "label": "Recent files", "description": "Recently changed items in Files.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "hubs" },
+    { "name": "AttachmentsWidget", "label": "Recent attachments", "description": "The newest attachments from your mail.", "cols": 4, "rows": 2, "minCols": 3, "minRows": 2, "board": "hubs" },
+    { "name": "VacationWidget", "label": "Vacation responder", "description": "Vacation responder status with an on/off switch.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "hubs" },
+    { "name": "StorageWidget", "label": "Storage", "description": "How much of your mailbox quota is used.", "cols": 2, "rows": 2, "minCols": 2, "minRows": 2, "board": "hubs" }
+  ]
+}
diff --git a/src/widgets/clicks.ts b/src/widgets/clicks.ts
new file mode 100644
index 00000000..b88f2a6c
--- /dev/null
+++ b/src/widgets/clicks.ts
@@ -0,0 +1,60 @@
+// What a tap on part of a widget does. Either it opens the app on a deep link
+// (handled by src/navigation/linking.ts, no JS needed in the widget), or it
+// names an action the widget task performs in the background (./actions.ts).
+
+import { APP_SCHEME } from '../navigation/linking';
+import type { EventItem, MailItem } from './snapshot';
+
+export interface WidgetClick {
+  clickAction?: string;
+  clickActionData?: Record<string, unknown>;
+}
+
+export type WidgetActionName =
+  | 'archive'
+  | 'trash'
+  | 'markRead'
+  | 'triageNext'
+  | 'rsvp'
+  | 'toggleTask'
+  | 'refresh';
+
+export function action(name: WidgetActionName, data: Record<string, unknown> = {}): WidgetClick {
+  return { clickAction: name, clickActionData: data };
+}
+
+export function open(uri: string): WidgetClick {
+  return { clickAction: 'OPEN_URI', clickActionData: { uri } };
+}
+
+const base = `${APP_SCHEME}://`;
+const enc = encodeURIComponent;
+
+function query(params: Record<string, string | undefined>): string {
+  const parts = Object.entries(params)
+    .filter(([, v]) => v !== undefined && v !== '')
+    .map(([k, v]) => `${k}=${enc(v!)}`);
+  return parts.length ? `?${parts.join('&')}` : '';
+}
+
+export const links = {
+  inbox: () => `${base}mail/folder/inbox`,
+  message: (m: Pick<MailItem, 'id' | 'accountId' | 'jmapAccountId'>) =>
+    `${base}mail/message/${enc(m.id)}${query({ account: m.accountId, jmapAccount: m.jmapAccountId })}`,
+  reply: (m: Pick<MailItem, 'id' | 'accountId' | 'jmapAccountId'>) =>
+    `${base}mail/message/${enc(m.id)}${query({ account: m.accountId, jmapAccount: m.jmapAccountId, action: 'reply' })}`,
+  draft: (m: Pick<MailItem, 'id' | 'accountId' | 'jmapAccountId'>) =>
+    `${base}mail/draft/${enc(m.id)}${query({ account: m.accountId, jmapAccount: m.jmapAccountId })}`,
+  unified: (params: { view?: 'all' | 'unread' | 'starred'; role?: string } = {}) =>
+    `${base}mail/unified${query({ view: params.view, role: params.role })}`,
+  scheduled: () => `${base}mail/scheduled`,
+  search: (q = '') => `${base}mail/search${query({ q })}`,
+  compose: (params: { to?: string; subject?: string; body?: string } = {}) =>
+    `${base}compose${query({ to: params.to, subject: params.subject, body: params.body })}`,
+  calendar: () => `${base}calendar`,
+  event: (e: Pick<EventItem, 'serverId' | 'jmapAccountId'>) =>
+    `${base}calendar/event/${enc(e.serverId)}${query({ account: e.jmapAccountId })}`,
+  contacts: () => `${base}contacts`,
+  files: () => `${base}files`,
+  settings: (tab?: string) => `${base}settings${tab ? `/${enc(tab)}` : ''}`,
+};
diff --git a/src/widgets/derive.ts b/src/widgets/derive.ts
new file mode 100644
index 00000000..71e8682a
--- /dev/null
+++ b/src/widgets/derive.ts
@@ -0,0 +1,209 @@
+// Views that depend on the current time, computed when a widget draws rather
+// than when the snapshot was fetched. Pure functions of (snapshot, now), so
+// they are unit-tested without the widget runtime.
+
+import { addDays, startOfDay } from './format';
+import type { EventItem, TaskItem, WidgetSnapshot } from './snapshot';
+
+const DAY = 86400000;
+
+/** Events overlapping [dayStart, dayStart + 1 day), all-day first, then by start. */
+export function eventsOnDay(events: EventItem[], dayStart: number): EventItem[] {
+  const dayEnd = addDays(dayStart, 1);
+  return events
+    .filter((e) => e.start < dayEnd && (e.end > dayStart || (e.end === e.start && e.start >= dayStart)))
+    .sort((a, b) => (a.allDay === b.allDay ? a.start - b.start : a.allDay ? -1 : 1));
+}
+
+/** Timed events that have not ended yet, soonest first. */
+export function upcomingTimed(events: EventItem[], now: number): EventItem[] {
+  return events.filter((e) => !e.allDay && e.end > now).sort((a, b) => a.start - b.start);
+}
+
+/** The next timed event (running or upcoming) and whether it has started. */
+export function nextEvent(events: EventItem[], now: number): { event: EventItem; running: boolean } | null {
+  const [event] = upcomingTimed(events, now);
+  if (!event) return null;
+  return { event, running: event.start <= now };
+}
+
+export interface AgendaDay {
+  dayStart: number;
+  events: EventItem[];
+}
+
+/**
+ * Days from today with at least one event still relevant (today drops the
+ * events that already ended), up to `maxDays` days with events.
+ */
+export function agendaDays(events: EventItem[], now: number, maxDays: number, horizonDays = 14): AgendaDay[] {
+  const out: AgendaDay[] = [];
+  const today = startOfDay(now);
+  for (let i = 0; i < horizonDays && out.length < maxDays; i++) {
+    const day = addDays(today, i);
+    const list = eventsOnDay(events, day).filter((e) => i > 0 || e.allDay || e.end > now);
+    if (list.length > 0) out.push({ dayStart: day, events: list });
+  }
+  return out;
+}
+
+/** Start of the week containing `ms` for the given first weekday (0 Sun, 1 Mon). */
+export function startOfWeek(ms: number, weekStart: 0 | 1): number {
+  const day = startOfDay(ms);
+  const dow = new Date(day).getDay();
+  const diff = (dow - weekStart + 7) % 7;
+  return addDays(day, -diff);
+}
+
+export interface MonthCell {
+  dayStart: number;
+  day: number;
+  inMonth: boolean;
+  isToday: boolean;
+  /** Distinct calendar colours with events that day, at most three. */
+  dots: string[];
+}
+
+/** The month containing `now` as whole weeks (5 or 6 rows). */
+export function monthGrid(events: EventItem[], now: number, weekStart: 0 | 1): MonthCell[][] {
+  const first = new Date(now);
+  first.setDate(1);
+  first.setHours(0, 0, 0, 0);
+  const month = first.getMonth();
+  const today = startOfDay(now);
+  let cursor = startOfWeek(first.getTime(), weekStart);
+  const weeks: MonthCell[][] = [];
+  do {
+    const week: MonthCell[] = [];
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(cursor);
+      const dots: string[] = [];
+      for (const e of eventsOnDay(events, cursor)) {
+        if (!dots.includes(e.color)) dots.push(e.color);
+        if (dots.length === 3) break;
+      }
+      week.push({
+        dayStart: cursor,
+        day: d.getDate(),
+        inMonth: d.getMonth() === month,
+        isToday: cursor === today,
+        dots,
+      });
+      cursor = addDays(cursor, 1);
+    }
+    weeks.push(week);
+  } while (new Date(cursor).getMonth() === month);
+  return weeks;
+}
+
+export interface BusyBlock {
+  /** Fraction of the visible window, 0..1. */
+  from: number;
+  to: number;
+  color: string;
+}
+
+/**
+ * Timed events of one day clipped to [startHour, endHour) as fractions of that
+ * window - the week and free-time bars.
+ */
+export function busyBlocks(events: EventItem[], dayStart: number, startHour = 8, endHour = 18): BusyBlock[] {
+  const winStart = dayStart + startHour * 3600000;
+  const winEnd = dayStart + endHour * 3600000;
+  const span = winEnd - winStart;
+  return eventsOnDay(events, dayStart)
+    .filter((e) => !e.allDay && e.end > winStart && e.start < winEnd)
+    .map((e) => ({
+      from: (Math.max(e.start, winStart) - winStart) / span,
+      to: (Math.min(e.end, winEnd) - winStart) / span,
+      color: e.color,
+    }));
+}
+
+export interface FreeTime {
+  /** The next timed event today, if any. */
+  next: EventItem | null;
+  /** True when an event is running right now. */
+  busyNow: boolean;
+  /** Longest free stretch left today inside working hours, if any. */
+  longestGap: { from: number; to: number } | null;
+}
+
+export function freeTime(events: EventItem[], now: number, startHour = 8, endHour = 18): FreeTime {
+  const today = startOfDay(now);
+  const winEnd = today + endHour * 3600000;
+  const timed = eventsOnDay(events, today).filter((e) => !e.allDay);
+  const busyNow = timed.some((e) => e.start <= now && e.end > now);
+  const next = timed.find((e) => e.start > now) ?? null;
+
+  let cursor = Math.max(now, today + startHour * 3600000);
+  let longest: { from: number; to: number } | null = null;
+  for (const e of timed.filter((x) => x.end > cursor).sort((a, b) => a.start - b.start)) {
+    if (e.start > cursor) {
+      const gap = { from: cursor, to: Math.min(e.start, winEnd) };
+      if (gap.to > gap.from && (!longest || gap.to - gap.from > longest.to - longest.from)) longest = gap;
+    }
+    cursor = Math.max(cursor, e.end);
+    if (cursor >= winEnd) break;
+  }
+  if (cursor < winEnd) {
+    const gap = { from: cursor, to: winEnd };
+    if (!longest || gap.to - gap.from > longest.to - longest.from) longest = gap;
+  }
+  return { next, busyNow, longestGap: longest };
+}
+
+export type DueKind = 'overdue' | 'today' | 'tomorrow' | 'later' | 'none';
+
+export function dueKind(task: TaskItem, now: number): DueKind {
+  if (task.due === undefined) return 'none';
+  const today = startOfDay(now);
+  const dueDay = startOfDay(task.due);
+  if (task.dueHasTime ? task.due < now : dueDay < today) return 'overdue';
+  if (dueDay === today) return 'today';
+  if (dueDay === addDays(today, 1)) return 'tomorrow';
+  return 'later';
+}
+
+/** Open tasks first (overdue, then by due date, undated last), completed after. */
+export function sortTasks(tasks: TaskItem[], now: number): TaskItem[] {
+  const rank: Record<DueKind, number> = { overdue: 0, today: 1, tomorrow: 2, later: 3, none: 4 };
+  return [...tasks].sort((a, b) => {
+    if (a.done !== b.done) return a.done ? 1 : -1;
+    const ra = rank[dueKind(a, now)];
+    const rb = rank[dueKind(b, now)];
+    if (ra !== rb) return ra - rb;
+    return (a.due ?? Number.MAX_SAFE_INTEGER) - (b.due ?? Number.MAX_SAFE_INTEGER);
+  });
+}
+
+/** Tasks that count for "today": overdue, due today, or completed today-ish. */
+export function tasksDueNow(tasks: TaskItem[], now: number): TaskItem[] {
+  return tasks.filter((t) => {
+    const kind = dueKind(t, now);
+    return kind === 'overdue' || kind === 'today';
+  });
+}
+
+/**
+ * The event a countdown should point at: the next all-day or multi-day event
+ * that starts after today, else the next timed event on a later day.
+ */
+export function countdownTarget(events: EventItem[], now: number): EventItem | null {
+  const tomorrow = addDays(startOfDay(now), 1);
+  const later = events.filter((e) => e.start >= tomorrow).sort((a, b) => a.start - b.start);
+  return later.find((e) => e.allDay || e.end - e.start >= DAY) ?? later[0] ?? null;
+}
+
+export function daysUntil(ms: number, now: number): number {
+  return Math.round((startOfDay(ms) - startOfDay(now)) / DAY);
+}
+
+/** Birthdays in the next `days` days, soonest first. */
+export function upcomingBirthdays(snapshot: WidgetSnapshot, now: number, days = 45) {
+  const today = startOfDay(now);
+  const until = addDays(today, days);
+  return snapshot.calendar.birthdays
+    .filter((b) => b.date >= today && b.date < until)
+    .sort((a, b) => a.date - b.date);
+}
diff --git a/src/widgets/format.ts b/src/widgets/format.ts
new file mode 100644
index 00000000..54402ebc
--- /dev/null
+++ b/src/widgets/format.ts
@@ -0,0 +1,132 @@
+// Strings and date formatting for widget layouts. Widgets render in a headless
+// task with no React tree, so this uses the plain translate() lookup instead
+// of the useTranslation hook. Keys live under `widgets.` in locales/rn/*.json
+// (added by `npm run i18n:harvest`); each call repeats the English text as
+// the fallback so a missing key never shows up raw on the home screen.
+
+import { isSupportedLocale, translate, type LocaleCode, type MessageParams } from '../i18n';
+
+export interface Fmt {
+  locale: string;
+  hour12: boolean;
+  t: (key: string, fallback: string, params?: MessageParams) => string;
+  /** Clock time in the user's 12h/24h setting. */
+  time: (ms: number) => string;
+  weekdayShort: (ms: number) => string;
+  weekdayLong: (ms: number) => string;
+  monthLong: (ms: number) => string;
+  /** "Sep 28" */
+  dayMonth: (ms: number) => string;
+  /** "Mon, Sep 28" */
+  weekdayDayMonth: (ms: number) => string;
+  /** "Sep 28, 2026" */
+  fullDate: (ms: number) => string;
+  /** Time today, weekday this week, date otherwise - the list's receivedAt style. */
+  listDate: (ms: number, now: number) => string;
+  /** "in 25 min", "in 2 h", "now". */
+  relative: (ms: number, now: number) => string;
+  bytes: (n: number) => string;
+}
+
+function safeFormat(locale: string, options: Intl.DateTimeFormatOptions): (ms: number) => string {
+  let formatter: Intl.DateTimeFormat | null = null;
+  try {
+    formatter = new Intl.DateTimeFormat(locale, options);
+  } catch {
+    try {
+      formatter = new Intl.DateTimeFormat('en', options);
+    } catch {
+      formatter = null;
+    }
+  }
+  return (ms: number) => {
+    const d = new Date(ms);
+    if (formatter) {
+      try {
+        return formatter.format(d);
+      } catch {
+        // fall through
+      }
+    }
+    return d.toDateString();
+  };
+}
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+export function startOfDay(ms: number): number {
+  const d = new Date(ms);
+  d.setHours(0, 0, 0, 0);
+  return d.getTime();
+}
+
+export function addDays(ms: number, days: number): number {
+  const d = new Date(ms);
+  d.setDate(d.getDate() + days);
+  return d.getTime();
+}
+
+export function sameDay(a: number, b: number): boolean {
+  return startOfDay(a) === startOfDay(b);
+}
+
+export function makeFmt(locale: string, hour12: boolean): Fmt {
+  const lang: LocaleCode = isSupportedLocale(locale) ? locale : 'en';
+  const t = (key: string, fallback: string, params?: MessageParams) =>
+    translate(lang, key, fallback, params);
+
+  const weekdayShort = safeFormat(locale, { weekday: 'short' });
+  const weekdayLong = safeFormat(locale, { weekday: 'long' });
+  const monthLong = safeFormat(locale, { month: 'long' });
+  const dayMonth = safeFormat(locale, { month: 'short', day: 'numeric' });
+  const weekdayDayMonth = safeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric' });
+  const fullDate = safeFormat(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+
+  const time = (ms: number) => {
+    const d = new Date(ms);
+    const h = d.getHours();
+    const m = pad(d.getMinutes());
+    if (!hour12) return `${pad(h)}:${m}`;
+    const suffix = h < 12 ? 'AM' : 'PM';
+    return `${h % 12 === 0 ? 12 : h % 12}:${m} ${suffix}`;
+  };
+
+  return {
+    locale,
+    hour12,
+    t,
+    time,
+    weekdayShort,
+    weekdayLong,
+    monthLong,
+    dayMonth,
+    weekdayDayMonth,
+    fullDate,
+    listDate: (ms, now) => {
+      if (sameDay(ms, now)) return time(ms);
+      const days = Math.round((startOfDay(now) - startOfDay(ms)) / 86400000);
+      if (days > 0 && days < 7) return weekdayShort(ms);
+      return dayMonth(ms);
+    },
+    relative: (ms, now) => {
+      const minutes = Math.round((ms - now) / 60000);
+      if (minutes <= 0) return t('widgets.relative.now', 'now');
+      if (minutes < 60) return t('widgets.relative.minutes', 'in {count} min', { count: minutes });
+      const hours = Math.round(minutes / 60);
+      if (hours < 24) return t('widgets.relative.hours', 'in {count} h', { count: hours });
+      const days = Math.round((startOfDay(ms) - startOfDay(now)) / 86400000);
+      return t('widgets.relative.days', '{count, plural, one {in # day} other {in # days}}', { count: days });
+    },
+    bytes: (n) => {
+      if (!Number.isFinite(n) || n <= 0) return '0 B';
+      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+      let v = n;
+      let i = 0;
+      while (v >= 1024 && i < units.length - 1) {
+        v /= 1024;
+        i++;
+      }
+      return `${v >= 10 || i === 0 ? Math.round(v) : v.toFixed(1)} ${units[i]}`;
+    },
+  };
+}
diff --git a/src/widgets/icons.ts b/src/widgets/icons.ts
new file mode 100644
index 00000000..88ae2455
--- /dev/null
+++ b/src/widgets/icons.ts
@@ -0,0 +1,100 @@
+// Tabler Icons (MIT), the set the webmail draws since it moved off Lucide.
+// Path data is copied from @tabler/icons tabler-nodes-outline.json so the
+// widgets use the same glyphs as the web UI. Widgets render them through
+// SvgWidget, which rasterises an SVG string.
+
+const OUTLINE = {
+  mail: '<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"/><path d="M3 7l9 6l9 -6"/>',
+  inbox: '<path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12"/><path d="M4 13h3l3 3h4l3 -3h3"/>',
+  send: '<path d="M10 14l11 -11"/><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"/>',
+  file: '<path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/>',
+  fileText: '<path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/><path d="M9 9l1 0"/><path d="M9 13l6 0"/><path d="M9 17l6 0"/>',
+  fileSpreadsheet: '<path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/><path d="M8 11h8v7h-8l0 -7"/><path d="M8 15h8"/><path d="M11 11v7"/>',
+  presentation: '<path d="M3 4l18 0"/><path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10"/><path d="M12 16l0 4"/><path d="M9 20l6 0"/><path d="M8 12l3 -3l2 2l3 -3"/>',
+  photo: '<path d="M15 8h.01"/><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12"/><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"/><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"/>',
+  folder: '<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"/>',
+  calendarClock: '<path d="M10.5 21h-4.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v3"/><path d="M16 3v4"/><path d="M8 3v4"/><path d="M4 11h10"/><path d="M14 18a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M18 16.5v1.5l.5 .5"/>',
+  calendar: '<path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12"/><path d="M16 3v4"/><path d="M8 3v4"/><path d="M4 11h16"/><path d="M11 15h1"/><path d="M12 15v3"/>',
+  calendarPlain: '<path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12"/><path d="M16 3v4"/><path d="M8 3v4"/><path d="M4 11h16"/>',
+  archive: '<path d="M3 6a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2"/><path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10"/><path d="M10 12l4 0"/>',
+  trash: '<path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/>',
+  ban: '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M5.7 5.7l12.6 12.6"/>',
+  search: '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/>',
+  edit: '<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415"/><path d="M16 5l3 3"/>',
+  addressBook: '<path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2"/><path d="M10 16h6"/><path d="M11 11a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M4 8h3"/><path d="M4 12h3"/><path d="M4 16h3"/>',
+  server: '<path d="M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-2"/><path d="M3 15a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -2"/><path d="M7 8l0 .01"/><path d="M7 16l0 .01"/><path d="M11 8h6"/><path d="M11 16h6"/>',
+  paperclip: '<path d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5"/>',
+  star: '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245"/>',
+  message: '<path d="M8 9h8"/><path d="M8 13h6"/><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"/>',
+  mapPin: '<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"/>',
+  video: '<path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4"/><path d="M3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -8"/>',
+  clock: '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 7v5l3 3"/>',
+  check: '<path d="M5 12l5 5l10 -10"/>',
+  plus: '<path d="M12 5l0 14"/><path d="M5 12l14 0"/>',
+  chevronLeft: '<path d="M15 6l-6 6l6 6"/>',
+  chevronRight: '<path d="M9 6l6 6l-6 6"/>',
+  users: '<path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/>',
+  lock: '<path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6"/><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M8 11v-4a4 4 0 1 1 8 0v4"/>',
+  cake: '<path d="M3 20h18v-8a3 3 0 0 0 -3 -3h-12a3 3 0 0 0 -3 3v8"/><path d="M3 14.803c.312 .135 .654 .204 1 .197a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1c.35 .007 .692 -.062 1 -.197"/><path d="M12 4l1.465 1.638a2 2 0 1 1 -3.015 .099l1.55 -1.737"/>',
+  beach: '<path d="M17.553 16.75a7.5 7.5 0 0 0 -10.606 0"/><path d="M18 3.804a6 6 0 0 0 -8.196 2.196l10.392 6a6 6 0 0 0 -2.196 -8.196"/><path d="M16.732 10c1.658 -2.87 2.225 -5.644 1.268 -6.196c-.957 -.552 -3.075 1.326 -4.732 4.196"/><path d="M15 9l-3 5.196"/><path d="M3 19.25a2.4 2.4 0 0 1 1 -.25a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 1 .25"/>',
+  reply: '<path d="M9 14l-4 -4l4 -4"/><path d="M5 10h11a4 4 0 1 1 0 8h-1"/>',
+  checklist: '<path d="M9.615 20h-2.615a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8"/><path d="M14 19l2 2l4 -4"/><path d="M9 8h4"/><path d="M9 12h2"/>',
+  upload: '<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/><path d="M7 9l5 -5l5 5"/><path d="M12 4l0 12"/>',
+  refresh: '<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"/><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/>',
+  tag: '<path d="M6.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M3 6v5.172a2 2 0 0 0 .586 1.414l7.71 7.71a2.41 2.41 0 0 0 3.408 0l5.592 -5.592a2.41 2.41 0 0 0 0 -3.408l-7.71 -7.71a2 2 0 0 0 -1.414 -.586h-5.172a3 3 0 0 0 -3 3"/>',
+} as const;
+
+const FILLED = {
+  star: '<path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"/>',
+  tag: '<path d="M11.172 2a3 3 0 0 1 2.121 .879l7.71 7.71a3.41 3.41 0 0 1 0 4.822l-5.592 5.592a3.41 3.41 0 0 1 -4.822 0l-7.71 -7.71a3 3 0 0 1 -.879 -2.121v-5.172a4 4 0 0 1 4 -4zm-3.672 3.5a2 2 0 0 0 -1.995 1.85l-.005 .15a2 2 0 1 0 2 -2"/>',
+} as const;
+
+export type IconName = keyof typeof OUTLINE;
+export type FilledIconName = keyof typeof FILLED;
+
+/** Splits `#rrggbbaa` into an SVG colour plus opacity; rgba() is passed through. */
+function paint(color: string): { value: string; opacity: string } {
+  const m = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(color);
+  if (m) return { value: `#${m[1]}`, opacity: (parseInt(m[2], 16) / 255).toFixed(3) };
+  return { value: color, opacity: '1' };
+}
+
+/** Outline Tabler icon as an SVG string (24 x 24 viewBox, stroke 2 like the web UI). */
+export function icon(name: IconName, color: string, strokeWidth = 2): string {
+  const { value, opacity } = paint(color);
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" ` +
+    `stroke="${value}" stroke-opacity="${opacity}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round">` +
+    `${OUTLINE[name]}</svg>`
+  );
+}
+
+/** Filled Tabler icon (star, tag) as an SVG string. */
+export function filledIcon(name: FilledIconName, color: string): string {
+  const { value, opacity } = paint(color);
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ` +
+    `fill="${value}" fill-opacity="${opacity}">${FILLED[name]}</svg>`
+  );
+}
+
+/**
+ * A progress ring (quota, task progress, countdown). `fraction` is clamped to
+ * 0..1; the arc starts at 12 o'clock like the webmail's quota ring.
+ */
+export function ring(fraction: number, track: string, fill: string, strokeWidth = 6): string {
+  const f = Math.max(0, Math.min(1, Number.isFinite(fraction) ? fraction : 0));
+  const r = 32 - strokeWidth / 2;
+  const c = 2 * Math.PI * r;
+  const t = paint(track);
+  const p = paint(fill);
+  const arc = f > 0
+    ? `<circle cx="32" cy="32" r="${r}" fill="none" stroke="${p.value}" stroke-opacity="${p.opacity}" stroke-width="${strokeWidth}" ` +
+      `stroke-linecap="round" stroke-dasharray="${(f * c).toFixed(2)} ${c.toFixed(2)}" transform="rotate(-90 32 32)"/>`
+    : '';
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">` +
+    `<circle cx="32" cy="32" r="${r}" fill="none" stroke="${t.value}" stroke-opacity="${t.opacity}" stroke-width="${strokeWidth}"/>` +
+    `${arc}</svg>`
+  );
+}
diff --git a/src/widgets/jmap.ts b/src/widgets/jmap.ts
new file mode 100644
index 00000000..1891802c
--- /dev/null
+++ b/src/widgets/jmap.ts
@@ -0,0 +1,450 @@
+// JMAP access for the widgets. Every call goes through a JMAPClient instance
+// of its own, never the app's `jmapClient` singleton: the widget task can run
+// inside the live React Native instance, where re-binding the singleton would
+// send the UI's requests with another account's credentials. The api/*
+// helpers are all bound to the singleton, so the few calls the widgets need
+// are written out here.
+
+import { AuthenticationError, JMAPClient, NetworkError } from '../api/jmap-client';
+import { CAPABILITIES, type Attachment, type Email, type Mailbox } from '../api/types';
+import { realAttachments } from '../lib/list-attachments';
+import { findArchiveMailbox, findJunkMailbox, findTrashMailbox } from '../lib/mailbox-tree';
+import { generateEmailAvatarColor, getEmailInitials } from '../lib/avatar-utils';
+import { normalizeHex } from './theme';
+import type { AttachmentGroup, FolderCount, MailItem, Person, QuotaState, VacationState } from './snapshot';
+
+type Call = [string, Record<string, unknown>, string];
+
+const LIST_PROPERTIES = [
+  'id', 'threadId', 'mailboxIds', 'keywords', 'receivedAt', 'from', 'subject', 'preview', 'hasAttachment',
+];
+const MAILBOX_PROPERTIES = ['id', 'name', 'role', 'parentId', 'unreadEmails', 'totalEmails', 'sortOrder'];
+const NEWEST_FIRST = [{ property: 'receivedAt', isAscending: false }];
+
+/** A client for one signed-in account, or null when it has no stored credentials. */
+export async function openClient(registryAccountId: string): Promise<JMAPClient | null> {
+  const client = new JMAPClient();
+  try {
+    return (await client.loadAccount(registryAccountId)) ? client : null;
+  } catch (err) {
+    // A revoked password must not log the user out from a widget: the app
+    // handles that when it next opens. Offline is expected; skip quietly.
+    if (err instanceof AuthenticationError || err instanceof NetworkError) return null;
+    throw err;
+  }
+}
+
+function responseOf(res: { methodResponses: Array<[string, any, string]> }, callId: string): any {
+  const hit = res.methodResponses.find((r) => r[2] === callId && r[0] !== 'error');
+  return hit ? hit[1] : null;
+}
+
+export function toMailItem(
+  email: Email,
+  registryAccountId: string,
+  opts?: { jmapAccountId?: string; threadSize?: number },
+): MailItem {
+  const from = email.from?.[0];
+  const name = from?.name?.trim() || from?.email || '';
+  return {
+    id: email.id,
+    threadId: email.threadId,
+    accountId: registryAccountId,
+    ...(opts?.jmapAccountId ? { jmapAccountId: opts.jmapAccountId } : {}),
+    fromName: name,
+    fromEmail: from?.email ?? '',
+    initials: getEmailInitials(from?.name ?? '', from?.email) || '?',
+    color: normalizeHex(generateEmailAvatarColor(from?.name ?? '', from?.email)),
+    subject: email.subject ?? '',
+    preview: (email.preview ?? '').replace(/\s+/g, ' ').trim(),
+    receivedAt: Date.parse(email.receivedAt) || 0,
+    unread: !email.keywords?.$seen,
+    starred: !!email.keywords?.$flagged,
+    hasAttachment: !!email.hasAttachment,
+    threadSize: Math.max(1, opts?.threadSize ?? 1),
+  };
+}
+
+const ROLE_ORDER: FolderCount['role'][] = ['inbox', 'drafts', 'scheduled', 'sent', 'archive', 'junk', 'trash'];
+
+export function folderCounts(mailboxes: Mailbox[]): FolderCount[] {
+  const out: FolderCount[] = [];
+  for (const role of ROLE_ORDER) {
+    const box = role === 'junk'
+      ? findJunkMailbox(mailboxes)
+      : role === 'trash'
+        ? findTrashMailbox(mailboxes)
+        : role === 'archive'
+          ? findArchiveMailbox(mailboxes)
+          : mailboxes.find((m) => m.role === role);
+    if (box) out.push({ role, name: box.name, unread: box.unreadEmails ?? 0, total: box.totalEmails ?? 0 });
+  }
+  return out;
+}
+
+/** The people who wrote most among recent inbox mail, with their unread count. */
+export function rankPeople(emails: Email[], selfEmails: string[], limit = 4): Person[] {
+  const self = new Set(selfEmails.map((e) => e.toLowerCase()));
+  const byEmail = new Map<string, Person & { count: number }>();
+  for (const email of emails) {
+    const from = email.from?.[0];
+    const address = from?.email?.toLowerCase();
+    if (!address || self.has(address) || /(^|[.+-])(no-?reply|notifications?|mailer-daemon)@/.test(address)) continue;
+    const entry = byEmail.get(address) ?? {
+      name: from?.name?.trim() || address,
+      email: address,
+      initials: getEmailInitials(from?.name ?? '', address) || '?',
+      color: normalizeHex(generateEmailAvatarColor(from?.name ?? '', address)),
+      unread: 0,
+      lastAt: 0,
+      count: 0,
+    };
+    entry.count++;
+    if (!email.keywords?.$seen) entry.unread++;
+    entry.lastAt = Math.max(entry.lastAt, Date.parse(email.receivedAt) || 0);
+    byEmail.set(address, entry);
+  }
+  return [...byEmail.values()]
+    .sort((a, b) => b.count - a.count || b.lastAt - a.lastAt)
+    .slice(0, limit)
+    .map(({ count: _count, ...person }) => person);
+}
+
+export interface MailSection {
+  mailboxes: Mailbox[];
+  folders: FolderCount[];
+  inbox: MailItem[];
+  starred: MailItem[];
+  starredCount: number;
+  drafts: MailItem[];
+  draftCount: number;
+  favourites: Person[];
+  attachments: AttachmentGroup[];
+  tagCounts: Map<string, { unread: number; total: number; latest?: MailItem }>;
+  quota: QuotaState | null;
+  vacation: VacationState | null;
+  selfEmails: string[];
+}
+
+/**
+ * Everything mail-related the widgets show for one account, in three
+ * requests: mailboxes, then the lists (inbox, starred, drafts, attachments,
+ * sender ranking, tag counts), then quota and vacation where supported.
+ */
+export async function fetchMailSection(
+  client: JMAPClient,
+  registryAccountId: string,
+  tagKeywords: string[],
+): Promise<MailSection> {
+  const accountId = client.accountId;
+
+  const boxesRes = await client.request([
+    ['Mailbox/get', { accountId, properties: MAILBOX_PROPERTIES }, 'm'],
+    ['Identity/get', { accountId, properties: ['email'] }, 'i'],
+  ], [CAPABILITIES.CORE, CAPABILITIES.MAIL, CAPABILITIES.SUBMISSION]);
+  const mailboxes = (responseOf(boxesRes, 'm')?.list ?? []) as Mailbox[];
+  const selfEmails = [
+    client.username ?? '',
+    ...((responseOf(boxesRes, 'i')?.list ?? []) as Array<{ email?: string }>).map((i) => i.email ?? ''),
+  ].filter(Boolean);
+
+  const inbox = mailboxes.find((m) => m.role === 'inbox');
+  const drafts = mailboxes.find((m) => m.role === 'drafts');
+  const excluded = [findTrashMailbox(mailboxes), findJunkMailbox(mailboxes)]
+    .filter((m): m is Mailbox => !!m)
+    .map((m) => m.id);
+
+  const calls: Call[] = [];
+  const getList = (queryId: string, getId: string, properties = LIST_PROPERTIES) => {
+    calls.push(['Email/get', {
+      accountId,
+      '#ids': { resultOf: queryId, name: 'Email/query', path: '/ids' },
+      properties,
+    }, getId]);
+  };
+  if (inbox) {
+    calls.push(['Email/query', {
+      accountId, filter: { inMailbox: inbox.id }, sort: NEWEST_FIRST, collapseThreads: true, limit: 12,
+    }, 'qi']);
+    getList('qi', 'gi');
+    calls.push(['Thread/get', {
+      accountId, '#ids': { resultOf: 'gi', name: 'Email/get', path: '/list/*/threadId' },
+    }, 'ti']);
+    calls.push(['Email/query', {
+      accountId, filter: { inMailbox: inbox.id }, sort: NEWEST_FIRST, limit: 60,
+    }, 'qp']);
+    getList('qp', 'gp', ['id', 'from', 'keywords', 'receivedAt']);
+    calls.push(['Email/query', {
+      accountId,
+      filter: { operator: 'AND', conditions: [{ inMailbox: inbox.id }, { hasAttachment: true }] },
+      // Read receipts and invitations also count as attachments to the
+      // server; ask for a few more and keep the ones with real files.
+      sort: NEWEST_FIRST, collapseThreads: true, limit: 10,
+    }, 'qa']);
+    calls.push(['Email/get', {
+      accountId,
+      '#ids': { resultOf: 'qa', name: 'Email/query', path: '/ids' },
+      properties: ['id', 'from', 'receivedAt', 'attachments'],
+      bodyProperties: ['name', 'type', 'disposition', 'cid', 'size'],
+    }, 'ga']);
+  }
+  calls.push(['Email/query', {
+    accountId,
+    filter: excluded.length
+      ? { operator: 'AND', conditions: [{ hasKeyword: '$flagged' }, { inMailboxOtherThan: excluded }] }
+      : { hasKeyword: '$flagged' },
+    sort: NEWEST_FIRST, collapseThreads: true, limit: 6, calculateTotal: true,
+  }, 'qs']);
+  getList('qs', 'gs');
+  if (drafts) {
+    calls.push(['Email/query', {
+      accountId, filter: { inMailbox: drafts.id }, sort: NEWEST_FIRST, limit: 1, calculateTotal: true,
+    }, 'qd']);
+    getList('qd', 'gd');
+  }
+  const listRes = await client.request(calls);
+
+  const threadSizes = new Map<string, number>(
+    ((responseOf(listRes, 'ti')?.list ?? []) as Array<{ id: string; emailIds: string[] }>)
+      .map((t) => [t.id, t.emailIds?.length ?? 1]),
+  );
+  const inboxEmails = (responseOf(listRes, 'gi')?.list ?? []) as Email[];
+  const inboxItems = inboxEmails
+    .map((e) => toMailItem(e, registryAccountId, { threadSize: threadSizes.get(e.threadId) }))
+    .sort((a, b) => b.receivedAt - a.receivedAt);
+  const starred = ((responseOf(listRes, 'gs')?.list ?? []) as Email[])
+    .map((e) => toMailItem(e, registryAccountId))
+    .sort((a, b) => b.receivedAt - a.receivedAt);
+  const draftItems = ((responseOf(listRes, 'gd')?.list ?? []) as Email[]).map((e) => toMailItem(e, registryAccountId));
+  const attachments: AttachmentGroup[] = ((responseOf(listRes, 'ga')?.list ?? []) as Array<Email & {
+    attachments?: Array<{ name?: string; type?: string; disposition?: string; cid?: string }>;
+  }>)
+    .map((e) => ({
+      emailId: e.id,
+      accountId: registryAccountId,
+      fromName: e.from?.[0]?.name || e.from?.[0]?.email || '',
+      receivedAt: Date.parse(e.receivedAt) || 0,
+      files: realAttachments(e.attachments as Attachment[] | undefined)
+        .map((a) => ({ name: a.name ?? '', type: a.type || 'application/octet-stream' })),
+    }))
+    .filter((g) => g.files.length > 0)
+    .sort((a, b) => b.receivedAt - a.receivedAt)
+    .slice(0, 3);
+
+  const tagCounts = await fetchTagCounts(client, tagKeywords, excluded, registryAccountId);
+  const { quota, vacation } = await fetchAccountStatus(client);
+
+  return {
+    mailboxes,
+    folders: folderCounts(mailboxes),
+    inbox: inboxItems,
+    starred,
+    starredCount: responseOf(listRes, 'qs')?.total ?? starred.length,
+    drafts: draftItems,
+    draftCount: responseOf(listRes, 'qd')?.total ?? draftItems.length,
+    favourites: rankPeople((responseOf(listRes, 'gp')?.list ?? []) as Email[], selfEmails),
+    attachments,
+    tagCounts,
+    quota,
+    vacation,
+    selfEmails,
+  };
+}
+
+async function fetchTagCounts(
+  client: JMAPClient,
+  keywords: string[],
+  excluded: string[],
+  registryAccountId: string,
+): Promise<MailSection['tagCounts']> {
+  const out: MailSection['tagCounts'] = new Map();
+  const wanted = keywords.slice(0, 8);
+  if (wanted.length === 0) return out;
+  const accountId = client.accountId;
+  const base = (keyword: string) =>
+    excluded.length ? [{ hasKeyword: keyword }, { inMailboxOtherThan: excluded }] : [{ hasKeyword: keyword }];
+  const calls: Call[] = [];
+  wanted.forEach((keyword, i) => {
+    calls.push(['Email/query', {
+      accountId,
+      filter: { operator: 'AND', conditions: base(keyword) },
+      sort: NEWEST_FIRST, limit: 1, calculateTotal: true,
+    }, `t${i}`]);
+    calls.push(['Email/get', {
+      accountId,
+      '#ids': { resultOf: `t${i}`, name: 'Email/query', path: '/ids' },
+      properties: LIST_PROPERTIES,
+    }, `l${i}`]);
+    calls.push(['Email/query', {
+      accountId,
+      filter: { operator: 'AND', conditions: [...base(keyword), { notKeyword: '$seen' }] },
+      limit: 0, calculateTotal: true,
+    }, `u${i}`]);
+  });
+  const max = Math.max(3, client.getMaxCallsInRequest() - (client.getMaxCallsInRequest() % 3));
+  for (let start = 0; start < calls.length; start += max) {
+    const res = await client.request(calls.slice(start, start + max));
+    wanted.forEach((keyword, i) => {
+      const total = responseOf(res, `t${i}`)?.total;
+      if (total === undefined) return;
+      const latest = (responseOf(res, `l${i}`)?.list ?? [])[0] as Email | undefined;
+      out.set(keyword, {
+        total,
+        unread: responseOf(res, `u${i}`)?.total ?? 0,
+        latest: latest ? toMailItem(latest, registryAccountId) : undefined,
+      });
+    });
+  }
+  return out;
+}
+
+async function fetchAccountStatus(client: JMAPClient): Promise<{ quota: QuotaState | null; vacation: VacationState | null }> {
+  const accountId = client.accountId;
+  const calls: Call[] = [];
+  const using: string[] = [CAPABILITIES.CORE];
+  if (client.hasAccountCapability(CAPABILITIES.QUOTA)) {
+    calls.push(['Quota/get', { accountId }, 'q']);
+    using.push(CAPABILITIES.QUOTA);
+  }
+  if (client.hasAccountCapability(CAPABILITIES.VACATION)) {
+    calls.push(['VacationResponse/get', { accountId, ids: ['singleton'] }, 'v']);
+    using.push(CAPABILITIES.MAIL, CAPABILITIES.VACATION);
+  }
+  if (calls.length === 0) return { quota: null, vacation: null };
+  try {
+    const res = await client.request(calls, using);
+    const quotas = (responseOf(res, 'q')?.list ?? []) as Array<{
+      resourceType?: string; scope?: string; used?: number; hardLimit?: number; limit?: number; types?: string[];
+    }>;
+    const coversMail = (q: (typeof quotas)[number]) => !q.types?.length || q.types.some((t) => t === 'Email' || t === 'Mail');
+    const mailQuota = quotas.find((q) => q.resourceType === 'octets' && coversMail(q))
+      ?? quotas.find((q) => q.resourceType === 'mail' || q.scope === 'mail');
+    const limit = mailQuota ? mailQuota.hardLimit ?? mailQuota.limit ?? 0 : 0;
+    const v = (responseOf(res, 'v')?.list ?? [])[0] as
+      | { isEnabled?: boolean; fromDate?: string | null; toDate?: string | null; subject?: string | null }
+      | undefined;
+    return {
+      quota: mailQuota && limit > 0 ? { used: mailQuota.used ?? 0, limit } : null,
+      vacation: v
+        ? {
+            enabled: !!v.isEnabled,
+            ...(v.fromDate ? { from: Date.parse(v.fromDate) } : {}),
+            ...(v.toDate ? { to: Date.parse(v.toDate) } : {}),
+            ...(v.subject ? { subject: v.subject } : {}),
+          }
+        : null,
+    };
+  } catch {
+    return { quota: null, vacation: null };
+  }
+}
+
+/** Newest inbox messages of one account, for the all-accounts widget. */
+export async function fetchInboxPreview(client: JMAPClient, registryAccountId: string, limit = 5): Promise<{
+  items: MailItem[];
+  unread: number;
+}> {
+  const accountId = client.accountId;
+  const boxes = await client.request([
+    ['Mailbox/query', { accountId, filter: { role: 'inbox' } }, 'mq'],
+    ['Mailbox/get', {
+      accountId,
+      '#ids': { resultOf: 'mq', name: 'Mailbox/query', path: '/ids' },
+      properties: MAILBOX_PROPERTIES,
+    }, 'mg'],
+  ]);
+  const inbox = (responseOf(boxes, 'mg')?.list ?? [])[0] as Mailbox | undefined;
+  if (!inbox) return { items: [], unread: 0 };
+  const res = await client.request([
+    ['Email/query', { accountId, filter: { inMailbox: inbox.id }, sort: NEWEST_FIRST, collapseThreads: true, limit }, 'q'],
+    ['Email/get', { accountId, '#ids': { resultOf: 'q', name: 'Email/query', path: '/ids' }, properties: LIST_PROPERTIES }, 'g'],
+  ]);
+  return {
+    items: ((responseOf(res, 'g')?.list ?? []) as Email[]).map((e) => toMailItem(e, registryAccountId)),
+    unread: inbox.unreadEmails ?? 0,
+  };
+}
+
+// ── Actions ──────────────────────────────────────────────────────────────
+
+function emailAccount(client: JMAPClient, jmapAccountId?: string): string {
+  return jmapAccountId ?? client.accountId;
+}
+
+async function setEmail(client: JMAPClient, accountId: string, update: Record<string, Record<string, unknown>>): Promise<boolean> {
+  const res = await client.request([['Email/set', { accountId, update }, 's']]);
+  const body = responseOf(res, 's');
+  return !!body && !body.notUpdated;
+}
+
+export async function markRead(client: JMAPClient, emailId: string, jmapAccountId?: string): Promise<boolean> {
+  return setEmail(client, emailAccount(client, jmapAccountId), { [emailId]: { 'keywords/$seen': true } });
+}
+
+/**
+ * Move a message out of its mailboxes into the archive (or trash). Reads the
+ * message's current mailboxes first so the patch only drops those.
+ */
+export async function moveTo(
+  client: JMAPClient,
+  emailId: string,
+  target: 'archive' | 'trash',
+  jmapAccountId?: string,
+): Promise<boolean> {
+  const accountId = emailAccount(client, jmapAccountId);
+  const res = await client.request([
+    ['Mailbox/get', { accountId, properties: MAILBOX_PROPERTIES }, 'm'],
+    ['Email/get', { accountId, ids: [emailId], properties: ['id', 'mailboxIds'] }, 'e'],
+  ]);
+  const mailboxes = (responseOf(res, 'm')?.list ?? []) as Mailbox[];
+  const email = (responseOf(res, 'e')?.list ?? [])[0] as Pick<Email, 'id' | 'mailboxIds'> | undefined;
+  const destination = target === 'archive' ? findArchiveMailbox(mailboxes) : findTrashMailbox(mailboxes);
+  if (!email || !destination) return false;
+  const patch: Record<string, unknown> = { [`mailboxIds/${destination.id}`]: true };
+  for (const id of Object.keys(email.mailboxIds ?? {})) {
+    if (id !== destination.id) patch[`mailboxIds/${id}`] = null;
+  }
+  if (target === 'trash') patch['keywords/$seen'] = true;
+  return setEmail(client, accountId, { [emailId]: patch });
+}
+
+export async function rsvp(
+  client: JMAPClient,
+  eventId: string,
+  participantId: string,
+  status: 'accepted' | 'tentative' | 'declined',
+  jmapAccountId?: string,
+): Promise<boolean> {
+  const accountId = jmapAccountId ?? client.getPrimaryAccountId(CAPABILITIES.CALENDARS);
+  const res = await client.request([
+    ['CalendarEvent/set', {
+      accountId,
+      update: { [eventId]: { [`participants/${participantId}/participationStatus`]: status } },
+      sendSchedulingMessages: true,
+    }, 's'],
+  ], [CAPABILITIES.CORE, CAPABILITIES.CALENDARS]);
+  const body = responseOf(res, 's');
+  return !!body && !body.notUpdated;
+}
+
+/** Same flip as calendar-store's toggleTaskComplete; progressUpdated is left to the server. */
+export async function setTaskDone(
+  client: JMAPClient,
+  taskId: string,
+  done: boolean,
+  jmapAccountId?: string,
+): Promise<boolean> {
+  const accountId = jmapAccountId ?? client.getPrimaryAccountId(CAPABILITIES.CALENDARS);
+  const res = await client.request([
+    ['CalendarEvent/set', {
+      accountId,
+      update: {
+        [taskId]: done
+          ? { progress: 'completed', percentComplete: 100 }
+          : { progress: 'needs-action', percentComplete: 0 },
+      },
+    }, 's'],
+  ], [CAPABILITIES.CORE, CAPABILITIES.CALENDARS]);
+  const body = responseOf(res, 's');
+  return !!body && !body.notUpdated;
+}
diff --git a/src/widgets/layouts/calendar.tsx b/src/widgets/layouts/calendar.tsx
new file mode 100644
index 00000000..ced4a0fe
--- /dev/null
+++ b/src/widgets/layouts/calendar.tsx
@@ -0,0 +1,1061 @@
+// Board "Calendar": the agenda, this week, the month grid, today, the next
+// event, the date with the next two events and the up-next countdown. They
+// copy the webmail's agenda, week and month views as the mockup drew them.
+//
+// RemoteViews have no absolute positioning, so everything that sits at a
+// computed place (week blocks, the now line) is built from spacers whose dp
+// heights come from the widget size the launcher reports.
+
+import React from 'react';
+import { FlexWidget, OverlapWidget, SvgWidget, TextWidget, type ColorProp } from 'react-native-android-widget';
+import { links, open } from '../clicks';
+import {
+  agendaDays,
+  busyBlocks,
+  daysUntil,
+  eventsOnDay,
+  monthGrid,
+  nextEvent,
+  startOfWeek,
+  type AgendaDay,
+  type BusyBlock,
+  type MonthCell,
+} from '../derive';
+import { addDays, sameDay, startOfDay, type Fmt } from '../format';
+import { ring, type IconName } from '../icons';
+import { AGENDA_ROW_HEIGHT, AgendaRow, DAY_BAND_HEIGHT, DayBand } from '../parts';
+import { Avatar, Button, Dot, EventChip, Fab, Header, Icon, Placeholder, Spacer, Surface, Txt } from '../primitives';
+import type { EventItem, WidgetSnapshot } from '../snapshot';
+import { chipBackground, normalizeHex, type WidgetPalette } from '../theme';
+import type { Layout } from './types';
+
+/** Surface's 1dp frame; Android adds a border to the padding, so it eats space. */
+const FRAME = 1;
+const HOUR = 3600000;
+const GRID_START_HOUR = 8;
+const GRID_END_HOUR = 18;
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+
+function unsupportedText(f: Fmt): string {
+  return f.t('widgets.calendar.unsupported', "Calendar isn't available on this server");
+}
+
+function nothingText(f: Fmt): string {
+  return f.t('widgets.calendar.nothing_planned', 'Nothing on the calendar');
+}
+
+function Unsupported({ p, f }: { p: WidgetPalette; f: Fmt }) {
+  return (
+    <Surface p={p}>
+      <Placeholder p={p} iconName="calendar" title={unsupportedText(f)} />
+    </Surface>
+  );
+}
+
+function NothingPlanned({ p, f }: { p: WidgetPalette; f: Fmt }) {
+  return (
+    <Surface p={p}>
+      <Placeholder p={p} iconName="calendarPlain" title={nothingText(f)} click={open(links.calendar())} />
+    </Surface>
+  );
+}
+
+/** Appends an alpha byte to a `#rrggbb` palette colour; other forms pass through. */
+function withAlpha(color: ColorProp, alpha: string): ColorProp {
+  return /^#[0-9a-f]{6}$/i.test(color) ? (`${color}${alpha}` as ColorProp) : color;
+}
+
+function upper(text: string, locale: string): string {
+  try {
+    return text.toLocaleUpperCase(locale);
+  } catch {
+    return text.toUpperCase();
+  }
+}
+
+function capitalize(text: string, locale: string): string {
+  if (!text) return text;
+  return upper(text.charAt(0), locale) + text.slice(1);
+}
+
+function eventTitle(f: Fmt, e: EventItem): string {
+  return e.title || f.t('widgets.calendar.untitled', '(no title)');
+}
+
+function timeRange(f: Fmt, e: EventItem): string {
+  return `${f.time(e.start)} – ${f.time(e.end)}`;
+}
+
+/** Nothing for today, the weekday for the coming six days, a date after that. */
+function dayPrefix(f: Fmt, ms: number, now: number): string {
+  const diff = daysUntil(ms, now);
+  if (diff <= 0) return '';
+  return diff < 7 ? f.weekdayShort(ms) : f.dayMonth(ms);
+}
+
+/** "Tue 09:30 – 10:00" for another day, the bare range for today. */
+function whenRange(f: Fmt, e: EventItem, now: number): string {
+  const prefix = dayPrefix(f, e.start, now);
+  return prefix ? `${prefix} ${timeRange(f, e)}` : timeRange(f, e);
+}
+
+/** How the month view's chips label an event: "09:30", "Tue 10:00", "All day". */
+function chipTime(f: Fmt, e: EventItem, now: number): string {
+  const today = startOfDay(now);
+  const prefix = dayPrefix(f, Math.max(e.start, today), now);
+  if (e.allDay) return prefix || f.t('widgets.calendar.all_day', 'All day');
+  if (e.start < today) return f.t('widgets.calendar.now', 'Now');
+  return prefix ? `${prefix} ${f.time(e.start)}` : f.time(e.start);
+}
+
+/** "Today", "Tomorrow", the weekday this week, else weekday and date. */
+function dayLabel(f: Fmt, dayStart: number, now: number): string {
+  const diff = daysUntil(dayStart, now);
+  if (diff === 0) return f.t('widgets.calendar.today', 'Today');
+  if (diff === 1) return f.t('widgets.calendar.tomorrow', 'Tomorrow');
+  return diff > 1 && diff < 7 ? f.weekdayLong(dayStart) : f.weekdayDayMonth(dayStart);
+}
+
+/**
+ * Events still ahead or running, soonest first, all-day events leading their
+ * day. An all-day event that began before today is not "next" any more, so a
+ * week-long trip does not hold the top spot all week.
+ */
+function upcoming(events: EventItem[], now: number): EventItem[] {
+  const today = startOfDay(now);
+  const day = (e: EventItem) => startOfDay(Math.max(e.start, today));
+  return events
+    .filter((e) => (e.allDay ? e.start >= today : e.end > now))
+    .sort((a, b) => day(a) - day(b) || (a.allDay === b.allDay ? a.start - b.start : a.allDay ? -1 : 1));
+}
+
+/** Video link or place, as the agenda row shows it. */
+function placeOf(f: Fmt, e: EventItem): { icon: IconName; text: string } | null {
+  if (e.videoUrl) return { icon: 'video', text: e.videoName || f.t('widgets.calendar.video_call', 'Video call') };
+  if (e.location) return { icon: 'mapPin', text: e.location };
+  return null;
+}
+
+/** The signed-in addresses, where an account label is one. */
+function selfAddresses(s: WidgetSnapshot): Set<string> {
+  return new Set(
+    s.accounts.map((a) => a.label.trim().toLowerCase()).filter((label) => label.includes('@')),
+  );
+}
+
+function monthYear(f: Fmt, ms: number): string {
+  try {
+    return new Intl.DateTimeFormat(f.locale, { month: 'long', year: 'numeric' }).format(new Date(ms));
+  } catch {
+    return `${f.monthLong(ms)} ${new Date(ms).getFullYear()}`;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Agenda (4x4, down to 3x2)
+
+const AGENDA_FOOTER_HEIGHT = 30;
+
+interface AgendaPlan {
+  sections: AgendaDay[];
+  /** The first day with rows that did not fit, summarised in the footer. */
+  hidden: AgendaDay | null;
+}
+
+function planAgenda(days: AgendaDay[], room: number): AgendaPlan {
+  const full = days.reduce((h, d) => h + DAY_BAND_HEIGHT + d.events.length * AGENDA_ROW_HEIGHT, 0);
+  const budget = full <= room ? room : room - AGENDA_FOOTER_HEIGHT;
+  const sections: AgendaDay[] = [];
+  let used = 0;
+  for (const day of days) {
+    const fit = Math.floor((budget - used - DAY_BAND_HEIGHT) / AGENDA_ROW_HEIGHT);
+    const take = Math.max(0, Math.min(day.events.length, fit));
+    if (take > 0) {
+      sections.push({ dayStart: day.dayStart, events: day.events.slice(0, take) });
+      used += DAY_BAND_HEIGHT + take * AGENDA_ROW_HEIGHT;
+    }
+    if (take < day.events.length) {
+      return { sections, hidden: { dayStart: day.dayStart, events: day.events.slice(take) } };
+    }
+  }
+  return { sections, hidden: null };
+}
+
+export const AgendaLayout: Layout = ({ s, p, f, now, height }) => {
+  if (!s.calendar.supported) return <Unsupported p={p} f={f} />;
+  const compact = height < 220;
+  const headerHeight = compact ? 38 : 44;
+  const header = (
+    <Header
+      p={p}
+      height={headerHeight}
+      iconName="calendar"
+      title={f.t('widgets.calendar.agenda', 'Agenda')}
+      click={open(links.calendar())}
+      trailing={<Fab p={p} iconName="plus" size={compact ? 28 : 32} click={open(links.calendar())} />}
+    />
+  );
+  const days = agendaDays(s.calendar.events, now, 14);
+  if (days.length === 0) {
+    return (
+      <Surface p={p}>
+        {header}
+        <Placeholder p={p} iconName="calendarPlain" title={nothingText(f)} click={open(links.calendar())} />
+      </Surface>
+    );
+  }
+  // Header bar plus its 1dp rule.
+  const room = height - 2 * FRAME - headerHeight - 1;
+  const { sections, hidden } = planAgenda(days, room);
+  const rows: React.JSX.Element[] = [];
+  sections.forEach((day, d) => {
+    rows.push(<DayBand key={`band-${day.dayStart}`} p={p} f={f} dayStart={day.dayStart} now={now} />);
+    day.events.forEach((e, i) => {
+      const last = !hidden && d === sections.length - 1 && i === day.events.length - 1;
+      rows.push(<AgendaRow key={`${day.dayStart}-${e.id}`} p={p} f={f} e={e} last={last} />);
+    });
+  });
+  return (
+    <Surface p={p}>
+      {header}
+      {rows}
+      {hidden ? (
+        <FlexWidget
+          {...open(links.calendar())}
+          style={{ width: 'match_parent', height: AGENDA_FOOTER_HEIGHT, justifyContent: 'center', paddingHorizontal: 14 }}
+        >
+          <Txt
+            text={f.t('widgets.calendar.agenda_more', '{day}: {events}', {
+              day: dayLabel(f, hidden.dayStart, now),
+              events: hidden.events.map((e) => eventTitle(f, e)).join(', '),
+            })}
+            color={p.muted}
+            size={13}
+          />
+        </FlexWidget>
+      ) : null}
+    </Surface>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// This week (4x2)
+
+const WEEK_PAD = 10;
+const WEEK_LABEL_HEIGHT = 16;
+const WEEK_DAY_SIZE = 24;
+const WEEK_STRIP_HEIGHT = 20;
+const WEEK_GAP = 4;
+const WEEK_BLOCK_MIN = 4;
+const WEEK_MAX_LANES = 3;
+const WEEK_LANE_GAP = 1;
+
+interface StripSegment {
+  span: number;
+  event: EventItem | null;
+}
+
+/** All-day events across the week; a multi-day event becomes one wide chip. */
+function allDaySegments(events: EventItem[], days: number[]): StripSegment[] {
+  const segments: StripSegment[] = [];
+  let previousId: string | null = null;
+  for (const day of days) {
+    const list = eventsOnDay(events, day).filter((e) => e.allDay);
+    const keepId: string | null = previousId;
+    const event: EventItem | null = list.find((e) => e.id === keepId) ?? list[0] ?? null;
+    const last = segments[segments.length - 1];
+    if (last && (last.event?.id ?? null) === (event?.id ?? null)) last.span += 1;
+    else segments.push({ span: 1, event });
+    previousId = event?.id ?? null;
+  }
+  return segments;
+}
+
+interface PlacedBlock {
+  /** dp from the top of the grid. */
+  top: number;
+  height: number;
+  color: string;
+}
+
+/**
+ * Stacks one day's busy blocks into side-by-side lanes, the way the week view
+ * splits overlapping events. Once the lanes run out, a block starts where the
+ * lane that frees up first ends.
+ */
+function laneBlocks(blocks: BusyBlock[], gridHeight: number): PlacedBlock[][] {
+  const lanes: Array<{ end: number; items: PlacedBlock[] }> = [];
+  for (const b of [...blocks].sort((x, y) => x.from - y.from || y.to - x.to)) {
+    let top = b.from * gridHeight;
+    let lane = lanes.find((l) => l.end <= top + 0.5);
+    if (!lane && lanes.length < WEEK_MAX_LANES) {
+      lane = { end: 0, items: [] };
+      lanes.push(lane);
+    }
+    if (!lane) {
+      lane = lanes.reduce((a, c) => (c.end < a.end ? c : a));
+      top = lane.end;
+    }
+    top = Math.max(top, lane.end);
+    const bottom = Math.min(gridHeight, Math.max(b.to * gridHeight, top + WEEK_BLOCK_MIN));
+    if (bottom - top < WEEK_BLOCK_MIN) top = Math.max(lane.end, bottom - WEEK_BLOCK_MIN);
+    if (bottom - top <= 0) continue;
+    lane.items.push({ top, height: bottom - top, color: b.color });
+    lane.end = bottom;
+  }
+  return lanes.map((l) => l.items);
+}
+
+function BlockLanes({ lanes, width, height }: { lanes: PlacedBlock[][]; width: number; height: number }) {
+  const count = Math.max(1, lanes.length);
+  const laneWidth = Math.max(1, (width - 4 - (count - 1) * WEEK_LANE_GAP) / count);
+  const columns: React.JSX.Element[] = [];
+  lanes.forEach((items, l) => {
+    if (l > 0) columns.push(<Spacer key={`gap-${l}`} size={WEEK_LANE_GAP} horizontal />);
+    const parts: React.JSX.Element[] = [];
+    let cursor = 0;
+    items.forEach((b, j) => {
+      if (b.top > cursor) parts.push(<Spacer key={`s-${j}`} size={b.top - cursor} />);
+      const color = normalizeHex(b.color);
+      parts.push(
+        <FlexWidget
+          key={`b-${j}`}
+          style={{
+            width: laneWidth,
+            height: b.height,
+            borderRadius: 2,
+            backgroundColor: chipBackground(color),
+            borderLeftWidth: 3,
+            borderLeftColor: color,
+          }}
+        />,
+      );
+      cursor = b.top + b.height;
+    });
+    columns.push(
+      <FlexWidget key={`lane-${l}`} style={{ width: laneWidth, height }}>
+        {parts}
+      </FlexWidget>,
+    );
+  });
+  return (
+    <FlexWidget style={{ flexDirection: 'row', width, height, paddingHorizontal: 2 }}>
+      {columns}
+    </FlexWidget>
+  );
+}
+
+/** The red now line with its dot, `top` dp down the grid. */
+function NowLine({ p, top, width, height }: { p: WidgetPalette; top: number; width: number; height: number }) {
+  const offset = Math.max(0, Math.min(height - 6, top - 3));
+  return (
+    <FlexWidget style={{ width, height }}>
+      <Spacer size={offset} />
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width, height: 6 }}>
+        <Dot color={p.destructive} size={6} />
+        <FlexWidget style={{ width: Math.max(0, width - 6), height: 2, backgroundColor: p.destructive }} />
+      </FlexWidget>
+    </FlexWidget>
+  );
+}
+
+export const WeekLayout: Layout = ({ s, p, f, now, width, height }) => {
+  if (!s.calendar.supported) return <Unsupported p={p} f={f} />;
+  const events = s.calendar.events;
+  const first = startOfWeek(now, s.weekStart);
+  const days = Array.from({ length: 7 }, (_, i) => addDays(first, i));
+  const colWidth = (width - 2 * FRAME - 2 * WEEK_PAD) / 7;
+  const segments = allDaySegments(events, days);
+  const strip = segments.some((seg) => seg.event !== null);
+  const gridHeight = Math.max(
+    0,
+    height - 2 * FRAME - WEEK_PAD - WEEK_LABEL_HEIGHT - 2 - WEEK_DAY_SIZE - WEEK_GAP
+      - (strip ? WEEK_STRIP_HEIGHT + WEEK_GAP : 0) - 1,
+  );
+  const windowStart = startOfDay(now) + GRID_START_HOUR * HOUR;
+  const nowFraction = (now - windowStart) / ((GRID_END_HOUR - GRID_START_HOUR) * HOUR);
+
+  const headCells = days.map((day) => {
+    const isToday = sameDay(day, now);
+    return (
+      <FlexWidget key={`head-${day}`} style={{ width: colWidth, alignItems: 'center' }}>
+        <Txt
+          text={upper(f.weekdayShort(day), f.locale)}
+          color={isToday ? p.today : p.muted}
+          size={11}
+          weight={isToday ? '600' : '400'}
+          style={{ height: WEEK_LABEL_HEIGHT }}
+        />
+        <Spacer size={2} />
+        {isToday ? (
+          <FlexWidget
+            style={{
+              width: WEEK_DAY_SIZE,
+              height: WEEK_DAY_SIZE,
+              borderRadius: WEEK_DAY_SIZE / 2,
+              backgroundColor: p.primary,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <TextWidget
+              text={String(new Date(day).getDate())}
+              allowFontScaling={false}
+              style={{ color: p.primaryFg, fontSize: 13, fontWeight: '700' }}
+            />
+          </FlexWidget>
+        ) : (
+          <FlexWidget style={{ height: WEEK_DAY_SIZE, justifyContent: 'center', alignItems: 'center' }}>
+            <TextWidget text={String(new Date(day).getDate())} allowFontScaling={false} style={{ color: p.fg, fontSize: 14 }} />
+          </FlexWidget>
+        )}
+      </FlexWidget>
+    );
+  });
+
+  const stripCells = segments.map((seg, i) => {
+    const e = seg.event;
+    const color = e ? normalizeHex(e.color) : null;
+    return (
+      <FlexWidget key={`strip-${i}`} style={{ width: seg.span * colWidth, height: WEEK_STRIP_HEIGHT, paddingRight: 2 }}>
+        {e && color ? (
+          <FlexWidget
+            {...open(links.event(e))}
+            style={{
+              width: 'match_parent',
+              height: WEEK_STRIP_HEIGHT,
+              justifyContent: 'center',
+              paddingLeft: 4,
+              borderRadius: 3,
+              backgroundColor: chipBackground(color),
+              borderLeftWidth: 3,
+              borderLeftColor: color,
+            }}
+          >
+            <Txt text={eventTitle(f, e)} color={color} size={10} weight="500" />
+          </FlexWidget>
+        ) : null}
+      </FlexWidget>
+    );
+  });
+
+  const gridColumns = days.map((day, i) => {
+    const ruled = i < days.length - 1;
+    const inner = colWidth - (ruled ? 1 : 0);
+    const lanes = laneBlocks(busyBlocks(events, day, GRID_START_HOUR, GRID_END_HOUR), gridHeight);
+    const blocks = <BlockLanes lanes={lanes} width={inner} height={gridHeight} />;
+    const showNow = sameDay(day, now) && nowFraction >= 0 && nowFraction <= 1;
+    return (
+      <FlexWidget
+        key={`col-${day}`}
+        style={{
+          width: colWidth,
+          height: gridHeight,
+          ...(ruled ? { borderRightWidth: 1, borderRightColor: p.border } : {}),
+        }}
+      >
+        {showNow ? (
+          <OverlapWidget style={{ width: inner, height: gridHeight }}>
+            {blocks}
+            <NowLine p={p} top={nowFraction * gridHeight} width={inner} height={gridHeight} />
+          </OverlapWidget>
+        ) : blocks}
+      </FlexWidget>
+    );
+  });
+
+  return (
+    <Surface p={p} style={{ paddingTop: WEEK_PAD, paddingHorizontal: WEEK_PAD }} click={open(links.calendar())}>
+      <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>{headCells}</FlexWidget>
+      <Spacer size={WEEK_GAP} />
+      {strip ? (
+        <FlexWidget style={{ flexDirection: 'row', width: 'match_parent', height: WEEK_STRIP_HEIGHT }}>{stripCells}</FlexWidget>
+      ) : null}
+      {strip ? <Spacer size={WEEK_GAP} /> : null}
+      <FlexWidget
+        style={{
+          flexDirection: 'row',
+          width: 'match_parent',
+          height: gridHeight + 1,
+          borderTopWidth: 1,
+          borderTopColor: p.border,
+        }}
+      >
+        {gridColumns}
+      </FlexWidget>
+    </Surface>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Month (4x4)
+
+const MONTH_PAD = 8;
+const MONTH_LABEL_HEIGHT = 18;
+const MONTH_GRID_TOP = 4;
+const MONTH_CHIP_HEIGHT = 24;
+const MONTH_CELL_MIN = 30;
+const MONTH_CELL_MAX = 48;
+/** Rule above the chips: 6dp margin, 1dp border, 6dp padding. */
+const MONTH_CHIPS_TOP = 13;
+const MONTH_CHIPS_BOTTOM = 8;
+
+function NavButton({ p, iconName }: { p: WidgetPalette; iconName: IconName }) {
+  return (
+    <FlexWidget
+      {...open(links.calendar())}
+      style={{ width: 32, height: 32, borderRadius: 6, justifyContent: 'center', alignItems: 'center' }}
+    >
+      <Icon name={iconName} color={p.fg} size={16} />
+    </FlexWidget>
+  );
+}
+
+function MonthDay({
+  p,
+  cell,
+  width,
+  height,
+  circle,
+  showDots,
+}: {
+  p: WidgetPalette;
+  cell: MonthCell;
+  width: number;
+  height: number;
+  circle: number;
+  showDots: boolean;
+}) {
+  const color = cell.isToday ? p.primaryFg : cell.inMonth ? p.fg : withAlpha(p.muted, 'b3');
+  const dots: React.JSX.Element[] = [];
+  if (showDots) {
+    cell.dots.forEach((c, i) => {
+      if (i > 0) dots.push(<Spacer key={`g-${i}`} size={3} horizontal />);
+      dots.push(<Dot key={`d-${i}`} color={normalizeHex(c)} size={6} />);
+    });
+  }
+  return (
+    <FlexWidget {...open(links.calendar())} style={{ width, height, alignItems: 'center' }}>
+      <FlexWidget
+        style={{
+          width: circle,
+          height: circle,
+          borderRadius: circle / 2,
+          justifyContent: 'center',
+          alignItems: 'center',
+          ...(cell.isToday ? { backgroundColor: p.primary } : {}),
+        }}
+      >
+        <TextWidget
+          text={String(cell.day)}
+          maxLines={1}
+          allowFontScaling={false}
+          style={{ color, fontSize: circle >= 22 ? 14 : 13, fontWeight: cell.isToday ? '700' : '400' }}
+        />
+      </FlexWidget>
+      {dots.length > 0 ? <Spacer size={3} /> : null}
+      {dots.length > 0 ? <FlexWidget style={{ flexDirection: 'row' }}>{dots}</FlexWidget> : null}
+    </FlexWidget>
+  );
+}
+
+export const MonthLayout: Layout = ({ s, p, f, now, width, height }) => {
+  if (!s.calendar.supported) return <Unsupported p={p} f={f} />;
+  const weeks = monthGrid(s.calendar.events, now, s.weekStart);
+  const next = upcoming(s.calendar.events, now);
+  const headerHeight = height >= 340 ? 44 : 38;
+  const cellWidth = (width - 2 * FRAME - 2 * MONTH_PAD) / 7;
+  const chipsHeight = (n: number) =>
+    n === 0 ? 0 : MONTH_CHIPS_TOP + n * MONTH_CHIP_HEIGHT + (n - 1) * 4 + MONTH_CHIPS_BOTTOM;
+  const gridRoom = (n: number) =>
+    height - 2 * FRAME - headerHeight - MONTH_LABEL_HEIGHT - MONTH_GRID_TOP - chipsHeight(n);
+  // Two chips when the weeks still get a comfortable row, else one, else none.
+  let chips = Math.min(2, next.length);
+  while (chips > 0 && gridRoom(chips) / weeks.length < MONTH_CELL_MIN) chips -= 1;
+  const cellHeight = Math.max(18, Math.min(MONTH_CELL_MAX, Math.floor(gridRoom(chips) / weeks.length)));
+  const circle = Math.min(26, Math.max(16, cellHeight - 12));
+  const showDots = cellHeight - circle >= 8;
+
+  const chipRows: React.JSX.Element[] = [];
+  next.slice(0, chips).forEach((e, i) => {
+    if (i > 0) chipRows.push(<Spacer key={`g-${i}`} size={4} />);
+    chipRows.push(
+      <EventChip
+        key={e.id}
+        title={eventTitle(f, e)}
+        time={chipTime(f, e, now)}
+        color={e.color}
+        height={MONTH_CHIP_HEIGHT}
+        click={open(links.event(e))}
+      />,
+    );
+  });
+
+  return (
+    <Surface p={p}>
+      <FlexWidget
+        {...open(links.calendar())}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          width: 'match_parent',
+          height: headerHeight,
+          paddingLeft: 16,
+          paddingRight: 8,
+        }}
+      >
+        <FlexWidget style={{ flex: 1 }}>
+          <Txt text={monthYear(f, now)} color={p.fg} size={16} weight="600" />
+        </FlexWidget>
+        <NavButton p={p} iconName="chevronLeft" />
+        <Spacer size={4} horizontal />
+        <NavButton p={p} iconName="chevronRight" />
+      </FlexWidget>
+      <FlexWidget style={{ flexDirection: 'row', width: 'match_parent', height: MONTH_LABEL_HEIGHT, paddingHorizontal: MONTH_PAD }}>
+        {weeks[0].map((cell) => (
+          <FlexWidget
+            key={`wd-${cell.dayStart}`}
+            style={{ width: cellWidth, height: MONTH_LABEL_HEIGHT, justifyContent: 'center', alignItems: 'center' }}
+          >
+            <Txt text={f.weekdayShort(cell.dayStart)} color={p.muted} size={12} />
+          </FlexWidget>
+        ))}
+      </FlexWidget>
+      <Spacer size={MONTH_GRID_TOP} />
+      {weeks.map((week) => (
+        <FlexWidget
+          key={`week-${week[0].dayStart}`}
+          style={{ flexDirection: 'row', width: 'match_parent', height: cellHeight, paddingHorizontal: MONTH_PAD }}
+        >
+          {week.map((cell) => (
+            <MonthDay
+              key={`day-${cell.dayStart}`}
+              p={p}
+              cell={cell}
+              width={cellWidth}
+              height={cellHeight}
+              circle={circle}
+              showDots={showDots}
+            />
+          ))}
+        </FlexWidget>
+      ))}
+      {chipRows.length > 0 ? (
+        <FlexWidget
+          style={{
+            width: 'match_parent',
+            marginTop: 6,
+            borderTopWidth: 1,
+            borderTopColor: p.border,
+            paddingTop: 6,
+            paddingHorizontal: 14,
+          }}
+        >
+          {chipRows}
+        </FlexWidget>
+      ) : null}
+    </Surface>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Today (4x2)
+
+const TODAY_PAD = 14;
+const TODAY_CHIP = 24;
+const TODAY_GAP = 4;
+const TODAY_LINE = 16;
+/** 6dp extra space, the "Tomorrow" label and one chip, with their gaps. */
+const TOMORROW_BLOCK = 6 + TODAY_GAP + TODAY_LINE + TODAY_GAP + TODAY_CHIP;
+
+function chipLabel(f: Fmt, e: EventItem): string {
+  return e.allDay ? f.t('widgets.calendar.all_day', 'All day') : f.time(e.start);
+}
+
+function TodayColumn({
+  s,
+  p,
+  f,
+  now,
+  height,
+}: {
+  s: WidgetSnapshot;
+  p: WidgetPalette;
+  f: Fmt;
+  now: number;
+  height: number;
+}) {
+  if (!s.calendar.supported) {
+    return (
+      <FlexWidget style={{ flex: 1, height: 'match_parent' }}>
+        <Placeholder p={p} iconName="calendar" title={unsupportedText(f)} />
+      </FlexWidget>
+    );
+  }
+  const events = s.calendar.events;
+  const today = startOfDay(now);
+  const todayList = eventsOnDay(events, today).filter((e) => e.allDay || e.end > now);
+  const tomorrowList = eventsOnDay(events, addDays(today, 1));
+
+  // The "N more this week" line is always reserved; chips share the rest.
+  const room = height - 2 * FRAME - 2 * TODAY_PAD - TODAY_LINE;
+  const row = TODAY_CHIP + TODAY_GAP;
+  let withTomorrow = tomorrowList.length > 0;
+  let slots = Math.floor((room - (withTomorrow ? TOMORROW_BLOCK : 0) + TODAY_GAP) / row);
+  if (slots < 1 && withTomorrow && todayList.length > 0) {
+    withTomorrow = false;
+    slots = Math.floor((room + TODAY_GAP) / row);
+  }
+  const shown = todayList.slice(0, Math.max(1, slots));
+
+  const shownIds = new Set(shown.map((e) => e.id));
+  if (withTomorrow) shownIds.add(tomorrowList[0].id);
+  const weekEnd = addDays(startOfWeek(now, s.weekStart), 7);
+  const rest = new Set<string>();
+  for (let day = today; day < weekEnd; day = addDays(day, 1)) {
+    for (const e of eventsOnDay(events, day)) {
+      if (day === today && !e.allDay && e.end <= now) continue;
+      if (!shownIds.has(e.id)) rest.add(e.id);
+    }
+  }
+  const more = rest.size;
+
+  if (todayList.length === 0 && tomorrowList.length === 0 && more === 0) {
+    return (
+      <FlexWidget style={{ flex: 1, height: 'match_parent' }}>
+        <Placeholder
+          p={p}
+          iconName="calendarPlain"
+          title={f.t('widgets.calendar.no_more_today', 'No more events today')}
+          click={open(links.calendar())}
+        />
+      </FlexWidget>
+    );
+  }
+
+  const items: React.JSX.Element[] = [];
+  if (shown.length === 0) {
+    items.push(
+      <Txt key="none" text={f.t('widgets.calendar.no_more_today', 'No more events today')} color={p.muted} size={12} />,
+    );
+  }
+  shown.forEach((e, i) => {
+    if (i > 0) items.push(<Spacer key={`g-${i}`} size={TODAY_GAP} />);
+    items.push(
+      <EventChip
+        key={e.id}
+        title={eventTitle(f, e)}
+        time={chipLabel(f, e)}
+        color={e.color}
+        height={TODAY_CHIP}
+        click={open(links.event(e))}
+      />,
+    );
+  });
+  if (withTomorrow) {
+    const e = tomorrowList[0];
+    items.push(<Spacer key="tomorrow-gap" size={6 + TODAY_GAP} />);
+    items.push(
+      <Txt key="tomorrow" text={f.t('widgets.calendar.tomorrow', 'Tomorrow')} color={p.fg} size={12} weight="600" />,
+    );
+    items.push(<Spacer key="tomorrow-gap-2" size={TODAY_GAP} />);
+    items.push(
+      <EventChip
+        key={`tomorrow-${e.id}`}
+        title={eventTitle(f, e)}
+        time={chipLabel(f, e)}
+        color={e.color}
+        height={TODAY_CHIP}
+        click={open(links.event(e))}
+      />,
+    );
+  }
+  return (
+    <FlexWidget style={{ flex: 1, height: 'match_parent' }}>
+      {items}
+      <Spacer />
+      {more > 0 ? (
+        <Txt
+          text={f.t('widgets.calendar.more_this_week', '{count, plural, one {# more this week} other {# more this week}}', {
+            count: more,
+          })}
+          color={p.muted}
+          size={12}
+        />
+      ) : null}
+    </FlexWidget>
+  );
+}
+
+export const TodayEventsLayout: Layout = ({ s, p, f, now, height }) => {
+  // The date block is ~108dp tall at 40sp; a short 4x2 gets a smaller number
+  // and, if still tight, loses the month line.
+  const room = height - 2 * FRAME - 2 * TODAY_PAD;
+  const big = room >= 108 ? 40 : 32;
+  const showMonth = room >= 3 * 18 + Math.ceil(big * 1.33);
+  return (
+    <Surface p={p} style={{ padding: TODAY_PAD, flexDirection: 'row' }}>
+      <FlexWidget {...open(links.calendar())} style={{ width: 76, height: 'match_parent' }}>
+        <Txt text={f.t('widgets.calendar.today', 'Today')} color={p.today} size={13} weight="600" />
+        <Txt text={String(new Date(now).getDate())} color={p.fg} size={big} weight="600" />
+        <Txt text={f.weekdayLong(now)} color={p.muted} size={13} />
+        {showMonth ? <Txt text={f.monthLong(now)} color={p.muted} size={13} /> : null}
+      </FlexWidget>
+      <Spacer size={14} horizontal />
+      <TodayColumn s={s} p={p} f={f} now={now} height={height} />
+    </Surface>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Next event (2x2)
+
+export const NextEventLayout: Layout = ({ s, p, f, now, height }) => {
+  if (!s.calendar.supported) return <Unsupported p={p} f={f} />;
+  const next = nextEvent(s.calendar.events, now);
+  if (!next) return <NothingPlanned p={p} f={f} />;
+  const { event: e, running } = next;
+  const when = running ? f.t('widgets.calendar.now', 'Now') : capitalize(f.relative(e.start, now), f.locale);
+  // Status line, gap, one title line and the time range always show; then the
+  // place, the calendar and a second title line, as long as they fit.
+  const room = height - 2 * FRAME - 28;
+  let used = 16 + 6 + 22 + 18;
+  const place = placeOf(f, e);
+  const showPlace = !!place && used + 16 <= room;
+  if (showPlace) used += 16;
+  const showCalendar = !!e.calendarName && used + 16 + (showPlace ? 2 : 0) <= room;
+  if (showCalendar) used += 16 + (showPlace ? 2 : 0);
+  const titleLines = used + 22 <= room ? 2 : 1;
+  return (
+    <Surface p={p} style={{ padding: 14 }} click={open(links.event(e))}>
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Icon name="clock" color={p.today} size={14} />
+        <Spacer size={5} horizontal />
+        <Txt text={when} color={p.today} size={12} weight="600" />
+      </FlexWidget>
+      <Spacer size={6} />
+      <Txt text={eventTitle(f, e)} color={p.fg} size={16} weight="600" lines={titleLines} />
+      <Txt text={whenRange(f, e, now)} color={p.muted} size={13} />
+      <Spacer />
+      {showPlace && place ? (
+        <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Icon name={place.icon} color={p.muted} size={12} />
+          <Spacer size={4} horizontal />
+          <Txt text={place.text} color={p.muted} size={12} />
+        </FlexWidget>
+      ) : null}
+      {showPlace && showCalendar ? <Spacer size={2} /> : null}
+      {showCalendar ? (
+        <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Dot color={normalizeHex(e.color)} size={8} />
+          <Spacer size={6} horizontal />
+          <Txt text={e.calendarName} color={p.muted} size={12} />
+        </FlexWidget>
+      ) : null}
+    </Surface>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Date and next two (2x2)
+
+const DATE_PAD = 12;
+const DATE_CIRCLE = 36;
+const DATE_CHIP = 36;
+
+function TwoLineChip({ f, e, now }: { f: Fmt; e: EventItem; now: number }) {
+  const color = normalizeHex(e.color);
+  return (
+    <FlexWidget
+      {...open(links.event(e))}
+      style={{
+        width: 'match_parent',
+        height: DATE_CHIP,
+        justifyContent: 'center',
+        paddingHorizontal: 6,
+        borderRadius: 3,
+        backgroundColor: chipBackground(color),
+        borderLeftWidth: 3,
+        borderLeftColor: color,
+      }}
+    >
+      <Txt text={eventTitle(f, e)} color={color} size={12} weight="600" />
+      <Txt text={chipTime(f, e, now)} color={`${color}cc` as ColorProp} size={11} />
+    </FlexWidget>
+  );
+}
+
+export const DateNextLayout: Layout = ({ s, p, f, now, height }) => {
+  const room = height - 2 * FRAME - 2 * DATE_PAD - DATE_CIRCLE - 8;
+  const count = room >= 2 * DATE_CHIP + 4 ? 2 : 1;
+  const next = s.calendar.supported ? upcoming(s.calendar.events, now).slice(0, count) : [];
+  const chips: React.JSX.Element[] = [];
+  next.forEach((e, i) => {
+    if (i > 0) chips.push(<Spacer key={`g-${i}`} size={4} />);
+    chips.push(<TwoLineChip key={e.id} f={f} e={e} now={now} />);
+  });
+  return (
+    <Surface p={p} style={{ padding: DATE_PAD }} click={open(links.calendar())}>
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
+        <FlexWidget
+          style={{
+            width: DATE_CIRCLE,
+            height: DATE_CIRCLE,
+            borderRadius: DATE_CIRCLE / 2,
+            backgroundColor: p.primary,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <TextWidget
+            text={String(new Date(now).getDate())}
+            allowFontScaling={false}
+            style={{ color: p.primaryFg, fontSize: 16, fontWeight: '700' }}
+          />
+        </FlexWidget>
+        <Spacer size={8} horizontal />
+        <FlexWidget style={{ flex: 1 }}>
+          <Txt text={f.weekdayLong(now)} color={p.fg} size={13} weight="600" />
+          <Txt text={f.monthLong(now)} color={p.muted} size={12} />
+        </FlexWidget>
+      </FlexWidget>
+      <Spacer />
+      {chips.length > 0 ? chips : (
+        <Txt
+          text={s.calendar.supported ? nothingText(f) : unsupportedText(f)}
+          color={p.muted}
+          size={12}
+          lines={2}
+        />
+      )}
+    </Surface>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Up next (4x2)
+
+interface Countdown {
+  value: string;
+  unit: string;
+  /** Share of the ring to fill: minutes to go out of an hour. */
+  fraction: number;
+}
+
+function countdown(f: Fmt, e: EventItem, now: number, running: boolean): Countdown {
+  const minutes = Math.round((e.start - now) / 60000);
+  if (running || minutes <= 0) return { value: f.t('widgets.calendar.now', 'Now'), unit: '', fraction: 0 };
+  if (minutes < 60) {
+    return {
+      value: String(minutes),
+      unit: f.t('widgets.calendar.unit_minutes', '{count, plural, one {min} other {min}}', { count: minutes }),
+      fraction: minutes / 60,
+    };
+  }
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) {
+    return {
+      value: String(hours),
+      unit: f.t('widgets.calendar.unit_hours', '{count, plural, one {hour} other {hours}}', { count: hours }),
+      fraction: 1,
+    };
+  }
+  const days = daysUntil(e.start, now);
+  return {
+    value: String(days),
+    unit: f.t('widgets.calendar.unit_days', '{count, plural, one {day} other {days}}', { count: days }),
+    fraction: 1,
+  };
+}
+
+function People({ p, e }: { p: WidgetPalette; e: EventItem }) {
+  const faces = e.participants.slice(0, 3);
+  return (
+    <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+      {faces.map((person, i) => (
+        <FlexWidget key={`${person.email}-${i}`} style={{ marginLeft: i === 0 ? 0 : -7 }}>
+          <Avatar initials={person.initials} color={person.color} size={22} ring={p.bg} />
+        </FlexWidget>
+      ))}
+      <Spacer size={6} horizontal />
+      <Icon name="users" color={p.muted} size={13} />
+      <Spacer size={3} horizontal />
+      <Txt text={String(e.participants.length)} color={p.muted} size={12} />
+    </FlexWidget>
+  );
+}
+
+export const UpNextLayout: Layout = ({ s, p, f, now }) => {
+  if (!s.calendar.supported) return <Unsupported p={p} f={f} />;
+  const next = nextEvent(s.calendar.events, now);
+  if (!next) return <NothingPlanned p={p} f={f} />;
+  const { event: e, running } = next;
+  const title = eventTitle(f, e);
+  const left = countdown(f, e, now, running);
+  const meta = [whenRange(f, e, now), e.calendarName].filter(Boolean).join(' · ');
+
+  const self = selfAddresses(s);
+  const recipients = Array.from(
+    new Set(e.participants.map((x) => x.email.trim()).filter((x) => x && !self.has(x.toLowerCase()))),
+  );
+  const late = links.compose({
+    to: recipients.length > 0 ? recipients.join(',') : undefined,
+    subject: f.t('widgets.calendar.running_late_subject', 'Running late: {title}', { title }),
+    body: f.t('widgets.calendar.running_late_body', "I'm running a few minutes late for {title}.", { title }),
+  });
+  const joinLabel = e.videoName && e.videoName.length <= 12
+    ? f.t('widgets.calendar.join_named', 'Join {name}', { name: e.videoName })
+    : f.t('widgets.calendar.join', 'Join');
+
+  return (
+    <Surface p={p} style={{ padding: 14 }}>
+      <FlexWidget {...open(links.event(e))} style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
+        <OverlapWidget style={{ width: 64, height: 64 }}>
+          <SvgWidget svg={ring(left.fraction, p.border, p.primary, 5)} style={{ width: 64, height: 64 }} />
+          <FlexWidget style={{ width: 64, height: 64, justifyContent: 'center', alignItems: 'center' }}>
+            <TextWidget
+              text={left.value}
+              maxLines={1}
+              allowFontScaling={false}
+              style={{ color: p.fg, fontSize: left.value.length > 3 ? 13 : 18, fontWeight: '700' }}
+            />
+            {left.unit ? (
+              <TextWidget text={left.unit} maxLines={1} allowFontScaling={false} style={{ color: p.muted, fontSize: 11 }} />
+            ) : null}
+          </FlexWidget>
+        </OverlapWidget>
+        <Spacer size={14} horizontal />
+        <FlexWidget style={{ flex: 1 }}>
+          <Txt text={title} color={p.fg} size={16} weight="600" />
+          <Spacer size={2} />
+          <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <Dot color={normalizeHex(e.color)} size={8} />
+            <Spacer size={6} horizontal />
+            <Txt text={meta} color={p.muted} size={13} />
+          </FlexWidget>
+          {e.participants.length > 0 ? <Spacer size={6} /> : null}
+          {e.participants.length > 0 ? <People p={p} e={e} /> : null}
+        </FlexWidget>
+      </FlexWidget>
+      <Spacer />
+      <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
+        {e.videoUrl ? (
+          <Button p={p} variant="primary" iconName="video" label={joinLabel} height={36} flex={1} click={open(e.videoUrl)} />
+        ) : (
+          <Button p={p} iconName="calendar" label={f.t('widgets.calendar.open', 'Open')} height={36} flex={1} click={open(links.event(e))} />
+        )}
+        <Spacer size={8} horizontal />
+        <Button
+          p={p}
+          iconName="send"
+          label={f.t('widgets.calendar.running_late', 'Running late')}
+          height={36}
+          flex={1}
+          click={open(late)}
+        />
+      </FlexWidget>
+    </Surface>
+  );
+};
diff --git a/src/widgets/layouts/hubs.tsx b/src/widgets/layouts/hubs.tsx
new file mode 100644
index 00000000..b205a6ce
--- /dev/null
+++ b/src/widgets/layouts/hubs.tsx
@@ -0,0 +1,806 @@
+// Board 4, "Hubs and account": the whole day in one tile, mail next to the
+// next event, recent files and mail attachments, and account status (the
+// vacation responder switch and the quota ring).
+
+import React from 'react';
+import { FlexWidget, SvgWidget, TextWidget } from 'react-native-android-widget';
+import { action, links, open, type WidgetClick } from '../clicks';
+import { dueKind, nextEvent, sortTasks, tasksDueNow, upcomingTimed } from '../derive';
+import { addDays, sameDay, startOfDay, type Fmt } from '../format';
+import { ring, type IconName } from '../icons';
+import { AGENDA_ROW_HEIGHT, AgendaRow, MAIL_ROW_HEIGHT, MailRow } from '../parts';
+import {
+  Divider,
+  EventChip,
+  GhostIcon,
+  Header,
+  Icon,
+  Overlay,
+  Pill,
+  Placeholder,
+  SectionLabel,
+  Spacer,
+  Surface,
+  Txt,
+  WIDGET_RADIUS,
+} from '../primitives';
+import type { AttachmentGroup, EventItem, FileItem, TaskItem, WidgetSnapshot } from '../snapshot';
+import type { WidgetPalette } from '../theme';
+import type { Layout } from './types';
+
+// File-type colours of the webmail's file list and attachment chips. They are
+// the same in both themes, like the Tailwind classes they copy.
+const TYPE_COLOR = {
+  folder: '#3b82f6',
+  spreadsheet: '#16a34a',
+  presentation: '#ea580c',
+  image: '#8b5cf6',
+  pdf: '#ef4444',
+} as const;
+
+const IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif', 'heic', 'heif']);
+const SPREADSHEET_EXTENSIONS = new Set(['xls', 'xlsx', 'ods', 'numbers', 'csv', 'tsv']);
+const PRESENTATION_EXTENSIONS = new Set(['ppt', 'pptx', 'odp', 'key']);
+
+function extension(name: string): string {
+  const dot = name.lastIndexOf('.');
+  return dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
+}
+
+function inboxUnread(s: WidgetSnapshot): number {
+  return s.mail.folders.find((x) => x.role === 'inbox')?.unread ?? 0;
+}
+
+/** Rough rendered width of a single line, for deciding what fits in a row. */
+function textWidth(text: string, size: number, factor = 0.56): number {
+  return Math.ceil(text.length * size * factor);
+}
+
+/** f.bytes without a trailing ".0" ("5 GB", not "5.0 GB"), as the webmail prints sizes. */
+function size(f: Fmt, n: number): string {
+  return f.bytes(n).replace(/\.0 /, ' ');
+}
+
+function capitalize(text: string): string {
+  return text ? text.charAt(0).toUpperCase() + text.slice(1) : text;
+}
+
+/** "Monday, Sep 28, 2026" in the app's language. */
+function longDate(f: Fmt, ms: number): string {
+  try {
+    return new Intl.DateTimeFormat(f.locale, { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
+      .format(new Date(ms));
+  } catch {
+    return `${f.weekdayLong(ms)}, ${f.fullDate(ms)}`;
+  }
+}
+
+/** Short date, with the year only when it is not this year. */
+function shortDate(f: Fmt, ms: number, now: number): string {
+  return new Date(ms).getFullYear() === new Date(now).getFullYear() ? f.dayMonth(ms) : f.fullDate(ms);
+}
+
+/** Start time of an event, prefixed with the weekday when it is not today ("Tue 10:00"). */
+function startLabel(f: Fmt, e: EventItem, now: number): string {
+  return sameDay(e.start, now) ? f.time(e.start) : `${f.weekdayShort(e.start)} ${f.time(e.start)}`;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Today hub                                                                */
+/* ------------------------------------------------------------------------ */
+
+const HUB_HEADER_HEIGHT = 44;
+/** SectionLabel: 11sp line plus 8 + 4 padding. */
+const SECTION_LABEL_HEIGHT = 28;
+const HUB_TASK_HEIGHT = 32;
+
+/**
+ * Tasks for the hub: open tasks that are overdue or due today (sorted like the
+ * task list), then tasks ticked off that were due today, so a tick made from
+ * the widget stays visible until the day moves on.
+ */
+function hubTasks(items: TaskItem[], now: number): { list: TaskItem[]; open: number } {
+  const open = sortTasks(tasksDueNow(items.filter((t) => !t.done), now), now);
+  const doneToday = items.filter((t) => t.done && t.due !== undefined && sameDay(t.due, now));
+  return { list: [...open, ...doneToday], open: open.length };
+}
+
+function HubTaskLine({ p, f, task, now }: { p: WidgetPalette; f: Fmt; task: TaskItem; now: number }) {
+  const kind = task.done ? 'today' : dueKind(task, now);
+  const dueColor = task.done
+    ? p.muted
+    : kind === 'overdue'
+      ? p.overdue
+      : kind === 'today'
+        ? p.dueToday
+        : p.muted;
+  const dueLabel = task.due === undefined
+    ? ''
+    : kind === 'overdue'
+      ? f.t('widgets.tasks.overdue', 'Overdue')
+      : kind === 'today'
+        ? f.t('widgets.tasks.today', 'Today')
+        : '';
+  return (
+    <FlexWidget
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: 'match_parent',
+        height: HUB_TASK_HEIGHT,
+        paddingLeft: 8,
+        paddingRight: 14,
+      }}
+    >
+      {/* 32dp touch target around the 20dp box, which sits at the 14dp inset. */}
+      <FlexWidget
+        {...action('toggleTask', { id: task.id })}
+        accessibilityLabel={task.done ? f.t('widgets.tasks.mark_incomplete', 'Mark as not done') : f.t('widgets.tasks.mark_complete', 'Mark as done')}
+        style={{ width: 32, height: 32, justifyContent: 'center', alignItems: 'center' }}
+      >
+        <FlexWidget
+          style={{
+            width: 20,
+            height: 20,
+            borderRadius: 10,
+            borderWidth: 2,
+            borderColor: task.done ? p.success : (`${p.muted}66` as `#${string}`),
+            backgroundColor: task.done ? p.success : p.bg,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {task.done ? <Icon name="check" color="#ffffff" size={12} /> : null}
+        </FlexWidget>
+      </FlexWidget>
+      <Spacer size={6} horizontal />
+      <FlexWidget style={{ flex: 1 }}>
+        <Txt text={task.title || f.t('widgets.tasks.no_title', '(no title)')} color={task.done ? p.muted : p.fg} size={14} weight="500" />
+      </FlexWidget>
+      {dueLabel ? <Spacer size={8} horizontal /> : null}
+      {dueLabel ? <Txt text={dueLabel} color={dueColor} size={12} /> : null}
+    </FlexWidget>
+  );
+}
+
+export const TodayHubLayout: Layout = ({ s, p, f, now, height }) => {
+  const next = s.calendar.supported ? nextEvent(s.calendar.events, now) : null;
+  const unreadMail = s.mail.inbox.filter((m) => m.unread);
+  const unreadCount = Math.max(inboxUnread(s), unreadMail.length);
+  const tasks = s.tasks.supported ? hubTasks(s.tasks.items, now) : { list: [], open: 0 };
+
+  // Each section first gets its label and one row, in order; what is left
+  // then goes to a second message and more tasks in turn.
+  let budget = height - 2 - HUB_HEADER_HEIGHT;
+  const nextCost = SECTION_LABEL_HEIGHT + AGENDA_ROW_HEIGHT;
+  const showNext = !!next && budget >= nextCost;
+  if (showNext) budget -= nextCost;
+  let mailRows = 0;
+  const mailCost = SECTION_LABEL_HEIGHT + 1 + MAIL_ROW_HEIGHT.compact;
+  if (unreadMail.length > 0 && budget >= mailCost) {
+    mailRows = 1;
+    budget -= mailCost;
+  }
+  let taskRows = 0;
+  const taskCost = SECTION_LABEL_HEIGHT + HUB_TASK_HEIGHT;
+  if (tasks.open > 0 && budget >= taskCost) {
+    taskRows = 1;
+    budget -= taskCost;
+  }
+  const mailMax = Math.min(2, unreadMail.length);
+  const taskMax = Math.min(3, tasks.list.length);
+  let grew = true;
+  while (grew) {
+    grew = false;
+    if (mailRows > 0 && mailRows < mailMax && budget >= MAIL_ROW_HEIGHT.compact) {
+      mailRows++;
+      budget -= MAIL_ROW_HEIGHT.compact;
+      grew = true;
+    }
+    if (taskRows > 0 && taskRows < taskMax && budget >= HUB_TASK_HEIGHT) {
+      taskRows++;
+      budget -= HUB_TASK_HEIGHT;
+      grew = true;
+    }
+  }
+
+  let nextLabel = '';
+  if (next) {
+    const start = next.event.start;
+    const tomorrow = sameDay(start, addDays(startOfDay(now), 1));
+    nextLabel = next.running
+      ? f.t('widgets.hub.now', 'Now')
+      : sameDay(start, now)
+        ? f.t('widgets.hub.next', 'Next')
+        : f.t('widgets.hub.next_on', 'Next · {day}', {
+          day: tomorrow ? f.t('widgets.calendar.tomorrow', 'Tomorrow') : f.weekdayDayMonth(start),
+        });
+  }
+  const mail = unreadMail.slice(0, mailRows);
+  const taskList = tasks.list.slice(0, taskRows);
+  const empty = !showNext && mailRows === 0 && taskRows === 0;
+
+  return (
+    <Surface p={p}>
+      <FlexWidget {...open(links.calendar())} style={{ width: 'match_parent' }}>
+        <FlexWidget
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: 'match_parent',
+            height: HUB_HEADER_HEIGHT - 1,
+            paddingHorizontal: 14,
+          }}
+        >
+          <Txt text={f.t('widgets.calendar.today', 'Today')} color={p.today} size={14} weight="600" />
+          <Spacer size={8} horizontal />
+          <FlexWidget style={{ flex: 1 }}>
+            <Txt text={longDate(f, now)} color={p.muted} size={12} />
+          </FlexWidget>
+        </FlexWidget>
+        <Divider p={p} />
+      </FlexWidget>
+      {empty ? (
+        <Placeholder p={p} iconName="check" title={f.t('widgets.hub.all_clear', "You're all caught up")} click={open(links.calendar())} />
+      ) : null}
+      {showNext && next ? (
+        <FlexWidget style={{ width: 'match_parent' }}>
+          <FlexWidget {...open(links.calendar())} style={{ width: 'match_parent' }}>
+            <SectionLabel p={p} text={nextLabel} />
+          </FlexWidget>
+          <AgendaRow p={p} f={f} e={next.event} last={mailRows === 0 && taskRows === 0} />
+        </FlexWidget>
+      ) : null}
+      {mailRows > 0 ? (
+        <FlexWidget style={{ width: 'match_parent' }}>
+          <FlexWidget {...open(links.inbox())} style={{ width: 'match_parent' }}>
+            <SectionLabel p={p} text={f.t('widgets.hub.mail_unread', 'Mail · {count} unread', { count: unreadCount })} />
+          </FlexWidget>
+          <Divider p={p} />
+          {mail.map((m, i) => (
+            <MailRow key={m.id} p={p} f={f} m={m} now={now} compact last={taskRows === 0 && i === mail.length - 1} />
+          ))}
+        </FlexWidget>
+      ) : null}
+      {taskRows > 0 ? (
+        <FlexWidget style={{ width: 'match_parent' }}>
+          <SectionLabel p={p} text={f.t('widgets.hub.tasks_due', 'Tasks · {count} due', { count: tasks.open })} />
+          {taskList.map((task) => (
+            <HubTaskLine key={task.id} p={p} f={f} task={task} now={now} />
+          ))}
+        </FlexWidget>
+      ) : null}
+    </Surface>
+  );
+};
+
+/* ------------------------------------------------------------------------ */
+/* Mail and next event                                                      */
+/* ------------------------------------------------------------------------ */
+
+export const MailAndNextLayout: Layout = ({ s, p, f, now, height }) => {
+  const tight = height < 140;
+  const pad = tight ? 10 : 14;
+  const unreadMail = s.mail.inbox.filter((m) => m.unread);
+  const unread = Math.max(inboxUnread(s), unreadMail.length);
+  const latest = unreadMail[0];
+  const digits = String(unread).length;
+  const big = (tight ? 28 : 36) - (digits >= 4 ? 8 : 0);
+
+  const upcoming = s.calendar.supported ? upcomingTimed(s.calendar.events, now) : [];
+  const event = upcoming[0];
+  const following = upcoming[1];
+  const running = !!event && event.start <= now;
+  const when = event ? (running ? f.t('widgets.hub.now', 'Now') : capitalize(f.relative(event.start, now))) : '';
+  const range = event
+    ? `${sameDay(event.start, now) ? '' : `${f.weekdayShort(event.start)} `}${f.time(event.start)} – ${f.time(event.end)}`
+    : '';
+
+  return (
+    <Surface p={p} style={{ flexDirection: 'row' }}>
+      <FlexWidget
+        {...open(links.inbox())}
+        style={{
+          width: 0,
+          flex: 1,
+          height: 'match_parent',
+          padding: pad,
+          backgroundColor: unread > 0 ? p.unreadRow : p.bg,
+          borderTopLeftRadius: WIDGET_RADIUS - 1,
+          borderBottomLeftRadius: WIDGET_RADIUS - 1,
+        }}
+      >
+        <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Icon name="inbox" color={p.folder.inbox} size={16} />
+          <Spacer size={6} horizontal />
+          <Txt text={f.t('widgets.mail.inbox', 'Inbox')} color={p.fg} size={14} weight="600" />
+        </FlexWidget>
+        <FlexWidget style={{ flexDirection: 'row', alignItems: 'flex-end', marginTop: 4 }}>
+          <TextWidget text={String(unread)} maxLines={1} style={{ color: p.fg, fontSize: big, fontWeight: '700' }} />
+          <Spacer size={4} horizontal />
+          {/* Lines the small label up with the big number's baseline. */}
+          <Txt
+            text={f.t('widgets.mail.unread', 'unread')}
+            color={p.muted}
+            size={13}
+            style={{ paddingBottom: Math.round((big - 13) * 0.27) }}
+          />
+        </FlexWidget>
+        <Spacer />
+        {latest ? (
+          <FlexWidget {...open(links.message(latest))} style={{ width: 'match_parent' }}>
+            <Txt text={latest.fromName || latest.fromEmail} color={p.fg} size={14} weight="700" />
+            <Txt text={latest.subject || f.t('widgets.mail.no_subject', '(no subject)')} color={p.fg} size={13} weight="600" />
+          </FlexWidget>
+        ) : (
+          <Txt text={f.t('widgets.mail.all_caught_up', 'All caught up')} color={p.muted} size={13} />
+        )}
+      </FlexWidget>
+      <FlexWidget style={{ width: 1, height: 'match_parent', backgroundColor: p.border }} />
+      <FlexWidget
+        {...open(event ? links.event(event) : links.calendar())}
+        style={{ width: 0, flex: 1, height: 'match_parent', padding: pad }}
+      >
+        {event ? (
+          <FlexWidget style={{ width: 'match_parent', flex: 1 }}>
+            <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Icon name="clock" color={p.today} size={14} />
+              <Spacer size={5} horizontal />
+              <Txt text={when} color={p.today} size={13} weight="600" />
+            </FlexWidget>
+            <Spacer size={tight ? 4 : 8} />
+            <Txt
+              text={event.title || f.t('widgets.calendar.untitled', '(no title)')}
+              color={p.fg}
+              size={15}
+              weight="600"
+              lines={following || tight ? 1 : 2}
+            />
+            <Txt text={range} color={p.muted} size={13} />
+            <Spacer />
+            {following ? (
+              <EventChip
+                title={following.title || f.t('widgets.calendar.untitled', '(no title)')}
+                time={startLabel(f, following, now)}
+                color={following.color}
+                click={open(links.event(following))}
+              />
+            ) : null}
+          </FlexWidget>
+        ) : (
+          <FlexWidget style={{ width: 'match_parent', flex: 1 }}>
+            <Icon name="clock" color={p.muted} size={14} />
+            <Spacer size={8} />
+            <Txt text={f.t('widgets.hub.no_events', 'No upcoming events')} color={p.muted} size={13} lines={2} />
+          </FlexWidget>
+        )}
+      </FlexWidget>
+    </Surface>
+  );
+};
+
+/* ------------------------------------------------------------------------ */
+/* Recent files                                                             */
+/* ------------------------------------------------------------------------ */
+
+const FILE_ROW_HEIGHT = 42;
+const FILE_ROW_MIN_HEIGHT = 34;
+
+function fileIcon(item: FileItem, p: WidgetPalette): { name: IconName; color: string } {
+  if (item.isFolder) return { name: 'folder', color: TYPE_COLOR.folder };
+  const ext = extension(item.name);
+  const type = item.type.toLowerCase();
+  if (
+    SPREADSHEET_EXTENSIONS.has(ext) ||
+    type.includes('spreadsheet') ||
+    type.includes('ms-excel') ||
+    type === 'text/csv' ||
+    type === 'text/tab-separated-values'
+  ) {
+    return { name: 'fileSpreadsheet', color: TYPE_COLOR.spreadsheet };
+  }
+  if (PRESENTATION_EXTENSIONS.has(ext) || type.includes('presentation') || type.includes('ms-powerpoint')) {
+    return { name: 'presentation', color: TYPE_COLOR.presentation };
+  }
+  if (type.startsWith('image/') || IMAGE_EXTENSIONS.has(ext)) return { name: 'photo', color: TYPE_COLOR.image };
+  return { name: 'fileText', color: p.muted };
+}
+
+export const RecentFilesLayout: Layout = ({ s, p, f, now, height }) => {
+  if (!s.files.supported) {
+    return (
+      <Surface p={p}>
+        <Placeholder p={p} iconName="server" title={f.t('widgets.files.unsupported', "Files aren't available on this server")} />
+      </Surface>
+    );
+  }
+  const header = (
+    <Header
+      p={p}
+      iconName="server"
+      title={f.t('widgets.shortcuts.files', 'Files')}
+      count={f.t('widgets.files.recent', 'Recently changed')}
+      click={open(links.files())}
+      trailing={<GhostIcon p={p} iconName="upload" click={open(links.files())} />}
+    />
+  );
+  const items = s.files.items;
+  if (items.length === 0) {
+    return (
+      <Surface p={p}>
+        {header}
+        <Placeholder p={p} iconName="folder" title={f.t('widgets.files.empty', 'No files yet')} click={open(links.files())} />
+      </Surface>
+    );
+  }
+  // Rows share the space below the header, between 34 and 42dp each.
+  const avail = height - 2 - 41;
+  const count = Math.max(1, Math.min(items.length, Math.floor(avail / FILE_ROW_MIN_HEIGHT)));
+  const rowHeight = Math.max(FILE_ROW_MIN_HEIGHT, Math.min(FILE_ROW_HEIGHT, Math.floor(avail / count)));
+  const shown = items.slice(0, count);
+  return (
+    <Surface p={p}>
+      {header}
+      {shown.map((item, i) => {
+        const kind = fileIcon(item, p);
+        const date = item.modified > 0 ? shortDate(f, item.modified, now) : '';
+        const meta = item.isFolder ? date : [size(f, item.size), date].filter(Boolean).join(' · ');
+        return (
+          <FlexWidget
+            key={item.id}
+            {...open(links.files())}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              width: 'match_parent',
+              height: rowHeight,
+              paddingHorizontal: 14,
+              borderBottomWidth: i === shown.length - 1 ? 0 : 1,
+              borderBottomColor: p.border,
+            }}
+          >
+            <Icon name={kind.name} color={kind.color} size={18} />
+            <Spacer size={12} horizontal />
+            <FlexWidget style={{ flex: 1 }}>
+              <Txt text={item.name} color={p.fg} size={14} />
+            </FlexWidget>
+            {meta ? <Spacer size={8} horizontal /> : null}
+            {meta ? <Txt text={meta} color={p.muted} size={12} /> : null}
+          </FlexWidget>
+        );
+      })}
+    </Surface>
+  );
+};
+
+/* ------------------------------------------------------------------------ */
+/* Recent attachments                                                       */
+/* ------------------------------------------------------------------------ */
+
+type AttachmentFile = AttachmentGroup['files'][number];
+
+interface AttachmentDensity {
+  header: number;
+  padTop: number;
+  padBottom: number;
+  gap: number;
+  chip: number;
+}
+
+// Most comfortable first; the first one that shows the most groups wins.
+const ATTACHMENT_DENSITIES: AttachmentDensity[] = [
+  { header: 36, padTop: 6, padBottom: 6, gap: 4, chip: 28 },
+  { header: 32, padTop: 3, padBottom: 4, gap: 3, chip: 28 },
+  { header: 32, padTop: 3, padBottom: 3, gap: 2, chip: 24 },
+];
+const SENDER_LINE_HEIGHT = 18;
+const CHIP_GAP = 6;
+
+function groupHeight(d: AttachmentDensity): number {
+  return d.padTop + SENDER_LINE_HEIGHT + d.gap + d.chip + d.padBottom + 1;
+}
+
+function attachmentIcon(file: AttachmentFile, p: WidgetPalette): { name: IconName; color: string } {
+  const ext = extension(file.name);
+  const type = file.type.toLowerCase();
+  if (type === 'application/pdf' || ext === 'pdf') return { name: 'fileText', color: TYPE_COLOR.pdf };
+  if (type.startsWith('image/') || IMAGE_EXTENSIONS.has(ext)) return { name: 'photo', color: TYPE_COLOR.image };
+  return { name: 'file', color: p.muted };
+}
+
+/** Border, padding, icon and gap around the file name. */
+const CHIP_CHROME = 2 + 16 + 14 + 6;
+
+function moreChipWidth(rest: number): number {
+  return rest > 0 ? CHIP_GAP + 2 + 16 + textWidth(`+${rest}`, 12, 0.6) : 0;
+}
+
+/**
+ * The chips that fit on one line of `inner` dp, each at most about half the
+ * widget, and how many files are left over for the "+N" chip.
+ */
+function fitChips(files: AttachmentFile[], inner: number) {
+  const maxChip = Math.max(64, Math.floor(inner / 2) - CHIP_GAP / 2);
+  const chips = files.map((file) => {
+    const natural = CHIP_CHROME + textWidth(file.name, 12, 0.55);
+    return { file, width: Math.min(natural, maxChip), fixed: natural > maxChip };
+  });
+  const total = (k: number) =>
+    chips.slice(0, k).reduce((sum, c) => sum + c.width, 0) + CHIP_GAP * (k - 1) + moreChipWidth(chips.length - k);
+  let k = chips.length;
+  while (k > 1 && total(k) > inner) k--;
+  const shown = chips.slice(0, k);
+  if (total(k) > inner) {
+    shown[0] = { ...shown[0], width: Math.max(48, inner - moreChipWidth(chips.length - 1)), fixed: true };
+  }
+  return { shown, more: chips.length - k };
+}
+
+function AttachmentChip({
+  p,
+  file,
+  width,
+  fixed,
+  height,
+}: {
+  p: WidgetPalette;
+  file: AttachmentFile;
+  width: number;
+  fixed: boolean;
+  height: number;
+}) {
+  const kind = attachmentIcon(file, p);
+  return (
+    <FlexWidget
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        height,
+        width: fixed ? width : 'wrap_content',
+        paddingHorizontal: 8,
+        borderWidth: 1,
+        borderColor: p.border,
+        borderRadius: 6,
+      }}
+    >
+      <Icon name={kind.name} color={kind.color} size={14} />
+      <Spacer size={6} horizontal />
+      {fixed ? (
+        <FlexWidget style={{ flex: 1 }}>
+          <Txt text={file.name} color={p.fg} size={12} />
+        </FlexWidget>
+      ) : (
+        <Txt text={file.name} color={p.fg} size={12} />
+      )}
+    </FlexWidget>
+  );
+}
+
+export const AttachmentsLayout: Layout = ({ s, p, f, now, width, height }) => {
+  const groups = s.mail.attachments;
+  let density = ATTACHMENT_DENSITIES[0];
+  let fit = 0;
+  for (const d of ATTACHMENT_DENSITIES) {
+    // The last group has no bottom rule, hence the + 1.
+    const n = Math.min(groups.length, Math.floor((height - 2 - (d.header + 1) + 1) / groupHeight(d)));
+    if (n > fit) {
+      fit = n;
+      density = d;
+    }
+  }
+  const header = (
+    <Header
+      p={p}
+      height={density.header}
+      iconName="paperclip"
+      title={f.t('widgets.attachments.title', 'Attachments')}
+      count={f.t('widgets.attachments.from_mail', 'from mail')}
+      click={open(links.inbox())}
+    />
+  );
+  if (groups.length === 0) {
+    return (
+      <Surface p={p}>
+        {header}
+        <Placeholder p={p} iconName="paperclip" title={f.t('widgets.attachments.empty', 'No recent attachments')} click={open(links.inbox())} />
+      </Surface>
+    );
+  }
+  const shown = groups.slice(0, Math.max(1, fit));
+  const inner = width - 2 - 28;
+  return (
+    <Surface p={p}>
+      {header}
+      {shown.map((g, i) => {
+        const { shown: chips, more } = fitChips(g.files, inner);
+        return (
+          <FlexWidget
+            key={g.emailId}
+            {...open(links.message({ id: g.emailId, accountId: g.accountId }))}
+            style={{
+              width: 'match_parent',
+              paddingHorizontal: 14,
+              paddingTop: density.padTop,
+              paddingBottom: density.padBottom,
+              borderBottomWidth: i === shown.length - 1 ? 0 : 1,
+              borderBottomColor: p.border,
+            }}
+          >
+            <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent', height: SENDER_LINE_HEIGHT }}>
+              <FlexWidget style={{ flex: 1 }}>
+                <Txt text={g.fromName || f.t('widgets.attachments.unknown_sender', 'Unknown sender')} color={p.fg} size={13} weight="600" />
+              </FlexWidget>
+              <Spacer size={6} horizontal />
+              <Txt text={f.listDate(g.receivedAt, now)} color={p.muted} size={12} />
+            </FlexWidget>
+            <Spacer size={density.gap} />
+            <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
+              {chips.map((c, j) => (
+                <FlexWidget key={`${j}:${c.file.name}`} style={{ flexDirection: 'row' }}>
+                  {j > 0 ? <Spacer size={CHIP_GAP} horizontal /> : null}
+                  <AttachmentChip p={p} file={c.file} width={c.width} fixed={c.fixed} height={density.chip} />
+                </FlexWidget>
+              ))}
+              {more > 0 ? <Spacer size={CHIP_GAP} horizontal /> : null}
+              {more > 0 ? (
+                <FlexWidget
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    height: density.chip,
+                    paddingHorizontal: 8,
+                    borderWidth: 1,
+                    borderColor: p.border,
+                    borderRadius: 6,
+                  }}
+                >
+                  <Txt text={`+${more}`} color={p.muted} size={12} />
+                </FlexWidget>
+              ) : null}
+            </FlexWidget>
+          </FlexWidget>
+        );
+      })}
+    </Surface>
+  );
+};
+
+/* ------------------------------------------------------------------------ */
+/* Vacation responder                                                       */
+/* ------------------------------------------------------------------------ */
+
+/** The settings switch (`h-[22px] w-10 rounded-full`), drawn only; taps open settings. */
+function Switch({ p, on, label, click }: { p: WidgetPalette; on: boolean; label: string; click: WidgetClick }) {
+  return (
+    <FlexWidget
+      {...click}
+      accessibilityLabel={label}
+      style={{
+        flexDirection: 'row',
+        justifyContent: on ? 'flex-end' : 'flex-start',
+        alignItems: 'center',
+        width: 40,
+        height: 22,
+        padding: 2,
+        borderRadius: 11,
+        backgroundColor: on ? p.primary : p.mutedBg,
+      }}
+    >
+      <FlexWidget style={{ width: 18, height: 18, borderRadius: 9, backgroundColor: on ? p.primaryFg : p.bg }} />
+    </FlexWidget>
+  );
+}
+
+export const VacationLayout: Layout = ({ s, p, f, width, height }) => {
+  const click = open(links.settings('vacation'));
+  const v = s.vacation;
+  if (!v) {
+    return (
+      <Surface p={p}>
+        <Placeholder p={p} iconName="beach" title={f.t('widgets.vacation.unsupported', "Vacation replies aren't available")} click={click} />
+      </Surface>
+    );
+  }
+  const title = f.t('widgets.vacation.title', 'Vacation Responder');
+  const until = v.to ? f.t('widgets.vacation.until', 'Until {date}', { date: f.weekdayDayMonth(v.to) }) : '';
+  const subject = v.subject ? f.t('widgets.vacation.subject', 'Subject: {subject}', { subject: v.subject }) : '';
+
+  // Drop spacing first, then the subject, then the end date, until it fits.
+  const pad = 14;
+  const avail = height - 2 - 2 * pad;
+  const titleLines = textWidth(title, 14, 0.58) > width - 2 - 2 * pad ? 2 : 1;
+  // Switch row, title (~17dp a line plus font padding), status pill.
+  const base = 22 + titleLines * 17 + 2 + 19;
+  let gapTop = 12;
+  let gapPill = 6;
+  let showUntil = !!until;
+  let showSubject = !!subject;
+  const need = () => base + gapTop + gapPill + (showUntil ? 16 : 0) + (showSubject ? 16 : 0);
+  if (need() > avail) {
+    gapTop = 6;
+    gapPill = 4;
+  }
+  if (need() > avail) showSubject = false;
+  if (need() > avail) showUntil = false;
+
+  return (
+    <Surface p={p} style={{ padding: pad }} click={click}>
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
+        <Icon name="beach" color={p.fg} size={20} />
+        <Spacer />
+        <Switch p={p} on={v.enabled} label={title} click={click} />
+      </FlexWidget>
+      <Spacer size={gapTop} />
+      <Txt text={title} color={p.fg} size={14} weight="600" lines={titleLines} />
+      <Spacer size={gapPill} />
+      {v.enabled ? (
+        <Pill text={f.t('widgets.vacation.active', 'Active')} bg={p.successBg} color={p.successText} />
+      ) : (
+        <Pill text={f.t('widgets.vacation.inactive', 'Inactive')} bg={p.mutedBg} color={p.muted} />
+      )}
+      <Spacer />
+      {showUntil ? <Txt text={until} color={p.muted} size={12} /> : null}
+      {showSubject ? <Txt text={subject} color={p.muted} size={12} /> : null}
+    </Surface>
+  );
+};
+
+/* ------------------------------------------------------------------------ */
+/* Storage                                                                  */
+/* ------------------------------------------------------------------------ */
+
+function percent(f: Fmt, fraction: number): string {
+  try {
+    return new Intl.NumberFormat(f.locale, { style: 'percent', maximumFractionDigits: 0 }).format(fraction);
+  } catch {
+    return `${Math.round(fraction * 100)}%`;
+  }
+}
+
+export const StorageLayout: Layout = ({ s, p, f, width, height }) => {
+  const click = open(links.settings('account'));
+  const q = s.quota;
+  if (!q) {
+    return (
+      <Surface p={p}>
+        <Placeholder p={p} iconName="server" title={f.t('widgets.storage.unavailable', 'No quota information')} click={click} />
+      </Surface>
+    );
+  }
+  const limited = q.limit > 0;
+  const fraction = limited ? q.used / q.limit : 0;
+  const fill = fraction > 0.9 ? p.destructive : p.success;
+
+  const pad = 14;
+  const gap = height < 165 ? 6 : 8;
+  const titleHeight = 19;
+  const captionHeight = 16;
+  const ringSize = Math.max(
+    40,
+    Math.min(76, height - 2 - 2 * pad - titleHeight - captionHeight - 2 * gap, width - 2 - 2 * pad),
+  );
+  const centre = limited ? percent(f, fraction) : size(f, q.used);
+  const centreSize = Math.max(11, Math.round(((limited ? 16 : 13) * ringSize) / 76));
+  const caption = limited
+    ? f.t('widgets.storage.used_of', '{used} of {total}', { used: size(f, q.used), total: size(f, q.limit) })
+    : f.t('widgets.storage.no_limit', 'No storage limit');
+
+  return (
+    <Surface p={p} style={{ padding: pad, alignItems: 'center' }} click={click}>
+      <FlexWidget style={{ width: 'match_parent' }}>
+        <Txt text={f.t('widgets.storage.title', 'Storage')} color={p.fg} size={14} weight="600" />
+      </FlexWidget>
+      <Spacer />
+      <Overlay style={{ width: ringSize, height: ringSize }}>
+        {/* ring() draws on a 64 viewBox; stroke 5 is ~6dp at 76dp like the webmail ring. */}
+        <SvgWidget svg={ring(fraction, p.mutedBg, fill, 5)} style={{ width: ringSize, height: ringSize }} />
+        <FlexWidget style={{ width: ringSize, height: ringSize, justifyContent: 'center', alignItems: 'center' }}>
+          <Txt text={centre} color={p.fg} size={centreSize} weight="700" />
+        </FlexWidget>
+      </Overlay>
+      <Spacer size={gap} />
+      <Txt text={caption} color={p.muted} size={12} />
+      <Spacer />
+    </Surface>
+  );
+};
diff --git a/src/widgets/layouts/mail.tsx b/src/widgets/layouts/mail.tsx
new file mode 100644
index 00000000..80d14d5d
--- /dev/null
+++ b/src/widgets/layouts/mail.tsx
@@ -0,0 +1,291 @@
+// Board 1, "Mail at a glance": inbox list, triage card, unread count, latest
+// message, folder counts and shortcuts.
+
+import React from 'react';
+import { FlexWidget, TextWidget } from 'react-native-android-widget';
+import { action, links, open } from '../clicks';
+import { MAIL_ROW_HEIGHT, MailRow } from '../parts';
+import {
+  Avatar,
+  Button,
+  Fab,
+  GhostIcon,
+  Header,
+  Icon,
+  Placeholder,
+  Spacer,
+  Surface,
+  Txt,
+} from '../primitives';
+import type { FolderCount } from '../snapshot';
+import type { IconName } from '../icons';
+import type { WidgetPalette } from '../theme';
+import type { Layout } from './types';
+
+function inboxCounts(s: Parameters<Layout>[0]['s']) {
+  const inbox = s.mail.folders.find((f) => f.role === 'inbox');
+  return { unread: inbox?.unread ?? 0, total: inbox?.total ?? 0 };
+}
+
+function CountText({ p, unread, total }: { p: WidgetPalette; unread: number; total: number }) {
+  return (
+    <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <Txt text={String(unread)} color={p.fg} size={12} weight="600" />
+      <Txt text={` / ${total}`} color={p.muted} size={12} />
+    </FlexWidget>
+  );
+}
+
+export const InboxLayout: Layout = ({ s, p, f, now, height }) => {
+  const compact = height < 190;
+  const headerHeight = compact ? 38 : 44;
+  const rowHeight = compact ? MAIL_ROW_HEIGHT.compact : MAIL_ROW_HEIGHT.full;
+  const rows = Math.max(1, Math.floor((height - headerHeight) / rowHeight));
+  const items = s.mail.inbox.slice(0, rows);
+  const { unread, total } = inboxCounts(s);
+  return (
+    <Surface p={p}>
+      <Header
+        p={p}
+        height={headerHeight}
+        iconName="inbox"
+        iconColor={p.folder.inbox}
+        title={f.t('widgets.mail.inbox', 'Inbox')}
+        click={open(links.inbox())}
+        trailing={(
+          <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <CountText p={p} unread={unread} total={total} />
+            {compact ? null : <GhostIcon p={p} iconName="search" click={open(links.search())} />}
+            <Spacer size={6} horizontal />
+            <Fab p={p} iconName="edit" size={compact ? 28 : 32} click={open(links.compose())} />
+          </FlexWidget>
+        )}
+      />
+      {items.length === 0 ? (
+        <Placeholder p={p} iconName="inbox" title={f.t('widgets.mail.empty_inbox', 'Your inbox is empty')} click={open(links.inbox())} />
+      ) : (
+        items.map((m, i) => (
+          <MailRow key={m.id} p={p} f={f} m={m} now={now} compact={compact} last={i === items.length - 1} />
+        ))
+      )}
+    </Surface>
+  );
+};
+
+export const TriageLayout: Layout = ({ s, p, f, now, widgetId, local }) => {
+  const candidates = s.mail.inbox.filter((m) => m.unread);
+  const current = candidates.find((m) => m.id === local.triageId) ?? candidates[0];
+  const { unread } = inboxCounts(s);
+  if (!current) {
+    return (
+      <Surface p={p}>
+        <Placeholder
+          p={p}
+          iconName="check"
+          title={f.t('widgets.mail.all_caught_up', 'All caught up')}
+          body={f.t('widgets.mail.no_unread', 'No unread messages in your inbox.')}
+          click={open(links.inbox())}
+        />
+      </Surface>
+    );
+  }
+  const position = candidates.indexOf(current) + 1;
+  const target = { id: current.id, accountId: current.accountId, jmapAccountId: current.jmapAccountId, widgetId };
+  return (
+    <Surface p={p} style={{ padding: 12 }}>
+      <FlexWidget {...open(links.message(current))} style={{ width: 'match_parent', flex: 1 }}>
+        <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
+          <Avatar initials={current.initials} color={current.color} size={32} />
+          <Spacer size={10} horizontal />
+          <Txt text={current.fromName || current.fromEmail} color={p.fg} size={14} weight="700" />
+          <Spacer size={6} horizontal />
+          <Txt text={f.listDate(current.receivedAt, now)} color={p.fg} size={12} weight="600" />
+          <Spacer />
+          <Txt
+            text={f.t('widgets.mail.position', '{index} of {count}', { index: position, count: Math.max(unread, candidates.length) })}
+            color={p.muted}
+            size={12}
+          />
+        </FlexWidget>
+        <Spacer size={6} />
+        <Txt text={current.subject || f.t('widgets.mail.no_subject', '(no subject)')} color={p.fg} size={14} weight="600" />
+        {current.preview ? <Txt text={current.preview} color={p.muted} size={13} lines={2} /> : null}
+      </FlexWidget>
+      <Spacer size={8} />
+      <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
+        <Button p={p} label={f.t('widgets.mail.archive', 'Archive')} iconName="archive" flex={1} click={action('archive', target)} />
+        <Spacer size={6} horizontal />
+        <Button p={p} label={f.t('widgets.mail.delete', 'Delete')} iconName="trash" flex={1} click={action('trash', target)} />
+        <Spacer size={6} horizontal />
+        <Button p={p} label={f.t('widgets.mail.reply', 'Reply')} iconName="reply" variant="primary" flex={1} click={open(links.reply(current))} />
+        <Spacer size={6} horizontal />
+        <Button p={p} iconName="chevronRight" click={action('triageNext', { widgetId, id: current.id })} />
+      </FlexWidget>
+    </Surface>
+  );
+};
+
+export const UnreadCountLayout: Layout = ({ s, p, f }) => {
+  const { unread, total } = inboxCounts(s);
+  const senders = s.mail.inbox.filter((m) => m.unread);
+  const faces = senders.slice(0, 3);
+  const more = Math.max(0, unread - faces.length);
+  return (
+    <Surface p={p} style={{ padding: 14, justifyContent: 'space-between' }} click={open(links.inbox())}>
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Icon name="inbox" color={p.folder.inbox} size={16} />
+        <Spacer size={6} horizontal />
+        <Txt text={f.t('widgets.mail.inbox', 'Inbox')} color={p.fg} size={14} weight="600" />
+      </FlexWidget>
+      <FlexWidget>
+        <FlexWidget style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+          <TextWidget text={String(unread)} style={{ color: p.fg, fontSize: 44, fontWeight: '700' }} />
+          <Spacer size={4} horizontal />
+          <TextWidget text={`/ ${total}`} style={{ color: p.muted, fontSize: 15, paddingBottom: 8 }} />
+        </FlexWidget>
+        <Txt text={f.t('widgets.mail.unread', 'unread')} color={p.muted} size={13} />
+      </FlexWidget>
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {faces.map((m, i) => (
+          <FlexWidget key={m.id} style={{ marginLeft: i === 0 ? 0 : -8 }}>
+            <Avatar initials={m.initials} color={m.color} size={24} ring={p.bg} />
+          </FlexWidget>
+        ))}
+        {more > 0 ? <Spacer size={6} horizontal /> : null}
+        {more > 0 ? <Txt text={`+${more}`} color={p.muted} size={12} /> : null}
+      </FlexWidget>
+    </Surface>
+  );
+};
+
+export const LatestMessageLayout: Layout = ({ s, p, f, now }) => {
+  const latest = s.mail.inbox.find((m) => m.unread);
+  const { unread } = inboxCounts(s);
+  if (!latest) {
+    return (
+      <Surface p={p}>
+        <Placeholder p={p} iconName="check" title={f.t('widgets.mail.all_caught_up', 'All caught up')} click={open(links.inbox())} />
+      </Surface>
+    );
+  }
+  return (
+    <Surface p={p} style={{ padding: 14, backgroundColor: p.unreadRow }} click={open(links.message(latest))}>
+      <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
+        <Avatar initials={latest.initials} color={latest.color} size={40} />
+        <Spacer />
+        <Txt text={f.listDate(latest.receivedAt, now)} color={p.fg} size={12} weight="600" />
+      </FlexWidget>
+      <Spacer size={6} />
+      <Txt text={latest.fromName || latest.fromEmail} color={p.fg} size={14} weight="700" />
+      <Txt text={latest.subject || f.t('widgets.mail.no_subject', '(no subject)')} color={p.fg} size={14} weight="600" lines={2} />
+      <Spacer />
+      {unread > 1 ? (
+        <Txt text={f.t('widgets.mail.more_unread', '+{count} more unread', { count: unread - 1 })} color={p.muted} size={12} />
+      ) : null}
+    </Surface>
+  );
+};
+
+const FOLDER_ICON: Record<FolderCount['role'], IconName> = {
+  inbox: 'inbox',
+  drafts: 'file',
+  sent: 'send',
+  archive: 'archive',
+  junk: 'ban',
+  trash: 'trash',
+  scheduled: 'calendarClock',
+};
+
+function folderLink(role: FolderCount['role']): string {
+  if (role === 'inbox') return links.inbox();
+  if (role === 'scheduled') return links.scheduled();
+  return links.unified({ role });
+}
+
+export const FolderCountsLayout: Layout = ({ s, p, f, height }) => {
+  const scheduled = s.mail.scheduled.length;
+  const rows: Array<{ role: FolderCount['role']; name: string; count: number; strong: boolean }> = [];
+  for (const role of ['inbox', 'drafts', 'scheduled', 'junk', 'archive', 'sent'] as const) {
+    if (role === 'scheduled') {
+      if (scheduled > 0) rows.push({ role, name: f.t('widgets.mail.scheduled', 'Scheduled'), count: scheduled, strong: false });
+      continue;
+    }
+    const folder = s.mail.folders.find((x) => x.role === role);
+    if (!folder) continue;
+    const count = role === 'drafts' ? folder.total : folder.unread;
+    rows.push({ role, name: folder.name, count, strong: role !== 'drafts' && folder.unread > 0 });
+  }
+  const fit = Math.max(1, Math.floor((height - 40) / 31));
+  const colors: Record<FolderCount['role'], string> = {
+    inbox: p.folder.inbox,
+    drafts: p.folder.drafts,
+    sent: p.folder.sent,
+    archive: p.folder.archive,
+    junk: p.folder.junk,
+    trash: p.muted,
+    scheduled: p.folder.scheduled,
+  };
+  return (
+    <Surface p={p} style={{ paddingHorizontal: 12, paddingVertical: 8 }}>
+      <FlexWidget style={{ height: 26, justifyContent: 'center' }}>
+        <Txt text={f.t('widgets.mail.folders', 'Folders')} color={p.fg} size={14} weight="500" />
+      </FlexWidget>
+      {rows.slice(0, fit).map((row) => (
+        <FlexWidget
+          key={row.role}
+          {...open(folderLink(row.role))}
+          style={{ flexDirection: 'row', alignItems: 'center', height: 31, width: 'match_parent' }}
+        >
+          <Icon name={FOLDER_ICON[row.role]} color={colors[row.role]} size={16} />
+          <Spacer size={10} horizontal />
+          <FlexWidget style={{ flex: 1 }}>
+            <Txt text={row.name} color={p.fg} size={14} />
+          </FlexWidget>
+          {row.count > 0 ? (
+            <Txt text={String(row.count)} color={row.strong ? p.fg : p.muted} size={12} weight={row.strong ? '600' : '400'} />
+          ) : null}
+        </FlexWidget>
+      ))}
+    </Surface>
+  );
+};
+
+export const MailShortcutsLayout: Layout = ({ p, f }) => {
+  const tile = (key: string, icon: IconName, label: string, uri: string, primary = false) => (
+    <FlexWidget
+      key={key}
+      {...open(uri)}
+      style={{
+        // A zero base width makes the weights split the row evenly instead
+        // of only sharing out what the labels leave over.
+        width: 0,
+        flex: 1,
+        height: 'match_parent',
+        borderRadius: 8,
+        backgroundColor: primary ? p.primary : p.bg,
+        ...(primary ? {} : { borderWidth: 1, borderColor: p.input }),
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Icon name={icon} color={primary ? p.primaryFg : p.fg} size={20} />
+      <Spacer size={4} />
+      <Txt text={label} color={primary ? p.primaryFg : p.fg} size={12} weight="500" />
+    </FlexWidget>
+  );
+  return (
+    <Surface p={p} style={{ padding: 10 }}>
+      <FlexWidget style={{ flexDirection: 'row', flex: 1, width: 'match_parent' }}>
+        {tile('compose', 'edit', f.t('widgets.shortcuts.compose', 'Compose'), links.compose(), true)}
+        <Spacer size={8} horizontal />
+        {tile('calendar', 'calendar', f.t('widgets.shortcuts.calendar', 'Calendar'), links.calendar())}
+      </FlexWidget>
+      <Spacer size={8} />
+      <FlexWidget style={{ flexDirection: 'row', flex: 1, width: 'match_parent' }}>
+        {tile('contacts', 'addressBook', f.t('widgets.shortcuts.contacts', 'Contacts'), links.contacts())}
+        <Spacer size={8} horizontal />
+        {tile('files', 'server', f.t('widgets.shortcuts.files', 'Files'), links.files())}
+      </FlexWidget>
+    </Surface>
+  );
+};
diff --git a/src/widgets/layouts/more-mail.tsx b/src/widgets/layouts/more-mail.tsx
new file mode 100644
index 00000000..4a0d45ed
--- /dev/null
+++ b/src/widgets/layouts/more-mail.tsx
@@ -0,0 +1,738 @@
+// Board "More ways into mail": the unified inbox across accounts, starred
+// mail, favourite people, search, scheduled sends and the offline outbox, the
+// busiest tag and the last draft.
+
+import React from 'react';
+import { FlexWidget, TextWidget, type ColorProp } from 'react-native-android-widget';
+import { links, open, type WidgetClick } from '../clicks';
+import { daysUntil } from '../derive';
+import type { Fmt } from '../format';
+import { MAIL_ROW_HEIGHT, MailRow } from '../parts';
+import {
+  Avatar,
+  Button,
+  Divider,
+  Dot,
+  FilledIcon,
+  Header,
+  Icon,
+  Overlay,
+  Pill,
+  Placeholder,
+  Spacer,
+  Surface,
+  Txt,
+} from '../primitives';
+import type { AccountSummary, Person, ScheduledItem } from '../snapshot';
+import { normalizeHex, type WidgetPalette } from '../theme';
+import type { Layout } from './types';
+
+/**
+ * Rough rendered width of a line of text in dp. Widgets cannot measure text,
+ * so chips and header pills are budgeted with this (a glyph averages a bit
+ * over half the font size; erring wide keeps the last chip from clipping).
+ */
+function textWidth(text: string, size: number): number {
+  return Math.ceil(text.length * size * 0.58);
+}
+
+function clip(text: string, max: number): string {
+  return text.length > max ? `${text.slice(0, Math.max(1, max - 1))}…` : text;
+}
+
+/** `border-sky-500/20`-style edge for a tinted pill: the tint's colour at 20%. */
+function tintEdge(tint: ColorProp): ColorProp {
+  const m = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,/.exec(tint);
+  return m ? (`rgba(${m[1]}, ${m[2]}, ${m[3]}, 0.2)` as ColorProp) : tint;
+}
+
+/** Header rule like `Header`, for a leading glyph that is not an outline icon (the filled star). */
+function LeadHeader({
+  p,
+  lead,
+  title,
+  count,
+  height,
+  click,
+}: {
+  p: WidgetPalette;
+  lead: React.ReactNode;
+  title: string;
+  count?: string;
+  height: number;
+  click?: WidgetClick;
+}) {
+  return (
+    <FlexWidget style={{ width: 'match_parent' }}>
+      <FlexWidget
+        {...click}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          width: 'match_parent',
+          height,
+          paddingLeft: 14,
+          paddingRight: 8,
+        }}
+      >
+        {lead}
+        <Spacer size={8} horizontal />
+        <Txt text={title} color={p.fg} size={14} weight="600" />
+        {count ? <Spacer size={8} horizontal /> : null}
+        {count ? <Txt text={count} color={p.muted} size={12} /> : null}
+      </FlexWidget>
+      <Divider p={p} />
+    </FlexWidget>
+  );
+}
+
+// ── All accounts ─────────────────────────────────────────────────────────
+
+/** Opens the Mail tab on one account's inbox (`?account=` switches to it first). */
+function accountInbox(accountId: string): string {
+  return `${links.inbox()}?account=${encodeURIComponent(accountId)}`;
+}
+
+function accountChipLabel(a: AccountSummary): string {
+  const label = clip(a.label, 12);
+  return a.unread > 0 ? `${label} ${a.unread}` : label;
+}
+
+/** `rounded-full bg-muted px-2 py-0.5 text-[11px]` with the account dot. */
+function AccountChip({ p, a }: { p: WidgetPalette; a: AccountSummary }) {
+  return (
+    <FlexWidget
+      {...open(accountInbox(a.id))}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: p.mutedBg,
+        borderRadius: 999,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+      }}
+    >
+      <Dot color={normalizeHex(a.color)} size={8} />
+      <Spacer size={5} horizontal />
+      <TextWidget text={accountChipLabel(a)} maxLines={1} style={{ color: p.muted, fontSize: 11, fontWeight: '500' }} />
+    </FlexWidget>
+  );
+}
+
+/** As many account chips as fit next to the title, then "+N" for the rest. */
+function fitAccountChips(accounts: AccountSummary[], budget: number): { shown: AccountSummary[]; hidden: number } {
+  const chipWidth = (a: AccountSummary) => 8 + 8 + 5 + textWidth(accountChipLabel(a), 11) + 8;
+  const moreWidth = (n: number) => 16 + textWidth(`+${n}`, 11);
+  const shown: AccountSummary[] = [];
+  let used = 0;
+  for (let i = 0; i < accounts.length; i++) {
+    const width = chipWidth(accounts[i]) + (shown.length ? 6 : 0);
+    const rest = accounts.length - i - 1;
+    const reserve = rest > 0 ? 6 + moreWidth(rest) : 0;
+    if (used + width + reserve > budget) break;
+    used += width;
+    shown.push(accounts[i]);
+  }
+  const hidden = accounts.length - shown.length;
+  const room = budget - used - (shown.length ? 6 : 0);
+  return { shown, hidden: hidden > 0 && moreWidth(hidden) <= room ? hidden : 0 };
+}
+
+export const AllAccountsLayout: Layout = ({ s, p, f, now, width, height }) => {
+  const compact = height < 190;
+  const headerHeight = compact ? 38 : 44;
+  const rowHeight = compact ? MAIL_ROW_HEIGHT.compact : MAIL_ROW_HEIGHT.full;
+  const rows = Math.max(1, Math.floor((height - headerHeight) / rowHeight));
+  const items = s.mail.unified.slice(0, rows);
+  const colors = new Map(s.accounts.map((a) => [a.id, normalizeHex(a.color)]));
+  const title = f.t('widgets.mail.all_accounts', 'All accounts');
+  // Frame, header padding, icon and gap, title, header right padding, the
+  // chips' own right padding and a minimum gap before them.
+  const budget = width - 2 - 14 - 16 - 8 - textWidth(title, 14) - 8 - 4 - 8;
+  const { shown, hidden } = fitAccountChips(s.accounts, budget);
+  return (
+    <Surface p={p}>
+      <Header
+        p={p}
+        height={headerHeight}
+        iconName="inbox"
+        iconColor={p.folder.inbox}
+        title={title}
+        click={open(links.unified())}
+        trailing={(
+          <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', paddingRight: 4 }}>
+            {shown.map((a, i) => (
+              <FlexWidget key={a.id} style={{ flexDirection: 'row', alignItems: 'center' }}>
+                {i > 0 ? <Spacer size={6} horizontal /> : null}
+                <AccountChip p={p} a={a} />
+              </FlexWidget>
+            ))}
+            {hidden > 0 && shown.length > 0 ? <Spacer size={6} horizontal /> : null}
+            {hidden > 0 ? <Pill text={`+${hidden}`} bg={p.mutedBg} color={p.muted} /> : null}
+          </FlexWidget>
+        )}
+      />
+      {items.length === 0 ? (
+        <Placeholder
+          p={p}
+          iconName="inbox"
+          title={f.t('widgets.mail.empty_all_accounts', 'Your inboxes are empty')}
+          click={open(links.unified())}
+        />
+      ) : (
+        items.map((m, i) => (
+          <MailRow
+            key={`${m.accountId}:${m.id}`}
+            p={p}
+            f={f}
+            m={m}
+            now={now}
+            compact={compact}
+            showAccountDot
+            accountColor={colors.get(m.accountId)}
+            last={i === items.length - 1}
+          />
+        ))
+      )}
+    </Surface>
+  );
+};
+
+// ── Starred ──────────────────────────────────────────────────────────────
+
+export const StarredLayout: Layout = ({ s, p, f, now, height }) => {
+  const compact = height < 190;
+  const headerHeight = compact ? 38 : 44;
+  const rowHeight = compact ? MAIL_ROW_HEIGHT.compact : MAIL_ROW_HEIGHT.full;
+  const rows = Math.max(1, Math.floor((height - headerHeight) / rowHeight));
+  const items = s.mail.starred.slice(0, rows);
+  const count = Math.max(s.mail.starredCount, s.mail.starred.length);
+  const click = open(links.unified({ view: 'starred' }));
+  return (
+    <Surface p={p}>
+      <LeadHeader
+        p={p}
+        height={headerHeight}
+        lead={<FilledIcon name="star" color={p.star} size={16} />}
+        title={f.t('widgets.mail.starred', 'Starred')}
+        count={count > 0 ? String(count) : undefined}
+        click={click}
+      />
+      {items.length === 0 ? (
+        <Placeholder
+          p={p}
+          iconName="star"
+          title={f.t('widgets.mail.no_starred', 'No starred mail')}
+          body={f.t('widgets.mail.no_starred_body', 'Star a message to keep it here.')}
+          click={click}
+        />
+      ) : (
+        // Every row is starred, so the per-row star would only repeat the header.
+        items.map((m, i) => (
+          <MailRow
+            key={m.id}
+            p={p}
+            f={f}
+            m={{ ...m, starred: false }}
+            now={now}
+            compact={compact}
+            last={i === items.length - 1}
+          />
+        ))
+      )}
+    </Surface>
+  );
+};
+
+// ── Favourite people ─────────────────────────────────────────────────────
+
+/** "Sofia" for "Sofia Russo" (and for "Russo, Sofia"); the address's local part without a name. */
+function givenName(person: Person): string {
+  const name = person.name.trim();
+  if (!name) return person.email.split('@')[0] || person.email;
+  const comma = name.indexOf(',');
+  const given = comma > 0 ? name.slice(comma + 1).trim() : name;
+  return given.split(/\s+/)[0] || name;
+}
+
+/** The unread badge on an avatar: `bg-primary` pill with a ring in the surface colour. */
+function UnreadBadge({ p, count, left }: { p: WidgetPalette; count: number; left: number }) {
+  const text = count > 99 ? '99+' : String(count);
+  const width = Math.max(20, 10 + text.length * 7);
+  return (
+    <FlexWidget
+      style={{
+        marginLeft: left - width,
+        width,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        borderColor: p.bg,
+        backgroundColor: p.primary,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <TextWidget text={text} allowFontScaling={false} style={{ color: p.primaryFg, fontSize: 11, fontWeight: '600' }} />
+    </FlexWidget>
+  );
+}
+
+function PersonTile({
+  p,
+  f,
+  person,
+  avatar,
+  showTime,
+  now,
+}: {
+  p: WidgetPalette;
+  f: Fmt;
+  person: Person;
+  avatar: number;
+  showTime: boolean;
+  now: number;
+}) {
+  // The badge sits 3dp above and 5dp right of the avatar, as in the list's
+  // avatar badges; the box leaves 5dp on both sides so the avatar stays centred.
+  const unread = person.unread > 0;
+  return (
+    <FlexWidget
+      {...open(links.search(person.email ? `from:${person.email}` : person.name))}
+      style={{ flex: 1, width: 0, alignItems: 'center' }}
+    >
+      <Overlay style={{ width: avatar + 10, height: avatar + 3 }}>
+        <FlexWidget style={{ marginLeft: 5, marginTop: 3 }}>
+          <Avatar initials={person.initials} color={person.color} size={avatar} />
+        </FlexWidget>
+        {unread ? <UnreadBadge p={p} count={person.unread} left={avatar + 10} /> : null}
+      </Overlay>
+      <Spacer size={4} />
+      <Txt text={givenName(person)} color={p.fg} size={12} weight="500" />
+      {showTime ? <Spacer size={4} /> : null}
+      {showTime ? (
+        <Txt
+          text={f.listDate(person.lastAt, now)}
+          color={unread ? p.fg : p.muted}
+          size={12}
+          weight={unread ? '600' : '400'}
+        />
+      ) : null}
+    </FlexWidget>
+  );
+}
+
+export const FavouritePeopleLayout: Layout = ({ s, p, f, now, width, height }) => {
+  const headerHeight = 38;
+  const people = s.mail.favourites.slice(0, 4);
+  const header = (
+    <Header
+      p={p}
+      height={headerHeight}
+      iconName="addressBook"
+      iconColor={p.muted}
+      title={f.t('widgets.people.favourites', 'Favourites')}
+      click={open(links.contacts())}
+    />
+  );
+  if (people.length === 0) {
+    return (
+      <Surface p={p}>
+        {header}
+        <Placeholder
+          p={p}
+          iconName="users"
+          title={f.t('widgets.people.empty', 'No favourites yet')}
+          body={f.t('widgets.people.empty_body', 'The people you hear from most show up here.')}
+          click={open(links.contacts())}
+        />
+      </Surface>
+    );
+  }
+  // Four equal columns (grid-cols-4 gap-2 px-3); the avatar shrinks to fit a
+  // narrow widget, and the time line goes first when the widget is short.
+  const body = height - 2 - headerHeight;
+  const topPad = body >= 110 ? 14 : 8;
+  const showTime = body - topPad >= 3 + 40 + 20 + 20;
+  const column = (width - 2 - 24 - 8 * 3) / 4;
+  const avatar = Math.max(
+    24,
+    Math.min(48, Math.floor(column - 10), body - topPad - 3 - 20 - (showTime ? 20 : 0)),
+  );
+  const cells: React.ReactNode[] = [];
+  for (let i = 0; i < 4; i++) {
+    if (i > 0) cells.push(<Spacer key={`gap-${i}`} size={8} horizontal />);
+    const person = people[i];
+    cells.push(
+      person ? (
+        <PersonTile
+          key={`person-${i}`}
+          p={p}
+          f={f}
+          person={person}
+          avatar={avatar}
+          showTime={showTime}
+          now={now}
+        />
+      ) : (
+        <FlexWidget key={`person-${i}`} style={{ flex: 1, width: 0 }} />
+      ),
+    );
+  }
+  return (
+    <Surface p={p}>
+      {header}
+      <FlexWidget style={{ flexDirection: 'row', width: 'match_parent', paddingHorizontal: 12, paddingTop: topPad }}>
+        {cells}
+      </FlexWidget>
+    </Surface>
+  );
+};
+
+// ── Search ───────────────────────────────────────────────────────────────
+
+const CHIP_HEIGHT = 26;
+const CHIP_GAP = 6;
+/** `px-2.5` on both sides plus the 1dp border. */
+const CHIP_CHROME = 22;
+
+interface SearchChip {
+  label: string;
+  query: string;
+}
+
+/** Lays recent searches out in wrapped rows (flex-wrap), dropping what does not fit. */
+function packChips(queries: string[], maxWidth: number, maxRows: number): SearchChip[][] {
+  const maxChars = Math.max(4, Math.floor((maxWidth - CHIP_CHROME) / (12 * 0.58)));
+  const rows: SearchChip[][] = [];
+  let row: SearchChip[] = [];
+  let used = 0;
+  for (const raw of queries) {
+    if (rows.length >= maxRows) break;
+    const query = raw.trim();
+    if (!query) continue;
+    const label = clip(query, maxChars);
+    const width = CHIP_CHROME + textWidth(label, 12);
+    if (row.length && used + CHIP_GAP + width > maxWidth) {
+      rows.push(row);
+      row = [];
+      used = 0;
+      if (rows.length >= maxRows) break;
+    }
+    used += (row.length ? CHIP_GAP : 0) + width;
+    row.push({ label, query });
+  }
+  if (row.length && rows.length < maxRows) rows.push(row);
+  return rows;
+}
+
+function SearchBar({ p, f, height }: { p: WidgetPalette; f: Fmt; height: number }) {
+  return (
+    <FlexWidget
+      {...open(links.search())}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: 'match_parent',
+        height,
+        paddingHorizontal: 16,
+        borderRadius: 999,
+        backgroundColor: p.mutedBg,
+      }}
+    >
+      <Icon name="search" color={p.muted} size={18} />
+      <Spacer size={10} horizontal />
+      <Txt text={f.t('widgets.search.placeholder', 'Search mail…')} color={p.muted} size={14} />
+    </FlexWidget>
+  );
+}
+
+export const MailSearchLayout: Layout = ({ s, p, f, width, height }) => {
+  // Below the bar: 10 gap, the label (~16), 10 gap, then rows of chips.
+  const room = height - 2 - 28 - 44 - 10 - 16 - 10;
+  const maxRows = Math.floor((room + CHIP_GAP) / (CHIP_HEIGHT + CHIP_GAP));
+  if (maxRows < 1) {
+    // 4x1: only the bar.
+    return (
+      <Surface p={p} style={{ paddingHorizontal: 12, justifyContent: 'center' }}>
+        <SearchBar p={p} f={f} height={Math.max(32, Math.min(44, height - 20))} />
+      </Surface>
+    );
+  }
+  const rows = packChips(s.mail.recentSearches, width - 2 - 28, maxRows);
+  return (
+    <Surface p={p} style={{ padding: 14 }}>
+      <SearchBar p={p} f={f} height={44} />
+      <Spacer size={10} />
+      <Txt
+        text={f.t('widgets.search.recent', 'Recent searches').toUpperCase()}
+        color={p.muted}
+        size={12}
+        weight="500"
+        style={{ letterSpacing: 0.05 }}
+      />
+      <Spacer size={10} />
+      {rows.length === 0 ? (
+        <Txt text={f.t('widgets.search.no_recent', 'Your recent searches show up here.')} color={p.muted} size={12} lines={maxRows > 1 ? 2 : 1} />
+      ) : (
+        rows.map((row, r) => (
+          <FlexWidget key={`row-${r}`} style={{ flexDirection: 'row', width: 'match_parent', marginTop: r === 0 ? 0 : CHIP_GAP }}>
+            {row.map((chip, i) => (
+              <FlexWidget key={`${r}-${i}`} style={{ flexDirection: 'row' }}>
+                {i > 0 ? <Spacer size={CHIP_GAP} horizontal /> : null}
+                <FlexWidget
+                  {...open(links.search(chip.query))}
+                  style={{
+                    borderRadius: 999,
+                    borderWidth: 1,
+                    borderColor: p.border,
+                    paddingHorizontal: 10,
+                    paddingVertical: 4,
+                  }}
+                >
+                  <TextWidget text={chip.label} maxLines={1} style={{ color: p.fg, fontSize: 12 }} />
+                </FlexWidget>
+              </FlexWidget>
+            ))}
+          </FlexWidget>
+        ))
+      )}
+    </Surface>
+  );
+};
+
+// ── Scheduled and outbox ─────────────────────────────────────────────────
+
+/** "Today, 08:00", "Tomorrow, 08:00", "Fri, 17:00", "Oct 3, 09:30". */
+function sendAtLabel(f: Fmt, at: number, now: number): string {
+  if (at <= now) return f.t('widgets.scheduled.sending', 'Sending now');
+  const time = f.time(at);
+  const days = daysUntil(at, now);
+  if (days === 0) return f.t('widgets.scheduled.today_at', 'Today, {time}', { time });
+  if (days === 1) return f.t('widgets.scheduled.tomorrow_at', 'Tomorrow, {time}', { time });
+  const day = days < 7 ? f.weekdayShort(at) : f.dayMonth(at);
+  return f.t('widgets.scheduled.day_at', '{day}, {time}', { day, time });
+}
+
+/** The app's scheduled-send label: `sky-500/10` pill, `sky-500/20` edge, clock icon. */
+function SendAtPill({ p, text }: { p: WidgetPalette; text: string }) {
+  return (
+    <FlexWidget
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 1,
+        borderRadius: 999,
+        borderWidth: 1,
+        borderColor: tintEdge(p.scheduledBg),
+        backgroundColor: p.scheduledBg,
+      }}
+    >
+      <Icon name="calendarClock" color={p.scheduledText} size={12} />
+      <Spacer size={4} horizontal />
+      <TextWidget text={text} maxLines={1} style={{ color: p.scheduledText, fontSize: 11, fontWeight: '500' }} />
+    </FlexWidget>
+  );
+}
+
+function ScheduledRow({
+  p,
+  f,
+  item,
+  now,
+  last,
+}: {
+  p: WidgetPalette;
+  f: Fmt;
+  item: ScheduledItem;
+  now: number;
+  last?: boolean;
+}) {
+  const to = item.to
+    ? f.t('widgets.scheduled.to', 'To: {name}', { name: item.to })
+    : f.t('widgets.scheduled.no_recipient', '(no recipient)');
+  return (
+    <FlexWidget
+      {...open(links.scheduled())}
+      style={{
+        width: 'match_parent',
+        paddingLeft: 14,
+        paddingRight: 12,
+        paddingVertical: 4,
+        borderBottomWidth: last ? 0 : 1,
+        borderBottomColor: p.border,
+      }}
+    >
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent', height: 18 }}>
+        <FlexWidget style={{ flex: 1 }}>
+          <Txt text={to} color={p.muted} size={14} weight="500" />
+        </FlexWidget>
+        <Spacer size={6} horizontal />
+        <SendAtPill p={p} text={sendAtLabel(f, item.sendAt, now)} />
+      </FlexWidget>
+      <Txt text={item.subject || f.t('widgets.mail.no_subject', '(no subject)')} color={p.subjectRead} size={13} />
+    </FlexWidget>
+  );
+}
+
+export const OutboxLayout: Layout = ({ s, p, f, now, width, height }) => {
+  const headerHeight = height < 190 ? 38 : 44;
+  const rows = Math.max(1, Math.floor((height - headerHeight) / MAIL_ROW_HEIGHT.compact));
+  const scheduled = [...s.mail.scheduled].sort((a, b) => a.sendAt - b.sendAt);
+  const items = scheduled.slice(0, rows);
+  const pending = s.mail.pendingChanges;
+  const click = open(links.scheduled());
+  const title = f.t('widgets.mail.scheduled', 'Scheduled');
+  const count = scheduled.length > 0 ? String(scheduled.length) : undefined;
+
+  let pill: string | null = null;
+  if (pending > 0) {
+    const room = width - 2 - 14 - 16 - 8 - textWidth(title, 14) - (count ? 6 + textWidth(count, 12) : 0) - 8 - 12;
+    const long = f.t('widgets.mail.in_outbox', '{count, plural, one {# change waiting} other {# changes waiting}}', { count: pending });
+    pill = 16 + textWidth(long, 11) <= room
+      ? long
+      : f.t('widgets.mail.in_outbox_short', '{count} waiting', { count: pending });
+  }
+
+  return (
+    <Surface p={p}>
+      <Header
+        p={p}
+        height={headerHeight}
+        iconName="calendarClock"
+        iconColor={p.folder.scheduled}
+        title={title}
+        count={count}
+        click={click}
+        trailing={pill ? (
+          <FlexWidget style={{ paddingRight: 4 }}>
+            <Pill text={pill} bg={p.warningBg} color={p.warningText} />
+          </FlexWidget>
+        ) : undefined}
+      />
+      {items.length > 0 ? (
+        items.map((item, i) => (
+          <ScheduledRow key={item.id} p={p} f={f} item={item} now={now} last={i === items.length - 1} />
+        ))
+      ) : pending > 0 ? (
+        <Placeholder
+          p={p}
+          iconName="refresh"
+          title={f.t('widgets.scheduled.waiting', 'Waiting for network')}
+          body={f.t('widgets.scheduled.waiting_body', 'Changes you made offline go out when you are back online.')}
+          click={click}
+        />
+      ) : (
+        <Placeholder
+          p={p}
+          iconName="calendarClock"
+          title={f.t('widgets.scheduled.empty', 'Nothing scheduled')}
+          body={f.t('widgets.scheduled.empty_body', 'Messages you schedule to send later show up here.')}
+          click={click}
+        />
+      )}
+    </Surface>
+  );
+};
+
+// ── Tag ──────────────────────────────────────────────────────────────────
+
+export const TagLayout: Layout = ({ s, p, f, now }) => {
+  // Tags come sorted busiest first (most unread, then most messages).
+  const tag = s.mail.tags[0];
+  if (!tag) {
+    return (
+      <Surface p={p}>
+        <Placeholder
+          p={p}
+          iconName="tag"
+          title={f.t('widgets.tag.empty', 'No tags yet')}
+          body={f.t('widgets.tag.empty_body', 'Tags you add in the app show up here.')}
+          click={open(links.inbox())}
+        />
+      </Surface>
+    );
+  }
+  const count = tag.unread > 0 ? tag.unread : tag.total;
+  const label = tag.unread > 0
+    ? f.t('widgets.mail.unread', 'unread')
+    : f.t('widgets.tag.messages', '{count, plural, one {message} other {messages}}', { count });
+  const latest = tag.latestFrom
+    ? [tag.latestFrom, tag.latestAt ? f.listDate(tag.latestAt, now) : ''].filter(Boolean).join(' · ')
+    : f.t('widgets.tag.total', '{count, plural, one {# message} other {# messages}}', { count: tag.total });
+  return (
+    <Surface p={p} style={{ padding: 14, justifyContent: 'space-between' }} click={open(links.inbox())}>
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
+        <FilledIcon name="tag" color={normalizeHex(tag.color)} size={16} />
+        <Spacer size={8} horizontal />
+        <FlexWidget style={{ flex: 1 }}>
+          <Txt text={tag.name} color={p.fg} size={14} weight="500" />
+        </FlexWidget>
+      </FlexWidget>
+      <FlexWidget>
+        <TextWidget text={String(count)} style={{ color: p.fg, fontSize: 44, fontWeight: '700' }} />
+        <Txt text={label} color={p.muted} size={13} />
+      </FlexWidget>
+      <Txt text={latest} color={p.muted} size={12} />
+    </Surface>
+  );
+};
+
+// ── Last draft ───────────────────────────────────────────────────────────
+
+function editedLabel(f: Fmt, at: number, now: number): string {
+  const minutes = Math.floor((now - at) / 60000);
+  if (minutes < 1) return f.t('widgets.draft.edited_now', 'Edited just now');
+  if (minutes < 60) {
+    return f.t('widgets.draft.edited_minutes', '{count, plural, one {Edited # min ago} other {Edited # min ago}}', { count: minutes });
+  }
+  return f.t('widgets.draft.edited_at', 'Edited {when}', { when: f.listDate(at, now) });
+}
+
+export const LastDraftLayout: Layout = ({ s, p, f, now, height }) => {
+  const draft = s.mail.drafts[0];
+  if (!draft) {
+    return (
+      <Surface p={p}>
+        <Placeholder
+          p={p}
+          iconName="file"
+          title={f.t('widgets.draft.empty', 'No drafts')}
+          body={f.t('widgets.draft.empty_body', 'Messages you start and do not send wait here.')}
+          click={open(links.compose())}
+        />
+      </Surface>
+    );
+  }
+  const count = Math.max(s.mail.draftCount, s.mail.drafts.length);
+  const resume = open(links.draft(draft));
+  return (
+    <Surface p={p} style={{ padding: 14 }} click={resume}>
+      <FlexWidget
+        {...open(links.unified({ role: 'drafts' }))}
+        style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}
+      >
+        <Icon name="file" color={p.folder.drafts} size={16} />
+        <Spacer size={8} horizontal />
+        <Txt text={f.t('widgets.draft.title', 'Drafts')} color={p.fg} size={14} weight="500" />
+        {count > 0 ? <Spacer size={8} horizontal /> : null}
+        {count > 0 ? <Txt text={String(count)} color={p.muted} size={12} /> : null}
+      </FlexWidget>
+      <Spacer size={6} />
+      <Txt
+        text={draft.subject || f.t('widgets.mail.no_subject', '(no subject)')}
+        color={p.fg}
+        size={14}
+        weight="600"
+        lines={height >= 150 ? 2 : 1}
+      />
+      <Spacer size={6} />
+      <Txt text={editedLabel(f, draft.receivedAt, now)} color={p.muted} size={12} />
+      <Spacer />
+      <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
+        <Button p={p} label={f.t('widgets.draft.keep_writing', 'Keep writing')} flex={1} click={resume} />
+      </FlexWidget>
+    </Surface>
+  );
+};
diff --git a/src/widgets/layouts/plans.tsx b/src/widgets/layouts/plans.tsx
new file mode 100644
index 00000000..8743163f
--- /dev/null
+++ b/src/widgets/layouts/plans.tsx
@@ -0,0 +1,665 @@
+// Board 3, "Invites, tasks and free time": things you act on from the home
+// screen - the invitation banner with its RSVP buttons, the working week as
+// busy bars, the task list with working tick boxes, task progress, a
+// countdown to the next all-day event and upcoming birthdays.
+
+import React from 'react';
+import { FlexWidget, OverlapWidget, SvgWidget } from 'react-native-android-widget';
+import { action, links, open } from '../clicks';
+import {
+  busyBlocks,
+  countdownTarget,
+  daysUntil,
+  eventsOnDay,
+  freeTime,
+  sortTasks,
+  startOfWeek,
+  tasksDueNow,
+  upcomingBirthdays,
+  type BusyBlock,
+} from '../derive';
+import { addDays, sameDay, startOfDay, type Fmt } from '../format';
+import { ring, type IconName } from '../icons';
+import { TASK_ROW_HEIGHT, TaskRow } from '../parts';
+import {
+  Avatar,
+  Button,
+  Dot,
+  Fab,
+  Header,
+  Icon,
+  Placeholder,
+  Spacer,
+  Surface,
+  Txt,
+} from '../primitives';
+import type { EventItem, TaskItem } from '../snapshot';
+import { normalizeHex, type WidgetPalette } from '../theme';
+import type { Layout } from './types';
+
+const MINUTE = 60000;
+const HOUR = 3600000;
+/** Working hours the free-time bars cover. */
+const WORK_START = 8;
+const WORK_END = 18;
+/** The Birthdays calendar colour the app gives the calendar it builds from contacts. */
+const BIRTHDAY_COLOR = '#eab308';
+
+function untitled(f: Fmt, title: string): string {
+  return title || f.t('widgets.calendar.untitled', '(no title)');
+}
+
+/** "Thu, Oct 1 · 14:00 – 16:00", "Sun, Oct 4 · All day", or a range across days. */
+function eventWhen(f: Fmt, e: EventItem): string {
+  const allDay = f.t('widgets.calendar.all_day', 'All day');
+  // An end at midnight (all-day events, or a timed one ending at 24:00) belongs to the day before.
+  const last = Math.max(e.start, e.end - 1);
+  if (e.allDay) {
+    return sameDay(e.start, last)
+      ? `${f.weekdayDayMonth(e.start)} · ${allDay}`
+      : `${f.weekdayDayMonth(e.start)} – ${f.weekdayDayMonth(last)} · ${allDay}`;
+  }
+  if (sameDay(e.start, last)) return `${f.weekdayDayMonth(e.start)} · ${f.time(e.start)} – ${f.time(e.end)}`;
+  return `${f.weekdayDayMonth(e.start)} ${f.time(e.start)} – ${f.weekdayDayMonth(e.end)} ${f.time(e.end)}`;
+}
+
+/** Muted icon + text line (`flex items-center gap-1.5 text-[13px] text-muted-foreground`). */
+function MetaLine({ p, iconName, text }: { p: WidgetPalette; iconName: IconName; text: string }) {
+  return (
+    <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent', marginTop: 1 }}>
+      <Icon name={iconName} color={p.muted} size={14} />
+      <Spacer size={6} horizontal />
+      <FlexWidget style={{ flex: 1 }}>
+        <Txt text={text} color={p.muted} size={13} />
+      </FlexWidget>
+    </FlexWidget>
+  );
+}
+
+// ── Invitations ─────────────────────────────────────────────────────────────
+
+export const InvitationsLayout: Layout = ({ s, p, f, height }) => {
+  const invitations = s.calendar.invitations;
+  const inv = invitations[0];
+  if (!inv) {
+    return (
+      <Surface p={p}>
+        <Placeholder
+          p={p}
+          iconName="calendar"
+          title={f.t('widgets.invites.empty', 'No invitations waiting')}
+          click={open(links.calendar())}
+        />
+      </Surface>
+    );
+  }
+  // Natural height is ~139dp at 14dp padding; give up padding, then the people line, then button height.
+  const pad = height < 140 ? 10 : 14;
+  const showPeople = inv.participants.length > 0 && height >= 132;
+  const buttonHeight = height < 116 ? 28 : 32;
+
+  const label = (
+    inv.organizerName
+      ? f.t('widgets.invites.label', 'Invitation · {name}', { name: inv.organizerName })
+      : f.t('widgets.invites.label_plain', 'Invitation')
+  ).toUpperCase();
+  const names = inv.participants.slice(0, 3).map((x) => x.name);
+  const extra = inv.participants.length - names.length;
+  const people = `${names.join(', ')}${extra > 0 ? ` +${extra}` : ''}`;
+  const reply = (status: 'accepted' | 'tentative' | 'declined') => action('rsvp', { id: inv.id, status });
+
+  return (
+    <Surface p={p} style={{ padding: pad }}>
+      <FlexWidget {...open(links.event(inv))} style={{ flexDirection: 'row', width: 'match_parent' }}>
+        <FlexWidget
+          style={{
+            width: 40,
+            height: 40,
+            borderRadius: 20,
+            backgroundColor: p.infoBg,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Icon name="calendar" color={p.info} size={20} />
+        </FlexWidget>
+        <Spacer size={12} horizontal />
+        <FlexWidget style={{ flex: 1 }}>
+          <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
+            <FlexWidget style={{ flex: 1 }}>
+              <Txt text={label} color={p.muted} size={10} weight="600" style={{ letterSpacing: 0.05 }} />
+            </FlexWidget>
+            {invitations.length > 1 ? <Spacer size={6} horizontal /> : null}
+            {invitations.length > 1 ? (
+              <Txt
+                text={f.t('widgets.invites.position', '{index} of {count}', { index: 1, count: invitations.length })}
+                color={p.muted}
+                size={11}
+              />
+            ) : null}
+          </FlexWidget>
+          <Txt text={untitled(f, inv.title)} color={p.fg} size={15} weight="600" />
+          <MetaLine p={p} iconName="clock" text={eventWhen(f, inv)} />
+          {showPeople ? <MetaLine p={p} iconName="users" text={people} /> : null}
+        </FlexWidget>
+      </FlexWidget>
+      <Spacer size={8} />
+      <Spacer />
+      <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
+        <Button
+          p={p}
+          variant="primary"
+          label={f.t('widgets.invites.accept', 'Accept')}
+          flex={1}
+          height={buttonHeight}
+          click={reply('accepted')}
+        />
+        <Spacer size={6} horizontal />
+        <Button p={p} label={f.t('widgets.invites.maybe', 'Maybe')} flex={1} height={buttonHeight} click={reply('tentative')} />
+        <Spacer size={6} horizontal />
+        <Button p={p} label={f.t('widgets.invites.decline', 'Decline')} flex={1} height={buttonHeight} click={reply('declined')} />
+      </FlexWidget>
+    </Surface>
+  );
+};
+
+// ── Free time ───────────────────────────────────────────────────────────────
+
+/** Monday of the week the bars show; on a weekend that is next week's Monday. */
+function barsMonday(now: number, weekStart: 0 | 1): number {
+  const monday = addDays(startOfWeek(now, weekStart), weekStart === 0 ? 1 : 0);
+  // Saturday 00:00 or later: this week's Mon-Fri is over, show the coming one.
+  return now >= addDays(monday, 5) ? addDays(monday, 7) : monday;
+}
+
+/** End of the busy stretch running at `now` (back-to-back events chained). */
+function busyUntil(events: EventItem[], now: number): number {
+  const timed = eventsOnDay(events, startOfDay(now)).filter((e) => !e.allDay);
+  let end = now;
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const e of timed) {
+      if (e.start <= end && e.end > end) {
+        end = e.end;
+        grew = true;
+      }
+    }
+  }
+  return end;
+}
+
+interface BarSegment {
+  width: number;
+  color?: string;
+}
+
+/**
+ * Busy blocks as a left-to-right run of spacers and coloured segments in dp,
+ * so the bar is a plain LinearLayout. Overlapping events continue in the later
+ * event's colour; very short ones keep 2dp so they stay visible.
+ */
+function barSegments(blocks: BusyBlock[], trackWidth: number): BarSegment[] {
+  const out: BarSegment[] = [];
+  let cursor = 0;
+  for (const b of [...blocks].sort((x, y) => x.from - y.from)) {
+    const x0 = Math.max(cursor, Math.round(b.from * trackWidth));
+    let x1 = Math.min(trackWidth, Math.round(b.to * trackWidth));
+    if (x1 - x0 < 2) x1 = Math.min(trackWidth, x0 + 2);
+    if (x1 <= x0) continue;
+    if (x0 > cursor) out.push({ width: x0 - cursor });
+    out.push({ width: x1 - x0, color: b.color });
+    cursor = x1;
+  }
+  return out;
+}
+
+/** Free stretches of one day inside working hours, from the busy-block gaps ("10:00–12:00"). */
+function freeSlots(f: Fmt, events: EventItem[], dayStart: number, now: number): string[] {
+  const winStart = dayStart + WORK_START * HOUR;
+  const winEnd = dayStart + WORK_END * HOUR;
+  const span = winEnd - winStart;
+  const quarter = 15 * MINUTE;
+  // Fractions back to clock times, snapped to the minute so float error never shows as 09:59.
+  const toMs = (frac: number) => Math.round((winStart + frac * span) / MINUTE) * MINUTE;
+  const busy = busyBlocks(events, dayStart, WORK_START, WORK_END)
+    .map((b) => ({ from: toMs(b.from), to: toMs(b.to) }))
+    .sort((a, b) => a.from - b.from);
+  const slots: string[] = [];
+  const push = (from: number, to: number) => {
+    if (to - from >= quarter) slots.push(`${f.time(from)}–${f.time(to)}`);
+  };
+  // Today starts at the next quarter hour; past days produce nothing.
+  let cursor = Math.max(winStart, Math.ceil(now / quarter) * quarter);
+  if (cursor >= winEnd) return slots;
+  for (const b of busy) {
+    if (b.from > cursor) push(cursor, Math.min(b.from, winEnd));
+    cursor = Math.max(cursor, b.to);
+    if (cursor >= winEnd) return slots;
+  }
+  push(cursor, winEnd);
+  return slots;
+}
+
+/** "8:00" / "8 AM" for the axis under the bars. */
+function hourLabel(hour: number, hour12: boolean): string {
+  if (!hour12) return `${hour}:00`;
+  return `${hour % 12 === 0 ? 12 : hour % 12} ${hour < 12 ? 'AM' : 'PM'}`;
+}
+
+interface FreeTier {
+  /** Vertical padding. */
+  pad: number;
+  gap: number;
+  rowHeight: number;
+  axis: boolean;
+  /** Button height; 0 hides the button. */
+  button: number;
+}
+
+const FREE_HEADLINE_HEIGHT = 22;
+const FREE_AXIS_HEIGHT = 13;
+const FREE_LABEL_WIDTH = 28;
+const FREE_LABEL_GAP = 8;
+/** Roomiest first; the layout takes the first one that fits the widget height. */
+const FREE_TIERS: FreeTier[] = [
+  { pad: 10, gap: 6, rowHeight: 13, axis: true, button: 32 },
+  { pad: 8, gap: 3, rowHeight: 12, axis: true, button: 30 },
+  { pad: 8, gap: 3, rowHeight: 12, axis: false, button: 30 },
+  { pad: 8, gap: 3, rowHeight: 11, axis: false, button: 28 },
+  { pad: 8, gap: 3, rowHeight: 11, axis: false, button: 0 },
+];
+
+function freeTierHeight(t: FreeTier): number {
+  return (
+    2 +
+    t.pad * 2 +
+    FREE_HEADLINE_HEIGHT +
+    t.gap +
+    5 * t.rowHeight +
+    (t.axis ? FREE_AXIS_HEIGHT : 0) +
+    (t.button ? t.gap + t.button : 0)
+  );
+}
+
+export const FreeTimeLayout: Layout = ({ s, p, f, now, width, height }) => {
+  if (!s.calendar.supported) {
+    return (
+      <Surface p={p}>
+        <Placeholder p={p} iconName="calendar" title={f.t('widgets.free.no_calendar', 'No calendar on this account')} />
+      </Surface>
+    );
+  }
+  // A declined invitation is not busy time.
+  const events = s.calendar.events.filter((e) => e.myStatus !== 'declined');
+  const tier = FREE_TIERS.find((t) => freeTierHeight(t) <= height) ?? FREE_TIERS[FREE_TIERS.length - 1];
+
+  const ft = freeTime(events, now, WORK_START, WORK_END);
+  let headline: string;
+  let sub: string | null = null;
+  if (ft.busyNow) {
+    const until = busyUntil(events, now);
+    headline = f.t('widgets.free.busy_until', 'Busy until {time}', { time: f.time(until) });
+    const after = eventsOnDay(events, startOfDay(now)).find((e) => !e.allDay && e.start >= until);
+    sub = after
+      ? f.t('widgets.free.then', 'then {title}', { title: untitled(f, after.title) })
+      : f.t('widgets.free.then_free', 'then free');
+  } else if (ft.next) {
+    headline = f.t('widgets.free.free_until', 'Free until {time}', { time: f.time(ft.next.start) });
+    sub = f.t('widgets.free.then', 'then {title}', { title: untitled(f, ft.next.title) });
+  } else {
+    headline = f.t('widgets.free.free_rest', 'Free for the rest of the day');
+  }
+
+  const trackWidth = Math.max(40, Math.floor(width - 2 - 2 * 14 - FREE_LABEL_WIDTH - FREE_LABEL_GAP));
+  const today = startOfDay(now);
+  const monday = barsMonday(now, s.weekStart);
+  const days = [0, 1, 2, 3, 4].map((i) => addDays(monday, i));
+  const labelSize = tier.rowHeight >= 13 ? 11 : 10;
+
+  const bodyLines = days
+    .map((day) => {
+      const slots = freeSlots(f, events, day, now);
+      return slots.length > 0 ? `${f.weekdayDayMonth(day)}: ${slots.join(', ')}` : null;
+    })
+    .filter((line): line is string => line !== null);
+  const mail = open(
+    links.compose({
+      subject: f.t('widgets.free.mail_subject', 'My free times this week'),
+      body: bodyLines.length > 0 ? bodyLines.join('\n') : undefined,
+    }),
+  );
+
+  const track = (day: number) => {
+    const segments = barSegments(busyBlocks(events, day, WORK_START, WORK_END), trackWidth);
+    return (
+      <FlexWidget style={{ width: trackWidth, height: tier.rowHeight, justifyContent: 'center' }}>
+        <FlexWidget
+          style={{
+            flexDirection: 'row',
+            width: trackWidth,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: p.mutedBg,
+            overflow: 'hidden',
+          }}
+        >
+          {segments.map((seg, i) => (
+            <FlexWidget
+              key={i}
+              style={{ width: seg.width, height: 8, ...(seg.color ? { backgroundColor: normalizeHex(seg.color) } : {}) }}
+            />
+          ))}
+        </FlexWidget>
+      </FlexWidget>
+    );
+  };
+
+  return (
+    <Surface p={p} style={{ paddingHorizontal: 14, paddingVertical: tier.pad }}>
+      <FlexWidget
+        {...open(links.calendar())}
+        style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent', height: FREE_HEADLINE_HEIGHT }}
+      >
+        <Txt text={headline} color={p.fg} size={16} weight="600" />
+        {sub ? <Spacer size={8} horizontal /> : null}
+        {sub ? (
+          <FlexWidget style={{ flex: 1 }}>
+            <Txt text={sub} color={p.muted} size={12} />
+          </FlexWidget>
+        ) : null}
+      </FlexWidget>
+      <Spacer size={tier.gap} />
+      <FlexWidget {...open(links.calendar())} style={{ width: 'match_parent' }}>
+        {days.map((day) => {
+          const isToday = day === today;
+          const nowFraction = (now - (day + WORK_START * HOUR)) / ((WORK_END - WORK_START) * HOUR);
+          const marker = isToday && nowFraction >= 0 && nowFraction <= 1
+            ? Math.max(0, Math.min(trackWidth - 2, Math.round(nowFraction * trackWidth) - 1))
+            : null;
+          return (
+            <FlexWidget
+              key={day}
+              style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent', height: tier.rowHeight }}
+            >
+              <FlexWidget style={{ width: FREE_LABEL_WIDTH, height: tier.rowHeight, justifyContent: 'center' }}>
+                <Txt
+                  text={f.weekdayShort(day)}
+                  color={isToday ? p.fg : p.muted}
+                  size={labelSize}
+                  weight={isToday ? '600' : '400'}
+                />
+              </FlexWidget>
+              <Spacer size={FREE_LABEL_GAP} horizontal />
+              {marker === null ? (
+                track(day)
+              ) : (
+                <OverlapWidget style={{ width: trackWidth, height: tier.rowHeight }}>
+                  {track(day)}
+                  <FlexWidget style={{ flexDirection: 'row', width: trackWidth, height: tier.rowHeight }}>
+                    <FlexWidget style={{ width: marker, height: 1 }} />
+                    <FlexWidget style={{ width: 2, height: tier.rowHeight, backgroundColor: p.destructive }} />
+                  </FlexWidget>
+                </OverlapWidget>
+              )}
+            </FlexWidget>
+          );
+        })}
+        {tier.axis ? (
+          <FlexWidget
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              width: 'match_parent',
+              height: FREE_AXIS_HEIGHT,
+              paddingLeft: FREE_LABEL_WIDTH + FREE_LABEL_GAP,
+            }}
+          >
+            <Txt text={hourLabel(WORK_START, f.hour12)} color={p.muted} size={10} />
+            <Spacer />
+            <Txt text={hourLabel(Math.round((WORK_START + WORK_END) / 2), f.hour12)} color={p.muted} size={10} />
+            <Spacer />
+            <Txt text={hourLabel(WORK_END, f.hour12)} color={p.muted} size={10} />
+          </FlexWidget>
+        ) : null}
+      </FlexWidget>
+      {tier.button ? <Spacer size={tier.gap} /> : null}
+      <Spacer />
+      {tier.button ? (
+        <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
+          <Button
+            p={p}
+            iconName="mail"
+            label={f.t('widgets.free.mail', 'Mail my free times')}
+            flex={1}
+            height={tier.button}
+            click={mail}
+          />
+        </FlexWidget>
+      ) : null}
+    </Surface>
+  );
+};
+
+// ── Tasks ───────────────────────────────────────────────────────────────────
+
+function tasksOff(p: WidgetPalette, f: Fmt) {
+  return (
+    <Surface p={p}>
+      <Placeholder
+        p={p}
+        iconName="checklist"
+        title={f.t('widgets.tasks.off', 'Tasks are off')}
+        body={f.t('widgets.tasks.off_body', "Turn on tasks in the app's calendar settings")}
+        click={open(links.settings('calendar'))}
+      />
+    </Surface>
+  );
+}
+
+export const TasksLayout: Layout = ({ s, p, f, now, height }) => {
+  if (!s.tasks.supported) return tasksOff(p, f);
+  const compact = height < 200;
+  const headerHeight = compact ? 36 : 44;
+  // Open tasks first; sortTasks puts the completed ones last, so they only fill leftover rows.
+  const sorted = sortTasks(s.tasks.items, now);
+  const openCount = sorted.filter((t) => !t.done).length;
+  const fit = Math.max(1, Math.floor((height - 2 - headerHeight - 1) / TASK_ROW_HEIGHT));
+  const rows = sorted.slice(0, fit);
+  return (
+    <Surface p={p}>
+      <Header
+        p={p}
+        height={headerHeight}
+        iconName="checklist"
+        title={f.t('widgets.tasks.title', 'Tasks')}
+        count={f.t('widgets.tasks.open_count', '{count} open', { count: openCount })}
+        click={open(links.calendar())}
+        trailing={<Fab p={p} iconName="plus" size={compact ? 28 : 32} click={open(links.calendar())} />}
+      />
+      {openCount === 0 ? (
+        <Placeholder p={p} iconName="check" title={f.t('widgets.tasks.empty', 'No open tasks')} click={open(links.calendar())} />
+      ) : (
+        rows.map((task, i) => <TaskRow key={task.id} p={p} f={f} task={task} now={now} last={i === rows.length - 1} />)
+      )}
+    </Surface>
+  );
+};
+
+export const TaskProgressLayout: Layout = ({ s, p, f, now, width, height }) => {
+  if (!s.tasks.supported) return tasksOff(p, f);
+  const items = s.tasks.items;
+  // Today's work: what is overdue or due today, plus what has been ticked off.
+  const counted = new Map<string, TaskItem>();
+  for (const t of tasksDueNow(items, now)) counted.set(t.id, t);
+  for (const t of items) if (t.done) counted.set(t.id, t);
+  const set = counted.size > 0 ? Array.from(counted.values()) : items;
+  if (set.length === 0) {
+    return (
+      <Surface p={p}>
+        <Placeholder p={p} iconName="check" title={f.t('widgets.tasks.empty', 'No open tasks')} click={open(links.calendar())} />
+      </Surface>
+    );
+  }
+  const total = set.length;
+  const done = set.filter((t) => t.done).length;
+  const left = total - done;
+  const pad = height < 130 ? 10 : height < 150 ? 12 : 14;
+  // Title (~19dp) and status line (~16dp) plus two 6dp gaps around the ring.
+  const ringSize = Math.max(
+    32,
+    Math.min(80, Math.floor(height - 2 - 2 * pad - 19 - 16 - 12), Math.floor(width - 2 - 2 * pad)),
+  );
+  const labelSize = ringSize >= 72 ? 20 : ringSize >= 60 ? 17 : ringSize >= 48 ? 14 : 11;
+  return (
+    <Surface p={p} style={{ padding: pad, alignItems: 'center' }} click={open(links.calendar())}>
+      <FlexWidget style={{ width: 'match_parent' }}>
+        <Txt text={f.t('widgets.tasks.title', 'Tasks')} color={p.fg} size={14} weight="500" />
+      </FlexWidget>
+      <Spacer size={6} />
+      <OverlapWidget style={{ width: ringSize, height: ringSize }}>
+        <SvgWidget svg={ring(done / total, p.mutedBg, p.success)} style={{ width: ringSize, height: ringSize }} />
+        <FlexWidget style={{ width: ringSize, height: ringSize, justifyContent: 'center', alignItems: 'center' }}>
+          <Txt text={`${done}/${total}`} color={p.fg} size={labelSize} weight="700" />
+        </FlexWidget>
+      </OverlapWidget>
+      <Spacer size={6} />
+      <Txt
+        text={left > 0 ? f.t('widgets.tasks.still_open', '{count} still open', { count: left }) : f.t('widgets.tasks.all_done', 'All done')}
+        color={p.muted}
+        size={12}
+      />
+    </Surface>
+  );
+};
+
+// ── Countdown ───────────────────────────────────────────────────────────────
+
+export const CountdownLayout: Layout = ({ s, p, f, now, height }) => {
+  const e = countdownTarget(s.calendar.events, now);
+  if (!e) {
+    return (
+      <Surface p={p}>
+        <Placeholder p={p} iconName="calendar" title={f.t('widgets.countdown.empty', 'No upcoming events')} click={open(links.calendar())} />
+      </Surface>
+    );
+  }
+  const days = Math.max(0, daysUntil(e.start, now));
+  // ~133dp tall at 48sp; smaller launchers get a smaller number and padding.
+  const bigSize = height >= 140 ? 48 : height >= 125 ? 40 : 34;
+  const pad = height >= 125 ? 14 : 10;
+  const word = days === 0 ? f.t('widgets.calendar.today', 'Today') : days === 1 ? f.t('widgets.calendar.tomorrow', 'Tomorrow') : null;
+  const when = `${f.weekdayDayMonth(e.start)} · ${e.allDay ? f.t('widgets.calendar.all_day', 'All day') : f.time(e.start)}`;
+  return (
+    <Surface p={p} style={{ padding: pad }} click={open(links.event(e))}>
+      <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
+        <Dot color={normalizeHex(e.color)} size={8} />
+        <Spacer size={6} horizontal />
+        <FlexWidget style={{ flex: 1 }}>
+          <Txt text={untitled(f, e.title)} color={p.fg} size={14} weight="500" />
+        </FlexWidget>
+      </FlexWidget>
+      <Spacer />
+      {word ? (
+        <Txt text={word} color={p.fg} size={Math.round(bigSize * 0.55)} weight="700" />
+      ) : (
+        <FlexWidget style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+          <Txt text={String(days)} color={p.fg} size={bigSize} weight="700" />
+          <Spacer size={6} horizontal />
+          {/* Bottom padding lines the unit up with the number's baseline (descent is ~0.27em). */}
+          <Txt
+            text={f.t('widgets.countdown.days', '{count, plural, one {day} other {days}}', { count: days })}
+            color={p.muted}
+            size={14}
+            style={{ paddingBottom: Math.round((bigSize - 14) * 0.27) }}
+          />
+        </FlexWidget>
+      )}
+      <Txt text={when} color={p.muted} size={12} style={{ marginTop: 4 }} />
+    </Surface>
+  );
+};
+
+// ── Birthdays ───────────────────────────────────────────────────────────────
+
+const BIRTHDAY_HEADER_HEIGHT = 38;
+const BIRTHDAY_ROW_HEIGHT = 50;
+
+export const BirthdaysLayout: Layout = ({ s, p, f, now, width, height }) => {
+  const upcoming = upcomingBirthdays(s, now);
+  const header = (
+    <Header
+      p={p}
+      height={BIRTHDAY_HEADER_HEIGHT}
+      iconName="cake"
+      iconColor={BIRTHDAY_COLOR}
+      title={f.t('widgets.birthdays.title', 'Birthdays')}
+      click={open(links.calendar())}
+    />
+  );
+  if (upcoming.length === 0) {
+    return (
+      <Surface p={p}>
+        {header}
+        <Placeholder
+          p={p}
+          iconName="cake"
+          title={f.t('widgets.birthdays.empty', 'No birthdays coming up')}
+          body={f.t('widgets.birthdays.empty_body', 'Birthdays come from your contacts.')}
+          click={open(links.contacts())}
+        />
+      </Surface>
+    );
+  }
+  const fit = Math.max(1, Math.floor((height - 2 - BIRTHDAY_HEADER_HEIGHT - 1) / BIRTHDAY_ROW_HEIGHT));
+  const rows = upcoming.slice(0, fit);
+  const wishTarget = rows.find((b) => b.email);
+  // At 3 columns the labelled button would leave no room for the name.
+  const narrow = width < 260;
+  return (
+    <Surface p={p}>
+      {header}
+      {rows.map((b, i) => {
+        const days = daysUntil(b.date, now);
+        const dateLine = days <= 0
+          ? f.t('widgets.calendar.today', 'Today')
+          : days === 1
+            ? f.t('widgets.calendar.tomorrow', 'Tomorrow')
+            : `${f.weekdayDayMonth(b.date)} · ${f.t('widgets.birthdays.in_days', '{count, plural, one {in # day} other {in # days}}', { count: days })}`;
+        const wish = b === wishTarget && b.email;
+        return (
+          <FlexWidget
+            key={`${b.name}-${b.date}`}
+            {...open(links.contacts())}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              width: 'match_parent',
+              height: BIRTHDAY_ROW_HEIGHT,
+              paddingHorizontal: 14,
+              borderBottomWidth: i === rows.length - 1 ? 0 : 1,
+              borderBottomColor: p.border,
+            }}
+          >
+            <Avatar initials={b.initials} color={b.color} size={32} />
+            <Spacer size={10} horizontal />
+            <FlexWidget style={{ flex: 1 }}>
+              <Txt text={b.name || b.email || ''} color={p.fg} size={14} weight="600" />
+              <Txt text={dateLine} color={p.muted} size={12} />
+            </FlexWidget>
+            {wish ? <Spacer size={8} horizontal /> : null}
+            {wish ? (
+              <Button
+                p={p}
+                variant="primary"
+                iconName="send"
+                label={narrow ? undefined : f.t('widgets.birthdays.send_wishes', 'Send wishes')}
+                click={open(links.compose({ to: wish, subject: f.t('widgets.birthdays.wishes_subject', 'Happy birthday!') }))}
+              />
+            ) : null}
+          </FlexWidget>
+        );
+      })}
+    </Surface>
+  );
+};
diff --git a/src/widgets/layouts/types.ts b/src/widgets/layouts/types.ts
new file mode 100644
index 00000000..af86b6fc
--- /dev/null
+++ b/src/widgets/layouts/types.ts
@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { Fmt } from '../format';
+import type { WidgetSnapshot } from '../snapshot';
+import type { WidgetPalette } from '../theme';
+
+/** Per-widget state kept between draws (e.g. which message the triage card shows). */
+export type WidgetLocalState = Record<string, unknown>;
+
+export interface LayoutProps {
+  s: WidgetSnapshot;
+  p: WidgetPalette;
+  f: Fmt;
+  now: number;
+  /** Widget size in dp as the launcher reports it. */
+  width: number;
+  height: number;
+  widgetId: number;
+  local: WidgetLocalState;
+}
+
+export type Layout = (props: LayoutProps) => React.JSX.Element;
diff --git a/src/widgets/local-state.ts b/src/widgets/local-state.ts
new file mode 100644
index 00000000..43b78660
--- /dev/null
+++ b/src/widgets/local-state.ts
@@ -0,0 +1,26 @@
+// State that belongs to one placed widget rather than to the data: which
+// message the triage card is showing. Keyed by the launcher's widget id and
+// dropped when the widget is removed.
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { WidgetLocalState } from './layouts/types';
+
+const key = (widgetId: number) => `widgets:local:${widgetId}`;
+
+export async function loadLocal(widgetId: number): Promise<WidgetLocalState> {
+  try {
+    const raw = await AsyncStorage.getItem(key(widgetId));
+    const parsed = raw ? JSON.parse(raw) : null;
+    return parsed && typeof parsed === 'object' ? (parsed as WidgetLocalState) : {};
+  } catch {
+    return {};
+  }
+}
+
+export async function saveLocal(widgetId: number, state: WidgetLocalState): Promise<void> {
+  await AsyncStorage.setItem(key(widgetId), JSON.stringify(state));
+}
+
+export async function removeLocal(widgetId: number): Promise<void> {
+  await AsyncStorage.removeItem(key(widgetId));
+}
diff --git a/src/widgets/parts.tsx b/src/widgets/parts.tsx
new file mode 100644
index 00000000..2adc0727
--- /dev/null
+++ b/src/widgets/parts.tsx
@@ -0,0 +1,276 @@
+// List rows reused across widgets: the message rows of the webmail list, the
+// agenda's event rows and day bands, and the task list's rows.
+
+import React from 'react';
+import { FlexWidget, TextWidget } from 'react-native-android-widget';
+import { action, links, open, type WidgetClick } from './clicks';
+import { dueKind } from './derive';
+import type { Fmt } from './format';
+import { Avatar, ColorBar, Dot, FilledIcon, Icon, Spacer, Txt } from './primitives';
+import type { EventItem, MailItem, TaskItem } from './snapshot';
+import type { WidgetPalette } from './theme';
+
+/** `bg-primary` pill with the message icon and the thread size, as in the list. */
+export function ThreadBadge({ p, count }: { p: WidgetPalette; count: number }) {
+  return (
+    <FlexWidget
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 18,
+        paddingHorizontal: 6,
+        borderRadius: 999,
+        backgroundColor: p.primary,
+      }}
+    >
+      <Icon name="message" color={p.primaryFg} size={11} />
+      <Spacer size={3} horizontal />
+      <TextWidget text={String(count)} style={{ color: p.primaryFg, fontSize: 11, fontWeight: '600' }} />
+    </FlexWidget>
+  );
+}
+
+/**
+ * The webmail's message row. `compact` drops the avatar and preview (the
+ * extra-compact density); otherwise avatar, sender/time, subject and one line
+ * of preview. Unread rows get the accent tint and the unread dot.
+ */
+export function MailRow({
+  p,
+  f,
+  m,
+  now,
+  compact,
+  showAccountDot,
+  accountColor,
+  last,
+}: {
+  p: WidgetPalette;
+  f: Fmt;
+  m: MailItem;
+  now: number;
+  compact?: boolean;
+  showAccountDot?: boolean;
+  accountColor?: string;
+  last?: boolean;
+}) {
+  const click = open(links.message(m));
+  const senderColor = m.unread ? p.fg : p.muted;
+  const header = (
+    <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent', height: 18 }}>
+      {showAccountDot && accountColor ? <Dot color={accountColor as `#${string}`} size={8} /> : null}
+      {showAccountDot && accountColor ? <Spacer size={6} horizontal /> : null}
+      <FlexWidget style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+        <Txt text={m.fromName || m.fromEmail} color={senderColor} size={14} weight={m.unread ? '700' : '500'} />
+        {!compact && m.threadSize > 1 ? <Spacer size={6} horizontal /> : null}
+        {!compact && m.threadSize > 1 ? <ThreadBadge p={p} count={m.threadSize} /> : null}
+        {!compact && m.hasAttachment ? <Spacer size={4} horizontal /> : null}
+        {!compact && m.hasAttachment ? <Icon name="paperclip" color={p.muted} size={13} /> : null}
+        {m.starred ? <Spacer size={4} horizontal /> : null}
+        {m.starred ? <FilledIcon name="star" color={p.star} size={13} /> : null}
+      </FlexWidget>
+      <Spacer size={6} horizontal />
+      <Txt text={f.listDate(m.receivedAt, now)} color={m.unread ? p.fg : p.muted} size={12} weight={m.unread ? '600' : '400'} />
+    </FlexWidget>
+  );
+  const subject = (
+    <Txt
+      text={m.subject || f.t('widgets.mail.no_subject', '(no subject)')}
+      color={m.unread ? p.fg : p.subjectRead}
+      size={compact ? 13 : 14}
+      weight={m.unread ? '600' : '400'}
+    />
+  );
+  return (
+    <FlexWidget
+      {...click}
+      style={{
+        width: 'match_parent',
+        flexDirection: 'row',
+        backgroundColor: m.unread ? p.unreadRow : p.bg,
+        borderBottomWidth: last ? 0 : 1,
+        borderBottomColor: p.border,
+        paddingLeft: 4,
+        paddingRight: 12,
+        paddingVertical: compact ? 4 : 8,
+      }}
+    >
+      <FlexWidget style={{ width: 12, paddingTop: 5, alignItems: 'center' }}>
+        {m.unread ? <Dot color={p.unreadDot} size={7} /> : null}
+      </FlexWidget>
+      {!compact ? <Avatar initials={m.initials} color={m.color} size={32} /> : null}
+      {!compact ? <Spacer size={10} horizontal /> : null}
+      <FlexWidget style={{ flex: 1 }}>
+        {header}
+        {subject}
+        {!compact && m.preview ? <Txt text={m.preview} color={p.muted} size={13} /> : null}
+      </FlexWidget>
+    </FlexWidget>
+  );
+}
+
+/** Row height used to decide how many rows fit. */
+export const MAIL_ROW_HEIGHT = { compact: 45, full: 76 };
+
+/** The agenda's day band: "Today" in the accent, other days in the foreground. */
+export function DayBand({ p, f, dayStart, now }: { p: WidgetPalette; f: Fmt; dayStart: number; now: number }) {
+  const today = new Date(now);
+  today.setHours(0, 0, 0, 0);
+  const diff = Math.round((dayStart - today.getTime()) / 86400000);
+  const label = diff === 0
+    ? f.t('widgets.calendar.today', 'Today')
+    : diff === 1
+      ? f.t('widgets.calendar.tomorrow', 'Tomorrow')
+      : f.weekdayLong(dayStart);
+  return (
+    <FlexWidget
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: 'match_parent',
+        height: 28,
+        paddingHorizontal: 14,
+        backgroundColor: p.dayHeader,
+        borderBottomWidth: 1,
+        borderBottomColor: p.border,
+      }}
+    >
+      <Txt text={label} color={diff === 0 ? p.today : p.fg} size={13} weight="600" />
+      <Spacer size={8} horizontal />
+      <Txt text={f.dayMonth(dayStart)} color={p.muted} size={12} />
+    </FlexWidget>
+  );
+}
+
+/** Agenda event row: start/end column, colour bar, title and place. */
+export function AgendaRow({ p, f, e, last }: { p: WidgetPalette; f: Fmt; e: EventItem; last?: boolean }) {
+  const meta = e.videoUrl
+    ? { icon: 'video' as const, text: e.videoName || f.t('widgets.calendar.video_call', 'Video call') }
+    : e.location
+      ? { icon: 'mapPin' as const, text: e.location }
+      : null;
+  const sub = [meta?.text, e.calendarName].filter(Boolean).join(' · ');
+  return (
+    <FlexWidget
+      {...open(links.event(e))}
+      style={{
+        flexDirection: 'row',
+        width: 'match_parent',
+        paddingHorizontal: 14,
+        paddingVertical: 7,
+        borderBottomWidth: last ? 0 : 1,
+        borderBottomColor: p.border,
+      }}
+    >
+      <FlexWidget style={{ width: 44, alignItems: 'center' }}>
+        {e.allDay ? (
+          <Txt text={f.t('widgets.calendar.all_day', 'All day')} color={p.muted} size={12} />
+        ) : (
+          <FlexWidget style={{ alignItems: 'center' }}>
+            <Txt text={f.time(e.start)} color={p.fg} size={13} weight="600" />
+            <Txt text={f.time(e.end)} color={p.muted} size={11} />
+          </FlexWidget>
+        )}
+      </FlexWidget>
+      <Spacer size={8} horizontal />
+      <ColorBar color={e.color} height={34} />
+      <Spacer size={10} horizontal />
+      <FlexWidget style={{ flex: 1 }}>
+        <Txt text={e.title || f.t('widgets.calendar.untitled', '(no title)')} color={p.fg} size={14} weight="500" />
+        {sub ? (
+          <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {meta ? <Icon name={meta.icon} color={p.muted} size={12} /> : null}
+            {meta ? <Spacer size={4} horizontal /> : null}
+            <Txt text={sub} color={p.muted} size={12} />
+          </FlexWidget>
+        ) : null}
+      </FlexWidget>
+    </FlexWidget>
+  );
+}
+
+export const AGENDA_ROW_HEIGHT = 50;
+export const DAY_BAND_HEIGHT = 28;
+
+/** Task list row: round tick box that works in place, title, due label, calendar. */
+export function TaskRow({
+  p,
+  f,
+  task,
+  now,
+  last,
+}: {
+  p: WidgetPalette;
+  f: Fmt;
+  task: TaskItem;
+  now: number;
+  last?: boolean;
+}) {
+  const kind = dueKind(task, now);
+  const dueColor = task.done
+    ? p.muted
+    : kind === 'overdue'
+      ? p.overdue
+      : kind === 'today'
+        ? p.dueToday
+        : p.muted;
+  const dueLabel = task.due === undefined
+    ? ''
+    : kind === 'overdue'
+      ? f.t('widgets.tasks.overdue', 'Overdue')
+      : kind === 'today'
+        ? f.t('widgets.tasks.today', 'Today')
+        : kind === 'tomorrow'
+          ? f.t('widgets.tasks.tomorrow', 'Tomorrow')
+          : f.weekdayDayMonth(task.due);
+  const toggle: WidgetClick = action('toggleTask', { id: task.id });
+  return (
+    <FlexWidget
+      style={{
+        flexDirection: 'row',
+        width: 'match_parent',
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        borderBottomWidth: last ? 0 : 1,
+        borderBottomColor: p.border,
+      }}
+    >
+      <FlexWidget
+        {...toggle}
+        accessibilityLabel={task.done ? f.t('widgets.tasks.mark_incomplete', 'Mark as not done') : f.t('widgets.tasks.mark_complete', 'Mark as done')}
+        style={{
+          width: 22,
+          height: 22,
+          borderRadius: 11,
+          borderWidth: 2,
+          borderColor: task.done ? p.success : (`${p.muted}66` as `#${string}`),
+          backgroundColor: task.done ? p.success : p.bg,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {task.done ? <Icon name="check" color="#ffffff" size={13} /> : null}
+      </FlexWidget>
+      <Spacer size={12} horizontal />
+      <FlexWidget style={{ flex: 1 }}>
+        <TextWidget
+          text={task.title || f.t('widgets.tasks.no_title', '(no title)')}
+          maxLines={1}
+          truncate="END"
+          style={{ color: task.done ? p.muted : p.fg, fontSize: 14, fontWeight: '500' }}
+        />
+        <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {dueLabel ? <Icon name="calendarPlain" color={dueColor} size={12} /> : null}
+          {dueLabel ? <Spacer size={4} horizontal /> : null}
+          {dueLabel ? <Txt text={dueLabel} color={dueColor} size={12} /> : null}
+          {dueLabel && task.calendarName ? <Spacer size={8} horizontal /> : null}
+          {task.calendarName ? <Dot color={task.color as `#${string}`} size={8} /> : null}
+          {task.calendarName ? <Spacer size={4} horizontal /> : null}
+          {task.calendarName ? <Txt text={task.calendarName} color={p.muted} size={12} /> : null}
+        </FlexWidget>
+      </FlexWidget>
+    </FlexWidget>
+  );
+}
+
+export const TASK_ROW_HEIGHT = 55;
diff --git a/src/widgets/previews/AgendaWidget.png b/src/widgets/previews/AgendaWidget.png
new file mode 100644
index 00000000..23530cdc
Binary files /dev/null and b/src/widgets/previews/AgendaWidget.png differ
diff --git a/src/widgets/previews/AllAccountsWidget.png b/src/widgets/previews/AllAccountsWidget.png
new file mode 100644
index 00000000..07288c8e
Binary files /dev/null and b/src/widgets/previews/AllAccountsWidget.png differ
diff --git a/src/widgets/previews/AttachmentsWidget.png b/src/widgets/previews/AttachmentsWidget.png
new file mode 100644
index 00000000..c9b13319
Binary files /dev/null and b/src/widgets/previews/AttachmentsWidget.png differ
diff --git a/src/widgets/previews/BirthdaysWidget.png b/src/widgets/previews/BirthdaysWidget.png
new file mode 100644
index 00000000..4d572809
Binary files /dev/null and b/src/widgets/previews/BirthdaysWidget.png differ
diff --git a/src/widgets/previews/CountdownWidget.png b/src/widgets/previews/CountdownWidget.png
new file mode 100644
index 00000000..2ef9baf1
Binary files /dev/null and b/src/widgets/previews/CountdownWidget.png differ
diff --git a/src/widgets/previews/DateNextWidget.png b/src/widgets/previews/DateNextWidget.png
new file mode 100644
index 00000000..82e3c71e
Binary files /dev/null and b/src/widgets/previews/DateNextWidget.png differ
diff --git a/src/widgets/previews/FavouritePeopleWidget.png b/src/widgets/previews/FavouritePeopleWidget.png
new file mode 100644
index 00000000..026e9b71
Binary files /dev/null and b/src/widgets/previews/FavouritePeopleWidget.png differ
diff --git a/src/widgets/previews/FolderCountsWidget.png b/src/widgets/previews/FolderCountsWidget.png
new file mode 100644
index 00000000..0aed2541
Binary files /dev/null and b/src/widgets/previews/FolderCountsWidget.png differ
diff --git a/src/widgets/previews/FreeTimeWidget.png b/src/widgets/previews/FreeTimeWidget.png
new file mode 100644
index 00000000..95631e05
Binary files /dev/null and b/src/widgets/previews/FreeTimeWidget.png differ
diff --git a/src/widgets/previews/InboxWidget.png b/src/widgets/previews/InboxWidget.png
new file mode 100644
index 00000000..0ef3d992
Binary files /dev/null and b/src/widgets/previews/InboxWidget.png differ
diff --git a/src/widgets/previews/InvitationsWidget.png b/src/widgets/previews/InvitationsWidget.png
new file mode 100644
index 00000000..9e1573c5
Binary files /dev/null and b/src/widgets/previews/InvitationsWidget.png differ
diff --git a/src/widgets/previews/LastDraftWidget.png b/src/widgets/previews/LastDraftWidget.png
new file mode 100644
index 00000000..79642042
Binary files /dev/null and b/src/widgets/previews/LastDraftWidget.png differ
diff --git a/src/widgets/previews/LatestMessageWidget.png b/src/widgets/previews/LatestMessageWidget.png
new file mode 100644
index 00000000..63b680c8
Binary files /dev/null and b/src/widgets/previews/LatestMessageWidget.png differ
diff --git a/src/widgets/previews/MailAndNextWidget.png b/src/widgets/previews/MailAndNextWidget.png
new file mode 100644
index 00000000..14f5c077
Binary files /dev/null and b/src/widgets/previews/MailAndNextWidget.png differ
diff --git a/src/widgets/previews/MailSearchWidget.png b/src/widgets/previews/MailSearchWidget.png
new file mode 100644
index 00000000..b74ce6df
Binary files /dev/null and b/src/widgets/previews/MailSearchWidget.png differ
diff --git a/src/widgets/previews/MailShortcutsWidget.png b/src/widgets/previews/MailShortcutsWidget.png
new file mode 100644
index 00000000..e1a0a3d3
Binary files /dev/null and b/src/widgets/previews/MailShortcutsWidget.png differ
diff --git a/src/widgets/previews/MonthWidget.png b/src/widgets/previews/MonthWidget.png
new file mode 100644
index 00000000..f386255d
Binary files /dev/null and b/src/widgets/previews/MonthWidget.png differ
diff --git a/src/widgets/previews/NextEventWidget.png b/src/widgets/previews/NextEventWidget.png
new file mode 100644
index 00000000..28eb7c5d
Binary files /dev/null and b/src/widgets/previews/NextEventWidget.png differ
diff --git a/src/widgets/previews/OutboxWidget.png b/src/widgets/previews/OutboxWidget.png
new file mode 100644
index 00000000..e3530b98
Binary files /dev/null and b/src/widgets/previews/OutboxWidget.png differ
diff --git a/src/widgets/previews/RecentFilesWidget.png b/src/widgets/previews/RecentFilesWidget.png
new file mode 100644
index 00000000..7796ef45
Binary files /dev/null and b/src/widgets/previews/RecentFilesWidget.png differ
diff --git a/src/widgets/previews/StarredWidget.png b/src/widgets/previews/StarredWidget.png
new file mode 100644
index 00000000..dbe92bdd
Binary files /dev/null and b/src/widgets/previews/StarredWidget.png differ
diff --git a/src/widgets/previews/StorageWidget.png b/src/widgets/previews/StorageWidget.png
new file mode 100644
index 00000000..29a3fa57
Binary files /dev/null and b/src/widgets/previews/StorageWidget.png differ
diff --git a/src/widgets/previews/TagWidget.png b/src/widgets/previews/TagWidget.png
new file mode 100644
index 00000000..f2b1feb4
Binary files /dev/null and b/src/widgets/previews/TagWidget.png differ
diff --git a/src/widgets/previews/TaskProgressWidget.png b/src/widgets/previews/TaskProgressWidget.png
new file mode 100644
index 00000000..db963368
Binary files /dev/null and b/src/widgets/previews/TaskProgressWidget.png differ
diff --git a/src/widgets/previews/TasksWidget.png b/src/widgets/previews/TasksWidget.png
new file mode 100644
index 00000000..758c181a
Binary files /dev/null and b/src/widgets/previews/TasksWidget.png differ
diff --git a/src/widgets/previews/TodayEventsWidget.png b/src/widgets/previews/TodayEventsWidget.png
new file mode 100644
index 00000000..18ed45db
Binary files /dev/null and b/src/widgets/previews/TodayEventsWidget.png differ
diff --git a/src/widgets/previews/TodayHubWidget.png b/src/widgets/previews/TodayHubWidget.png
new file mode 100644
index 00000000..4edb42ef
Binary files /dev/null and b/src/widgets/previews/TodayHubWidget.png differ
diff --git a/src/widgets/previews/TriageWidget.png b/src/widgets/previews/TriageWidget.png
new file mode 100644
index 00000000..d3c6f1c9
Binary files /dev/null and b/src/widgets/previews/TriageWidget.png differ
diff --git a/src/widgets/previews/UnreadCountWidget.png b/src/widgets/previews/UnreadCountWidget.png
new file mode 100644
index 00000000..19e9e6be
Binary files /dev/null and b/src/widgets/previews/UnreadCountWidget.png differ
diff --git a/src/widgets/previews/UpNextWidget.png b/src/widgets/previews/UpNextWidget.png
new file mode 100644
index 00000000..4fa8657f
Binary files /dev/null and b/src/widgets/previews/UpNextWidget.png differ
diff --git a/src/widgets/previews/VacationWidget.png b/src/widgets/previews/VacationWidget.png
new file mode 100644
index 00000000..55cbcf1f
Binary files /dev/null and b/src/widgets/previews/VacationWidget.png differ
diff --git a/src/widgets/previews/WeekWidget.png b/src/widgets/previews/WeekWidget.png
new file mode 100644
index 00000000..2ad380dc
Binary files /dev/null and b/src/widgets/previews/WeekWidget.png differ
diff --git a/src/widgets/primitives.tsx b/src/widgets/primitives.tsx
new file mode 100644
index 00000000..0c22f23d
--- /dev/null
+++ b/src/widgets/primitives.tsx
@@ -0,0 +1,391 @@
+// Building blocks shared by the widget layouts. They mirror the webmail pieces
+// the mockups copied: list rows, avatars, pills, event chips, buttons.
+// react-native-android-widget turns these into RemoteViews, so only its own
+// components (FlexWidget, TextWidget, SvgWidget, OverlapWidget) can appear.
+
+import React from 'react';
+import {
+  FlexWidget,
+  OverlapWidget,
+  SvgWidget,
+  TextWidget,
+  type ColorProp,
+  type FlexWidgetStyle,
+  type TextWidgetStyle,
+} from 'react-native-android-widget';
+import { chipBackground, normalizeHex, type WidgetPalette } from './theme';
+import { filledIcon, icon, type FilledIconName, type IconName } from './icons';
+import type { WidgetClick } from './clicks';
+
+/** Corner radius of the widget surface; launchers clip to roughly this on Android 12+. */
+export const WIDGET_RADIUS = 22;
+
+export function Surface({
+  p,
+  children,
+  style,
+  click,
+}: {
+  p: WidgetPalette;
+  children?: React.ReactNode;
+  style?: FlexWidgetStyle;
+  click?: WidgetClick;
+}) {
+  return (
+    <FlexWidget
+      {...click}
+      style={{
+        height: 'match_parent',
+        width: 'match_parent',
+        backgroundColor: p.bg,
+        borderRadius: WIDGET_RADIUS,
+        borderWidth: 1,
+        borderColor: p.frame,
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      {children}
+    </FlexWidget>
+  );
+}
+
+export function Txt({
+  text,
+  color,
+  size = 14,
+  weight = '400',
+  lines = 1,
+  style,
+  click,
+}: {
+  text: string;
+  color: ColorProp;
+  size?: number;
+  weight?: TextWidgetStyle['fontWeight'];
+  lines?: number;
+  style?: TextWidgetStyle;
+  click?: WidgetClick;
+}) {
+  return (
+    <TextWidget
+      {...click}
+      text={text}
+      maxLines={lines}
+      truncate="END"
+      style={{ color, fontSize: size, fontWeight: weight, ...style }}
+    />
+  );
+}
+
+export function Icon({
+  name,
+  color,
+  size = 16,
+  style,
+  click,
+}: {
+  name: IconName;
+  color: string;
+  size?: number;
+  style?: FlexWidgetStyle;
+  click?: WidgetClick;
+}) {
+  return <SvgWidget {...click} svg={icon(name, color)} style={{ width: size, height: size, ...style }} />;
+}
+
+export function FilledIcon({ name, color, size = 14 }: { name: FilledIconName; color: string; size?: number }) {
+  return <SvgWidget svg={filledIcon(name, color)} style={{ width: size, height: size }} />;
+}
+
+export function Spacer({ size, horizontal }: { size?: number; horizontal?: boolean }) {
+  if (size === undefined) return <FlexWidget style={{ flex: 1 }} />;
+  return <FlexWidget style={horizontal ? { width: size, height: 1 } : { height: size, width: 1 }} />;
+}
+
+export function Dot({ color, size = 8 }: { color: ColorProp; size?: number }) {
+  return <FlexWidget style={{ width: size, height: size, borderRadius: size / 2, backgroundColor: color }} />;
+}
+
+export function Divider({ p }: { p: WidgetPalette }) {
+  return <FlexWidget style={{ height: 1, width: 'match_parent', backgroundColor: p.border }} />;
+}
+
+/** Initials on the hashed avatar colour, as the webmail draws a sender without a photo. */
+export function Avatar({
+  initials,
+  color,
+  size = 32,
+  ring,
+}: {
+  initials: string;
+  color: string;
+  size?: number;
+  /** Draws a ring in this colour, for stacked avatars. */
+  ring?: ColorProp;
+}) {
+  return (
+    <FlexWidget
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: normalizeHex(color),
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...(ring ? { borderWidth: 2, borderColor: ring } : {}),
+      }}
+    >
+      <TextWidget
+        text={initials}
+        allowFontScaling={false}
+        style={{ color: '#ffffff', fontSize: Math.round(size * 0.38), fontWeight: '500' }}
+      />
+    </FlexWidget>
+  );
+}
+
+/** `rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium` */
+export function Pill({
+  text,
+  bg,
+  color,
+  size = 11,
+}: {
+  text: string;
+  bg: ColorProp;
+  color: ColorProp;
+  size?: number;
+}) {
+  return (
+    <FlexWidget style={{ backgroundColor: bg, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2 }}>
+      <TextWidget text={text} maxLines={1} style={{ color, fontSize: size, fontWeight: '500' }} />
+    </FlexWidget>
+  );
+}
+
+/** Month/week-view event chip: calendar colour at ~14%, 3dp left edge, text in the colour. */
+export function EventChip({
+  title,
+  time,
+  color,
+  height = 24,
+  style,
+  click,
+}: {
+  title: string;
+  time?: string;
+  color: string;
+  height?: number;
+  style?: FlexWidgetStyle;
+  click?: WidgetClick;
+}) {
+  const hex = normalizeHex(color);
+  return (
+    <FlexWidget
+      {...click}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        height,
+        width: 'match_parent',
+        backgroundColor: chipBackground(hex),
+        borderLeftWidth: 3,
+        borderLeftColor: hex,
+        borderRadius: 3,
+        paddingLeft: 6,
+        paddingRight: 4,
+        ...style,
+      }}
+    >
+      {time ? (
+        <TextWidget text={`${time}  `} maxLines={1} style={{ color: `${hex}cc` as ColorProp, fontSize: 12, fontWeight: '500' }} />
+      ) : null}
+      <TextWidget text={title} maxLines={1} truncate="END" style={{ color: hex, fontSize: 12, fontWeight: '500' }} />
+    </FlexWidget>
+  );
+}
+
+/** The 4dp colour bar the agenda puts between the time and the title. */
+export function ColorBar({ color, height = 36 }: { color: string; height?: number }) {
+  return <FlexWidget style={{ width: 4, height, borderRadius: 2, backgroundColor: normalizeHex(color) }} />;
+}
+
+export function Button({
+  p,
+  label,
+  iconName,
+  variant = 'outline',
+  click,
+  height = 32,
+  flex,
+}: {
+  p: WidgetPalette;
+  label?: string;
+  iconName?: IconName;
+  variant?: 'primary' | 'outline';
+  click?: WidgetClick;
+  height?: number;
+  flex?: number;
+}) {
+  const primary = variant === 'primary';
+  const fg = primary ? p.primaryFg : p.fg;
+  return (
+    <FlexWidget
+      {...click}
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height,
+        ...(flex ? { flex } : { paddingHorizontal: label ? 12 : 0, width: label ? 'wrap_content' : height }),
+        borderRadius: 6,
+        backgroundColor: primary ? p.primary : p.bg,
+        ...(primary ? {} : { borderWidth: 1, borderColor: p.input }),
+      }}
+    >
+      {iconName ? <Icon name={iconName} color={fg} size={15} /> : null}
+      {iconName && label ? <Spacer size={6} horizontal /> : null}
+      {label ? <TextWidget text={label} maxLines={1} style={{ color: fg, fontSize: 13, fontWeight: '500' }} /> : null}
+    </FlexWidget>
+  );
+}
+
+/** Round primary action (compose, new event), the webmail's floating button. */
+export function Fab({
+  p,
+  iconName,
+  size = 32,
+  click,
+}: {
+  p: WidgetPalette;
+  iconName: IconName;
+  size?: number;
+  click?: WidgetClick;
+}) {
+  return (
+    <FlexWidget
+      {...click}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: p.primary,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Icon name={iconName} color={p.primaryFg} size={Math.round(size / 2)} />
+    </FlexWidget>
+  );
+}
+
+/** Icon-only ghost button (search in a header). */
+export function GhostIcon({
+  p,
+  iconName,
+  click,
+  size = 32,
+}: {
+  p: WidgetPalette;
+  iconName: IconName;
+  click?: WidgetClick;
+  size?: number;
+}) {
+  return (
+    <FlexWidget {...click} style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Icon name={iconName} color={p.muted} size={18} />
+    </FlexWidget>
+  );
+}
+
+/** Widget header bar: icon, title, optional count, trailing actions, bottom rule. */
+export function Header({
+  p,
+  iconName,
+  iconColor,
+  title,
+  count,
+  trailing,
+  height = 40,
+  click,
+}: {
+  p: WidgetPalette;
+  iconName?: IconName;
+  iconColor?: string;
+  title: string;
+  count?: string;
+  trailing?: React.ReactNode;
+  height?: number;
+  click?: WidgetClick;
+}) {
+  return (
+    <FlexWidget style={{ width: 'match_parent' }}>
+      <FlexWidget
+        {...click}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          width: 'match_parent',
+          height,
+          paddingLeft: 14,
+          paddingRight: 8,
+        }}
+      >
+        {iconName ? <Icon name={iconName} color={iconColor ?? p.fg} size={16} /> : null}
+        {iconName ? <Spacer size={8} horizontal /> : null}
+        <Txt text={title} color={p.fg} size={14} weight="600" />
+        {count ? <Spacer size={6} horizontal /> : null}
+        {count ? <Txt text={count} color={p.muted} size={12} /> : null}
+        <Spacer />
+        {trailing}
+      </FlexWidget>
+      <Divider p={p} />
+    </FlexWidget>
+  );
+}
+
+/** Uppercase section label (`text-xs font-medium uppercase tracking-wider`). */
+export function SectionLabel({ p, text }: { p: WidgetPalette; text: string }) {
+  return (
+    <TextWidget
+      text={text.toUpperCase()}
+      maxLines={1}
+      style={{ color: p.muted, fontSize: 11, fontWeight: '500', letterSpacing: 0.05, paddingHorizontal: 14, paddingTop: 8, paddingBottom: 4 }}
+    />
+  );
+}
+
+/** Centred message for empty, signed-out and error states. */
+export function Placeholder({
+  p,
+  iconName,
+  title,
+  body,
+  click,
+}: {
+  p: WidgetPalette;
+  iconName: IconName;
+  title: string;
+  body?: string;
+  click?: WidgetClick;
+}) {
+  return (
+    <FlexWidget
+      {...click}
+      style={{ flex: 1, width: 'match_parent', justifyContent: 'center', alignItems: 'center', padding: 12 }}
+    >
+      <Icon name={iconName} color={p.muted} size={22} />
+      <Spacer size={6} />
+      <TextWidget text={title} maxLines={2} style={{ color: p.fg, fontSize: 13, fontWeight: '500', textAlign: 'center' }} />
+      {body ? (
+        <TextWidget text={body} maxLines={3} style={{ color: p.muted, fontSize: 12, textAlign: 'center', marginTop: 2 }} />
+      ) : null}
+    </FlexWidget>
+  );
+}
+
+/** Wraps children so an absolutely placed dot/badge can sit on top (FrameLayout). */
+export function Overlay({ children, style }: { children?: React.ReactNode; style?: FlexWidgetStyle }) {
+  return <OverlapWidget style={style}>{children}</OverlapWidget>;
+}
diff --git a/src/widgets/render.tsx b/src/widgets/render.tsx
new file mode 100644
index 00000000..4846ce16
--- /dev/null
+++ b/src/widgets/render.tsx
@@ -0,0 +1,169 @@
+// Turns the snapshot into widget trees and pushes them to the launcher.
+
+import React from 'react';
+import { Platform } from 'react-native';
+import {
+  getWidgetInfo,
+  requestWidgetUpdate,
+  type WidgetInfo,
+  type WidgetRepresentation,
+} from 'react-native-android-widget';
+import catalog from './catalog.json';
+import { makeFmt } from './format';
+import { loadLocal } from './local-state';
+import { Placeholder, Surface } from './primitives';
+import type { WidgetSnapshot } from './snapshot';
+import { DARK, LIGHT, type WidgetPalette } from './theme';
+import type { Layout, WidgetLocalState } from './layouts/types';
+import * as mail from './layouts/mail';
+import * as moreMail from './layouts/more-mail';
+import * as calendar from './layouts/calendar';
+import * as plans from './layouts/plans';
+import * as hubs from './layouts/hubs';
+
+export const WIDGET_NAMES: string[] = catalog.widgets.map((w) => w.name);
+
+const LAYOUTS: Record<string, Layout> = {
+  InboxWidget: mail.InboxLayout,
+  TriageWidget: mail.TriageLayout,
+  UnreadCountWidget: mail.UnreadCountLayout,
+  LatestMessageWidget: mail.LatestMessageLayout,
+  FolderCountsWidget: mail.FolderCountsLayout,
+  MailShortcutsWidget: mail.MailShortcutsLayout,
+  AllAccountsWidget: moreMail.AllAccountsLayout,
+  StarredWidget: moreMail.StarredLayout,
+  FavouritePeopleWidget: moreMail.FavouritePeopleLayout,
+  MailSearchWidget: moreMail.MailSearchLayout,
+  OutboxWidget: moreMail.OutboxLayout,
+  TagWidget: moreMail.TagLayout,
+  LastDraftWidget: moreMail.LastDraftLayout,
+  AgendaWidget: calendar.AgendaLayout,
+  WeekWidget: calendar.WeekLayout,
+  MonthWidget: calendar.MonthLayout,
+  TodayEventsWidget: calendar.TodayEventsLayout,
+  NextEventWidget: calendar.NextEventLayout,
+  DateNextWidget: calendar.DateNextLayout,
+  UpNextWidget: calendar.UpNextLayout,
+  InvitationsWidget: plans.InvitationsLayout,
+  FreeTimeWidget: plans.FreeTimeLayout,
+  TasksWidget: plans.TasksLayout,
+  TaskProgressWidget: plans.TaskProgressLayout,
+  CountdownWidget: plans.CountdownLayout,
+  BirthdaysWidget: plans.BirthdaysLayout,
+  TodayHubWidget: hubs.TodayHubLayout,
+  MailAndNextWidget: hubs.MailAndNextLayout,
+  RecentFilesWidget: hubs.RecentFilesLayout,
+  AttachmentsWidget: hubs.AttachmentsLayout,
+  VacationWidget: hubs.VacationLayout,
+  StorageWidget: hubs.StorageLayout,
+};
+
+const STATIC = new Set(catalog.widgets.filter((w) => 'static' in w && w.static).map((w) => w.name));
+
+// Widgets whose data only the running app can load (calendar, tasks, files,
+// scheduled sends): until it has, they ask for the app to be opened instead
+// of claiming there is nothing to show.
+const NEEDS_APP = new Set([
+  ...catalog.widgets.filter((w) => w.board === 'calendar' || w.board === 'plans').map((w) => w.name),
+  'OutboxWidget',
+  'TodayHubWidget',
+  'RecentFilesWidget',
+]);
+
+function draw(
+  name: string,
+  s: WidgetSnapshot,
+  p: WidgetPalette,
+  info: Pick<WidgetInfo, 'width' | 'height' | 'widgetId'>,
+  local: WidgetLocalState,
+  now: number,
+): React.JSX.Element {
+  const f = makeFmt(s.locale, s.hour12);
+  const openApp = { clickAction: 'OPEN_APP' };
+  const layout = LAYOUTS[name];
+  if (!layout) {
+    return <Surface p={p}><Placeholder p={p} iconName="mail" title="Bulwark" click={openApp} /></Surface>;
+  }
+  if (!STATIC.has(name)) {
+    if (!s.signedIn && s.generatedAt > 0) {
+      return (
+        <Surface p={p}>
+          <Placeholder p={p} iconName="lock" title={f.t('widgets.state.signed_out', 'Sign in to Bulwark')} click={openApp} />
+        </Surface>
+      );
+    }
+    if (s.generatedAt === 0) {
+      return (
+        <Surface p={p}>
+          <Placeholder
+            p={p}
+            iconName="refresh"
+            title={f.t('widgets.state.loading', 'Loading…')}
+            body={f.t('widgets.state.open_app', 'Open the app once if this stays empty.')}
+            click={openApp}
+          />
+        </Surface>
+      );
+    }
+    if (NEEDS_APP.has(name) && !s.appDataAt) {
+      return (
+        <Surface p={p}>
+          <Placeholder p={p} iconName="refresh" title={f.t('widgets.state.open_to_load', 'Open Bulwark to load this')} click={openApp} />
+        </Surface>
+      );
+    }
+  }
+  try {
+    return layout({ s, p, f, now, width: info.width, height: info.height, widgetId: info.widgetId, local });
+  } catch (err) {
+    console.warn(`[widgets] ${name} failed to draw`, err);
+    return (
+      <Surface p={p}>
+        <Placeholder p={p} iconName="ban" title={f.t('widgets.state.error', "Couldn't show this widget")} click={openApp} />
+      </Surface>
+    );
+  }
+}
+
+/**
+ * Light and dark trees when the app follows the system, one tree otherwise.
+ * `now` is only fixed for the picker previews.
+ */
+export function renderFor(
+  name: string,
+  s: WidgetSnapshot,
+  info: Pick<WidgetInfo, 'width' | 'height' | 'widgetId'>,
+  local: WidgetLocalState,
+  now = Date.now(),
+): WidgetRepresentation {
+  if (s.theme === 'light') return draw(name, s, LIGHT, info, local, now);
+  if (s.theme === 'dark') return draw(name, s, DARK, info, local, now);
+  return { light: draw(name, s, LIGHT, info, local, now), dark: draw(name, s, DARK, info, local, now) };
+}
+
+/** Redraw every placed widget of every kind from `snapshot`. */
+export async function updateAllWidgets(snapshot: WidgetSnapshot): Promise<void> {
+  if (Platform.OS !== 'android') return;
+  await Promise.all(WIDGET_NAMES.map((widgetName) =>
+    requestWidgetUpdate({
+      widgetName,
+      renderWidget: async (info) => renderFor(widgetName, snapshot, info, await loadLocal(info.widgetId)),
+    }).catch((err) => console.warn(`[widgets] update of ${widgetName} failed`, err)),
+  ));
+}
+
+let placedCache: { at: number; value: boolean } | null = null;
+
+/** Whether any Bulwark widget is on a home screen; cached briefly. */
+export async function hasPlacedWidgets(maxAgeMs = 60_000): Promise<boolean> {
+  if (Platform.OS !== 'android') return false;
+  if (placedCache && Date.now() - placedCache.at < maxAgeMs) return placedCache.value;
+  const counts = await Promise.all(WIDGET_NAMES.map((n) => getWidgetInfo(n).then((l) => l.length).catch(() => 0)));
+  const value = counts.some((c) => c > 0);
+  placedCache = { at: Date.now(), value };
+  return value;
+}
+
+export function invalidatePlacedCache(): void {
+  placedCache = null;
+}
diff --git a/src/widgets/sample-snapshot.ts b/src/widgets/sample-snapshot.ts
new file mode 100644
index 00000000..640c30b7
--- /dev/null
+++ b/src/widgets/sample-snapshot.ts
@@ -0,0 +1,206 @@
+// Demo data with something in every section: the same people, mail and
+// events as the webmail's demo mode. The widget picker previews
+// (src/widgets/previews/*.png) show it at PREVIEW_NOW, so they never contain
+// anyone's real mail, and the layout tests draw every widget from it. Times
+// are relative to `now`.
+
+import { generateEmailAvatarColor, getEmailInitials } from '../lib/avatar-utils';
+import { addDays, startOfDay } from './format';
+import { emptySnapshot, type EventItem, type MailItem, type WidgetSnapshot } from './snapshot';
+import { normalizeHex } from './theme';
+
+/** The moment the previews show: a Tuesday morning, ahead of the standup. */
+export const PREVIEW_NOW = new Date(2026, 8, 22, 9, 35).getTime();
+
+const WORK = '#22c55e';
+const PERSONAL = '#3b82f6';
+
+function person(name: string, email: string) {
+  return {
+    initials: getEmailInitials(name, email),
+    color: normalizeHex(generateEmailAvatarColor(name, email)),
+  };
+}
+
+function mail(
+  id: string,
+  fromName: string,
+  fromEmail: string,
+  subject: string,
+  preview: string,
+  receivedAt: number,
+  extra: Partial<MailItem> = {},
+): MailItem {
+  return {
+    id,
+    threadId: `t-${id}`,
+    accountId: 'demo@example.com@demo',
+    fromName,
+    fromEmail,
+    ...person(fromName, fromEmail),
+    subject,
+    preview,
+    receivedAt,
+    unread: true,
+    starred: false,
+    hasAttachment: false,
+    threadSize: 1,
+    ...extra,
+  };
+}
+
+function event(id: string, title: string, start: number, minutes: number, extra: Partial<EventItem> = {}): EventItem {
+  return {
+    id,
+    serverId: id,
+    title,
+    start,
+    end: start + minutes * 60000,
+    allDay: false,
+    color: WORK,
+    calendarName: 'Work',
+    participants: [],
+    ...extra,
+  };
+}
+
+export function sampleSnapshot(now: number): WidgetSnapshot {
+  const today = startOfDay(now);
+  const at = (days: number, h: number, m = 0) => addDays(today, days) + (h * 60 + m) * 60000;
+  const ago = (minutes: number) => now - minutes * 60000;
+
+  const inbox: MailItem[] = [
+    mail('m1', 'Sofia Russo', 'sofia.russo@example.com', 'when are you coming home?',
+      'Hi sweetie, your father and I were just talking - we miss you.', ago(25), { threadSize: 2 }),
+    mail('m2', 'Sarah Kim', 'sarah.kim@example.com', 'Invoice #2024-089 & landing-page prototype v3',
+      'Hi, please find attached the invoice for October and a screenshot', ago(46), { hasAttachment: true }),
+    mail('m3', 'Alice Johnson', 'alice.johnson@example.com', 'Re: Q4 Project Timeline',
+      'Works for me. Bob, can you confirm the freeze date?', ago(79), { threadSize: 3 }),
+    mail('m4', 'Marcus Hughes', 'marcus.hughes@example.com', 'book club thursday - picking the next one',
+      'Three candidates so far, vote by Wednesday', ago(97)),
+    mail('m5', "Dr. Smith's Office", 'appointments@drsmith.example', 'Appointment reminder - Tuesday at 10:00',
+      'This is a friendly reminder of your upcoming cleaning appointment', ago(60 * 26), { unread: false, starred: true }),
+    mail('m6', 'Carlos Rivera', 'carlos.rivera@example.com', 'Friday dinner - moved to 7:30 (sorry!)',
+      'Same place, just a bit later', ago(60 * 50), { unread: false, starred: true }),
+  ];
+
+  const standup = event('e1', 'Weekly Standup', at(0, 10), 30, {
+    videoUrl: 'https://zoom.example/j/123456',
+    videoName: 'Zoom',
+    participants: [
+      { name: 'Alice Johnson', email: 'alice.johnson@example.com', ...person('Alice Johnson', 'alice.johnson@example.com') },
+      { name: 'Bob Chen', email: 'bob.chen@example.com', ...person('Bob Chen', 'bob.chen@example.com') },
+    ],
+  });
+  const events: EventItem[] = [
+    standup,
+    event('e2', 'Lunch Meeting with Sarah', at(0, 12, 30), 60, {
+      location: 'The Garden Bistro',
+    }),
+    event('e3', 'Dentist Appointment', at(1, 10), 60, {
+      color: PERSONAL, calendarName: 'Personal', location: 'Dr. Smith Dental Clinic',
+    }),
+    event('e4', 'Quarterly Review', at(2, 14), 120),
+    event('e5', 'Birthday Party', at(3, 0), 24 * 60, { allDay: true, color: PERSONAL, calendarName: 'Personal' }),
+    event('e6', 'Weekend Trip', at(4, 0), 2 * 24 * 60, { allDay: true, color: PERSONAL, calendarName: 'Personal' }),
+    event('e7', 'Design review', at(-1, 15), 60),
+    event('e8', 'Sprint planning', at(-1, 11), 90),
+    event('e9', '1:1 with Alice', at(1, 15, 30), 30),
+    event('e10', 'Team retro', at(3, 11), 60),
+  ];
+
+  const base = emptySnapshot();
+  return {
+    ...base,
+    generatedAt: now,
+    appDataAt: now,
+    signedIn: true,
+    theme: 'light',
+    locale: 'en',
+    hour12: false,
+    weekStart: 1,
+    accounts: [
+      { id: 'demo@example.com@demo', label: 'Work', color: '#2563eb', unread: 6 },
+      { id: 'demo@home.example@demo', label: 'Personal', color: '#db2777', unread: 4 },
+    ],
+    activeAccountId: 'demo@example.com@demo',
+    mail: {
+      ...base.mail,
+      folders: [
+        { role: 'inbox', name: 'Inbox', unread: 10, total: 23 },
+        { role: 'drafts', name: 'Drafts', unread: 0, total: 2 },
+        { role: 'junk', name: 'Spam', unread: 3, total: 3 },
+        { role: 'archive', name: 'Archive', unread: 0, total: 120 },
+      ],
+      inbox,
+      unified: [
+        inbox[0],
+        { ...inbox[1], accountId: 'demo@home.example@demo' },
+        inbox[2],
+        inbox[3],
+      ],
+      starred: inbox.filter((m) => m.starred),
+      starredCount: 3,
+      drafts: [mail('d1', 'Demo User', 'demo@example.com', 'Meeting Notes - Draft', 'Here are the notes from today', ago(20), { unread: false })],
+      draftCount: 2,
+      scheduled: [
+        { id: 's1', to: 'Alice Johnson', subject: 'Updated Requirements Document', sendAt: at(1, 8) },
+        { id: 's2', to: 'Sarah Kim', subject: 'Re: Invoice #2024-089', sendAt: at(4, 17) },
+      ],
+      pendingChanges: 0,
+      favourites: [
+        { name: 'Sofia Russo', email: 'sofia.russo@example.com', ...person('Sofia Russo', 'sofia.russo@example.com'), unread: 2, lastAt: ago(25) },
+        { name: 'Alice Johnson', email: 'alice.johnson@example.com', ...person('Alice Johnson', 'alice.johnson@example.com'), unread: 1, lastAt: ago(79) },
+        { name: 'Sarah Kim', email: 'sarah.kim@example.com', ...person('Sarah Kim', 'sarah.kim@example.com'), unread: 0, lastAt: ago(60 * 30) },
+        { name: 'Carlos Rivera', email: 'carlos.rivera@example.com', ...person('Carlos Rivera', 'carlos.rivera@example.com'), unread: 0, lastAt: ago(60 * 50) },
+      ],
+      recentSearches: ['from:sarah', 'invoice', 'has:attachment', 'Q4 timeline', 'is:unread'],
+      tags: [{ keyword: '$label:receipts', name: 'Receipts', color: '#f97316', unread: 2, total: 14, latestFrom: 'Sarah Kim', latestAt: ago(46) }],
+      attachments: [
+        { emailId: 'm2', accountId: 'demo@example.com@demo', fromName: 'Sarah Kim', receivedAt: ago(46),
+          files: [{ name: 'Invoice-2024-089.pdf', type: 'application/pdf' }, { name: 'prototype-v3.png', type: 'image/png' }] },
+        { emailId: 'm7', accountId: 'demo@example.com@demo', fromName: 'Anna Kowalski', receivedAt: ago(60 * 48),
+          files: [{ name: 'wedding-001.jpg', type: 'image/jpeg' }, { name: 'wedding-014.jpg', type: 'image/jpeg' }, { name: 'wedding-038.jpg', type: 'image/jpeg' }] },
+      ],
+    },
+    calendar: {
+      supported: true,
+      events,
+      invitations: [{
+        ...event('e4', 'Quarterly Review', at(2, 14), 120, {
+          organizerName: 'Alice Johnson',
+          participants: [
+            { name: 'Alice Johnson', email: 'alice.johnson@example.com', ...person('Alice Johnson', 'alice.johnson@example.com') },
+            { name: 'Bob Chen', email: 'bob.chen@example.com', ...person('Bob Chen', 'bob.chen@example.com') },
+          ],
+          myStatus: 'needs-action',
+        }),
+        participantId: 'me',
+      }],
+      birthdays: [
+        { name: 'Alice Johnson', email: 'alice.johnson@example.com', ...person('Alice Johnson', 'alice.johnson@example.com'), date: addDays(today, 10) },
+        { name: 'Carlos Rivera', email: 'carlos.rivera@example.com', ...person('Carlos Rivera', 'carlos.rivera@example.com'), date: addDays(today, 24) },
+      ],
+    },
+    tasks: {
+      supported: true,
+      items: [
+        { id: 'k1', serverId: 'k1', title: 'Pay electricity bill', due: addDays(today, -2), dueHasTime: false, done: false, calendarName: 'Personal', color: PERSONAL },
+        { id: 'k2', serverId: 'k2', title: 'Buy groceries', due: today, dueHasTime: false, done: false, calendarName: 'Personal', color: PERSONAL },
+        { id: 'k3', serverId: 'k3', title: 'Prepare quarterly report', due: addDays(today, 1), dueHasTime: false, done: false, calendarName: 'Work', color: WORK },
+        { id: 'k4', serverId: 'k4', title: 'Schedule dentist appointment', due: addDays(today, 3), dueHasTime: false, done: false, calendarName: 'Personal', color: PERSONAL },
+        { id: 'k5', serverId: 'k5', title: 'Review pull requests', due: today, dueHasTime: false, done: true, calendarName: 'Work', color: WORK },
+      ],
+    },
+    files: {
+      supported: true,
+      items: [
+        { id: 'f1', name: 'budget.xlsx', isFolder: false, size: 67 * 1024, modified: ago(60 * 24), type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
+        { id: 'f2', name: 'Documents', isFolder: true, size: 0, modified: ago(60 * 48), type: '' },
+        { id: 'f3', name: 'product-launch.pptx', isFolder: false, size: 500 * 1024, modified: ago(60 * 72), type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' },
+      ],
+    },
+    vacation: { enabled: true, to: addDays(today, 7), subject: 'Out of Office' },
+    quota: { used: 1.15 * 1024 ** 3, limit: 5 * 1024 ** 3 },
+  };
+}
diff --git a/src/widgets/snapshot.ts b/src/widgets/snapshot.ts
new file mode 100644
index 00000000..f9bf9f09
--- /dev/null
+++ b/src/widgets/snapshot.ts
@@ -0,0 +1,262 @@
+// The data every home-screen widget renders from. The app (or the headless
+// widget task) fetches it from the server, stores it in AsyncStorage and asks
+// the launcher to redraw; layouts only ever read this object, so a widget can
+// draw without the network and without the React tree.
+//
+// Times are epoch milliseconds. Views that depend on "now" (what's next,
+// what's overdue, free time) are derived at render time in ./derive.ts so a
+// snapshot stays correct as the day moves on.
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const SNAPSHOT_KEY = 'widgets:snapshot:v1';
+
+export interface MailItem {
+  id: string;
+  threadId: string;
+  /** Signed-in account (app registry id) the message belongs to. */
+  accountId: string;
+  /** JMAP account owning the message when it is not the user's own. */
+  jmapAccountId?: string;
+  fromName: string;
+  fromEmail: string;
+  initials: string;
+  /** Avatar colour, `#rrggbb`. */
+  color: string;
+  subject: string;
+  preview: string;
+  receivedAt: number;
+  unread: boolean;
+  starred: boolean;
+  hasAttachment: boolean;
+  /** Messages in the thread; 1 when unknown. */
+  threadSize: number;
+}
+
+export interface FolderCount {
+  role: 'inbox' | 'drafts' | 'sent' | 'archive' | 'junk' | 'trash' | 'scheduled';
+  name: string;
+  unread: number;
+  total: number;
+}
+
+export interface AccountSummary {
+  id: string;
+  label: string;
+  color: string;
+  unread: number;
+}
+
+export interface ScheduledItem {
+  id: string;
+  to: string;
+  subject: string;
+  sendAt: number;
+}
+
+export interface Person {
+  name: string;
+  email: string;
+  initials: string;
+  color: string;
+  unread: number;
+  lastAt: number;
+}
+
+export interface TagCount {
+  keyword: string;
+  name: string;
+  color: string;
+  unread: number;
+  total: number;
+  latestFrom?: string;
+  latestAt?: number;
+}
+
+export interface AttachmentGroup {
+  emailId: string;
+  accountId: string;
+  fromName: string;
+  receivedAt: number;
+  files: Array<{ name: string; type: string }>;
+}
+
+export interface EventParticipant {
+  name: string;
+  email: string;
+  initials: string;
+  color: string;
+}
+
+export interface EventItem {
+  /** Store id (occurrence-specific for a recurring series). */
+  id: string;
+  /** Server id of the stored event, for deep links. */
+  serverId: string;
+  jmapAccountId?: string;
+  title: string;
+  start: number;
+  end: number;
+  allDay: boolean;
+  color: string;
+  calendarName: string;
+  location?: string;
+  videoUrl?: string;
+  videoName?: string;
+  participants: EventParticipant[];
+  /** The user's own participation status when they are invited. */
+  myStatus?: 'needs-action' | 'accepted' | 'tentative' | 'declined';
+  organizerName?: string;
+}
+
+export interface Invitation extends EventItem {
+  /** Participant id of the user in the event, for the RSVP call. */
+  participantId: string;
+}
+
+export interface Birthday {
+  name: string;
+  email?: string;
+  initials: string;
+  color: string;
+  /** Next occurrence, local midnight. */
+  date: number;
+}
+
+export interface TaskItem {
+  id: string;
+  /** Raw JMAP id, for CalendarEvent/set. */
+  serverId: string;
+  jmapAccountId?: string;
+  title: string;
+  due?: number;
+  /** false for date-only due dates. */
+  dueHasTime: boolean;
+  done: boolean;
+  calendarName: string;
+  color: string;
+}
+
+export interface FileItem {
+  id: string;
+  name: string;
+  isFolder: boolean;
+  size: number;
+  modified: number;
+  type: string;
+}
+
+export interface VacationState {
+  enabled: boolean;
+  from?: number;
+  to?: number;
+  subject?: string;
+}
+
+export interface QuotaState {
+  used: number;
+  limit: number;
+}
+
+export interface WidgetSnapshot {
+  version: 1;
+  generatedAt: number;
+  /**
+   * When calendar, tasks, files and scheduled mail were last loaded. Those
+   * need the running app (see build.ts); 0 until it has run once.
+   */
+  appDataAt: number;
+  /** False when no account is signed in; widgets then ask the user to sign in. */
+  signedIn: boolean;
+  /** The app's theme preference; 'system' lets each widget follow the launcher. */
+  theme: 'light' | 'dark' | 'system';
+  /** Resolved app language (for date names). */
+  locale: string;
+  hour12: boolean;
+  /** First day of the week, 0 = Sunday, 1 = Monday. */
+  weekStart: 0 | 1;
+  accounts: AccountSummary[];
+  /** The signed-in account the single-account widgets show. */
+  activeAccountId: string | null;
+  mail: {
+    folders: FolderCount[];
+    inbox: MailItem[];
+    unified: MailItem[];
+    starred: MailItem[];
+    starredCount: number;
+    drafts: MailItem[];
+    draftCount: number;
+    scheduled: ScheduledItem[];
+    /** Changes made offline that have not reached the server yet. */
+    pendingChanges: number;
+    favourites: Person[];
+    recentSearches: string[];
+    tags: TagCount[];
+    attachments: AttachmentGroup[];
+  };
+  calendar: {
+    supported: boolean;
+    /** Events from the start of the current month through five weeks ahead. */
+    events: EventItem[];
+    invitations: Invitation[];
+    birthdays: Birthday[];
+  };
+  tasks: { supported: boolean; items: TaskItem[] };
+  files: { supported: boolean; items: FileItem[] };
+  vacation: VacationState | null;
+  quota: QuotaState | null;
+}
+
+export function emptySnapshot(): WidgetSnapshot {
+  return {
+    version: 1,
+    generatedAt: 0,
+    appDataAt: 0,
+    signedIn: false,
+    theme: 'system',
+    locale: 'en',
+    hour12: false,
+    weekStart: 1,
+    accounts: [],
+    activeAccountId: null,
+    mail: {
+      folders: [],
+      inbox: [],
+      unified: [],
+      starred: [],
+      starredCount: 0,
+      drafts: [],
+      draftCount: 0,
+      scheduled: [],
+      pendingChanges: 0,
+      favourites: [],
+      recentSearches: [],
+      tags: [],
+      attachments: [],
+    },
+    calendar: { supported: false, events: [], invitations: [], birthdays: [] },
+    tasks: { supported: false, items: [] },
+    files: { supported: false, items: [] },
+    vacation: null,
+    quota: null,
+  };
+}
+
+export async function loadSnapshot(): Promise<WidgetSnapshot | null> {
+  try {
+    const raw = await AsyncStorage.getItem(SNAPSHOT_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as WidgetSnapshot;
+    return parsed?.version === 1 ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function saveSnapshot(snapshot: WidgetSnapshot): Promise<void> {
+  await AsyncStorage.setItem(SNAPSHOT_KEY, JSON.stringify(snapshot));
+}
+
+export async function clearSnapshot(): Promise<void> {
+  await AsyncStorage.removeItem(SNAPSHOT_KEY);
+}
diff --git a/src/widgets/sync.ts b/src/widgets/sync.ts
new file mode 100644
index 00000000..6fe9f881
--- /dev/null
+++ b/src/widgets/sync.ts
@@ -0,0 +1,95 @@
+// Keeps the widgets current while the app runs. The launcher only asks for an
+// update every 30 minutes and pushes only announce new mail, so the app
+// refreshes the snapshot itself whenever what the widgets show may have
+// changed: mail or calendar data, the theme or clock settings, and when the
+// app goes to the background (the most likely moment to glance at a widget).
+
+import { AppState, Platform } from 'react-native';
+import { readRegistry, refreshSnapshot } from './build';
+import { hasPlacedWidgets, updateAllWidgets } from './render';
+import { emptySnapshot, saveSnapshot } from './snapshot';
+
+/** Refreshes are spaced at least this far apart unless the app is leaving. */
+const MIN_INTERVAL_MS = 45_000;
+
+let timer: ReturnType<typeof setTimeout> | null = null;
+let lastRun = 0;
+
+async function run(): Promise<void> {
+  timer = null;
+  lastRun = Date.now();
+  try {
+    if (!(await hasPlacedWidgets())) return;
+    await updateAllWidgets(await refreshSnapshot());
+  } catch (err) {
+    console.warn('[widgets] sync failed', err);
+  }
+}
+
+function schedule(delayMs: number, urgent = false): void {
+  const earliest = urgent ? 0 : Math.max(0, lastRun + MIN_INTERVAL_MS - Date.now());
+  const wait = Math.max(delayMs, earliest);
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => { void run(); }, wait);
+}
+
+/** Start following app state; returns the cleanup. No-op off Android. */
+export function startWidgetSync(): () => void {
+  if (Platform.OS !== 'android') return () => {};
+  const { useEmailStore } = require('../stores/email-store') as typeof import('../stores/email-store');
+  const { useCalendarStore } = require('../stores/calendar-store') as typeof import('../stores/calendar-store');
+  const { useSettingsStore } = require('../stores/settings-store') as typeof import('../stores/settings-store');
+
+  schedule(3000, true);
+  const unsubscribers = [
+    useEmailStore.subscribe((state, prev) => {
+      if (state.mailboxes !== prev.mailboxes || state.emails !== prev.emails) schedule(5000);
+    }),
+    useCalendarStore.subscribe((state, prev) => {
+      if (state.events !== prev.events || state.tasks !== prev.tasks || state.calendars !== prev.calendars) schedule(8000);
+    }),
+    useSettingsStore.subscribe((state, prev) => {
+      if (
+        state.theme !== prev.theme
+        || state.timeFormat !== prev.timeFormat
+        || state.calendarFirstDayOfWeek !== prev.calendarFirstDayOfWeek
+        || state.enableCalendarTasks !== prev.enableCalendarTasks
+      ) {
+        schedule(500, true);
+      }
+    }),
+  ];
+  const appState = AppState.addEventListener('change', (next) => {
+    if (next === 'background') schedule(0, true);
+  });
+  return () => {
+    for (const unsubscribe of unsubscribers) unsubscribe();
+    appState.remove();
+    if (timer) clearTimeout(timer);
+    timer = null;
+  };
+}
+
+/** Wipe what the widgets show after the last account signed out. */
+export async function signOutWidgets(): Promise<void> {
+  if (Platform.OS !== 'android') return;
+  // Signed out of every account, not merely offline or mid-switch.
+  if ((await readRegistry()).accounts.length > 0) return;
+  const snapshot = { ...emptySnapshot(), generatedAt: Date.now() };
+  await saveSnapshot(snapshot);
+  await updateAllWidgets(snapshot);
+}
+
+/**
+ * Called from the push headless task: new mail arrived while the app was in
+ * the background. Skipped entirely when no widget is placed.
+ */
+export async function refreshWidgetsInBackground(): Promise<void> {
+  if (Platform.OS !== 'android') return;
+  try {
+    if (!(await hasPlacedWidgets(0))) return;
+    await updateAllWidgets(await refreshSnapshot());
+  } catch (err) {
+    console.warn('[widgets] background refresh failed', err);
+  }
+}
diff --git a/src/widgets/task-handler.tsx b/src/widgets/task-handler.tsx
new file mode 100644
index 00000000..872cadd5
--- /dev/null
+++ b/src/widgets/task-handler.tsx
@@ -0,0 +1,57 @@
+// Entry point of the headless task react-native-android-widget starts for
+// every widget event (added, periodic update, resize, removed, tap). It can
+// run in a cold JS runtime with no UI, so it only touches the stored snapshot
+// and the widgets' own JMAP code.
+
+import type { WidgetTaskHandlerProps } from 'react-native-android-widget';
+import { handleWidgetAction } from './actions';
+import { refreshSnapshot } from './build';
+import { loadLocal, removeLocal } from './local-state';
+import { invalidatePlacedCache, renderFor, updateAllWidgets } from './render';
+import { emptySnapshot, loadSnapshot, type WidgetSnapshot } from './snapshot';
+
+/** A snapshot younger than this is drawn as it is; older ones trigger a fetch. */
+const FRESH_MS = 5 * 60 * 1000;
+
+let lastBroadcast = 0;
+
+async function broadcast(snapshot: WidgetSnapshot): Promise<void> {
+  // Every placed widget gets its own periodic update; the first one to finish
+  // a refresh redraws them all, the others would only repeat it.
+  if (snapshot.generatedAt <= lastBroadcast) return;
+  lastBroadcast = snapshot.generatedAt;
+  await updateAllWidgets(snapshot);
+}
+
+export async function widgetTaskHandler(props: WidgetTaskHandlerProps): Promise<void> {
+  const { widgetInfo, widgetAction, clickAction, clickActionData, renderWidget } = props;
+  const name = widgetInfo.widgetName;
+
+  switch (widgetAction) {
+    case 'WIDGET_ADDED':
+    case 'WIDGET_UPDATE':
+    case 'WIDGET_RESIZED': {
+      if (widgetAction === 'WIDGET_ADDED') invalidatePlacedCache();
+      const snapshot = (await loadSnapshot()) ?? emptySnapshot();
+      renderWidget(renderFor(name, snapshot, widgetInfo, await loadLocal(widgetInfo.widgetId)));
+      if (widgetAction === 'WIDGET_RESIZED') return;
+      if (Date.now() - snapshot.generatedAt < FRESH_MS) return;
+      const fresh = await refreshSnapshot();
+      renderWidget(renderFor(name, fresh, widgetInfo, await loadLocal(widgetInfo.widgetId)));
+      await broadcast(fresh);
+      return;
+    }
+
+    case 'WIDGET_DELETED':
+      invalidatePlacedCache();
+      await removeLocal(widgetInfo.widgetId);
+      return;
+
+    case 'WIDGET_CLICK':
+      if (clickAction) await handleWidgetAction(clickAction, clickActionData ?? {}, widgetInfo.widgetId);
+      return;
+
+    default:
+      return;
+  }
+}
diff --git a/src/widgets/theme.ts b/src/widgets/theme.ts
new file mode 100644
index 00000000..3eabe612
--- /dev/null
+++ b/src/widgets/theme.ts
@@ -0,0 +1,177 @@
+// Home-screen widget palettes. These copy the webmail's standard theme as it
+// renders (app/globals.css plus the Tailwind classes the list, calendar and
+// sidebar use), not the in-app ThemePalette: in the webmail's dark mode the
+// primary colour is white, while the native dark palette keeps a blue primary.
+// Widgets are meant to look like the webmail, so they carry their own tokens.
+
+import type { ColorProp } from 'react-native-android-widget';
+
+export type WidgetScheme = 'light' | 'dark';
+
+export interface WidgetPalette {
+  scheme: WidgetScheme;
+  /** Widget surface (webmail `--color-background`). */
+  bg: ColorProp;
+  fg: ColorProp;
+  muted: ColorProp;
+  /** Search pill, segmented track, quota ring track (webmail `--color-muted`). */
+  mutedBg: ColorProp;
+  border: ColorProp;
+  /** Outer widget edge. */
+  frame: ColorProp;
+  primary: ColorProp;
+  primaryFg: ColorProp;
+  accent: ColorProp;
+  accentFg: ColorProp;
+  /** `bg-accent/30`, the tint of an unread message row. */
+  unreadRow: ColorProp;
+  unreadDot: ColorProp;
+  /** Agenda day-header band. */
+  dayHeader: ColorProp;
+  /** "Today" label in the agenda. */
+  today: ColorProp;
+  /** Read subject (`text-foreground/90`). */
+  subjectRead: ColorProp;
+  success: ColorProp;
+  successText: ColorProp;
+  successBg: ColorProp;
+  info: ColorProp;
+  infoBg: ColorProp;
+  destructive: ColorProp;
+  destructiveBg: ColorProp;
+  overdue: ColorProp;
+  dueToday: ColorProp;
+  star: ColorProp;
+  /** Outline button edge (webmail `--color-input`). */
+  input: ColorProp;
+  /** Scheduled-send label (`sky-500/10` pill with `sky-700/300` text). */
+  scheduledBg: ColorProp;
+  scheduledText: ColorProp;
+  warningBg: ColorProp;
+  warningText: ColorProp;
+  folder: {
+    inbox: ColorProp;
+    drafts: ColorProp;
+    sent: ColorProp;
+    scheduled: ColorProp;
+    archive: ColorProp;
+    junk: ColorProp;
+  };
+}
+
+export const LIGHT: WidgetPalette = {
+  scheme: 'light',
+  bg: '#ffffff',
+  fg: '#0f172a',
+  muted: '#64748b',
+  mutedBg: '#f1f5f9',
+  border: '#e2e8f0',
+  frame: '#e2e8f0',
+  primary: '#3b82f6',
+  primaryFg: '#ffffff',
+  accent: '#dbeafe',
+  accentFg: '#1e40af',
+  unreadRow: '#f4f9ff',
+  unreadDot: '#3b82f6',
+  dayHeader: '#f4f7fa',
+  today: '#3b82f6',
+  subjectRead: '#283548',
+  success: '#22c55e',
+  successText: '#15803d',
+  successBg: 'rgba(34, 197, 94, 0.15)',
+  info: '#2563eb',
+  infoBg: 'rgba(59, 130, 246, 0.15)',
+  destructive: '#ef4444',
+  destructiveBg: 'rgba(239, 68, 68, 0.15)',
+  overdue: '#e7000b',
+  dueToday: '#155dfc',
+  star: '#fbbf24',
+  input: '#e2e8f0',
+  scheduledBg: 'rgba(0, 166, 244, 0.1)',
+  scheduledText: '#0069a8',
+  warningBg: 'rgba(254, 154, 0, 0.12)',
+  warningText: '#973c00',
+  folder: {
+    inbox: '#155dfccc',
+    drafts: '#7f22fecc',
+    sent: '#009966cc',
+    scheduled: '#0084d1',
+    archive: '#e17100cc',
+    junk: '#e7000bcc',
+  },
+};
+
+export const DARK: WidgetPalette = {
+  scheme: 'dark',
+  bg: '#0a0a0a',
+  fg: '#fafafa',
+  muted: '#a3a3a3',
+  mutedBg: '#262626',
+  border: '#2d2d2d',
+  frame: 'rgba(128, 128, 128, 0.3)',
+  primary: '#fafafa',
+  primaryFg: '#171717',
+  accent: '#1e3a8a',
+  accentFg: '#dbeafe',
+  unreadRow: '#0f1830',
+  unreadDot: '#60a5fa',
+  dayHeader: '#202020',
+  today: '#fafafa',
+  subjectRead: '#e1e1e1',
+  success: '#16a34a',
+  successText: '#22c55e',
+  successBg: 'rgba(22, 163, 74, 0.15)',
+  info: '#60a5fa',
+  infoBg: 'rgba(96, 165, 250, 0.15)',
+  destructive: '#ef4444',
+  destructiveBg: 'rgba(239, 68, 68, 0.15)',
+  overdue: '#ff6467',
+  dueToday: '#51a2ff',
+  star: '#fbbf24',
+  input: '#262626',
+  scheduledBg: 'rgba(0, 166, 244, 0.1)',
+  scheduledText: '#74d4ff',
+  warningBg: 'rgba(254, 154, 0, 0.12)',
+  warningText: '#ffd230',
+  folder: {
+    inbox: '#51a2ffcc',
+    drafts: '#a684ffcc',
+    sent: '#00d492cc',
+    scheduled: '#00bcff',
+    archive: '#ffb900cc',
+    junk: '#ff6467cc',
+  },
+};
+
+/** Tint a calendar colour the way event chips do (`${color}24`, ~14% alpha). */
+export function chipBackground(color: string): ColorProp {
+  const hex = normalizeHex(color);
+  return `${hex}24` as ColorProp;
+}
+
+/** Accepts `#rgb`, `#rrggbb`, `hsl(h, s%, l%)`; anything else falls back to blue. */
+export function normalizeHex(color: string | null | undefined): `#${string}` {
+  if (!color) return '#3b82f6';
+  const c = color.trim();
+  if (/^#[0-9a-f]{6}$/i.test(c)) return c.toLowerCase() as `#${string}`;
+  if (/^#[0-9a-f]{3}$/i.test(c)) {
+    const [r, g, b] = c.slice(1).split('');
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase() as `#${string}`;
+  }
+  if (/^#[0-9a-f]{8}$/i.test(c)) return c.slice(0, 7).toLowerCase() as `#${string}`;
+  const hsl = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/i.exec(c);
+  if (hsl) return hslToHex(Number(hsl[1]), Number(hsl[2]), Number(hsl[3]));
+  return '#3b82f6';
+}
+
+export function hslToHex(h: number, s: number, l: number): `#${string}` {
+  const sat = s / 100;
+  const light = l / 100;
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = sat * Math.min(light, 1 - light);
+  const f = (n: number) => light - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  const hex = [f(0), f(8), f(4)]
+    .map((x) => Math.round(x * 255).toString(16).padStart(2, '0'))
+    .join('');
+  return `#${hex}`;
+}