@checkstack/incident-frontend 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # @checkstack/incident-frontend
 
+## 0.3.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 [180be38]
+- Updated dependencies [7a23261]
+  - @checkstack/dashboard-frontend@0.2.0
+  - @checkstack/frontend-api@0.2.0
+  - @checkstack/common@0.3.0
+  - @checkstack/auth-frontend@0.3.0
+  - @checkstack/catalog-common@1.2.0
+  - @checkstack/incident-common@0.3.0
+  - @checkstack/ui@0.2.1
+  - @checkstack/signal-frontend@0.0.7
+
 ## 0.2.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/incident-frontend",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -12,6 +12,7 @@
     "@checkstack/auth-frontend": "workspace:*",
     "@checkstack/catalog-common": "workspace:*",
     "@checkstack/common": "workspace:*",
+    "@checkstack/dashboard-frontend": "workspace:*",
     "@checkstack/frontend-api": "workspace:*",
     "@checkstack/incident-common": "workspace:*",
     "@checkstack/signal-frontend": "workspace:*",

package/src/api.ts

@@ -1,10 +1,9 @@
-import { createApiRef } from "@checkstack/frontend-api";
-import { IncidentApi } from "@checkstack/incident-common";
-import type { InferClient } from "@checkstack/common";
-
-// IncidentApiClient type inferred from the client definition
-export type IncidentApiClient = InferClient<typeof IncidentApi>;
-
-export const incidentApiRef = createApiRef<IncidentApiClient>(
-  "plugin.incident.api"
-);
+// Re-export types for convenience
+export type {
+  IncidentWithSystems,
+  IncidentDetail,
+  IncidentUpdate,
+  IncidentStatus,
+} from "@checkstack/incident-common";
+// Client definition is in @checkstack/incident-common - use with usePluginClient
+export { IncidentApi } from "@checkstack/incident-common";

