@checkstack/notification-frontend 0.0.5 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,149 @@
 # @checkstack/notification-frontend
 
+## 0.2.0
+
+### Minor Changes
+
+- 7a23261: ## TanStack Query Integration
+
+  Migrated all frontend components to use `usePluginClient` hook with TanStack Query integration, replacing the legacy `forPlugin()` pattern.
+
+  ### New Features
+
+  - **`usePluginClient` hook**: Provides type-safe access to plugin APIs with `.useQuery()` and `.useMutation()` methods
+  - **Automatic request deduplication**: Multiple components requesting the same data share a single network request
+  - **Built-in caching**: Configurable stale time and cache duration per query
+  - **Loading/error states**: TanStack Query provides `isLoading`, `error`, `isRefetching` states automatically
+  - **Background refetching**: Stale data is automatically refreshed when components mount
+
+  ### Contract Changes
+
+  All RPC contracts now require `operationType: "query"` or `operationType: "mutation"` metadata:
+
+  ```typescript
+  const getItems = proc()
+    .meta({ operationType: "query", access: [access.read] })
+    .output(z.array(itemSchema))
+    .query();
+
+  const createItem = proc()
+    .meta({ operationType: "mutation", access: [access.manage] })
+    .input(createItemSchema)
+    .output(itemSchema)
+    .mutation();
+  ```
+
+  ### Migration
+
+  ```typescript
+  // Before (forPlugin pattern)
+  const api = useApi(myPluginApiRef);
+  const [items, setItems] = useState<Item[]>([]);
+  useEffect(() => {
+    api.getItems().then(setItems);
+  }, [api]);
+
+  // After (usePluginClient pattern)
+  const client = usePluginClient(MyPluginApi);
+  const { data: items, isLoading } = client.getItems.useQuery({});
+  ```
+
+  ### Bug Fixes
+
+  - Fixed `rpc.test.ts` test setup for middleware type inference
+  - Fixed `SearchDialog` to use `setQuery` instead of deprecated `search` method
+  - Fixed null→undefined warnings in notification and queue frontends
+
+### Patch Changes
+
+- Updated dependencies [7a23261]
+  - @checkstack/frontend-api@0.2.0
+  - @checkstack/common@0.3.0
+  - @checkstack/auth-frontend@0.3.0
+  - @checkstack/notification-common@0.2.0
+  - @checkstack/ui@0.2.1
+  - @checkstack/signal-frontend@0.0.7
+
+## 0.1.0
+
+### Minor Changes
+
+- 9faec1f: # Unified AccessRule Terminology Refactoring
+
+  This release completes a comprehensive terminology refactoring from "permission" to "accessRule" across the entire codebase, establishing a consistent and modern access control vocabulary.
+
+  ## Changes
+
+  ### Core Infrastructure (`@checkstack/common`)
+
+  - Introduced `AccessRule` interface as the primary access control type
+  - Added `accessPair()` helper for creating read/manage access rule pairs
+  - Added `access()` builder for individual access rules
+  - Replaced `Permission` type with `AccessRule` throughout
+
+  ### API Changes
+
+  - `env.registerPermissions()` → `env.registerAccessRules()`
+  - `meta.permissions` → `meta.access` in RPC contracts
+  - `usePermission()` → `useAccess()` in frontend hooks
+  - Route `permission:` field → `accessRule:` field
+
+  ### UI Changes
+
+  - "Roles & Permissions" tab → "Roles & Access Rules"
+  - "You don't have permission..." → "You don't have access..."
+  - All permission-related UI text updated
+
+  ### Documentation & Templates
+
+  - Updated 18 documentation files with AccessRule terminology
+  - Updated 7 scaffolding templates with `accessPair()` pattern
+  - All code examples use new AccessRule API
+
+  ## Migration Guide
+
+  ### Backend Plugins
+
+  ```diff
+  - import { permissionList } from "./permissions";
+  - env.registerPermissions(permissionList);
+  + import { accessRules } from "./access";
+  + env.registerAccessRules(accessRules);
+  ```
+
+  ### RPC Contracts
+
+  ```diff
+  - .meta({ userType: "user", permissions: [permissions.read.id] })
+  + .meta({ userType: "user", access: [access.read] })
+  ```
+
+  ### Frontend Hooks
+
+  ```diff
+  - const canRead = accessApi.usePermission(permissions.read.id);
+  + const canRead = accessApi.useAccess(access.read);
+  ```
+
+  ### Routes
+
+  ```diff
+  - permission: permissions.entityRead.id,
+  + accessRule: access.read,
+  ```
+
+### Patch Changes
+
+- Updated dependencies [9faec1f]
+- Updated dependencies [95eeec7]
+- Updated dependencies [f533141]
+  - @checkstack/auth-frontend@0.2.0
+  - @checkstack/common@0.2.0
+  - @checkstack/frontend-api@0.1.0
+  - @checkstack/notification-common@0.1.0
+  - @checkstack/ui@0.2.0
+  - @checkstack/signal-frontend@0.0.6
+
 ## 0.0.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/notification-frontend",
