Add retryable loading and error states (#1262)

Author: RhysSullivan

packages/react/src/components/error-state.tsx

@@ -0,0 +1,22 @@
+import { Button } from "./button";
+import { cn } from "../lib/utils";
+
+export function ErrorState(props: {
+  readonly message: string;
+  readonly onRetry: () => void;
+  readonly className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3",
+        props.className,
+      )}
+    >
+      <p className="text-sm text-destructive">{props.message}</p>
+      <Button type="button" variant="outline" size="sm" onClick={props.onRetry}>
+        Retry
+      </Button>
+    </div>
+  );
+}

packages/react/src/lib/async-result.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "@effect/vitest";
+import * as Cause from "effect/Cause";
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+
+import { isAsyncResultLoading } from "./async-result";
+
+describe("isAsyncResultLoading", () => {
+  it("treats initial and waiting async results as loading", () => {
+    expect(isAsyncResultLoading(AsyncResult.initial())).toBe(true);
+    expect(isAsyncResultLoading(AsyncResult.initial(true))).toBe(true);
+    expect(isAsyncResultLoading(AsyncResult.success(["cached"], { waiting: true }))).toBe(true);
+  });
+
+  it("does not treat settled success or failure as loading", () => {
+    expect(isAsyncResultLoading(AsyncResult.success(["ready"]))).toBe(false);
+    expect(isAsyncResultLoading(AsyncResult.failure(Cause.fail("boom")))).toBe(false);
+  });
+});

packages/react/src/lib/async-result.ts

@@ -0,0 +1,5 @@
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+
+export function isAsyncResultLoading<A, E>(result: AsyncResult.AsyncResult<A, E>): boolean {
+  return AsyncResult.isInitial(result) || AsyncResult.isWaiting(result);
+}

