@checkstack/integration-frontend 0.2.18 → 0.2.20

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @checkstack/integration-frontend
 
+## 0.2.20
+
+### Patch Changes
+
+- d1a2796: Enforce stricter code quality standards and eliminate AI slop anti-patterns.
+
+  **New utility**
+
+  - `extractErrorMessage(error, fallback?)` in `@checkstack/common` for consistent error extraction
+
+  **ESLint rules**
+
+  - `react-hooks/rules-of-hooks` and `exhaustive-deps` for hook correctness
+  - `no-console` in frontend packages — forces `toast` over silent `console.error`
+  - `no-restricted-syntax` banning `instanceof Error` — forces `extractErrorMessage`
+  - Custom `no-eslint-disable-any` rule preventing `@typescript-eslint/no-explicit-any` circumvention
+
+  **Refactoring**
+
+  - Replace 141 `instanceof Error` boilerplate patterns across the codebase
+  - Replace swallowed `console.error` with user-visible `toast.error()` feedback
+  - Remove 15 redundant `as` type casts in IntegrationsPage and ProviderConnectionsPage
+  - Consolidate 3 identical callback handlers into `handleDialogClose`
+  - Fix conditional React hook call in `FormField.tsx`
+  - Fix unstable useMemo deps in `Dashboard.tsx`
+  - Replace `useEffect`→`setState` with derived `useMemo` in `RegisterPage.tsx`
+  - Rewrite `keystore.test.ts` with typed `DrizzleMockChain` (eliminating 7 `any` suppressions)
+  - Delete obvious comments in `encryption.ts` and Teams `provider.ts`
+
+- Updated dependencies [d1a2796]
+  - @checkstack/common@0.6.5
+  - @checkstack/ui@1.2.1
+  - @checkstack/frontend-api@0.3.9
+  - @checkstack/integration-common@0.2.8
+  - @checkstack/signal-frontend@0.0.15
+
+## 0.2.19
+
+### Patch Changes
+
+- Updated dependencies [23c80bc]
+  - @checkstack/ui@1.2.0
+
 ## 0.2.18
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/integration-frontend",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -16,7 +16,7 @@
     "@checkstack/frontend-api": "0.3.8",
     "@checkstack/signal-frontend": "0.0.14",
     "@checkstack/common": "0.6.4",
-    "@checkstack/ui": "1.1.3",
+    "@checkstack/ui": "1.2.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "lucide-react": "^0.344.0"
@@ -24,7 +24,7 @@
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
-    "@checkstack/tsconfig": "0.0.4",
+    "@checkstack/tsconfig": "0.0.5",
     "@checkstack/scripts": "0.1.2"
   }
 }

package/src/components/CreateSubscriptionDialog.tsx

@@ -24,7 +24,7 @@ import {
   type LucideIconName,
 } from "@checkstack/ui";
 import { usePluginClient } from "@checkstack/frontend-api";
-import { resolveRoute } from "@checkstack/common";
+import { resolveRoute, extractErrorMessage } from "@checkstack/common";
 import {
   IntegrationApi,
   integrationRoutes,
@@ -111,11 +111,7 @@ export const SubscriptionDialog = ({
       setSaving(false);
     },
     onError: (error) => {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to create subscription",
-      );
+      toast.error(extractErrorMessage(error, "Failed to create subscription"));
       setSaving(false);
     },
   });
@@ -128,11 +124,7 @@ export const SubscriptionDialog = ({
       setSaving(false);
     },
     onError: (error) => {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to update subscription",
-      );
+      toast.error(extractErrorMessage(error, "Failed to update subscription"));
       setSaving(false);
     },
   });
@@ -144,11 +136,7 @@ export const SubscriptionDialog = ({
       onOpenChange(false);
     },
     onError: (error) => {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to delete subscription",
-      );
+      toast.error(extractErrorMessage(error, "Failed to delete subscription"));
     },
   });
 
@@ -303,11 +291,7 @@ export const SubscriptionDialog = ({
                 value: opt.value,
                 label: opt.label,
               }));
