@tuturuuu/ui 0.31.0 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## [0.33.0](https://github.com/tutur3u/platform/compare/ui-v0.32.0...ui-v0.33.0) (2026-09-20)
+
+
+### Features
+
+* **calendar:** automatically refresh connected calendars ([03584af](https://github.com/tutur3u/platform/commit/03584af0d9b7135b90953e9f81f7e971968679ff)) ([#5311](https://github.com/tutur3u/platform/issues/5311)) ([e52894f](https://github.com/tutur3u/platform/commit/e52894fd746b76fee1c76efab40c9e398c95b5a4))
+* **finance:** add granular invoice audit trail and recovery review ([#5376](https://github.com/tutur3u/platform/issues/5376)) ([b8df666](https://github.com/tutur3u/platform/commit/b8df666804848d96d35ba693d126fe611a3ebf2b))
+* **finance:** add invoice history and recoverable deletion ([3d6dea5](https://github.com/tutur3u/platform/commit/3d6dea5bdbb055073b9b5d5680e391d094874ad2))
+* **finance:** clarify category charts and add promotions management ([88f85ea](https://github.com/tutur3u/platform/commit/88f85eaadb722b42b99537be3c75fabb1715bf09)) ([#5384](https://github.com/tutur3u/platform/issues/5384)) ([b6fd666](https://github.com/tutur3u/platform/commit/b6fd666bccca6aa929166210fb1c6abdb91c1448))
+* **finance:** expand invoice audit review and filters ([c346cac](https://github.com/tutur3u/platform/commit/c346cac5a2dfcdcd944d1fcdfa72f40ec27aa720))
+* **pricing:** add full app comparison and evolving pitch deck ([c967e8d](https://github.com/tutur3u/platform/commit/c967e8d2db75fc65159c7dcb31ed1b27673ae924))
+* **pricing:** compare every app and add an evolving pitch deck ([#5335](https://github.com/tutur3u/platform/issues/5335)) ([962ed75](https://github.com/tutur3u/platform/commit/962ed75e086eb85a06a878720a5d30b747e7ba82))
+* **pricing:** redesign the product comparison experience ([6adc1cf](https://github.com/tutur3u/platform/commit/6adc1cf3388c4f02c4375695377778c25696b775)) ([#5348](https://github.com/tutur3u/platform/issues/5348)) ([2232af1](https://github.com/tutur3u/platform/commit/2232af1738475629d2fb9a8a5b4578f8ce6ec77e))
+
+
+### Bug Fixes
+
+* **calendar:** clear recovered sync attention state ([bbf22be](https://github.com/tutur3u/platform/commit/bbf22bed0034518cd62d6dc063c30dd210ed2adb))
+* **calendar:** coordinate sync requests and recovery timing ([a1ddf89](https://github.com/tutur3u/platform/commit/a1ddf89570ec0f917d4bcb3cd0f9a1302e9d72c1))
+* **calendar:** preserve recovery alerts during automatic sync ([04b2a1d](https://github.com/tutur3u/platform/commit/04b2a1d22400d20b922edf8d8372700ab490b9af))
+* **calendar:** refresh cached events after remote synchronization ([f59f126](https://github.com/tutur3u/platform/commit/f59f12646c255bbc8a0944701299102d6ff14fe7))
+* **calendar:** use public calendar API type exports ([ac23511](https://github.com/tutur3u/platform/commit/ac23511863ae7c2713da411651cd6e67fa92d153))
+* **deps:** align React types and published consumer ranges ([3612cd8](https://github.com/tutur3u/platform/commit/3612cd81723fb5a6982152688227ed21bc4095fd))
+* **deps:** preserve React peer compatibility and clarify audit ([777b9ed](https://github.com/tutur3u/platform/commit/777b9ed7f42095bb9361e6bed94d989310c222de))
+* **finance:** complete invoice loading recovery ([5f4cd04](https://github.com/tutur3u/platform/commit/5f4cd049ab462e774d09c7060878bdedda164d12))
+* **finance:** expose audit amount visibility control ([d3ef238](https://github.com/tutur3u/platform/commit/d3ef2389b1fd189f5b7cd327d1e0b65d03b7b136))
+* **finance:** preserve discount display across invoice views ([11eda37](https://github.com/tutur3u/platform/commit/11eda372d53c60041c676e1e8f9ca0ad06809b13))
+* **finance:** preserve discounts in checkout and saved invoice views ([#5378](https://github.com/tutur3u/platform/issues/5378)) ([2297145](https://github.com/tutur3u/platform/commit/2297145c59d6dbec174e5e22bf69f2fd2b54695b))
+* **finance:** recover stalled invoice loading ([e943337](https://github.com/tutur3u/platform/commit/e94333766ddf942f9c44347d6f7fc982f4f828a8)) ([#5310](https://github.com/tutur3u/platform/issues/5310)) ([a5c6a37](https://github.com/tutur3u/platform/commit/a5c6a3765008e1fb503d6e2ceadec9c43b1e23e5))
+* **finance:** retain actors across invoice audit writes ([75e1139](https://github.com/tutur3u/platform/commit/75e11390aa30493ee1f83f95660cfaf7547e13c0)) ([#5383](https://github.com/tutur3u/platform/issues/5383)) ([a1fbb54](https://github.com/tutur3u/platform/commit/a1fbb54532f652116064ab7d7b8d11b217b2b9d4))
+* **finance:** speed up invoice audit history and improve pagination ([b6c165e](https://github.com/tutur3u/platform/commit/b6c165e88e8888facec7744ee16c1d9378bb90e5)) ([#5380](https://github.com/tutur3u/platform/issues/5380)) ([c829653](https://github.com/tutur3u/platform/commit/c8296532b5282324b28c09d3c06a64894694b46c))
+* **mail:** preview and download PDF attachments ([#5339](https://github.com/tutur3u/platform/issues/5339)) ([cc0ca86](https://github.com/tutur3u/platform/commit/cc0ca865269e9a43fbb88a513998a4c6243b773b))
+* **mail:** render PDF previews safely ([7f9f9c9](https://github.com/tutur3u/platform/commit/7f9f9c987523cea173fc96213028ee52e0e488af))
+* **mira:** preserve conversation chronology and open requested artifacts ([f8d4f86](https://github.com/tutur3u/platform/commit/f8d4f8616919baf6f878c6eb71836acc48c8933f)) ([#5331](https://github.com/tutur3u/platform/issues/5331)) ([40155bd](https://github.com/tutur3u/platform/commit/40155bd97ebe23b3c4ccbcde88c998c173b2bf7f))
+* **notifications:** replace denied realtime filters with API refresh ([35293ac](https://github.com/tutur3u/platform/commit/35293ac06517c63689780351facec22a93c8da3b))
+* **notifications:** stop invalid user_id realtime filters ([#5377](https://github.com/tutur3u/platform/issues/5377)) ([1c4ab1f](https://github.com/tutur3u/platform/commit/1c4ab1fe9830cfd18fbe98c10b0fbe1d6de168a3))
+* **pricing:** polish comparison sizing and style types ([404f3f8](https://github.com/tutur3u/platform/commit/404f3f854ef6c59c015f41256687cbf920806a08))
+* **pricing:** reconcile live catalog displays and tier comparisons ([3aa65c2](https://github.com/tutur3u/platform/commit/3aa65c2221d0d099ff5bd50de0c90bb4237d1bbd))
+* **reports:** clarify delivery and streamline review filters ([b790cb3](https://github.com/tutur3u/platform/commit/b790cb38e48cf7429a698d6360977e35a9aa2617)) ([#5314](https://github.com/tutur3u/platform/issues/5314)) ([e9af5a5](https://github.com/tutur3u/platform/commit/e9af5a58f0c133764e91c745b183eae24e512270))
+* **reports:** validate filters and legacy approval states ([d86bd68](https://github.com/tutur3u/platform/commit/d86bd6814986895962fc72dec7dee89570c9269b))
+* **tasks:** keep synced checklists and board state interactive ([63761b5](https://github.com/tutur3u/platform/commit/63761b59aa8abe99c0e48f1694a1fa0573bdcffa)) ([#5379](https://github.com/tutur3u/platform/issues/5379)) ([c647460](https://github.com/tutur3u/platform/commit/c64746019a2e18798e71f0c5cfbf8bff13a58485))
+* **tasks:** restore checklist controls and board drag UX ([72d2495](https://github.com/tutur3u/platform/commit/72d2495717f7550f2ca4c26234abd2ceebbc280c)) ([#5375](https://github.com/tutur3u/platform/issues/5375)) ([fd9ed4e](https://github.com/tutur3u/platform/commit/fd9ed4ef63272cc2a434ad72aa1081fa641055c2))
+* **ui:** ensure report pagination always consumes text ([2f91cb9](https://github.com/tutur3u/platform/commit/2f91cb9e03cf9fd9432daeb76244e33805bb3da6))
+* **ui:** explain offline installation state in settings ([17b8936](https://github.com/tutur3u/platform/commit/17b89364510266d459e8836c92a2b39a6923c4d5))
+* **ui:** move app installation into settings ([ffa82a1](https://github.com/tutur3u/platform/commit/ffa82a12e0eba196cc800cf1c2f1ef78819d5d70)) ([#5327](https://github.com/tutur3u/platform/issues/5327)) ([17034ef](https://github.com/tutur3u/platform/commit/17034efe29de99bdbf4d6ee76ed9bf1c5f1d4ff7))
+* **ui:** prevent report pagination from freezing editors ([#5392](https://github.com/tutur3u/platform/issues/5392)) ([efe6e95](https://github.com/tutur3u/platform/commit/efe6e95205134df4fc5b10b9e48b4dafb7dce52b))
+* **ui:** repair checklist caret and status controls ([a6472ce](https://github.com/tutur3u/platform/commit/a6472ce49c557992966e31ed2e92e2d7cb65b573)) ([#5350](https://github.com/tutur3u/platform/issues/5350)) ([c534362](https://github.com/tutur3u/platform/commit/c534362b5a68965a13403056568f975852213f45))
+* **ui:** reset disabled checklist picker ([c059cae](https://github.com/tutur3u/platform/commit/c059cae8d9c46f4ac15a35ccebac2738eeb1f565))
+
+## [0.32.0](https://github.com/tutur3u/platform/compare/ui-v0.31.0...ui-v0.32.0) (2026-09-09)
+
+
+### Features
+
+* **meet:** give Mira a distinct identity and refine call panels ([#5269](https://github.com/tutur3u/platform/issues/5269)) ([6ba3f1c](https://github.com/tutur3u/platform/commit/6ba3f1c5e2408ae0a564c97177282978f38b4ce8))
+* **meet:** polish assistant identity and call panels ([2d2098b](https://github.com/tutur3u/platform/commit/2d2098b8923d58f6c094fe02cf1de142178b5433))
+
 ## [0.31.0](https://github.com/tutur3u/platform/compare/ui-v0.30.2...ui-v0.31.0) (2026-09-07)
 
 

package/biome.json

@@ -1,5 +1,5 @@
 {
   "root": false,
-  "$schema": "https://biomejs.dev/schemas/2.5.12/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.13/schema.json",
   "extends": "//"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -59,41 +59,41 @@
     "@tanstack/react-pacer": "^0.23.0",
     "@tanstack/react-query": "^5.102.8",
     "@tanstack/react-table": "^9.2.3",
-    "@tanstack/react-virtual": "^3.14.10",
-    "@tiptap/core": "3.31.2",
-    "@tiptap/extension-collaboration": "3.31.2",
-    "@tiptap/extension-collaboration-caret": "3.31.2",
-    "@tiptap/extension-color": "3.31.2",
-    "@tiptap/extension-details": "3.31.2",
-    "@tiptap/extension-drag-handle": "3.31.2",
-    "@tiptap/extension-drag-handle-react": "3.31.2",
-    "@tiptap/extension-highlight": "3.31.2",
-    "@tiptap/extension-horizontal-rule": "3.31.2",
-    "@tiptap/extension-image": "3.31.2",
-    "@tiptap/extension-link": "3.31.2",
-    "@tiptap/extension-list": "3.31.2",
-    "@tiptap/extension-node-range": "3.31.2",
-    "@tiptap/extension-placeholder": "3.31.2",
-    "@tiptap/extension-strike": "3.31.2",
-    "@tiptap/extension-subscript": "3.31.2",
-    "@tiptap/extension-superscript": "3.31.2",
-    "@tiptap/extension-table": "3.31.2",
-    "@tiptap/extension-table-cell": "3.31.2",
-    "@tiptap/extension-table-header": "3.31.2",
-    "@tiptap/extension-table-row": "3.31.2",
-    "@tiptap/extension-text-align": "3.31.2",
-    "@tiptap/extension-text-style": "3.31.2",
-    "@tiptap/extension-youtube": "3.31.2",
-    "@tiptap/pm": "3.31.2",
-    "@tiptap/react": "3.31.2",
-    "@tiptap/starter-kit": "3.31.2",
-    "@tuturuuu/ai": "0.9.0",
-    "@tuturuuu/apis": "0.11.3",
-    "@tuturuuu/hooks": "0.1.1",
-    "@tuturuuu/icons": "0.1.0",
-    "@tuturuuu/internal-api": "0.34.0",
-    "@tuturuuu/supabase": "0.5.1",
-    "@tuturuuu/utils": "0.28.0",
+    "@tanstack/react-virtual": "^3.14.12",
+    "@tiptap/core": "3.31.3",
+    "@tiptap/extension-collaboration": "3.31.3",
+    "@tiptap/extension-collaboration-caret": "3.31.3",
+    "@tiptap/extension-color": "3.31.3",
+    "@tiptap/extension-details": "3.31.3",
+    "@tiptap/extension-drag-handle": "3.31.3",
+    "@tiptap/extension-drag-handle-react": "3.31.3",
+    "@tiptap/extension-highlight": "3.31.3",
+    "@tiptap/extension-horizontal-rule": "3.31.3",
+    "@tiptap/extension-image": "3.31.3",
+    "@tiptap/extension-link": "3.31.3",
+    "@tiptap/extension-list": "3.31.3",
+    "@tiptap/extension-node-range": "3.31.3",
+    "@tiptap/extension-placeholder": "3.31.3",
+    "@tiptap/extension-strike": "3.31.3",
+    "@tiptap/extension-subscript": "3.31.3",
+    "@tiptap/extension-superscript": "3.31.3",
+    "@tiptap/extension-table": "3.31.3",
+    "@tiptap/extension-table-cell": "3.31.3",
+    "@tiptap/extension-table-header": "3.31.3",
+    "@tiptap/extension-table-row": "3.31.3",
+    "@tiptap/extension-text-align": "3.31.3",
+    "@tiptap/extension-text-style": "3.31.3",
+    "@tiptap/extension-youtube": "3.31.3",
+    "@tiptap/pm": "3.31.3",
+    "@tiptap/react": "3.31.3",
+    "@tiptap/starter-kit": "3.31.3",
+    "@tuturuuu/ai": "0.14.0",
+    "@tuturuuu/apis": "0.11.4",
+    "@tuturuuu/hooks": "0.1.2",
+    "@tuturuuu/icons": "0.1.1",
+    "@tuturuuu/internal-api": "0.39.0",
+    "@tuturuuu/supabase": "0.5.2",
+    "@tuturuuu/utils": "0.29.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -108,14 +108,14 @@
     "framer-motion": "^13.2.0",
     "gsap": "^3.15.0",
     "html-entities": "^2.6.0",
-    "html2canvas-pro": "^2.4.1",
+    "html2canvas-pro": "^2.4.2",
     "input-otp": "^1.5.0",
-    "katex": "^0.18.5",
+    "katex": "^0.18.7",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
     "motion": "^13.2.0",
-    "next": "^16.3.4",
-    "next-intl": "^4.14.2",
+    "next": "^16.3.5",
+    "next-intl": "^4.14.4",
     "next-themes": "^0.4.6",
     "nuqs": "^2.10.1",
     "prosemirror-state": "^1.4.4",
@@ -126,12 +126,12 @@
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.8",
     "react-dropzone": "^20.1.1",
-    "react-hook-form": "^7.87.0",
+    "react-hook-form": "^7.88.0",
     "react-markdown": "^10.1.0",
     "react-papaparse": "^4.4.0",
-    "react-pdf": "^10.5.0",
+    "react-pdf": "^11.0.0",
     "react-resizable": "^4.0.2",
-    "react-resizable-panels": "^4.12.3",
+    "react-resizable-panels": "^4.12.4",
     "react-syntax-highlighter": "^16.1.1",
     "recharts": "3.10.1",
     "slot-text": "^0.3.4",
@@ -140,12 +140,12 @@
     "tailwind-scrollbar": "^4.0.2",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
-    "tiptap-extension-resize-image": "^1.4.6",
+    "tiptap-extension-resize-image": "^1.4.7",
     "use-debounce": "^10.1.1",
     "vaul": "^1.1.2",
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.32",
-    "zod": "^4.5.4"
+    "zod": "^4.6.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",
@@ -154,18 +154,18 @@
     "@tanstack/react-table": "^9.2.4",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@tuturuuu/types": "0.29.0",
+    "@tuturuuu/types": "0.31.0",
     "@tuturuuu/typescript-config": "0.1.2",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.25",
-    "@types/node": "^26.4.1",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
+    "@types/node": "^26.5.1",
+    "@types/react": "~19.2.18",
+    "@types/react-dom": "~19.2.7",
     "@types/react-resizable": "^4.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "autoprefixer": "^10.5.4",
+    "autoprefixer": "^10.6.0",
     "jsdom": "^30.0.1",
     "postcss": "^8.5.28",
     "postcss-load-config": "^6.0.1",
@@ -493,7 +493,9 @@
     "./custom/satellite-settings-dialog-shell": "./src/components/ui/custom/satellite-settings-dialog-shell.tsx",
     "./custom/satellite-onboarding-settings-panel": "./src/components/ui/custom/satellite-onboarding-settings-panel.tsx",
     "./custom/satellite-notification-popover": "./src/components/ui/custom/satellite-notification-popover.tsx",
-    "./custom/notification-runtime": "./src/components/ui/custom/notification-runtime.tsx"
+    "./custom/notification-runtime": "./src/components/ui/custom/notification-runtime.tsx",
+    "./finance/invoices/query-invalidation": "./src/components/ui/finance/invoices/query-invalidation.ts",
+    "./finance/shared/charts/use-finance-confidential-visibility": "./src/components/ui/finance/shared/charts/use-finance-confidential-visibility.ts"
   },
   "packageManager": "bun@1.4.1"
 }

package/src/components/ui/calendar-app/components/calendar-sync-attention-button.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle } from '@tuturuuu/icons';
+import { AlertTriangle, CalendarDays, RefreshCw } from '@tuturuuu/icons';
 import { useState } from 'react';
 import { Button } from '../../button';
 import {
@@ -10,7 +10,10 @@ import {
   DialogTrigger,
 } from '../../dialog';
 import { CalendarConnectionsSettingsContent } from './calendar-connections-settings-content';
-import { needsCalendarSyncAttention } from './calendar-sync-recovery';
+import {
+  isCalendarSyncActive,
+  needsCalendarSyncAttention,
+} from './calendar-sync-recovery';
 import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
 
 /** Keep recovery visible when the sidebar replaces the header calendar picker. */
@@ -20,28 +23,59 @@ export function CalendarSyncAttentionButton({
   state: CalendarConnectionsManagerState;
 }) {
   const [open, setOpen] = useState(false);
-  if (!open && !needsCalendarSyncAttention(state)) return null;
+  const syncing = isCalendarSyncActive(state);
+  const needsAttention = needsCalendarSyncAttention(state);
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="gap-1.5 border-dynamic-orange/40 text-dynamic-orange"
-        >
-          <AlertTriangle className="size-4 shrink-0" />
-          {state.t('sync_recovery.attention')}
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-h-[85dvh] overflow-y-auto sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>{state.t('manage_calendar_accounts')}</DialogTitle>
-          <DialogDescription>
-            {state.t('manage_calendar_accounts_desc')}
-          </DialogDescription>
-        </DialogHeader>
-        <CalendarConnectionsSettingsContent state={state} />
-      </DialogContent>
-    </Dialog>
+    <>
+      <span role="status" className="sr-only">
+        {needsAttention
+          ? state.t('sync_recovery.attention')
+          : syncing
+            ? state.t('syncing_calendars')
+            : ''}
+      </span>
+      {(open || syncing || needsAttention) && (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className={
+                !needsAttention
+                  ? 'gap-1.5 text-muted-foreground'
+                  : 'gap-1.5 border-dynamic-orange/40 text-dynamic-orange'
+              }
+            >
+              {syncing && !needsAttention ? (
+                <RefreshCw className="size-4 shrink-0 animate-spin" />
+              ) : needsAttention ? (
+                <AlertTriangle className="size-4 shrink-0" />
+              ) : (
+                <CalendarDays className="size-4 shrink-0" />
+              )}
+              <span>
+                {state.t(
+                  needsAttention
+                    ? 'sync_recovery.attention'
+                    : syncing
+                      ? 'syncing_calendars'
+                      : 'manage_calendar_accounts'
+                )}
+              </span>
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-h-[85dvh] overflow-y-auto sm:max-w-lg">
+            <DialogHeader>
+              <DialogTitle>{state.t('manage_calendar_accounts')}</DialogTitle>
+              <DialogDescription>
+                {state.t('manage_calendar_accounts_desc')}
+              </DialogDescription>
+            </DialogHeader>
+            <CalendarConnectionsSettingsContent state={state} />
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
   );
 }

package/src/components/ui/calendar-app/components/calendar-sync-recovery.test.tsx

@@ -1,11 +1,16 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
+import { CalendarSyncAttentionButton } from './calendar-sync-attention-button';
 import {
   CalendarSyncRecovery,
   needsCalendarSyncAttention,
 } from './calendar-sync-recovery';
 import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
 
+vi.mock('./calendar-connections-settings-content', () => ({
+  CalendarConnectionsSettingsContent: () => <div>Settings</div>,
+}));
+
 function state(overrides: Partial<CalendarConnectionsManagerState> = {}) {
   return {
     accounts: [],
@@ -110,3 +115,55 @@ it('can pause an identified calendar during the retry cooldown without deleting
   );
   expect(value.syncMutation.mutate).not.toHaveBeenCalled();
 });
+
+it('shows neutral progress for an automatic sync instead of an attention warning', () => {
+  const value = state();
+  value.syncHealth!.state = 'syncing';
+  value.syncHealth!.currentlyRunning = true;
+  value.manualSyncDisabled = true;
+  render(<CalendarSyncRecovery state={value} />);
+  expect(screen.queryByText('sync_recovery.attention')).toBeNull();
+  expect(screen.getByRole('status')).toBeVisible();
+  expect(screen.queryByRole('alert')).toBeNull();
+  expect(screen.getByText('sync_recovery.syncing_description')).toBeVisible();
+  expect(
+    screen.getByRole('button', { name: 'syncing_calendars' })
+  ).toBeDisabled();
+});
+
+it('keeps an open settings dialog neutral when automatic syncing finishes', () => {
+  const value = state();
+  value.syncHealth!.currentlyRunning = true;
+  value.syncHealth!.state = 'syncing';
+  const view = render(<CalendarSyncAttentionButton state={value} />);
+  fireEvent.click(screen.getByRole('button', { name: 'syncing_calendars' }));
+  value.syncHealth!.currentlyRunning = false;
+  value.syncHealth!.state = 'healthy';
+  view.rerender(<CalendarSyncAttentionButton state={value} />);
+  expect(screen.getByRole('dialog')).toBeVisible();
+  expect(screen.queryByText('sync_recovery.attention')).toBeNull();
+  expect(screen.queryByText('syncing_calendars')).toBeNull();
+});
+
+it('keeps reconnection warnings prominent while another calendar syncs', () => {
+  const value = state({
+    providerAccountStatuses: { google: { state: 'reconnect_required' } },
+  });
+  value.syncHealth!.state = 'syncing';
+  value.syncHealth!.currentlyRunning = true;
+  render(<CalendarSyncRecovery state={value} />);
+  expect(screen.getByRole('alert')).toBeVisible();
+  expect(screen.getByText('sync_recovery.attention')).toBeVisible();
+});
+
+it('keeps the status live region mounted before syncing starts', () => {
+  const value = state();
+  value.syncHealth!.state = 'healthy';
+  const view = render(<CalendarSyncAttentionButton state={value} />);
+  const liveRegion = screen.getByRole('status');
+  expect(liveRegion).toHaveTextContent('');
+  value.syncHealth!.currentlyRunning = true;
+  view.rerender(<CalendarSyncAttentionButton state={value} />);
+  expect(screen.getByRole('status')).toBe(liveRegion);
+  expect(liveRegion).toHaveTextContent('syncing_calendars');
+});

package/src/components/ui/calendar-app/components/calendar-sync-recovery.tsx

@@ -42,10 +42,17 @@ export function needsCalendarSyncAttention(
   );
 }
 
+export function isCalendarSyncActive(
+  state: Pick<RecoveryState, 'syncMutation' | 'syncHealth'>
+) {
+  return !!(state.syncMutation.isPending || state.syncHealth?.currentlyRunning);
+}
+
 export function CalendarSyncRecovery({ state }: { state: RecoveryState }) {
   const { t, syncHealth, syncStatusError, providerAccountStatuses } = state;
-  if (!needsCalendarSyncAttention(state) && !state.syncMutation.isPending)
-    return null;
+  const syncing = isCalendarSyncActive(state);
+  const needsAttention = needsCalendarSyncAttention(state);
+  if (!needsAttention && !syncing) return null;
   const reconnectAccounts = state.accounts.filter(
     (account) =>
       providerAccountStatuses[account.id]?.state === 'reconnect_required'
@@ -92,15 +99,26 @@ export function CalendarSyncRecovery({ state }: { state: RecoveryState }) {
       reconnectProviders.add(provider);
   }
   return (
-    <Alert className="border-dynamic-orange/30 bg-dynamic-orange/5 text-foreground">
-      <AlertTriangle className="size-4 text-dynamic-orange" />
-      <AlertTitle>{t('sync_recovery.attention')}</AlertTitle>
+    <Alert
+      role={needsAttention ? 'alert' : 'status'}
+      className={
+        needsAttention
+          ? 'border-dynamic-orange/30 bg-dynamic-orange/5 text-foreground'
+          : 'border-border bg-muted/30 text-foreground'
+      }
+    >
+      {!needsAttention ? (
+        <RefreshCw className="size-4 animate-spin" />
+      ) : (
+        <AlertTriangle className="size-4 text-dynamic-orange" />
+      )}
+      <AlertTitle>
+        {t(needsAttention ? 'sync_recovery.attention' : 'syncing_calendars')}
+      </AlertTitle>
       <AlertDescription className="space-y-3">
         <p>
           {t(
-            state.syncMutation.isPending
-              ? 'sync_recovery.syncing_description'
-              : description
+            needsAttention ? description : 'sync_recovery.syncing_description'
           )}
         </p>
         <p className="text-muted-foreground text-xs">
@@ -163,14 +181,10 @@ export function CalendarSyncRecovery({ state }: { state: RecoveryState }) {
                 : state.syncMutation.mutate()
             }
           >
-            <RefreshCw
-              className={
-                state.syncMutation.isPending ? 'size-4 animate-spin' : 'size-4'
-              }
-            />
+            <RefreshCw className={syncing ? 'size-4 animate-spin' : 'size-4'} />
             {syncStatusError
               ? t('sync_recovery.check_again')
-              : state.syncMutation.isPending
+              : syncing
                 ? t('syncing_calendars')
                 : t('sync_now')}
           </Button>