-  "version": "0.0.5",
+  "version": "0.2.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/components/NotificationBell.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useCallback } from "react";
 import { Link } from "react-router-dom";
 import { Bell, CheckCheck } from "lucide-react";
 import {
@@ -11,7 +11,7 @@ import {
   Button,
   stripMarkdown,
 } from "@checkstack/ui";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { useApi, usePluginClient } from "@checkstack/frontend-api";
 import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
 import type { Notification } from "@checkstack/notification-common";
@@ -27,54 +27,42 @@ import { authApiRef } from "@checkstack/auth-frontend/api";
 export const NotificationBell = () => {
   const authApi = useApi(authApiRef);
   const { data: session, isPending: isAuthLoading } = authApi.useSession();
-  const rpcApi = useApi(rpcApiRef);
-  const notificationClient = rpcApi.forPlugin(NotificationApi);
+  const notificationClient = usePluginClient(NotificationApi);
 
-  const [unreadCount, setUnreadCount] = useState(0);
-  const [recentNotifications, setRecentNotifications] = useState<
-    Notification[]
-  >([]);
   const [isOpen, setIsOpen] = useState(false);
-  const [loading, setLoading] = useState(true);
 
-  const fetchUnreadCount = useCallback(async () => {
-    // Skip fetch if not authenticated
-    if (!session) return;
-    try {
-      const { count } = await notificationClient.getUnreadCount();
-      setUnreadCount(count);
-    } catch (error) {
-      console.error("Failed to fetch unread count:", error);
-    }
-  }, [notificationClient, session]);
+  // State for real-time updates
+  const [signalUnreadCount, setSignalUnreadCount] = useState<
+    number | undefined
+  >();
+  const [signalNotifications, setSignalNotifications] = useState<
+    Notification[] | undefined
+  >();
 
-  const fetchRecentNotifications = useCallback(async () => {
-    // Skip fetch if not authenticated
-    if (!session) return;
-    try {
-      const { notifications } = await notificationClient.getNotifications({
-        limit: 5,
-        offset: 0,
-        unreadOnly: true, // Only show unread notifications in the dropdown
-      });
-      setRecentNotifications(notifications);
-    } catch (error) {
-      console.error("Failed to fetch notifications:", error);
-    }
-  }, [notificationClient, session]);
+  // Fetch unread count via useQuery
+  const { data: unreadData, isLoading: unreadLoading } =
+    notificationClient.getUnreadCount.useQuery(undefined, {
+      enabled: !!session,
+      staleTime: 30_000,
+    });
 
-  // Initial fetch
-  useEffect(() => {
-    if (!session) {
-      setLoading(false);
-      return;
-    }
-    const init = async () => {
-      await Promise.all([fetchUnreadCount(), fetchRecentNotifications()]);
-      setLoading(false);
-    };
-    void init();
-  }, [fetchUnreadCount, fetchRecentNotifications, session]);
+  // Fetch recent notifications via useQuery
+  const { data: notificationsData, isLoading: notificationsLoading } =
+    notificationClient.getNotifications.useQuery(
+      { limit: 5, offset: 0, unreadOnly: true },
+      {
+        enabled: !!session && isOpen,
+        staleTime: 30_000,
+      }
+    );
+
+  // Mark all as read mutation
+  const markAsReadMutation = notificationClient.markAsRead.useMutation();
+
+  // Use signal data if available, otherwise use query data
+  const unreadCount = signalUnreadCount ?? unreadData?.count ?? 0;
+  const recentNotifications =
+    signalNotifications ?? notificationsData?.notifications ?? [];
 
   // ==========================================================================
   // REALTIME SIGNAL SUBSCRIPTIONS (replaces polling)
@@ -85,10 +73,10 @@ export const NotificationBell = () => {
     NOTIFICATION_RECEIVED,
     useCallback((payload) => {
       // Increment unread count
-      setUnreadCount((prev) => prev + 1);
+      setSignalUnreadCount((prev) => (prev ?? 0) + 1);
 
       // Add to recent notifications if dropdown is open
-      setRecentNotifications((prev) => [
+      setSignalNotifications((prev) => [
         {
           id: payload.id,
           title: payload.title,
@@ -98,7 +86,7 @@ export const NotificationBell = () => {
           isRead: false,
           createdAt: new Date(),
         },
-        ...prev.slice(0, 4), // Keep only 5 items
+        ...(prev ?? []).slice(0, 4), // Keep only 5 items
       ]);
     }, [])
   );
@@ -107,7 +95,7 @@ export const NotificationBell = () => {
   useSignal(
     NOTIFICATION_COUNT_CHANGED,
     useCallback((payload) => {
-      setUnreadCount(payload.unreadCount);
+      setSignalUnreadCount(payload.unreadCount);
     }, [])
   );
 
@@ -117,32 +105,25 @@ export const NotificationBell = () => {
     useCallback((payload) => {
       if (payload.notificationId) {
         // Single notification marked as read - remove from list
-        setRecentNotifications((prev) =>
-          prev.filter((n) => n.id !== payload.notificationId)
+        setSignalNotifications((prev) =>
+          (prev ?? []).filter((n) => n.id !== payload.notificationId)
         );
-        setUnreadCount((prev) => Math.max(0, prev - 1));
+        setSignalUnreadCount((prev) => Math.max(0, (prev ?? 1) - 1));
       } else {
         // All marked as read - clear the list
-        setRecentNotifications([]);
-        setUnreadCount(0);
+        setSignalNotifications([]);
+        setSignalUnreadCount(0);
       }
     }, [])
   );
 
   // ==========================================================================
 
-  // Fetch notifications when dropdown opens
-  useEffect(() => {
-    if (isOpen) {
-      void fetchRecentNotifications();
-    }
-  }, [isOpen, fetchRecentNotifications]);
-
   const handleMarkAllAsRead = async () => {
     try {
-      await notificationClient.markAsRead({});
-      setUnreadCount(0);
-      setRecentNotifications([]);
+      await markAsReadMutation.mutateAsync({});
+      setSignalUnreadCount(0);
+      setSignalNotifications([]);
     } catch (error) {
       console.error("Failed to mark all as read:", error);
     }
@@ -157,6 +138,8 @@ export const NotificationBell = () => {
     return;
   }
 
+  const loading = unreadLoading || notificationsLoading;
+
   if (loading) {
     return (
       <Button variant="ghost" size="icon" className="relative" disabled>

package/src/pages/NotificationSettingsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { Bell, Clock, Zap, Send } from "lucide-react";
 import {
   PageLayout,
@@ -9,14 +9,14 @@ import {
   DynamicForm,
 } from "@checkstack/ui";
 import {
+  usePluginClient,
   useApi,
-  rpcApiRef,
-  permissionApiRef,
+  accessApiRef,
 } from "@checkstack/frontend-api";
 import type { EnrichedSubscription } from "@checkstack/notification-common";
 import {
   NotificationApi,
-  permissions,
+  notificationAccess,
 } from "@checkstack/notification-common";
 import {
   StrategyCard,
@@ -28,287 +28,218 @@ import {
 } from "../components/UserChannelCard";
 
 export const NotificationSettingsPage = () => {
-  const rpcApi = useApi(rpcApiRef);
-  const permissionApi = useApi(permissionApiRef);
-  const notificationClient = rpcApi.forPlugin(NotificationApi);
+  const notificationClient = usePluginClient(NotificationApi);
+  const accessApi = useApi(accessApiRef);
   const toast = useToast();
 
-  // Check if user has admin permission
-  const { allowed: isAdmin } = permissionApi.usePermission(
-    permissions.notificationAdmin.id
-  );
+  // Check if user has admin access
+  const { allowed: isAdmin } = accessApi.useAccess(notificationAccess.admin);
 
-  // Retention settings state
-  const [retentionSchema, setRetentionSchema] = useState<
-    Record<string, unknown> | undefined
-  >();
+  // Local state for editing
   const [retentionSettings, setRetentionSettings] = useState<
     Record<string, unknown>
   >({
     retentionDays: 30,
     enabled: false,
   });
-  const [retentionLoading, setRetentionLoading] = useState(true);
-  const [retentionSaving, setRetentionSaving] = useState(false);
   const [retentionValid, setRetentionValid] = useState(true);
-
-  // Subscription state - now uses enriched subscriptions only
-  const [subscriptions, setSubscriptions] = useState<EnrichedSubscription[]>(
-    []
-  );
-  const [subsLoading, setSubsLoading] = useState(true);
-
-  // Delivery strategies state (admin only)
-  const [strategies, setStrategies] = useState<DeliveryStrategy[]>([]);
-  const [strategiesLoading, setStrategiesLoading] = useState(true);
-  const [strategySaving, setStrategySaving] = useState<string | undefined>();
-
-  // User channels state
-  const [userChannels, setUserChannels] = useState<UserDeliveryChannel[]>([]);
-  const [channelsLoading, setChannelsLoading] = useState(true);
   const [channelSaving, setChannelSaving] = useState<string | undefined>();
   const [channelConnecting, setChannelConnecting] = useState<
     string | undefined
   >();
   const [channelTesting, setChannelTesting] = useState<string | undefined>();
+  const [strategySaving, setStrategySaving] = useState<string | undefined>();
 
-  // Fetch retention settings and schema (admin only)
-  const fetchRetentionData = useCallback(async () => {
-    if (!isAdmin) {
-      setRetentionLoading(false);
-      return;
-    }
-    try {
-      const [schema, settings] = await Promise.all([
-        notificationClient.getRetentionSchema(),
-        notificationClient.getRetentionSettings(),
-      ]);
-      setRetentionSchema(schema as Record<string, unknown>);
-      setRetentionSettings(settings);
-    } catch (error) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to load retention settings";
-      toast.error(message);
-    } finally {
-      setRetentionLoading(false);
-    }
-  }, [notificationClient, isAdmin, toast]);
+  // Query: Retention schema (admin only)
+  const { data: retentionSchema } =
+    notificationClient.getRetentionSchema.useQuery({}, { enabled: isAdmin });
 
-  // Fetch subscriptions only (no groups needed)
-  const fetchSubscriptionData = useCallback(async () => {
-    try {
-      const subsData = await notificationClient.getSubscriptions();
-      setSubscriptions(subsData);
-    } catch (error) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to fetch subscriptions";
-      toast.error(message);
-    } finally {
-      setSubsLoading(false);
-    }
-  }, [notificationClient, toast]);
+  // Query: Retention settings (admin only)
+  const { data: fetchedRetentionSettings, isLoading: retentionLoading } =
+    notificationClient.getRetentionSettings.useQuery({}, { enabled: isAdmin });
 
-  // Fetch delivery strategies (admin only)
-  const fetchStrategies = useCallback(async () => {
-    if (!isAdmin) {
-      setStrategiesLoading(false);
-      return;
-    }
-    try {
-      const data = await notificationClient.getDeliveryStrategies();
-      setStrategies(data as DeliveryStrategy[]);
-    } catch (error) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to load delivery channels";
-      toast.error(message);
-    } finally {
-      setStrategiesLoading(false);
-    }
-  }, [notificationClient, isAdmin, toast]);
+  // Query: Subscriptions
+  const {
+    data: subscriptions = [],
+    isLoading: subsLoading,
+    refetch: refetchSubscriptions,
+  } = notificationClient.getSubscriptions.useQuery({});
 
-  // Fetch user delivery channels
-  const fetchUserChannels = useCallback(async () => {
-    try {
-      const data = await notificationClient.getUserDeliveryChannels();
-      setUserChannels(data as UserDeliveryChannel[]);
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to load your channels";
-      toast.error(message);
-    } finally {
-      setChannelsLoading(false);
-    }
-  }, [notificationClient, toast]);
+  // Query: Delivery strategies (admin only)
+  const {
+    data: strategies = [],
+    isLoading: strategiesLoading,
+    refetch: refetchStrategies,
+  } = notificationClient.getDeliveryStrategies.useQuery(
+    {},
+    { enabled: isAdmin }
+  );
+
+  // Query: User delivery channels
+  const {
+    data: userChannels = [],
+    isLoading: channelsLoading,
+    refetch: refetchChannels,
+  } = notificationClient.getUserDeliveryChannels.useQuery({});
 
+  // Sync fetched retention settings to local state
   useEffect(() => {
-    void fetchRetentionData();
-    void fetchSubscriptionData();
-    void fetchStrategies();
-    void fetchUserChannels();
-  }, [
-    fetchRetentionData,
-    fetchSubscriptionData,
-    fetchStrategies,
-    fetchUserChannels,
-  ]);
+    if (fetchedRetentionSettings) {
+      setRetentionSettings(fetchedRetentionSettings);
+    }
+  }, [fetchedRetentionSettings]);
+
+  // Mutations
+  const setRetentionMutation =
+    notificationClient.setRetentionSettings.useMutation({
+      onSuccess: () => {
+        toast.success("Retention settings saved");
+      },
+      onError: (error) => {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to save settings"
+        );
+      },
+    });
 
-  const handleSaveRetention = async () => {
-    try {
-      setRetentionSaving(true);
-      await notificationClient.setRetentionSettings(
-        retentionSettings as { enabled: boolean; retentionDays: number }
+  const unsubscribeMutation = notificationClient.unsubscribe.useMutation({
+    onSuccess: () => {
+      toast.success("Unsubscribed successfully");
+      void refetchSubscriptions();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to unsubscribe"
       );
-      toast.success("Retention settings saved");
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to save settings";
-      toast.error(message);
-    } finally {
-      setRetentionSaving(false);
-    }
+    },
+  });
+
+  const updateStrategyMutation =
+    notificationClient.updateDeliveryStrategy.useMutation({
+      onSuccess: () => {
+        toast.success("Updated delivery channel");
+        void refetchStrategies();
+        setStrategySaving(undefined);
+      },
+      onError: (error) => {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to update channel"
+        );
+        setStrategySaving(undefined);
+      },
+    });
+
+  const setUserPreferenceMutation =
+    notificationClient.setUserDeliveryPreference.useMutation({
+      onSuccess: () => {
+        toast.success("Updated notification channel");
+        void refetchChannels();
+        setChannelSaving(undefined);
+      },
+      onError: (error) => {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to update preference"
+        );
+        setChannelSaving(undefined);
+      },
+    });
+
+  const unlinkChannelMutation =
+    notificationClient.unlinkDeliveryChannel.useMutation({
+      onSuccess: () => {
+        toast.success("Disconnected notification channel");
+        void refetchChannels();
+        setChannelSaving(undefined);
+      },
+      onError: (error) => {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to disconnect"
+        );
+        setChannelSaving(undefined);
+      },
+    });
+
+  const getOAuthUrlMutation =
+    notificationClient.getDeliveryOAuthUrl.useMutation({
+      onSuccess: (data) => {
+        globalThis.location.href = data.authUrl;
+      },
+      onError: (error) => {
+        toast.error(
+          error instanceof Error ? error.message : "Failed to start OAuth flow"
+        );
+        setChannelConnecting(undefined);
+      },
+    });
+
+  const sendTestMutation = notificationClient.sendTestNotification.useMutation({
+    onSettled: () => {
+      setChannelTesting(undefined);
+    },
+  });
+
+  const handleSaveRetention = () => {
+    setRetentionMutation.mutate(
+      retentionSettings as { enabled: boolean; retentionDays: number }
+    );
   };
 
-  const handleUnsubscribe = async (groupId: string) => {
-    try {
-      await notificationClient.unsubscribe({ groupId });
-      setSubscriptions((prev) => prev.filter((s) => s.groupId !== groupId));
-      toast.success("Unsubscribed successfully");
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to unsubscribe";
-      toast.error(message);
-    }
+  const handleUnsubscribe = (groupId: string) => {
+    unsubscribeMutation.mutate({ groupId });
   };
 
-  // Handle strategy update (enabled state and config)
   const handleStrategyUpdate = async (
     strategyId: string,
     enabled: boolean,
     config?: Record<string, unknown>,
     layoutConfig?: Record<string, unknown>
   ) => {
-    try {
-      setStrategySaving(strategyId);
-      await notificationClient.updateDeliveryStrategy({
-        strategyId,
-        enabled,
-        config,
-        layoutConfig,
-      });
-      // Update local state
-      setStrategies((prev) =>
-        prev.map((s) =>
-          s.qualifiedId === strategyId
-            ? { ...s, enabled, config, layoutConfig }
-            : s
-        )
-      );
-      toast.success(`${enabled ? "Enabled" : "Disabled"} delivery channel`);
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to update channel";
-      toast.error(message);
-    } finally {
-      setStrategySaving(undefined);
-    }
+    setStrategySaving(strategyId);
+    await updateStrategyMutation.mutateAsync({
+      strategyId,
+      enabled,
+      config,
+      layoutConfig,
+    });
   };
 
-  // Handle user channel toggle
   const handleChannelToggle = async (strategyId: string, enabled: boolean) => {
-    try {
-      setChannelSaving(strategyId);
-      await notificationClient.setUserDeliveryPreference({
-        strategyId,
-        enabled,
-      });
-      setUserChannels((prev) =>
-        prev.map((c) => (c.strategyId === strategyId ? { ...c, enabled } : c))
-      );
-      toast.success(`${enabled ? "Enabled" : "Disabled"} notification channel`);
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to update preference";
-      toast.error(message);
-    } finally {
-      setChannelSaving(undefined);
-    }
+    setChannelSaving(strategyId);
+    await setUserPreferenceMutation.mutateAsync({
+      strategyId,
+      enabled,
+    });
   };
 
-  // Handle OAuth connect
   const handleChannelConnect = async (strategyId: string) => {
-    try {
-      setChannelConnecting(strategyId);
-      const { authUrl } = await notificationClient.getDeliveryOAuthUrl({
-        strategyId,
-        returnUrl: globalThis.location.pathname,
-      });
-      // Redirect to OAuth provider
-      globalThis.location.href = authUrl;
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to start OAuth flow";
-      toast.error(message);
-      setChannelConnecting(undefined);
-    }
+    setChannelConnecting(strategyId);
+    await getOAuthUrlMutation.mutateAsync({
+      strategyId,
+      returnUrl: globalThis.location.pathname,
+    });
   };
 
-  // Handle OAuth disconnect
   const handleChannelDisconnect = async (strategyId: string) => {
-    try {
-      setChannelSaving(strategyId);
-      await notificationClient.unlinkDeliveryChannel({ strategyId });
-      setUserChannels((prev) =>
-        prev.map((c) =>
-          c.strategyId === strategyId
-            ? { ...c, linkedAt: undefined, enabled: false, isConfigured: false }
-            : c
-        )
-      );
-      toast.success("Disconnected notification channel");
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to disconnect";
-      toast.error(message);
-    } finally {
-      setChannelSaving(undefined);
-    }
+    setChannelSaving(strategyId);
+    await unlinkChannelMutation.mutateAsync({ strategyId });
   };
 
-  // Handle user config save
   const handleChannelConfigSave = async (
     strategyId: string,
     userConfig: Record<string, unknown>
   ) => {
-    try {
-      setChannelSaving(strategyId);
-      await notificationClient.setUserDeliveryPreference({
-        strategyId,
-        enabled:
-          userChannels.find((c) => c.strategyId === strategyId)?.enabled ??
-          false,
-        userConfig,
-      });
-      setUserChannels((prev) =>
-        prev.map((c) =>
-          c.strategyId === strategyId
-            ? { ...c, userConfig, isConfigured: true }
-            : c
-        )
-      );
-      toast.success("Saved channel settings");
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to save settings";
-      toast.error(message);
-    } finally {
-      setChannelSaving(undefined);
-    }
+    setChannelSaving(strategyId);
+    const channel = userChannels.find((c) => c.strategyId === strategyId);
+    await setUserPreferenceMutation.mutateAsync({
+      strategyId,
+      enabled: channel?.enabled ?? false,
+      userConfig,
+    });
+  };
+
+  const handleTest = async (strategyId: string) => {
+    setChannelTesting(strategyId);
+    return sendTestMutation.mutateAsync({ strategyId });
   };
 
   return (
@@ -327,7 +258,7 @@ export const NotificationSettingsPage = () => {
                 Loading your channels...
               </div>
             </Card>
-          ) : userChannels.length === 0 ? (
+          ) : (userChannels as UserDeliveryChannel[]).length === 0 ? (
             <Card className="p-4">
               <div className="text-center py-4 text-muted-foreground">
                 No notification channels available. Contact your administrator
@@ -336,7 +267,7 @@ export const NotificationSettingsPage = () => {
             </Card>
           ) : (
             <div className="space-y-3">
-              {userChannels.map((channel) => (
+              {(userChannels as UserDeliveryChannel[]).map((channel) => (
                 <UserChannelCard
                   key={channel.strategyId}
                   channel={channel}
@@ -344,21 +275,7 @@ export const NotificationSettingsPage = () => {
                   onConnect={handleChannelConnect}
                   onDisconnect={handleChannelDisconnect}
                   onSaveConfig={handleChannelConfigSave}
-                  onTest={async (strategyId) => {
-                    setChannelTesting(strategyId);
-                    try {
-                      const result =
-                        await notificationClient.sendTestNotification({
-                          strategyId,
-                        });
-                      if (!result.success) {
-                        alert(`Test failed: ${result.error}`);
-                      }
-                      return result;
-                    } finally {
-                      setChannelTesting(undefined);
-                    }
-                  }}
+                  onTest={handleTest}
                   saving={channelSaving === channel.strategyId}
                   connecting={channelConnecting === channel.strategyId}
                   testing={channelTesting === channel.strategyId}
@@ -376,13 +293,13 @@ export const NotificationSettingsPage = () => {
             icon={<Bell className="h-5 w-5" />}
           />
           <Card className="p-4">
-            {subscriptions.length === 0 ? (
+            {(subscriptions as EnrichedSubscription[]).length === 0 ? (
               <div className="text-center py-4 text-muted-foreground">
                 No active subscriptions
               </div>
             ) : (
               <div className="space-y-3">
-                {subscriptions.map((sub) => (
+                {(subscriptions as EnrichedSubscription[]).map((sub) => (
                   <div
                     key={sub.groupId}
                     className="flex items-center justify-between py-2 border-b last:border-0"
@@ -399,7 +316,8 @@ export const NotificationSettingsPage = () => {
                     <Button
                       variant="outline"
                       size="sm"
-                      onClick={() => void handleUnsubscribe(sub.groupId)}
+                      onClick={() => handleUnsubscribe(sub.groupId)}
+                      disabled={unsubscribeMutation.isPending}
                     >
                       Unsubscribe
                     </Button>
@@ -439,7 +357,7 @@ export const NotificationSettingsPage = () => {
                   Loading delivery channels...
                 </div>
               </Card>
-            ) : strategies.length === 0 ? (
+            ) : (strategies as DeliveryStrategy[]).length === 0 ? (
               <Card className="p-4">
                 <div className="text-center py-4 text-muted-foreground">
                   No delivery channels registered. Plugins can register delivery
@@ -448,7 +366,7 @@ export const NotificationSettingsPage = () => {
               </Card>
             ) : (
               <div className="space-y-3">
-                {strategies.map((strategy) => (
+                {(strategies as DeliveryStrategy[]).map((strategy) => (
                   <StrategyCard
                     key={strategy.qualifiedId}
                     strategy={strategy}
@@ -477,18 +395,18 @@ export const NotificationSettingsPage = () => {
               ) : (
                 <div className="space-y-4">
                   <DynamicForm
-                    schema={retentionSchema}
+                    schema={retentionSchema as Record<string, unknown>}
                     value={retentionSettings}
                     onChange={setRetentionSettings}
                     onValidChange={setRetentionValid}
                   />
                   <Button
-                    onClick={() => {
-                      void handleSaveRetention();
-                    }}
-                    disabled={retentionSaving || !retentionValid}
+                    onClick={handleSaveRetention}
+                    disabled={setRetentionMutation.isPending || !retentionValid}
                   >
-                    {retentionSaving ? "Saving..." : "Save Settings"}
+                    {setRetentionMutation.isPending
+                      ? "Saving..."
+                      : "Save Settings"}
                   </Button>
                 </div>
               )}

package/src/pages/NotificationsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { Bell, Check, Trash2, ChevronDown } from "lucide-react";
 import {
@@ -13,88 +13,82 @@ import {
   DropdownMenuTrigger,
   Markdown,
 } from "@checkstack/ui";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import type { Notification } from "@checkstack/notification-common";
 import { NotificationApi } from "@checkstack/notification-common";
 
 export const NotificationsPage = () => {
-  const rpcApi = useApi(rpcApiRef);
-  const notificationClient = rpcApi.forPlugin(NotificationApi);
+  const notificationClient = usePluginClient(NotificationApi);
   const toast = useToast();
 
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [total, setTotal] = useState(0);
-  const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<"all" | "unread">("all");
   const [page, setPage] = useState(0);
   const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
   const pageSize = 20;
 
-  const fetchNotifications = useCallback(async () => {
-    try {
-      setLoading(true);
-      const { notifications: data, total: totalCount } =
-        await notificationClient.getNotifications({
-          limit: pageSize,
-          offset: page * pageSize,
-          unreadOnly: filter === "unread",
-        });
-      setNotifications(data);
-      setTotal(totalCount);
-    } catch (error) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to fetch notifications";
-      toast.error(message);
-    } finally {
-      setLoading(false);
-    }
-  }, [notificationClient, page, filter, toast]);
+  // Query: Fetch notifications
+  const {
+    data: notificationsData,
+    isLoading: loading,
+    refetch,
+  } = notificationClient.getNotifications.useQuery({
+    limit: pageSize,
+    offset: page * pageSize,
+    unreadOnly: filter === "unread",
+  });
 
-  useEffect(() => {
-    void fetchNotifications();
-  }, [fetchNotifications]);
+  const notifications = notificationsData?.notifications ?? [];
+  const total = notificationsData?.total ?? 0;
 
-  const handleMarkAsRead = async (notificationId: string) => {
-    try {
-      await notificationClient.markAsRead({ notificationId });
-      setNotifications((prev) =>
-        prev.map((n) => (n.id === notificationId ? { ...n, isRead: true } : n))
-      );
+  // Mutation: Mark as read
+  const markAsReadMutation = notificationClient.markAsRead.useMutation({
+    onSuccess: () => {
+      void refetch();
       toast.success("Notification marked as read");
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to mark as read";
-      toast.error(message);
-    }
-  };
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to mark as read"
+      );
+    },
+  });
 
-  const handleDelete = async (notificationId: string) => {
-    try {
-      await notificationClient.deleteNotification({ notificationId });
-      setNotifications((prev) => prev.filter((n) => n.id !== notificationId));
-      setTotal((prev) => prev - 1);
+  // Mutation: Delete notification
+  const deleteMutation = notificationClient.deleteNotification.useMutation({
+    onSuccess: () => {
+      void refetch();
       toast.success("Notification deleted");
-    } catch (error) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to delete notification";
-      toast.error(message);
-    }
-  };
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete notification"
+      );
+    },
+  });
 
-  const handleMarkAllAsRead = async () => {
-    try {
-      await notificationClient.markAsRead({});
-      setNotifications((prev) => prev.map((n) => ({ ...n, isRead: true })));
+  // Mutation: Mark all as read
+  const markAllAsReadMutation = notificationClient.markAsRead.useMutation({
+    onSuccess: () => {
+      void refetch();
       toast.success("All notifications marked as read");
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to mark all as read";
-      toast.error(message);
-    }
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to mark all as read"
+      );
+    },
+  });
+
+  const handleMarkAsRead = (notificationId: string) => {
+    markAsReadMutation.mutate({ notificationId });
+  };
+
+  const handleDelete = (notificationId: string) => {
+    deleteMutation.mutate({ notificationId });
+  };
+
+  const handleMarkAllAsRead = () => {
+    markAllAsReadMutation.mutate({});
   };
 
   const getImportanceBadge = (importance: Notification["importance"]) => {
@@ -182,9 +176,8 @@ export const NotificationsPage = () => {
           <Button
             variant="outline"
             size="sm"
-            onClick={() => {
-              void handleMarkAllAsRead();
-            }}
+            onClick={handleMarkAllAsRead}
+            disabled={markAllAsReadMutation.isPending}
           >
             <Check className="h-4 w-4 mr-1" /> Mark all read
           </Button>
@@ -241,9 +234,8 @@ export const NotificationsPage = () => {
                       <Button
                         variant="ghost"
                         size="icon"
-                        onClick={() => {
-                          void handleMarkAsRead(notification.id);
-                        }}
+                        onClick={() => handleMarkAsRead(notification.id)}
+                        disabled={markAsReadMutation.isPending}
                         title="Mark as read"
                       >
                         <Check className="h-4 w-4" />
@@ -252,9 +244,8 @@ export const NotificationsPage = () => {
                     <Button
                       variant="ghost"
                       size="icon"
-                      onClick={() => {
-                        void handleDelete(notification.id);
-                      }}
+                      onClick={() => handleDelete(notification.id)}
+                      disabled={deleteMutation.isPending}
                       title="Delete"
                     >
                       <Trash2 className="h-4 w-4 text-destructive" />