@tuturuuu/ui 0.30.2 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [0.31.0](https://github.com/tutur3u/platform/compare/ui-v0.30.2...ui-v0.31.0) (2026-09-07)
+
+
+### Features
+
+* **calendar:** add installable apps and bounded PWA caching ([f4b2a1c](https://github.com/tutur3u/platform/commit/f4b2a1cf7943783fddc45f537df73589f19594f6))
+* **calendar:** add installable Tasks and Calendar with bounded caching ([#5231](https://github.com/tutur3u/platform/issues/5231)) ([7078824](https://github.com/tutur3u/platform/commit/70788244874d811da3e1ce3a9af2c9389739a8c3))
+* **colab:** launch multiplayer prompt workshops on Cloudflare ([7a4a3f9](https://github.com/tutur3u/platform/commit/7a4a3f9b4a12a0d7439cdb296398a21c0cd8939f))
+* **colab:** make workshops a login-first workspace ([89613ca](https://github.com/tutur3u/platform/commit/89613ca10de53fe39412c58342ee453cd0db4006))
+* **colab:** reuse the shared Tuturuuu structure shell ([11ca1fa](https://github.com/tutur3u/platform/commit/11ca1fa35bba8a64fdb9b56972b5c0f11c87339f))
+* **meet:** integrate instant rooms with Calendar ([9631fd1](https://github.com/tutur3u/platform/commit/9631fd1373615f3e8be55dd028d54b441e78a023))
+* **meet:** integrate instant rooms with Calendar ([#5248](https://github.com/tutur3u/platform/issues/5248)) ([5f3e77d](https://github.com/tutur3u/platform/commit/5f3e77df20e636fe270cdc7d1b1d88817a3f00bd))
+* **planning:** integrate tasks and calendar workflows ([454bb45](https://github.com/tutur3u/platform/commit/454bb4589cdc85967a75a1cb04e01dd004223cbd))
+
+
+### Bug Fixes
+
+* **calendar:** align view controls and stabilize event pagination ([0497af1](https://github.com/tutur3u/platform/commit/0497af126102a59d1d12af6615505a98a2ccb6a7))
+* **calendar:** contain month cell content on mobile ([a3518bb](https://github.com/tutur3u/platform/commit/a3518bbbe90009f87f6a7f38078027996bdcb3a3))
+* **calendar:** expose sync failures and repair completion tracking ([a5601a5](https://github.com/tutur3u/platform/commit/a5601a5f0fd33741392a6f6e16dad337ba4f0a35))
+* **calendar:** fail closed on linked event access ([9071075](https://github.com/tutur3u/platform/commit/90710750398ff0143f2a71f2b19c8631469018e9))
+* **calendar:** handle partial sync in every client action ([b820bbc](https://github.com/tutur3u/platform/commit/b820bbcdb725e38c13342eed96062b2f4a0afacb))
+* **calendar:** harden PWA lifecycle and cache retention ([14565c0](https://github.com/tutur3u/platform/commit/14565c0106e74b947e152fd8bb787de7f70bc54d))
+* **calendar:** import sync helper from calendar entry point ([753dd22](https://github.com/tutur3u/platform/commit/753dd22ab9a480144ee94384aa9983d58787d311))
+* **calendar:** initialize draft timezone helper ([e1b81c7](https://github.com/tutur3u/platform/commit/e1b81c75b8aef6d9ded2c162511f0c32b03b7db1))
+* **calendar:** make sync failures visible and recoverable ([#5227](https://github.com/tutur3u/platform/issues/5227)) ([465c9f8](https://github.com/tutur3u/platform/commit/465c9f82c5464a54675fa9d9f814c630902916e6))
+* **calendar:** preserve concurrent connection updates ([8307cbb](https://github.com/tutur3u/platform/commit/8307cbbc5d0ccb943eee77a259ab76147c1c698c))
+* **calendar:** recover failed syncs and redesign calendar views ([7d22948](https://github.com/tutur3u/platform/commit/7d22948095a29d236f698d42dde362fc38311dd0))
+* **calendar:** recover failed syncs and redesign calendar views ([#5230](https://github.com/tutur3u/platform/issues/5230)) ([e52605d](https://github.com/tutur3u/platform/commit/e52605d671f921b1564746afcdedf2478deee78e))
+* **calendar:** respect week preferences and classify DNS failures ([ff88780](https://github.com/tutur3u/platform/commit/ff88780dc3d25edb46b5e15ee323d8eee3ad26db))
+* **calendar:** restore provider assets in tasks and format sync time ([0359132](https://github.com/tutur3u/platform/commit/0359132f96947aaeeb02bb776af3d2a24794e0b2))
+* **calendar:** show sync recovery with sidebar navigation ([033e04b](https://github.com/tutur3u/platform/commit/033e04bb44d8b1ca466ad0638e9525ca96c84202))
+* **colab:** complete shared profile and footer controls ([4cc8959](https://github.com/tutur3u/platform/commit/4cc895951d9181f86972362ca864e4aa2bba9ed2))
+* **colab:** preserve Next.js account menu parity ([1910015](https://github.com/tutur3u/platform/commit/19100151cb43220277d0970047fc8903d942348e))
+* **meet:** make Calendar scheduling atomic ([aa3a4cc](https://github.com/tutur3u/platform/commit/aa3a4cc46ccdfccfa7648923bcd8207a7a91467f))
+* **meet:** make Calendar scheduling atomic ([#5249](https://github.com/tutur3u/platform/issues/5249)) ([a2914ca](https://github.com/tutur3u/platform/commit/a2914cabde82b4f9a5549801807f73e9d2c728b0))
+* **planning:** repair embedded APIs and simplify navigation ([5e82d77](https://github.com/tutur3u/platform/commit/5e82d77e183c5603d04cbe76bf3bba8bf3a94eca))
+* **tasks:** preserve calendar drafts and recover failed task creation ([#5237](https://github.com/tutur3u/platform/issues/5237)) ([2b9acbf](https://github.com/tutur3u/platform/commit/2b9acbfcb19edff9680f4eb2c5c5b18a0e56ec8b))
+* **tasks:** preserve task and calendar drafts until saves finish ([34b4902](https://github.com/tutur3u/platform/commit/34b4902b0382a3aa9e10249a0d83205c9a530878))
+* **tasks:** recover partial saves and display actionable errors ([c4887c9](https://github.com/tutur3u/platform/commit/c4887c98377fd8493f3e6ae4219763d8872e2a5b))
+
 ## [0.30.2](https://github.com/tutur3u/platform/compare/ui-v0.30.1...ui-v0.30.2) (2026-08-31)
 
 

package/biome.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.30.2",
+  "version": "0.31.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -60,40 +60,40 @@
     "@tanstack/react-query": "^5.102.8",
     "@tanstack/react-table": "^9.2.3",
     "@tanstack/react-virtual": "^3.14.10",
-    "@tiptap/core": "3.30.5",
-    "@tiptap/extension-collaboration": "3.30.5",
-    "@tiptap/extension-collaboration-caret": "3.30.5",
-    "@tiptap/extension-color": "3.30.5",
-    "@tiptap/extension-details": "3.30.5",
-    "@tiptap/extension-drag-handle": "3.30.5",
-    "@tiptap/extension-drag-handle-react": "3.30.5",
-    "@tiptap/extension-highlight": "3.30.5",
-    "@tiptap/extension-horizontal-rule": "3.30.5",
-    "@tiptap/extension-image": "3.30.5",
-    "@tiptap/extension-link": "3.30.5",
-    "@tiptap/extension-list": "3.30.5",
-    "@tiptap/extension-node-range": "3.30.5",
-    "@tiptap/extension-placeholder": "3.30.5",
-    "@tiptap/extension-strike": "3.30.5",
-    "@tiptap/extension-subscript": "3.30.5",
-    "@tiptap/extension-superscript": "3.30.5",
-    "@tiptap/extension-table": "3.30.5",
-    "@tiptap/extension-table-cell": "3.30.5",
-    "@tiptap/extension-table-header": "3.30.5",
-    "@tiptap/extension-table-row": "3.30.5",
-    "@tiptap/extension-text-align": "3.30.5",
-    "@tiptap/extension-text-style": "3.30.5",
-    "@tiptap/extension-youtube": "3.30.5",
-    "@tiptap/pm": "3.30.5",
-    "@tiptap/react": "3.30.5",
-    "@tiptap/starter-kit": "3.30.5",
-    "@tuturuuu/ai": "0.8.3",
+    "@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.33.0",
+    "@tuturuuu/internal-api": "0.34.0",
     "@tuturuuu/supabase": "0.5.1",
-    "@tuturuuu/utils": "0.27.0",
+    "@tuturuuu/utils": "0.28.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -105,28 +105,28 @@
     "debug": "^4.4.3",
     "embla-carousel-react": "^8.6.0",
     "eventemitter3": "^5.0.4",
-    "framer-motion": "^13.1.1",
+    "framer-motion": "^13.2.0",
     "gsap": "^3.15.0",
     "html-entities": "^2.6.0",
-    "html2canvas-pro": "^2.4.0",
+    "html2canvas-pro": "^2.4.1",
     "input-otp": "^1.5.0",
-    "katex": "^0.18.4",
+    "katex": "^0.18.5",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
-    "motion": "^13.1.1",
-    "next": "^16.3.3",
-    "next-intl": "^4.14.1",
+    "motion": "^13.2.0",
+    "next": "^16.3.4",
+    "next-intl": "^4.14.2",
     "next-themes": "^0.4.6",
     "nuqs": "^2.10.1",
     "prosemirror-state": "^1.4.4",
     "prosemirror-view": "1.42.3",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.8",
-    "react-colorful": "^5.8.0",
+    "react-colorful": "^5.8.1",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.8",
     "react-dropzone": "^20.1.1",
-    "react-hook-form": "^7.86.0",
+    "react-hook-form": "^7.87.0",
     "react-markdown": "^10.1.0",
     "react-papaparse": "^4.4.0",
     "react-pdf": "^10.5.0",
@@ -145,34 +145,34 @@
     "vaul": "^1.1.2",
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.32",
-    "zod": "^4.4.3"
+    "zod": "^4.5.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
     "@tanstack/react-query": "^5.102.8",
-    "@tanstack/react-table": "^9.2.3",
+    "@tanstack/react-table": "^9.2.4",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@tuturuuu/types": "0.28.0",
+    "@tuturuuu/types": "0.29.0",
     "@tuturuuu/typescript-config": "0.1.2",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.25",
-    "@types/node": "^26.4.0",
+    "@types/node": "^26.4.1",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
+    "@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",
     "jsdom": "^30.0.1",
-    "postcss": "^8.5.26",
+    "postcss": "^8.5.28",
     "postcss-load-config": "^6.0.1",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
     "uuid": "^14.0.2",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.2",
@@ -335,7 +335,8 @@
     },
     "./custom/notification-popover-client": {
       "types": "./src/components/ui/custom/notification-popover-client.tsx",
-      "import": "./src/components/ui/custom/notification-popover-client.tsx"
+      "import": "./src/components/ui/custom/notification-popover-client.tsx",
+      "default": "./src/components/ui/custom/notification-popover-client.tsx"
     },
     "./custom/sidebar-footer-actions": {
       "types": "./src/components/ui/custom/sidebar-footer-actions.tsx",
@@ -447,7 +448,52 @@
     "./text-editor/text-replacements": {
       "types": "./src/components/ui/text-editor/text-replacements.ts",
       "import": "./src/components/ui/text-editor/text-replacements.ts"
-    }
+    },
+    "./custom/satellite-brand": {
+      "types": "./src/components/ui/custom/satellite-brand.tsx",
+      "import": "./src/components/ui/custom/satellite-brand.tsx"
+    },
+    "./custom/satellite-navigation": {
+      "types": "./src/components/ui/custom/satellite-navigation.tsx",
+      "import": "./src/components/ui/custom/satellite-navigation.tsx"
+    },
+    "./custom/satellite-content": {
+      "types": "./src/components/ui/custom/satellite-content.tsx",
+      "import": "./src/components/ui/custom/satellite-content.tsx"
+    },
+    "./custom/satellite-workspace-section": {
+      "types": "./src/components/ui/custom/satellite-workspace-section.tsx",
+      "import": "./src/components/ui/custom/satellite-workspace-section.tsx"
+    },
+    "./custom/satellite-shell-utils": {
+      "types": "./src/components/ui/custom/satellite-shell-utils.ts",
+      "import": "./src/components/ui/custom/satellite-shell-utils.ts"
+    },
+    "./custom/satellite-shell": {
+      "types": "./src/components/ui/custom/satellite-shell.tsx",
+      "import": "./src/components/ui/custom/satellite-shell.tsx"
+    },
+    "./custom/use-satellite-shell": {
+      "types": "./src/components/ui/custom/use-satellite-shell.tsx",
+      "import": "./src/components/ui/custom/use-satellite-shell.tsx"
+    },
+    "./custom/satellite-user-menu": {
+      "types": "./src/components/ui/custom/satellite-user-menu.tsx",
+      "default": "./src/components/ui/custom/satellite-user-menu.tsx"
+    },
+    "./custom/satellite-footer-actions": {
+      "types": "./src/components/ui/custom/satellite-footer-actions.tsx",
+      "default": "./src/components/ui/custom/satellite-footer-actions.tsx"
+    },
+    "./custom/satellite-user-menu-items": "./src/components/ui/custom/satellite-user-menu-items.tsx",
+    "./custom/satellite-account-switcher-menu": "./src/components/ui/custom/satellite-account-switcher-menu.tsx",
+    "./custom/satellite-theme-dropdown-items": "./src/components/ui/custom/satellite-theme-dropdown-items.tsx",
+    "./custom/satellite-language-item": "./src/components/ui/custom/satellite-language-item.tsx",
+    "./report-problem-dialog-content": "./src/components/ui/report-problem-dialog-content.tsx",
+    "./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"
   },
-  "packageManager": "bun@1.4.0"
+  "packageManager": "bun@1.4.1"
 }

package/src/components/ui/calendar-app/calendar-client-page.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import type { Workspace } from '@tuturuuu/types';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string) => key,
+}));
+vi.mock('./hooks', () => ({
+  useCalendarSettings: () => ({
+    initialSettings: {},
+    needsCalendarGate: false,
+  }),
+}));
+vi.mock('./components/require-workspace-timezone-dialog', () => ({
+  RequireWorkspaceTimezoneDialog: () => null,
+}));
+vi.mock('@tuturuuu/ui/legacy/calendar/smart-calendar', () => ({
+  SmartCalendar: ({ extras }: { extras: ReactNode }) => <div>{extras}</div>,
+}));
+vi.mock('./components/calendar-connections-unified', () => ({
+  default: ({ variant }: { variant: string }) => (
+    <div data-testid="sync-entry">{variant}</div>
+  ),
+}));
+
+import { CalendarClientPage } from './calendar-client-page';
+
+const workspace = { id: 'workspace' } as Workspace;
+const HeaderActions = () => <span>Calendar actions</span>;
+
+describe('calendar sync warning placement', () => {
+  it('keeps a header recovery entry when Calendar uses its sidebar for calendar selection', () => {
+    render(
+      <CalendarClientPage
+        workspace={workspace}
+        HeaderActions={HeaderActions}
+        enableSmartScheduling={false}
+        showConnectionsManager={false}
+      />
+    );
+    expect(screen.getByTestId('sync-entry').textContent).toBe('status');
+    expect(screen.getByText('Calendar actions')).toBeTruthy();
+  });
+  it('lets the normal calendar picker own recovery in the embedded Tasks calendar', () => {
+    render(
+      <CalendarClientPage
+        workspace={workspace}
+        HeaderActions={HeaderActions}
+        enableSmartScheduling={false}
+        showConnectionsManager
+      />
+    );
+    expect(screen.queryByTestId('sync-entry')).toBeNull();
+  });
+});

package/src/components/ui/calendar-app/calendar-client-page.tsx

@@ -14,6 +14,7 @@ import {
   type SetStateAction,
   useState,
 } from 'react';
+import CalendarConnectionsUnified from './components/calendar-connections-unified';
 import { RequireWorkspaceTimezoneDialog } from './components/require-workspace-timezone-dialog';
 import { useCalendarSettings } from './hooks';
 
@@ -28,6 +29,7 @@ export type CalendarHeaderActionsComponent =
 interface CalendarClientPageProps {
   HeaderActions: CalendarHeaderActionsComponent;
   experimentalGoogleToken?: WorkspaceCalendarGoogleTokenClient | null;
+  initialEventId?: string;
   workspace: Workspace;
   enableSmartScheduling: boolean;
   externalState?: {
@@ -42,6 +44,7 @@ interface CalendarClientPageProps {
 
 export function CalendarClientPage({
   experimentalGoogleToken,
+  initialEventId,
   workspace,
   enableSmartScheduling,
   externalState,
@@ -59,10 +62,15 @@ export function CalendarClientPage({
   const needsCalendarGate = !calendarGateCompleted && settingsNeedGate;
 
   const extras = (
-    <HeaderActions
-      workspaceId={workspace.id}
-      enableSmartScheduling={enableSmartScheduling}
-    />
+    <>
+      {showConnectionsManager === false && (
+        <CalendarConnectionsUnified wsId={workspace.id} variant="status" />
+      )}
+      <HeaderActions
+        workspaceId={workspace.id}
+        enableSmartScheduling={enableSmartScheduling}
+      />
+    </>
   );
 
   return (
@@ -84,6 +92,7 @@ export function CalendarClientPage({
             ? experimentalGoogleToken
             : null
         }
+        initialEventId={initialEventId}
         extras={extras}
         externalState={externalState}
         initialSettings={initialSettings}

package/src/components/ui/calendar-app/calendar-page-shell.tsx

@@ -4,6 +4,7 @@ import type {
   WorkspaceCalendarGoogleTokenClient,
 } from '@tuturuuu/types';
 import { CalendarSyncProvider } from '@tuturuuu/ui/hooks/use-calendar-sync';
+import { cn } from '@tuturuuu/utils/format';
 import type { ComponentType } from 'react';
 import type { CalendarView } from '../../../hooks/use-view-transition';
 import type { ExtendedWorkspaceTask } from '../time-tracker/types';
@@ -26,6 +27,7 @@ interface CalendarPageShellProps {
   calendarConnections: CalendarConnection[] | null;
   enableSmartScheduling: boolean;
   experimentalGoogleToken?: WorkspaceCalendarGoogleTokenClient | null;
+  initialEventId?: string;
   HeaderActions: CalendarHeaderActionsComponent;
   locale: string;
   smartSchedulingTasks?: ExtendedWorkspaceTask[];
@@ -41,12 +43,14 @@ interface CalendarPageShellProps {
   };
   manageCalendarSyncProvider?: boolean;
   showConnectionsManager?: boolean;
+  className?: string;
 }
 
 export function CalendarPageShell({
   calendarConnections,
   enableSmartScheduling,
   experimentalGoogleToken,
+  initialEventId,
   HeaderActions,
   locale,
   smartSchedulingTasks = [],
@@ -56,11 +60,13 @@ export function CalendarPageShell({
   externalState,
   manageCalendarSyncProvider = true,
   showConnectionsManager = true,
+  className,
 }: CalendarPageShellProps) {
   const content = (
-    <div className="flex h-[calc(100vh-2rem)]">
+    <div className={cn('flex h-[calc(100dvh-2rem)] min-w-0', className)}>
       <CalendarClientPage
         experimentalGoogleToken={experimentalGoogleToken}
+        initialEventId={initialEventId}
         workspace={workspace}
         enableSmartScheduling={enableSmartScheduling}
         externalState={externalState}

package/src/components/ui/calendar-app/components/calendar-connections-compact.tsx

@@ -1,7 +1,7 @@
 import {
+  AlertTriangle,
   Calendar,
   ChevronDown,
-  ExternalLink,
   Eye,
   EyeOff,
   Loader2,
@@ -10,6 +10,7 @@ import {
   Settings,
 } from '@tuturuuu/icons';
 import Image from 'next/image';
+import { useState } from 'react';
 import { Badge } from '../../badge';
 import { Button } from '../../button';
 import {
@@ -28,6 +29,10 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
 import { Separator } from '../../separator';
 import { CalendarConnectionsSettingsContent } from './calendar-connections-settings-content';
+import {
+  CalendarSyncRecovery,
+  needsCalendarSyncAttention,
+} from './calendar-sync-recovery';
 import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
 
 export function CalendarConnectionsCompact({
@@ -35,6 +40,8 @@ export function CalendarConnectionsCompact({
 }: {
   state: CalendarConnectionsManagerState;
 }) {
+  const [open, setOpen] = useState(false);
+  const needsAttention = needsCalendarSyncAttention(state);
   const {
     accounts,
     calendarConnections,
@@ -52,7 +59,6 @@ export function CalendarConnectionsCompact({
     syncHealth,
     syncMutation,
     syncStatusStyles,
-    syncToTuturuuu,
     t,
     togglingIds,
     togglingTuturuuuIds,
@@ -62,9 +68,9 @@ export function CalendarConnectionsCompact({
   } = state;
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       {/* Quick calendar visibility toggle */}
-      <Popover>
+      <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button variant="outline" size="sm" className="gap-2">
             <Calendar className="h-4 w-4" />
@@ -353,6 +359,7 @@ export function CalendarConnectionsCompact({
               )}
             </div>
 
+            <CalendarSyncRecovery state={state} />
             <Separator />
 
             {/* Sync actions */}
@@ -365,50 +372,51 @@ export function CalendarConnectionsCompact({
                 )}
                 {syncHealth?.state === 'degraded'
                   ? t('degraded') || 'Degraded'
-                  : syncHealth?.state === 'healthy'
-                    ? t('healthy') || 'Healthy'
-                    : syncHealth?.state === 'disconnected'
-                      ? t('connect_accounts') || 'Connect accounts'
-                      : t('syncing_calendars') || 'Syncing calendars'}
-              </div>
-              <div className="flex gap-1">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                  onClick={() => syncMutation.mutate()}
-                  disabled={manualSyncDisabled}
-                  title={t('sync_now') || 'Sync now'}
-                >
-                  <ExternalLink
-                    className={`h-3.5 w-3.5 ${
-                      manualSyncDisabled ? 'animate-pulse' : ''
-                    }`}
-                  />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                  onClick={() => syncToTuturuuu()}
-                  disabled={manualSyncDisabled}
-                  title={t('sync_from_google')}
-                >
-                  <RefreshCw
-                    className={`h-3.5 w-3.5 ${manualSyncDisabled ? 'animate-spin' : ''}`}
-                  />
-                </Button>
+                  : syncHealth?.state === 'paused'
+                    ? t('sync_recovery.paused')
+                    : syncHealth?.state === 'healthy'
+                      ? t('healthy') || 'Healthy'
+                      : syncHealth?.state === 'disconnected'
+                        ? t('connect_accounts') || 'Connect accounts'
+                        : syncHealth?.state === 'syncing'
+                          ? t('syncing_calendars')
+                          : t('sync_recovery.unavailable')}
               </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => syncMutation.mutate()}
+                disabled={manualSyncDisabled}
+              >
+                <RefreshCw
+                  className={
+                    syncMutation.isPending ? 'size-4 animate-spin' : 'size-4'
+                  }
+                />
+                {t('sync_now')}
+              </Button>
             </div>
             {syncHealth?.lastSuccessAt && (
               <p className="text-muted-foreground text-xs">
-                {t('last_synced_at') || 'Last synced'}:{' '}
-                {new Date(syncHealth.lastSuccessAt).toLocaleString()}
+                {t('last_synced_at', {
+                  time: new Date(syncHealth.lastSuccessAt).toLocaleString(),
+                })}
               </p>
             )}
           </div>
         </PopoverContent>
       </Popover>
+      {needsAttention && (
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5 border-dynamic-orange/40 text-dynamic-orange"
+          onClick={() => setOpen(true)}
+        >
+          <AlertTriangle className="size-4 shrink-0" />
+          <span>{t('sync_recovery.attention')}</span>
+        </Button>
+      )}
     </div>
   );
 }

package/src/components/ui/calendar-app/components/calendar-connections-settings-content.tsx

@@ -47,6 +47,7 @@ import {
 import { Separator } from '../../separator';
 import { Switch } from '../../switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../tabs';
+import { CalendarSyncRecovery } from './calendar-sync-recovery';
 import { CalendarSyncSettingsPanel } from './calendar-sync-settings-panel';
 import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
 
@@ -104,6 +105,7 @@ export function CalendarConnectionsSettingsContent({
 
   return (
     <div className={className ? `space-y-4 ${className}` : 'space-y-4'}>
+      <CalendarSyncRecovery state={state} />
       <Tabs defaultValue="calendars" className="py-4">
         <TabsList className="grid w-full grid-cols-3">
           <TabsTrigger value="calendars">
@@ -401,6 +403,12 @@ export function CalendarConnectionsSettingsContent({
                         {t('reconnect_required') || 'Reconnect'}
                       </Badge>
                     )}
+                    {providerAccountStatuses[account.id]?.state ===
+                      'temporarily_unavailable' && (
+                      <Badge variant="secondary" className="text-xs">
+                        {t('sync_recovery.attention')}
+                      </Badge>
+                    )}
                     <Badge variant="outline" className="text-xs capitalize">
                       {account.provider}
                     </Badge>
@@ -434,6 +442,12 @@ export function CalendarConnectionsSettingsContent({
                         </Button>
                       </div>
                     )}
+                    {providerAccountStatuses[account.id]?.state ===
+                      'temporarily_unavailable' && (
+                      <p className="rounded-md border p-2 text-muted-foreground text-xs">
+                        {t('sync_recovery.provider_unavailable')}
+                      </p>
+                    )}
                     {(calendarsByAccount[account.id] || []).length > 0 ? (
                       (calendarsByAccount[account.id] || []).map((cal) => {
                         const syncControlsDisabled =

package/src/components/ui/calendar-app/components/calendar-connections-unified.tsx

@@ -2,6 +2,7 @@
 
 import { CalendarConnectionsCompact } from './calendar-connections-compact';
 import { CalendarConnectionsSettingsContent } from './calendar-connections-settings-content';
+import { CalendarSyncAttentionButton } from './calendar-sync-attention-button';
 import {
   type CalendarConnectionsUnifiedVariant,
   useCalendarConnectionsManager,
@@ -21,6 +22,9 @@ export default function CalendarConnectionsUnified({
 }) {
   const state = useCalendarConnectionsManager(wsId);
 
+  if (variant === 'status')
+    return <CalendarSyncAttentionButton state={state} />;
+
   if (variant === 'settings') {
     return (
       <CalendarConnectionsSettingsContent state={state} className={className} />