-            } catch (error) {
-              console.error(
-                `Failed to fetch options for ${resolverName}:`,
-                error,
-              );
+            } catch {
               return [];
             }
           };
@@ -320,7 +304,7 @@ export const SubscriptionDialog = ({
         formValues: Record<string, unknown>,
       ) => Promise<{ value: string; label: string }[]>
     >;
-    // Note: getOptionsMutation intentionally omitted - mutation objects change on every render
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- getOptionsMutation is a TanStack mutation object that changes identity every render; including it would destroy the Proxy on each render, breaking in-flight requests
   }, [selectedProvider, selectedConnectionId]);
 
   return (

package/src/pages/DeliveryLogsPage.tsx

@@ -90,8 +90,7 @@ export const DeliveryLogsPage = () => {
         toast.error(result.message ?? "Failed to retry delivery");
       }
     },
-    onError: (error) => {
-      console.error("Failed to retry delivery:", error);
+    onError: () => {
       toast.error("Failed to retry delivery");
     },
     onSettled: () => {

package/src/pages/IntegrationsPage.tsx

@@ -26,7 +26,7 @@ import {
   type LucideIconName,
 } from "@checkstack/ui";
 import { usePluginClient } from "@checkstack/frontend-api";
-import { resolveRoute } from "@checkstack/common";
+import { resolveRoute, extractErrorMessage} from "@checkstack/common";
 import {
   IntegrationApi,
   integrationRoutes,
@@ -67,9 +67,7 @@ export const IntegrationsPage = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to toggle subscription",
+        extractErrorMessage(error, "Failed to toggle subscription"),
       );
     },
   });
