diff --git a/apps/web/src/components/settings/AddCodexAccountDialog.tsx b/apps/web/src/components/settings/AddCodexAccountDialog.tsx index d3085a5044a7c..3bf341003131a 100644 --- a/apps/web/src/components/settings/AddCodexAccountDialog.tsx +++ b/apps/web/src/components/settings/AddCodexAccountDialog.tsx @@ -18,8 +18,11 @@ import { Button } from "../ui/button"; import { Dialog } from "../ui/dialog"; import { Input } from "../ui/input"; import { WizardFooter, WizardHeader, WizardPanel, WizardPopup } from "../ui/wizard"; +import { MultipleAccountsNote } from "./MultipleAccountsNote"; import { SettingsRow } from "./settingsLayout"; +const CODEX_DRIVER_KIND = ProviderDriverKind.make("codex"); + export function AddCodexAccountDialog({ environmentId, onClose, @@ -60,7 +63,7 @@ export function AddCodexAccountDialog({ providerInstances: { ...settings.providerInstances, [id]: { - driver: ProviderDriverKind.make("codex"), + driver: CODEX_DRIVER_KIND, displayName, enabled: true, config: { enabled: true, setupMode: "managed" }, @@ -102,6 +105,7 @@ export function AddCodexAccountDialog({ ) : (
{ event.preventDefault(); void createAccount(); @@ -120,6 +124,7 @@ export function AddCodexAccountDialog({ /> } /> + )} diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx index 85ea937ebaa3c..5dabd9ff40fa4 100644 --- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx +++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx @@ -51,6 +51,7 @@ import { AcpRegistrySearchStep, useAcpRegistrySearch } from "./AcpRegistrySearch import { ProviderWizardAuthenticationStep } from "./ProviderWizardAuthenticationStep"; import { resolveOfficialAcpRegistryIconUrl } from "./AcpRegistryIcon"; import { AddManagedCodexAccountDialog } from "./CodexSetupSection"; +import { MultipleAccountsNote } from "./MultipleAccountsNote"; import { ProviderEnvironmentSection } from "./ProviderInstanceCard"; /** Limit the slug to 48 chars so the composed ProviderInstanceId fits its 64-char cap. */ @@ -442,6 +443,7 @@ export function AddProviderInstanceDialog({ ); })} + {wizardStep === 0 ? ( diff --git a/apps/web/src/components/settings/MultipleAccountsNote.tsx b/apps/web/src/components/settings/MultipleAccountsNote.tsx new file mode 100644 index 0000000000000..2185351c77ff4 --- /dev/null +++ b/apps/web/src/components/settings/MultipleAccountsNote.tsx @@ -0,0 +1,50 @@ +import { useAtomValue } from "@effect/atom-react"; +import type { EnvironmentId, ProviderDriverKind } from "@t3tools/contracts"; +import { InfoIcon } from "lucide-react"; + +import { serverEnvironment } from "../../state/server"; +import { Alert, AlertDescription } from "../ui/alert"; + +const MULTIPLE_ACCOUNTS_FAQ_URL = + "https://github.com/pingdotgg/t3code/blob/main/docs/user/faq.md#can-i-add-a-bunch-of-accounts-for-one-provider"; + +const PROVIDER_NAMES = new Map([ + ["codex", "Codex"], + ["claudeAgent", "Claude"], +]); + +/** Shown while adding a Claude or Codex account when the environment already has one signed in. */ +export function MultipleAccountsNote({ + environmentId, + driver, +}: { + readonly environmentId: EnvironmentId; + readonly driver: ProviderDriverKind; +}) { + const providers = useAtomValue(serverEnvironment.providersValueAtom(environmentId)); + const providerName = PROVIDER_NAMES.get(driver); + const hasSignedInAccount = + providerName !== undefined && + providers?.some( + (provider) => provider.driver === driver && provider.auth.status === "authenticated", + ); + if (!hasSignedInAccount) return null; + return ( + + + +

+ We do not recommend managing multiple {providerName} accounts in T3 Code.{" "} + + More info + +

+
+
+ ); +}