packages/react/src/pages/api-keys.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Exit } from "effect";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import { useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react";
 import { toast } from "sonner";
 import { apiKeyWriteKeys } from "../api/reactivity-keys";
 import { trackEvent } from "../api/analytics";
@@ -21,6 +21,8 @@ import {
 import { Input } from "../components/input";
 import { Label } from "../components/label";
 import { useExecutorDocumentTitle } from "../lib/document-title";
+import { ErrorState } from "../components/error-state";
+import { isAsyncResultLoading } from "../lib/async-result";
 
 // ---------------------------------------------------------------------------
 // Shared API-keys page. Reads/writes the provider-neutral `/account/api-keys`
@@ -61,6 +63,7 @@ const defaultApiKeyName = (): string =>
 export function ApiKeysPage() {
   useExecutorDocumentTitle("API keys");
   const result = useAtomValue(apiKeysAtom);
+  const refreshApiKeys = useAtomRefresh(apiKeysAtom);
   const doCreate = useAtomSet(createApiKey, { mode: "promiseExit" });
   const doRevoke = useAtomSet(revokeApiKey, { mode: "promiseExit" });
   const [createOpen, setCreateOpen] = useState(false);
@@ -134,65 +137,69 @@ export function ApiKeysPage() {
         </p>
       </PageHeader>
 
-      {AsyncResult.match(result, {
-        onInitial: () => (
-          <div className="rounded-md border border-border bg-card p-6 text-sm text-muted-foreground">
-            Loading API keys...
-          </div>
-        ),
-        onFailure: () => (
-          <div className="rounded-md border border-border bg-card p-6 text-sm text-destructive">
-            Failed to load API keys
-          </div>
-        ),
-        onSuccess: ({ value }) =>
-          value.apiKeys.length === 0 ? (
-            <div className="rounded-md border border-dashed border-border bg-card p-8">
-              <h2 className="text-base font-semibold text-foreground">No API keys</h2>
-              <p className="mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
-                Create a key and send it in the Authorization Bearer header.
-              </p>
+      {isAsyncResultLoading(result) ? (
+        <div className="rounded-md border border-border bg-card p-6 text-sm text-muted-foreground">
+          Loading API keys...
+        </div>
+      ) : (
+        AsyncResult.match(result, {
+          onInitial: () => (
+            <div className="rounded-md border border-border bg-card p-6 text-sm text-muted-foreground">
+              Loading API keys...
             </div>
-          ) : (
-            <div className="overflow-hidden rounded-md border border-border bg-card">
-              <div className="grid grid-cols-[1fr_auto] gap-4 border-b border-border px-4 py-3 text-xs font-medium uppercase tracking-wider text-muted-foreground md:grid-cols-[1.4fr_1fr_1fr_auto]">
-                <span>Name</span>
-                <span className="hidden md:block">Created</span>
-                <span className="hidden md:block">Last used</span>
-                <span className="text-right">Actions</span>
+          ),
+          onFailure: () => (
+            <ErrorState message="Failed to load API keys" onRetry={refreshApiKeys} />
+          ),
+          onSuccess: ({ value }) =>
+            value.apiKeys.length === 0 ? (
+              <div className="rounded-md border border-dashed border-border bg-card p-8">
+                <h2 className="text-base font-semibold text-foreground">No API keys</h2>
+                <p className="mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
+                  Create a key and send it in the Authorization Bearer header.
+                </p>
               </div>
-              {value.apiKeys.map((key: ApiKeySummary) => (
-                <div
-                  key={key.id}
-                  className="grid grid-cols-[1fr_auto] items-center gap-4 border-b border-border px-4 py-4 last:border-b-0 md:grid-cols-[1.4fr_1fr_1fr_auto]"
-                >
-                  <div className="min-w-0">
-                    <p className="truncate text-sm font-medium text-foreground">{key.name}</p>
-                    <p className="mt-1 font-mono text-xs text-muted-foreground">
-                      {key.obfuscatedValue}
+            ) : (
+              <div className="overflow-hidden rounded-md border border-border bg-card">
+                <div className="grid grid-cols-[1fr_auto] gap-4 border-b border-border px-4 py-3 text-xs font-medium uppercase tracking-wider text-muted-foreground md:grid-cols-[1.4fr_1fr_1fr_auto]">
+                  <span>Name</span>
+                  <span className="hidden md:block">Created</span>
+                  <span className="hidden md:block">Last used</span>
+                  <span className="text-right">Actions</span>
+                </div>
+                {value.apiKeys.map((key: ApiKeySummary) => (
+                  <div
+                    key={key.id}
+                    className="grid grid-cols-[1fr_auto] items-center gap-4 border-b border-border px-4 py-4 last:border-b-0 md:grid-cols-[1.4fr_1fr_1fr_auto]"
+                  >
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-medium text-foreground">{key.name}</p>
+                      <p className="mt-1 font-mono text-xs text-muted-foreground">
+                        {key.obfuscatedValue}
+                      </p>
+                    </div>
+                    <p className="hidden text-sm text-muted-foreground md:block">
+                      {formatDate(key.createdAt)}
                     </p>
+                    <p className="hidden text-sm text-muted-foreground md:block">
+                      {formatDate(key.lastUsedAt)}
+                    </p>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      onClick={() => handleRevoke(key)}
+                      disabled={revokingId === key.id}
+                      title={`Revoke ${key.name}`}
+                      className="text-muted-foreground hover:text-destructive"
+                    >
+                      <span aria-hidden="true">×</span>
+                    </Button>
                   </div>
-                  <p className="hidden text-sm text-muted-foreground md:block">
-                    {formatDate(key.createdAt)}
-                  </p>
-                  <p className="hidden text-sm text-muted-foreground md:block">
-                    {formatDate(key.lastUsedAt)}
-                  </p>
-                  <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    onClick={() => handleRevoke(key)}
-                    disabled={revokingId === key.id}
-                    title={`Revoke ${key.name}`}
-                    className="text-muted-foreground hover:text-destructive"
-                  >
-                    <span aria-hidden="true">×</span>
-                  </Button>
-                </div>
-              ))}
-            </div>
-          ),
-      })}
+                ))}
+              </div>
+            ),
+        })
+      )}
 
       <Dialog open={createOpen} onOpenChange={closeCreate}>
         <DialogContent className="sm:max-w-[480px]">

packages/react/src/pages/integration-detail.tsx

@@ -34,6 +34,8 @@ import { useIntegrationPlugins, type IntegrationAccountHandoff } from "@executor
 import { Button } from "../components/button";
 import { Skeleton } from "../components/skeleton";
 import { useExecutorDocumentTitle } from "../lib/document-title";
+import { ErrorState } from "../components/error-state";
+import { isAsyncResultLoading } from "../lib/async-result";
 
 // v2: the route's `namespace` param is the integration slug. Tools belong to
 // the integration's per-owner connections; a tool's policy id is
@@ -138,7 +140,6 @@ export function IntegrationDetailPage(props: { namespace: string }) {
       ...(oauthClient !== undefined ? { oauthClient } : {}),
     };
   }, [locationSearch]);
-
   useEffect(() => {
     if (accountHandoff && !isBuiltInIntegration) {
       setActiveTab("accounts");
@@ -446,52 +447,58 @@ export function IntegrationDetailPage(props: { namespace: string }) {
           value="tools"
           className="flex min-h-0 flex-col overflow-hidden data-[state=inactive]:hidden"
         >
-          {AsyncResult.match(tools, {
-            onInitial: () => <IntegrationDetailSkeleton />,
-            onFailure: () => (
-              <div className="p-6 text-sm text-destructive">Failed to load tools</div>
-            ),
-            onSuccess: () => (
-              <div className="flex min-h-0 flex-1 overflow-hidden">
-                {/* Left: tool tree */}
-                <div className="flex w-72 shrink-0 flex-col border-r border-border/60 lg:w-80 xl:w-[22rem]">
-                  <ToolTree
-                    tools={integrationTools}
-                    selectedToolId={selectedToolId}
-                    onSelect={setSelectedToolId}
-                    onSetPolicy={(pattern, action) => void policyActions.set(pattern, action)}
-                    onClearPolicy={(pattern) => void policyActions.clear(pattern)}
-                    policies={sortedPolicies}
-                    groupByConnection={!isBuiltInIntegration}
-                  />
+          {isAsyncResultLoading(tools) ? (
+            <IntegrationDetailSkeleton />
+          ) : (
+            AsyncResult.match(tools, {
+              onInitial: () => <IntegrationDetailSkeleton />,
+              onFailure: () => (
+                <div className="p-6">
+                  <ErrorState message="Failed to load tools" onRetry={refreshTools} />
                 </div>
-
-                {/* Right: tool detail with Schema · TypeScript · Run tabs */}
-                <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-                  {selectedTool && selectedAddress && selectedBareName ? (
-                    <ToolDetail
-                      address={selectedAddress}
-                      toolName={selectedTool.name}
-                      staticTool={selection?.static}
-                      policy={selectedTool.policy}
+              ),
+              onSuccess: () => (
+                <div className="flex min-h-0 flex-1 overflow-hidden">
+                  {/* Left: tool tree */}
+                  <div className="flex w-72 shrink-0 flex-col border-r border-border/60 lg:w-80 xl:w-[22rem]">
+                    <ToolTree
+                      tools={integrationTools}
+                      selectedToolId={selectedToolId}
+                      onSelect={setSelectedToolId}
                       onSetPolicy={(pattern, action) => void policyActions.set(pattern, action)}
                       onClearPolicy={(pattern) => void policyActions.clear(pattern)}
-                      {...(!selection?.static && selectedBareName
-                        ? {
-                            integration: slug,
-                            runToolName: selectedBareName,
-                            connections: integrationConnections,
-                            initialConnectionName: selection?.connection ?? null,
-                          }
-                        : {})}
+                      policies={sortedPolicies}
+                      groupByConnection={!isBuiltInIntegration}
                     />
-                  ) : (
-                    <ToolDetailEmpty hasTools={integrationTools.length > 0} />
-                  )}
+                  </div>
+
+                  {/* Right: tool detail with Schema · TypeScript · Run tabs */}
+                  <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+                    {selectedTool && selectedAddress && selectedBareName ? (
+                      <ToolDetail
+                        address={selectedAddress}
+                        toolName={selectedTool.name}
+                        staticTool={selection?.static}
+                        policy={selectedTool.policy}
+                        onSetPolicy={(pattern, action) => void policyActions.set(pattern, action)}
+                        onClearPolicy={(pattern) => void policyActions.clear(pattern)}
+                        {...(!selection?.static && selectedBareName
+                          ? {
+                              integration: slug,
+                              runToolName: selectedBareName,
+                              connections: integrationConnections,
+                              initialConnectionName: selection?.connection ?? null,
+                            }
+                          : {})}
+                      />
+                    ) : (
+                      <ToolDetailEmpty hasTools={integrationTools.length > 0} />
+                    )}
+                  </div>
                 </div>
-              </div>
-            ),
-          })}
+              ),
+            })
+          )}
         </TabsContent>
       </Tabs>
 

packages/react/src/pages/integrations.tsx

@@ -1,6 +1,6 @@
 import { Suspense, useCallback, useMemo, useState } from "react";
 import { Link, useNavigate } from "@tanstack/react-router";
-import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import { useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
 import * as Exit from "effect/Exit";
 import { PlusIcon } from "lucide-react";
@@ -41,6 +41,8 @@ import {
 import { IntegrationIconWithAccount } from "../components/integration-icon-with-account";
 import { Skeleton } from "../components/skeleton";
 import { useExecutorDocumentTitle } from "../lib/document-title";
+import { ErrorState } from "../components/error-state";
+import { isAsyncResultLoading } from "../lib/async-result";
 
 const KIND_TO_PLUGIN_KEY: Record<string, string> = {
   openapi: "openapi",
@@ -67,6 +69,7 @@ const bestDetection = (
 export function IntegrationsPage() {
   useExecutorDocumentTitle("Integrations");
   const integrations = useAtomValue(integrationsOptimisticAtom);
+  const refreshIntegrations = useAtomRefresh(integrationsOptimisticAtom);
   const [connectOpen, setConnectOpen] = useState(false);
 
   return (
@@ -95,28 +98,34 @@ export function IntegrationsPage() {
 
       <div className="mb-8 border-t border-border/50" />
 
-      {AsyncResult.match(integrations, {
-        onInitial: () => <IntegrationsGridSkeleton />,
-        onFailure: () => <p className="text-sm text-destructive">Failed to load integrations</p>,
-        onSuccess: ({ value }) => {
-          if (value.length === 0) {
+      {isAsyncResultLoading(integrations) ? (
+        <IntegrationsGridSkeleton />
+      ) : (
+        AsyncResult.match(integrations, {
+          onInitial: () => <IntegrationsGridSkeleton />,
+          onFailure: () => (
+            <ErrorState message="Failed to load integrations" onRetry={refreshIntegrations} />
+          ),
+          onSuccess: ({ value }) => {
+            if (value.length === 0) {
+              return (
+                <EmptyIntegrations
+                  onConnect={() => {
+                    setConnectOpen(true);
+                    trackEvent("integration_connect_dialog_opened");
+                  }}
+                />
+              );
+            }
+
             return (
-              <EmptyIntegrations
-                onConnect={() => {
-                  setConnectOpen(true);
-                  trackEvent("integration_connect_dialog_opened");
-                }}
-              />
+              <div className="mb-8 space-y-3">
+                <IntegrationGrid integrations={value} />
+              </div>
             );
-          }
-
-          return (
-            <div className="mb-8 space-y-3">
-              <IntegrationGrid integrations={value} />
-            </div>
-          );
-        },
-      })}
+          },
+        })
+      )}
 
       <ConnectDialog open={connectOpen} onOpenChange={setConnectOpen} />
     </PageContainer>