import { Suspense } from "react";import { useAtomRefresh, useAtomValue } from "@effect/atom-react";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";import type { ProviderKey } from "@executor-js/sdk/shared";import { useSecretProviderPlugins } from "@executor-js/sdk/client"; import { providersAtom } from "../api/atoms";import {  CardStack,  CardStackContent,  CardStackEntry,  CardStackEntryActions,  CardStackEntryContent,  CardStackEntryDescription,  CardStackEntryTitle,  CardStackHeader,} from "../components/card-stack";import { Badge } from "../components/badge";import { PageContainer, PageHeader } from "../components/page";import { useExecutorDocumentTitle } from "../lib/document-title";import { ErrorState } from "../components/error-state";import { isAsyncResultLoading } from "../lib/async-result"; // ---------------------------------------------------------------------------// Providers page (v2) — repurposed from the v1 Secrets page.//// v1 stored standalone secrets and bound them per-source. v2 makes a connection// the credential, and a `CredentialProvider` is where its value lives (the// default store for pasted values, or an external backend like 1Password /// keychain). This page surfaces the registered providers plus any provider// plugin's settings card. The route still exports `SecretsPage` so existing app// wiring keeps resolving; new callers should treat it as the Providers view.// --------------------------------------------------------------------------- const PROVIDER_LABELS: Record<string, string> = {  encrypted: "Encrypted store",  keychain: "Keychain",  file: "Local file",  memory: "Memory",  onepassword: "1Password",  "workos-vault": "WorkOS Vault",}; const providerLabel = (key: string): string =>  PROVIDER_LABELS[key] ??  key    .split(/[-_]/g)    .filter(Boolean)    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))    .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>                {value.length === 0 ? (                  <CardStackEntry>                    <CardStackEntryContent>                      <CardStackEntryDescription>                        No credential providers are registered.                      </CardStackEntryDescription>                    </CardStackEntryContent>                  </CardStackEntry>                ) : (                  value.map((key: ProviderKey) => (                    <CardStackEntry key={String(key)}>                      <CardStackEntryContent>                        <CardStackEntryTitle className="flex min-w-0 items-center gap-2">                          <span className="min-w-0 shrink truncate">                            {providerLabel(String(key))}                          </span>                        </CardStackEntryTitle>                        <CardStackEntryDescription>                          {String(key) === "encrypted"                            ? "Values you paste are encrypted and stored in this instance's database."                            : `${providerLabel(String(key))} credential provider.`}                        </CardStackEntryDescription>                      </CardStackEntryContent>                      <CardStackEntryActions>                        <Badge variant="secondary">                          {String(key) === "encrypted" ? "default" : "provider"}                        </Badge>                      </CardStackEntryActions>                    </CardStackEntry>                  ))                )}              </CardStackContent>            </CardStack>          ),        })      )}    </PageContainer>  );}