package/src/components/IncidentEditor.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { useApi } from "@checkstack/frontend-api";
-import { incidentApiRef } from "../api";
+import React, { useState, useEffect } from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { IncidentApi } from "../api";
 import type {
   IncidentWithSystems,
   IncidentSeverity,
@@ -47,7 +47,7 @@ export const IncidentEditor: React.FC<Props> = ({
   systems,
   onSave,
 }) => {
-  const api = useApi(incidentApiRef);
+  const incidentClient = usePluginClient(IncidentApi);
   const toast = useToast();
 
   // Incident fields
@@ -57,29 +57,46 @@ export const IncidentEditor: React.FC<Props> = ({
   const [selectedSystemIds, setSelectedSystemIds] = useState<Set<string>>(
     new Set()
   );
-  const [saving, setSaving] = useState(false);
 
   // Status update fields
   const [updates, setUpdates] = useState<IncidentUpdate[]>([]);
-  const [loadingUpdates, setLoadingUpdates] = useState(false);
+  const [loadingUpdates, _setLoadingUpdates] = useState(false);
   const [showUpdateForm, setShowUpdateForm] = useState(false);
 
-  const loadIncidentDetails = useCallback(
-    async (id: string) => {
-      setLoadingUpdates(true);
-      try {
-        const detail = await api.getIncident({ id });
-        if (detail) {
-          setUpdates(detail.updates);
-        }
-      } catch (error) {
-        console.error("Failed to load incident details:", error);
-      } finally {
-        setLoadingUpdates(false);
-      }
+  // Mutations
+  const createMutation = incidentClient.createIncident.useMutation({
+    onSuccess: () => {
+      toast.success("Incident created");
+      onSave();
     },
-    [api]
-  );
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to save");
+    },
+  });
+
+  const updateMutation = incidentClient.updateIncident.useMutation({
+    onSuccess: () => {
+      toast.success("Incident updated");
+      onSave();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to save");
+    },
+  });
+
+  // Query for incident details (only when editing)
+  const { data: incidentDetail, refetch: refetchDetail } =
+    incidentClient.getIncident.useQuery(
+      { id: incident?.id ?? "" },
+      { enabled: !!incident?.id && open }
+    );
+
+  // Sync updates from query
+  useEffect(() => {
+    if (incidentDetail) {
+      setUpdates(incidentDetail.updates);
+    }
+  }, [incidentDetail]);
 
   // Reset form when incident changes
   useEffect(() => {
@@ -88,8 +105,6 @@ export const IncidentEditor: React.FC<Props> = ({
       setDescription(incident.description ?? "");
       setSeverity(incident.severity);
       setSelectedSystemIds(new Set(incident.systemIds));
-      // Load full incident with updates
-      loadIncidentDetails(incident.id);
     } else {
       setTitle("");
       setDescription("");
@@ -98,7 +113,7 @@ export const IncidentEditor: React.FC<Props> = ({
       setUpdates([]);
       setShowUpdateForm(false);
     }
-  }, [incident, open, loadIncidentDetails]);
+  }, [incident, open]);
 
   const handleSystemToggle = (systemId: string) => {
     setSelectedSystemIds((prev) => {
@@ -112,7 +127,7 @@ export const IncidentEditor: React.FC<Props> = ({
     });
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = () => {
     if (!title.trim()) {
       toast.error("Title is required");
       return;
@@ -122,44 +137,35 @@ export const IncidentEditor: React.FC<Props> = ({
       return;
     }
 
-    setSaving(true);
-    try {
-      if (incident) {
-        await api.updateIncident({
-          id: incident.id,
-          title,
-          description: description || undefined,
-          severity,
-          systemIds: [...selectedSystemIds],
-        });
-        toast.success("Incident updated");
-      } else {
-        await api.createIncident({
-          title,
-          description,
-          severity,
-          systemIds: [...selectedSystemIds],
-        });
-        toast.success("Incident created");
-      }
-      onSave();
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to save";
-      toast.error(message);
-    } finally {
-      setSaving(false);
+    if (incident) {
+      updateMutation.mutate({
+        id: incident.id,
+        title,
+        description: description || undefined,
+        severity,
+        systemIds: [...selectedSystemIds],
+      });
+    } else {
+      createMutation.mutate({
+        title,
+        description,
+        severity,
+        systemIds: [...selectedSystemIds],
+      });
     }
   };
 
   const handleUpdateSuccess = () => {
     if (incident) {
-      loadIncidentDetails(incident.id);
+      void refetchDetail();
     }
     setShowUpdateForm(false);
     // Notify parent to refresh list (status may have changed)
     onSave();
   };
 
+  const saving = createMutation.isPending || updateMutation.isPending;
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent size="xl">

package/src/components/IncidentUpdateForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { useApi } from "@checkstack/frontend-api";
-import { incidentApiRef } from "../api";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { IncidentApi } from "../api";
 import type { IncidentStatus } from "@checkstack/incident-common";
 import {
   Button,
@@ -30,37 +30,37 @@ export const IncidentUpdateForm: React.FC<IncidentUpdateFormProps> = ({
   onSuccess,
   onCancel,
 }) => {
-  const api = useApi(incidentApiRef);
+  const incidentClient = usePluginClient(IncidentApi);
   const toast = useToast();
 
   const [message, setMessage] = useState("");
   const [statusChange, setStatusChange] = useState<IncidentStatus | "">("");
-  const [isPosting, setIsPosting] = useState(false);
 
-  const handleSubmit = async () => {
-    if (!message.trim()) {
-      toast.error("Update message is required");
-      return;
-    }
-
-    setIsPosting(true);
-    try {
-      await api.addUpdate({
-        incidentId,
-        message,
-        statusChange: statusChange || undefined,
-      });
+  const addUpdateMutation = incidentClient.addUpdate.useMutation({
+    onSuccess: () => {
       toast.success("Update posted");
       setMessage("");
       setStatusChange("");
       onSuccess();
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Failed to post update";
-      toast.error(errorMessage);
-    } finally {
-      setIsPosting(false);
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to post update"
+      );
+    },
+  });
+
+  const handleSubmit = () => {
+    if (!message.trim()) {
+      toast.error("Update message is required");
+      return;
     }
+
+    addUpdateMutation.mutate({
+      incidentId,
+      message,
+      statusChange: statusChange || undefined,
+    });
   };
 
   return (
@@ -107,9 +107,9 @@ export const IncidentUpdateForm: React.FC<IncidentUpdateFormProps> = ({
         <Button
           size="sm"
           onClick={handleSubmit}
-          disabled={isPosting || !message.trim()}
+          disabled={addUpdateMutation.isPending || !message.trim()}
         >
-          {isPosting ? (
+          {addUpdateMutation.isPending ? (
             <>
               <Loader2 className="h-4 w-4 mr-1 animate-spin" />
               Posting...

package/src/components/SystemIncidentBadge.tsx

@@ -1,60 +1,75 @@
-import React, { useEffect, useState, useCallback } from "react";
-import { useApi, type SlotContext } from "@checkstack/frontend-api";
+import React from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
 import { useSignal } from "@checkstack/signal-frontend";
 import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
-import { incidentApiRef } from "../api";
+import { IncidentApi } from "../api";
 import {
   INCIDENT_UPDATED,
   type IncidentWithSystems,
 } from "@checkstack/incident-common";
 import { Badge } from "@checkstack/ui";
+import { useSystemBadgeDataOptional } from "@checkstack/dashboard-frontend";
 
 type Props = SlotContext<typeof SystemStateBadgesSlot>;
 
 const SEVERITY_WEIGHTS = { critical: 3, major: 2, minor: 1 } as const;
 
+/**
+ * Finds the most severe incident from a list.
+ */
+function getMostSevereIncident(
+  incidents: IncidentWithSystems[]
+): IncidentWithSystems | undefined {
+  if (incidents.length === 0) return undefined;
+  const sorted = [...incidents].toSorted((a, b) => {
+    return (
+      (SEVERITY_WEIGHTS[b.severity as keyof typeof SEVERITY_WEIGHTS] || 0) -
+      (SEVERITY_WEIGHTS[a.severity as keyof typeof SEVERITY_WEIGHTS] || 0)
+    );
+  });
+  return sorted[0];
+}
+
 /**
  * Displays an incident badge for a system when it has an active incident.
  * Shows nothing if no active incidents.
+ *
+ * When rendered within SystemBadgeDataProvider, uses bulk-fetched data.
+ * Otherwise, falls back to individual fetch.
+ *
  * Listens for realtime updates via signals.
  */
 export const SystemIncidentBadge: React.FC<Props> = ({ system }) => {
-  const api = useApi(incidentApiRef);
-  const [activeIncident, setActiveIncident] = useState<
-    IncidentWithSystems | undefined
-  >();
+  const incidentClient = usePluginClient(IncidentApi);
+  const badgeData = useSystemBadgeDataOptional();
 
-  const refetch = useCallback(() => {
-    if (!system?.id) return;
+  // Try to get data from provider first
+  const providerData = badgeData?.getSystemBadgeData(system?.id ?? "");
+  const providerIncident = providerData
+    ? getMostSevereIncident(providerData.incidents)
+    : undefined;
 
-    api
-      .getIncidentsForSystem({ systemId: system.id })
-      .then((incidents: IncidentWithSystems[]) => {
-        // Get the most severe active incident
-        const sorted = [...incidents].toSorted((a, b) => {
-          return (
-            (SEVERITY_WEIGHTS[b.severity as keyof typeof SEVERITY_WEIGHTS] ||
-              0) -
-            (SEVERITY_WEIGHTS[a.severity as keyof typeof SEVERITY_WEIGHTS] || 0)
-          );
-        });
-        setActiveIncident(sorted[0]);
-      })
-      .catch(console.error);
-  }, [system?.id, api]);
+  // Query for incidents if not using provider
+  const { data: incidents, refetch } =
+    incidentClient.getIncidentsForSystem.useQuery(
+      { systemId: system?.id ?? "" },
+      { enabled: !badgeData && !!system?.id }
+    );
 
-  // Initial fetch
-  useEffect(() => {
-    refetch();
-  }, [refetch]);
+  const localIncident = incidents
+    ? getMostSevereIncident(incidents)
+    : undefined;
 
-  // Listen for realtime incident updates
+  // Listen for realtime incident updates (only in fallback mode)
   useSignal(INCIDENT_UPDATED, ({ systemIds }) => {
-    if (system?.id && systemIds.includes(system.id)) {
-      refetch();
+    if (!badgeData && system?.id && systemIds.includes(system.id)) {
+      void refetch();
     }
   });
 
+  // Use provider data if available, otherwise use local state
+  const activeIncident = badgeData ? providerIncident : localIncident;
+
   if (!activeIncident) return;
 
   const variant =

package/src/components/SystemIncidentPanel.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
-import { useApi, type SlotContext } from "@checkstack/frontend-api";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
 import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
 import { SystemDetailsTopSlot } from "@checkstack/catalog-common";
-import { incidentApiRef } from "../api";
+import { IncidentApi } from "../api";
 import {
   incidentRoutes,
   INCIDENT_UPDATED,
@@ -76,29 +76,22 @@ function findMostSevereIncident(
  * Listens for realtime updates via signals.
  */
 export const SystemIncidentPanel: React.FC<Props> = ({ system }) => {
-  const api = useApi(incidentApiRef);
-  const [incidents, setIncidents] = useState<IncidentWithSystems[]>([]);
-  const [loading, setLoading] = useState(true);
+  const incidentClient = usePluginClient(IncidentApi);
 
-  const refetch = useCallback(() => {
-    if (!system?.id) return;
-
-    api
-      .getIncidentsForSystem({ systemId: system.id })
-      .then(setIncidents)
-      .catch(console.error)
-      .finally(() => setLoading(false));
-  }, [system?.id, api]);
-
-  // Initial fetch
-  useEffect(() => {
-    refetch();
-  }, [refetch]);
+  // Fetch incidents with useQuery
+  const {
+    data: incidents = [],
+    isLoading: loading,
+    refetch,
+  } = incidentClient.getIncidentsForSystem.useQuery(
+    { systemId: system?.id ?? "" },
+    { enabled: !!system?.id }
+  );
 
   // Listen for realtime incident updates
   useSignal(INCIDENT_UPDATED, ({ systemIds }) => {
     if (system?.id && systemIds.includes(system.id)) {
-      refetch();
+      void refetch();
     }
   });
 

package/src/index.tsx

@@ -1,14 +1,10 @@
 import {
   createFrontendPlugin,
   createSlotExtension,
-  rpcApiRef,
-  type ApiRef,
   UserMenuItemsSlot,
 } from "@checkstack/frontend-api";
-import { incidentApiRef, type IncidentApiClient } from "./api";
 import {
   incidentRoutes,
-  IncidentApi,
   pluginMetadata,
   incidentAccess,
 } from "@checkstack/incident-common";
@@ -43,15 +39,8 @@ export default createFrontendPlugin({
       title: "System Incident History",
     },
   ],
-  apis: [
-    {
-      ref: incidentApiRef,
-      factory: (deps: { get: <T>(ref: ApiRef<T>) => T }): IncidentApiClient => {
-        const rpcApi = deps.get(rpcApiRef);
-        return rpcApi.forPlugin(IncidentApi);
-      },
-    },
-  ],
+  // No APIs needed - components use usePluginClient() directly
+  apis: [],
   extensions: [
     createSlotExtension(UserMenuItemsSlot, {
       id: "incident.user-menu.items",

package/src/pages/IncidentConfigPage.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import {
-  useApi,
-  rpcApiRef,
+  usePluginClient,
   accessApiRef,
+  useApi,
   wrapInSuspense,
 } from "@checkstack/frontend-api";
-import { incidentApiRef } from "../api";
+import { IncidentApi } from "../api";
 import type {
   IncidentWithSystems,
   IncidentStatus,
 } from "@checkstack/incident-common";
 import { incidentAccess } from "@checkstack/incident-common";
-import { CatalogApi, type System } from "@checkstack/catalog-common";
+import { CatalogApi } from "@checkstack/catalog-common";
 import {
   Card,
   CardHeader,
@@ -49,20 +49,16 @@ import { formatDistanceToNow } from "date-fns";
 import { IncidentEditor } from "../components/IncidentEditor";
 
 const IncidentConfigPageContent: React.FC = () => {
-  const api = useApi(incidentApiRef);
-  const rpcApi = useApi(rpcApiRef);
+  const incidentClient = usePluginClient(IncidentApi);
+  const catalogClient = usePluginClient(CatalogApi);
   const accessApi = useApi(accessApiRef);
   const [searchParams, setSearchParams] = useSearchParams();
-
-  const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
   const toast = useToast();
 
-  const { allowed: canManage, loading: accessLoading } =
-    accessApi.useAccess(incidentAccess.incident.manage);
+  const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
+    incidentAccess.incident.manage
+  );
 
-  const [incidents, setIncidents] = useState<IncidentWithSystems[]>([]);
-  const [systems, setSystems] = useState<System[]>([]);
-  const [loading, setLoading] = useState(true);
   const [statusFilter, setStatusFilter] = useState<IncidentStatus | "all">(
     "all"
   );
@@ -76,37 +72,28 @@ const IncidentConfigPageContent: React.FC = () => {
 
   // Delete confirmation state
   const [deleteId, setDeleteId] = useState<string | undefined>();
-  const [isDeleting, setIsDeleting] = useState(false);
 
   // Resolve confirmation state
   const [resolveId, setResolveId] = useState<string | undefined>();
-  const [isResolving, setIsResolving] = useState(false);
 
-  const loadData = async () => {
-    setLoading(true);
-    try {
-      const [{ incidents: incidentList }, { systems: systemList }] =
-        await Promise.all([
-          api.listIncidents(
-            statusFilter === "all"
-              ? { includeResolved: showResolved }
-              : { status: statusFilter, includeResolved: showResolved }
-          ),
-          catalogApi.getSystems(),
-        ]);
-      setIncidents(incidentList);
-      setSystems(systemList);
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to load";
-      toast.error(message);
-    } finally {
-      setLoading(false);
-    }
-  };
+  // Fetch incidents with useQuery
+  const {
+    data: incidentsData,
+    isLoading: incidentsLoading,
+    refetch: refetchIncidents,
+  } = incidentClient.listIncidents.useQuery(
+    statusFilter === "all"
+      ? { includeResolved: showResolved }
+      : { status: statusFilter, includeResolved: showResolved }
+  );
 
-  useEffect(() => {
-    loadData();
-  }, [statusFilter, showResolved]);
+  // Fetch systems with useQuery
+  const { data: systemsData, isLoading: systemsLoading } =
+    catalogClient.getSystems.useQuery({});
+
+  const incidents = incidentsData?.incidents ?? [];
+  const systems = systemsData?.systems ?? [];
+  const loading = incidentsLoading || systemsLoading;
 
   // Handle ?action=create URL parameter (from command palette)
   useEffect(() => {
@@ -119,6 +106,29 @@ const IncidentConfigPageContent: React.FC = () => {
     }
   }, [searchParams, canManage, setSearchParams]);
 
+  // Mutations
+  const deleteMutation = incidentClient.deleteIncident.useMutation({
+    onSuccess: () => {
+      toast.success("Incident deleted");
+      void refetchIncidents();
+      setDeleteId(undefined);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to delete");
+    },
+  });
+
+  const resolveMutation = incidentClient.resolveIncident.useMutation({
+    onSuccess: () => {
+      toast.success("Incident resolved");
+      void refetchIncidents();
+      setResolveId(undefined);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to resolve");
+    },
+  });
+
   const handleCreate = () => {
     setEditingIncident(undefined);
     setEditorOpen(true);
@@ -129,45 +139,19 @@ const IncidentConfigPageContent: React.FC = () => {
     setEditorOpen(true);
   };
 
-  const handleDelete = async () => {
+  const handleDelete = () => {
     if (!deleteId) return;
-
-    setIsDeleting(true);
-    try {
-      await api.deleteIncident({ id: deleteId });
-      toast.success("Incident deleted");
-      loadData();
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to delete";
-      toast.error(message);
-    } finally {
-      setIsDeleting(false);
-      setDeleteId(undefined);
-    }
+    deleteMutation.mutate({ id: deleteId });
   };
 
-  const handleResolve = async () => {
+  const handleResolve = () => {
     if (!resolveId) return;
-
-    setIsResolving(true);
-    try {
-      await api.resolveIncident({ id: resolveId });
-      toast.success("Incident resolved");
-      loadData();
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to resolve";
-      toast.error(message);
-    } finally {
-      setIsResolving(false);
-      setResolveId(undefined);
-    }
+    resolveMutation.mutate({ id: resolveId });
   };
 
   const handleSave = () => {
     setEditorOpen(false);
-    loadData();
+    void refetchIncidents();
   };
 
   const getStatusBadge = (status: IncidentStatus) => {
@@ -369,7 +353,7 @@ const IncidentConfigPageContent: React.FC = () => {
         confirmText="Delete"
         variant="danger"
         onConfirm={handleDelete}
-        isLoading={isDeleting}
+        isLoading={deleteMutation.isPending}
       />
 
       <ConfirmationModal
@@ -380,7 +364,7 @@ const IncidentConfigPageContent: React.FC = () => {
         confirmText="Resolve"
         variant="info"
         onConfirm={handleResolve}
-        isLoading={isResolving}
+        isLoading={resolveMutation.isPending}
       />
     </PageLayout>
   );

package/src/pages/IncidentDetailPage.tsx

@@ -1,21 +1,20 @@
-import React, { useEffect, useState, useCallback, useMemo } from "react";
+import React, { useState } from "react";
 import { useParams, useNavigate, useSearchParams } from "react-router-dom";
 import {
-  useApi,
-  rpcApiRef,
+  usePluginClient,
   accessApiRef,
+  useApi,
   wrapInSuspense,
 } from "@checkstack/frontend-api";
 import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
-import { incidentApiRef } from "../api";
+import { IncidentApi } from "../api";
 import {
   incidentRoutes,
   INCIDENT_UPDATED,
-  type IncidentDetail,
   incidentAccess,
 } from "@checkstack/incident-common";
-import { CatalogApi, type System } from "@checkstack/catalog-common";
+import { CatalogApi } from "@checkstack/catalog-common";
 import {
   Card,
   CardHeader,
@@ -49,67 +48,60 @@ const IncidentDetailPageContent: React.FC = () => {
   const { incidentId } = useParams<{ incidentId: string }>();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const api = useApi(incidentApiRef);
-  const rpcApi = useApi(rpcApiRef);
+  const incidentClient = usePluginClient(IncidentApi);
+  const catalogClient = usePluginClient(CatalogApi);
   const accessApi = useApi(accessApiRef);
   const toast = useToast();
 
-  const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
-
   const { allowed: canManage } = accessApi.useAccess(
     incidentAccess.incident.manage
   );
 
-  const [incident, setIncident] = useState<IncidentDetail | undefined>();
-  const [systems, setSystems] = useState<System[]>([]);
-  const [loading, setLoading] = useState(true);
   const [showUpdateForm, setShowUpdateForm] = useState(false);
 
-  const loadData = useCallback(async () => {
-    if (!incidentId) return;
+  // Fetch incident with useQuery
+  const {
+    data: incident,
+    isLoading: incidentLoading,
+    refetch: refetchIncident,
+  } = incidentClient.getIncident.useQuery(
+    { id: incidentId ?? "" },
+    { enabled: !!incidentId }
+  );
 
-    try {
-      const [incidentData, { systems: systemList }] = await Promise.all([
-        api.getIncident({ id: incidentId }),
-        catalogApi.getSystems(),
-      ]);
-      setIncident(incidentData ?? undefined);
-      setSystems(systemList);
-    } catch (error) {
-      console.error("Failed to load incident:", error);
-    } finally {
-      setLoading(false);
-    }
-  }, [incidentId, api, catalogApi]);
+  // Fetch systems with useQuery
+  const { data: systemsData, isLoading: systemsLoading } =
+    catalogClient.getSystems.useQuery({});
 
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
+  const systems = systemsData?.systems ?? [];
+  const loading = incidentLoading || systemsLoading;
 
   // Listen for realtime updates
   useSignal(INCIDENT_UPDATED, ({ incidentId: updatedId }) => {
     if (incidentId === updatedId) {
-      loadData();
+      void refetchIncident();
     }
   });
 
+  // Resolve mutation
+  const resolveMutation = incidentClient.resolveIncident.useMutation({
+    onSuccess: () => {
+      toast.success("Incident resolved");
+      void refetchIncident();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to resolve");
+    },
+  });
+
   const handleUpdateSuccess = () => {
     setShowUpdateForm(false);
-    loadData();
+    void refetchIncident();
   };
 
-  const handleResolve = async () => {
+  const handleResolve = () => {
     if (!incidentId) return;
-
-    try {
-      await api.resolveIncident({ id: incidentId });
-      toast.success("Incident resolved");
-      await loadData();
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to resolve";
-      toast.error(message);
-    }
+    resolveMutation.mutate({ id: incidentId });
   };
 
   const getSystemName = (systemId: string): string => {
@@ -177,7 +169,12 @@ const IncidentDetailPageContent: React.FC = () => {
                 {getIncidentSeverityBadge(incident.severity)}
                 {getIncidentStatusBadge(incident.status)}
                 {canResolve && (
-                  <Button variant="outline" size="sm" onClick={handleResolve}>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleResolve}
+                    disabled={resolveMutation.isPending}
+                  >
                     <CheckCircle2 className="h-4 w-4 mr-1" />
                     Resolve
                   </Button>

package/src/pages/SystemIncidentHistoryPage.tsx

@@ -1,20 +1,15 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React from "react";
 import { useParams, Link } from "react-router-dom";
-import { useApi, rpcApiRef, wrapInSuspense } from "@checkstack/frontend-api";
+import { usePluginClient, wrapInSuspense } from "@checkstack/frontend-api";
 import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
-import { incidentApiRef } from "../api";
+import { IncidentApi } from "../api";
 import {
   incidentRoutes,
   INCIDENT_UPDATED,
-  type IncidentWithSystems,
   type IncidentStatus,
 } from "@checkstack/incident-common";
-import {
-  CatalogApi,
-  type System,
-  catalogRoutes,
-} from "@checkstack/catalog-common";
+import { CatalogApi, catalogRoutes } from "@checkstack/catalog-common";
 import {
   Card,
   CardHeader,
@@ -30,43 +25,32 @@ import { formatDistanceToNow } from "date-fns";
 
 const SystemIncidentHistoryPageContent: React.FC = () => {
   const { systemId } = useParams<{ systemId: string }>();
-  const api = useApi(incidentApiRef);
-  const rpcApi = useApi(rpcApiRef);
-
-  const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
-
-  const [incidents, setIncidents] = useState<IncidentWithSystems[]>([]);
-  const [system, setSystem] = useState<System | undefined>();
-  const [loading, setLoading] = useState(true);
+  const incidentClient = usePluginClient(IncidentApi);
+  const catalogClient = usePluginClient(CatalogApi);
 
-  const loadData = async () => {
-    if (!systemId) return;
+  // Fetch incidents with useQuery
+  const {
+    data: incidentsData,
+    isLoading: incidentsLoading,
+    refetch: refetchIncidents,
+  } = incidentClient.listIncidents.useQuery(
+    { systemId, includeResolved: true },
+    { enabled: !!systemId }
+  );
 
-    setLoading(true);
-    try {
-      const [{ incidents: incidentList }, { systems: systemList }] =
-        await Promise.all([
-          api.listIncidents({ systemId, includeResolved: true }),
-          catalogApi.getSystems(),
-        ]);
-      const systemData = systemList.find((s) => s.id === systemId);
-      setIncidents(incidentList);
-      setSystem(systemData);
-    } catch (error) {
-      console.error("Failed to load incidents:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  // Fetch systems with useQuery
+  const { data: systemsData, isLoading: systemsLoading } =
+    catalogClient.getSystems.useQuery({});
 
-  useEffect(() => {
-    loadData();
-  }, [systemId]);
+  const incidents = incidentsData?.incidents ?? [];
+  const systems = systemsData?.systems ?? [];
+  const system = systems.find((s) => s.id === systemId);
+  const loading = incidentsLoading || systemsLoading;
 
   // Listen for realtime updates
   useSignal(INCIDENT_UPDATED, ({ systemIds }) => {
     if (systemId && systemIds.includes(systemId)) {
-      loadData();
+      void refetchIncidents();
     }
   });