@@ -91,28 +89,14 @@ export const IntegrationsPage = () => {
   const getProviderInfo = (
     providerId: string,
   ): IntegrationProviderInfo | undefined => {
-    return (providers as IntegrationProviderInfo[]).find(
-      (p) => p.qualifiedId === providerId,
-    );
+    return providers.find((p) => p.qualifiedId === providerId);
   };
 
   const handleToggle = (id: string, enabled: boolean) => {
     toggleMutation.mutate({ id, enabled });
   };
 
-  const handleCreated = () => {
-    void refetchSubs();
-    setDialogOpen(false);
-    setSelectedSubscription(undefined);
-  };
-
-  const handleUpdated = () => {
-    void refetchSubs();
-    setDialogOpen(false);
-    setSelectedSubscription(undefined);
-  };
-
-  const handleDeleted = () => {
+  const handleDialogClose = () => {
     void refetchSubs();
     setDialogOpen(false);
     setSelectedSubscription(undefined);
@@ -239,8 +223,8 @@ export const IntegrationsPage = () => {
                             <div className="p-2 rounded-lg bg-muted">
                               <DynamicIcon
                                 name={
-                                  (provider?.icon ??
-                                    "Webhook") as LucideIconName
+                                  (provider?.icon as LucideIconName | undefined) ??
+                                    "Webhook"
                                 }
                                 className="h-5 w-5 text-muted-foreground"
                               />
@@ -305,14 +289,14 @@ export const IntegrationsPage = () => {
             description="Providers handle the delivery of events to external systems"
           />
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {(providers as IntegrationProviderInfo[]).map((provider) => (
+            {providers.map((provider) => (
               <Card key={provider.qualifiedId}>
                 <CardContent className="p-4">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
                       <div className="p-2 rounded-lg bg-muted">
                         <DynamicIcon
-                          name={(provider.icon ?? "Webhook") as LucideIconName}
+                          name={(provider.icon as LucideIconName | undefined) ?? "Webhook"}
                           className="h-6 w-6"
                         />
                       </div>
@@ -341,7 +325,7 @@ export const IntegrationsPage = () => {
                 </CardContent>
               </Card>
             ))}
-            {(providers as IntegrationProviderInfo[]).length === 0 && (
+            {providers.length === 0 && (
               <Card className="col-span-full">
                 <CardContent className="p-4">
                   <div className="text-center text-muted-foreground py-4">
@@ -361,11 +345,11 @@ export const IntegrationsPage = () => {
           setDialogOpen(open);
           if (!open) setSelectedSubscription(undefined);
         }}
-        providers={providers as IntegrationProviderInfo[]}
+        providers={providers}
         subscription={selectedSubscription}
-        onCreated={handleCreated}
-        onUpdated={handleUpdated}
-        onDeleted={handleDeleted}
+        onCreated={handleDialogClose}
+        onUpdated={handleDialogClose}
+        onDeleted={handleDialogClose}
       />
     </PageLayout>
   );

package/src/pages/ProviderConnectionsPage.tsx

@@ -45,11 +45,10 @@ import {
   type LucideIconName,
 } from "@checkstack/ui";
 import { usePluginClient } from "@checkstack/frontend-api";
-import { resolveRoute } from "@checkstack/common";
+import { resolveRoute, extractErrorMessage } from "@checkstack/common";
 import {
   IntegrationApi,
   integrationRoutes,
-  type IntegrationProviderInfo,
   type ProviderConnectionRedacted,
 } from "@checkstack/integration-common";
 
@@ -95,9 +94,7 @@ export const ProviderConnectionsPage = () => {
   );
 
   const loading = providersLoading || connectionsLoading;
-  const provider = (providers as IntegrationProviderInfo[]).find(
-    (p) => p.qualifiedId === providerId,
-  );
+  const provider = providers.find((p) => p.qualifiedId === providerId);
 
   // Mutations
   const createMutation = client.createConnection.useMutation({
@@ -110,9 +107,7 @@ export const ProviderConnectionsPage = () => {
       setSaving(false);
     },
     onError: (error) => {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to create connection",
-      );
+      toast.error(extractErrorMessage(error, "Failed to create connection"));
       setSaving(false);
     },
   });
@@ -126,9 +121,7 @@ export const ProviderConnectionsPage = () => {
       setSaving(false);
     },
     onError: (error) => {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to update connection",
-      );
+      toast.error(extractErrorMessage(error, "Failed to update connection"));
       setSaving(false);
     },
   });
@@ -141,9 +134,7 @@ export const ProviderConnectionsPage = () => {
       toast.success("Connection deleted");
     },
     onError: (error) => {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to delete connection",
-      );
+      toast.error(extractErrorMessage(error, "Failed to delete connection"));
     },
   });
 
@@ -165,9 +156,7 @@ export const ProviderConnectionsPage = () => {
         ...prev,
         [variables.connectionId]: { success: false, message: "Test failed" },
       }));
-      toast.error(
-        error instanceof Error ? error.message : "Connection test failed",
-      );
+      toast.error(extractErrorMessage(error, "Connection test failed"));
       setTestingId(undefined);
     },
   });
@@ -275,11 +264,13 @@ export const ProviderConnectionsPage = () => {
         </div>
       }
     >
-      {(connections as ProviderConnectionRedacted[]).length === 0 ? (
+      {connections.length === 0 ? (
         <EmptyState
           icon={
             <DynamicIcon
-              name={(provider?.icon ?? "Settings2") as LucideIconName}
+              name={
+                (provider?.icon as LucideIconName | undefined) ?? "Settings2"
+              }
               className="h-12 w-12"
             />
           }
@@ -296,7 +287,9 @@ export const ProviderConnectionsPage = () => {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <DynamicIcon
-                name={(provider?.icon ?? "Settings2") as LucideIconName}
+                name={
+                  (provider?.icon as LucideIconName | undefined) ?? "Settings2"
+                }
                 className="h-5 w-5"
               />
               Connections
@@ -313,7 +306,7 @@ export const ProviderConnectionsPage = () => {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {(connections as ProviderConnectionRedacted[]).map((conn) => {
+                {connections.map((conn) => {
                   const testResult = testResults[conn.id];
                   const isTesting = testingId === conn.id;