Open History to see the last commit
1import { useAtomValue } from "@effect/atom-react";
2import type { EnvironmentId, ProviderDriverKind } from "@t3tools/contracts";
3import { InfoIcon } from "lucide-react";
4
5import { serverEnvironment } from "../../state/server";
6import { Alert, AlertDescription } from "../ui/alert";
7
8const MULTIPLE_ACCOUNTS_FAQ_URL =
9 "https://github.com/pingdotgg/t3code/blob/main/docs/user/faq.md#can-i-add-a-bunch-of-accounts-for-one-provider";
10
11const PROVIDER_NAMES = new Map<string, string>([
12 ["codex", "Codex"],
13 ["claudeAgent", "Claude"],
14]);
15
16/** Shown while adding a Claude or Codex account when the environment already has one signed in. */
17export function MultipleAccountsNote({
18 environmentId,
19 driver,
20}: {
21 readonly environmentId: EnvironmentId;
22 readonly driver: ProviderDriverKind;
23}) {
24 const providers = useAtomValue(serverEnvironment.providersValueAtom(environmentId));
25 const providerName = PROVIDER_NAMES.get(driver);
26 const hasSignedInAccount =
27 providerName !== undefined &&
28 providers?.some(
29 (provider) => provider.driver === driver && provider.auth.status === "authenticated",
30 );
31 if (!hasSignedInAccount) return null;
32 return (
33 <Alert variant="info" role="note">
34 <InfoIcon aria-hidden />
35 <AlertDescription>
36 <p>
37 We do not recommend managing multiple {providerName} accounts in T3 Code.{" "}
38 <a
39 href={MULTIPLE_ACCOUNTS_FAQ_URL}
40 target="_blank"
41 rel="noreferrer"
42 className="underline underline-offset-2 hover:text-foreground"
43 >
44 More info
45 </a>
46 </p>
47 </AlertDescription>
48 </Alert>
49 );
50}