Function SecretsPage

packages/react/src/pages/secrets.tsx:52–148

(props: { showProviderInfo?: boolean })

    .join(" ");

export function SecretsPage(props: { showProviderInfo?: boolean }) {
  useExecutorDocumentTitle("Providers");
  const showProviderInfo = props.showProviderInfo ?? true;
  const secretProviderPlugins = useSecretProviderPlugins();
  const providers = useAtomValue(providersAtom);
  const refreshProviders = useAtomRefresh(providersAtom);

  return (
    <PageContainer>
      <PageHeader
        title="Providers"
        description="Where your connections' credential values live: the default store for pasted values, or an external backend like 1Password or your system keychain."
      />

      {/* Provider plugins (settings cards) */}
      {showProviderInfo && secretProviderPlugins.length > 0 && (
        <div className="mb-10">
          <CardStack>
            <CardStackHeader>Configure providers</CardStackHeader>
            <CardStackContent>
              {secretProviderPlugins.map((plugin) => (
                <Suspense
                  key={plugin.key}
                  fallback={
                    <div className="px-4 py-3 animate-pulse">
                      <div className="h-4 w-24 rounded bg-muted" />
                    </div>
                  }
                >
                  <plugin.settings />
                </Suspense>
              ))}
            </CardStackContent>
          </CardStack>
        </div>
      )}

      {/* Registered providers */}
      {isAsyncResultLoading(providers) ? (
        <div className="flex items-center gap-2 py-8">
          <div className="size-1.5 animate-pulse rounded-full bg-muted-foreground/30" />
          <p className="text-sm text-muted-foreground">Loading providers…</p>
        </div>
      ) : (
        AsyncResult.match(providers, {
          onInitial: () => (
            <div className="flex items-center gap-2 py-8">
              <div className="size-1.5 animate-pulse rounded-full bg-muted-foreground/30" />
              <p className="text-sm text-muted-foreground">Loading providers…</p>
            </div>
          ),
          onFailure: () => (
            <ErrorState message="Failed to load providers" onRetry={refreshProviders} />
          ),
          onSuccess: ({ value }) => (
            <CardStack>
              <CardStackHeader>Available providers</CardStackHeader>
              <CardStackContent>