[diegosouzapw]

#3501 Phase 1a — Extract the three auth-import modal clusters

Builds on Phase 0 (#3633). Extracts the three self-contained auth-import modal clusters out of ProviderDetailPageClient.tsx into providers/[id]/components/modals/:

New file	Exports	LOC
ImportCodexAuthModal.tsx	ImportCodexAuthModal + ApplyCodexAuthModal	744
ImportClaudeAuthModal.tsx	ImportClaudeAuthModal + ApplyClaudeAuthModal	731
ImportGeminiAuthModal.tsx	ImportGeminiAuthModal + ApplyGeminiAuthModal	707

ProviderDetailPageClient.tsx: 12,882 → 10,720 LOC.

Why these first

The plan (#3501) calls these out as "trivially extractable first" — each cluster has a clean { onClose, onSuccess } / inline-prop interface and ships with its own co-located helpers (JWT parse, bulk-paste, JSON preview), so the move is structural only, no behavior change.

Validation

• ✅ typecheck:core: clean (0 errors) — the compiler is the oracle that every reference resolves
• ✅ lint: 0 errors; ✅ prettier: clean
• ✅ Phase 0 page smoke test still green (mount/import graph unaffected)
• ✅ new standalone render test: each extracted modal mounts on its own (Hard Rule fix(oauth): prevent connection test from corrupting valid tokens #8)
• ✅ file-size: each new file < 800 cap (unused imports pruned); client ratchet lowered to 10,720

Part of #3501. Co-authored with @oyi77 (parallel effort in #3627).

[gemini-code-assist]

Code Review

This pull request extracts the Codex, Claude, and Gemini auth-import modal clusters from the large ProviderDetailPageClient.tsx component into standalone files, updating the file size baseline and adding a regression test. The review feedback highlights critical runtime errors caused by using the Node.js global Buffer in client-side components, state leakage issues where parsed JSON states are not reset to null upon parsing failures, and a missing email preview in the Gemini success notification when pasting credentials. Additionally, the reviewer noted a style guide violation regarding the placement of the test file, which must be moved to the tests/ directory.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The use of Node.js global Buffer in a client-side component ("use client") will cause a ReferenceError: Buffer is not defined at runtime in the browser. Use the standard browser atob function to decode the JWT payload instead.

Suggested change

	function extractEmailFromJwtLocal(idToken: string): string | null {
	try {
	const parts = idToken.split(".");
	if (parts.length !== 3) return null;
	const payload = JSON.parse(Buffer.from(parts[1], "base64url").toString("utf8"));
	return typeof payload.email === "string" ? payload.email : null;
	} catch {
	return null;
	}
	}
	function extractEmailFromJwtLocal(idToken: string): string | null {
	try {
	const parts = idToken.split(".");
	if (parts.length !== 3) return null;
	const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
	const payload = JSON.parse(atob(base64));
	return typeof payload.email === "string" ? payload.email : null;
	} catch {
	return null;
	}
	}

[gemini-code-assist]

The use of Node.js global Buffer in a client-side component ("use client") will cause a ReferenceError: Buffer is not defined at runtime in the browser. Use the standard browser atob function to decode the JWT payload instead.

Suggested change

	function extractEmailFromGeminiJwt(idToken: string): string | null {
	try {
	const parts = idToken.split(".");
	if (parts.length !== 3) return null;
	const payload = JSON.parse(Buffer.from(parts[1], "base64url").toString("utf8"));
	return typeof payload.email === "string" ? payload.email : null;
	} catch {
	return null;
	}
	}
	function extractEmailFromGeminiJwt(idToken: string): string | null {
	try {
	const parts = idToken.split(".");
	if (parts.length !== 3) return null;
	const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
	const payload = JSON.parse(atob(base64));
	return typeof payload.email === "string" ? payload.email : null;
	} catch {
	return null;
	}
	}

[gemini-code-assist]

If parsing the uploaded file fails, singleJson is not reset to null. If a user previously uploaded a valid file, the state will leak and the button will remain enabled, submitting the old valid file instead of the new invalid one. Reset singleJson to null in the catch block.

Suggested change

	const handleSingleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
	const file = e.target.files?.[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = (ev) => {
	try {
	const json = JSON.parse(ev.target?.result as string);
	setSingleJson(json);
	} catch {
	notify.error(
	typeof t.has === "function" && t.has("claudeImportInvalidJson")
	? t("claudeImportInvalidJson")
	: "Could not parse the file as JSON"
	);
	}
	};
	reader.readAsText(file);
	};
	const handleSingleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
	const file = e.target.files?.[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = (ev) => {
	try {
	const json = JSON.parse(ev.target?.result as string);
	setSingleJson(json);
	} catch {
	setSingleJson(null);
	notify.error(
	typeof t.has === "function" && t.has("claudeImportInvalidJson")
	? t("claudeImportInvalidJson")
	: "Could not parse the file as JSON"
	);
	}
	};
	reader.readAsText(file);
	};

[gemini-code-assist]

If parsing the uploaded file fails, singleJson is not reset to null. If a user previously uploaded a valid file, the state will leak and the button will remain enabled, submitting the old valid file instead of the new invalid one. Reset singleJson to null in the catch block.

Suggested change

	const handleSingleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
	const file = e.target.files?.[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = (ev) => {
	try {
	const json = JSON.parse(ev.target?.result as string);
	setSingleJson(json);
	} catch {
	notify.error(
	typeof t.has === "function" && t.has("geminiImportInvalidJson")
	? t("geminiImportInvalidJson")
	: "Could not parse the file as JSON"
	);
	}
	};
	reader.readAsText(file);
	};
	const handleSingleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
	const file = e.target.files?.[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = (ev) => {
	try {
	const json = JSON.parse(ev.target?.result as string);
	setSingleJson(json);
	} catch {
	setSingleJson(null);
	notify.error(
	typeof t.has === "function" && t.has("geminiImportInvalidJson")
	? t("geminiImportInvalidJson")
	: "Could not parse the file as JSON"
	);
	}
	};
	reader.readAsText(file);
	};

[gemini-code-assist]

If parsing the uploaded file fails, singleParsedJson is not reset to null. Reset singleParsedJson to null in the catch block to prevent state leakage from a previously valid upload.

Suggested change

	function handleSingleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
	const file = e.target.files?.[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = (ev) => {
	try {
	handleSinglePreview(JSON.parse(ev.target?.result as string));
	} catch {
	setSingleParseError(t("codexImportInvalidJson") || "Could not parse JSON");
	}
	};
	reader.readAsText(file);
	}
	function handleSingleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
	const file = e.target.files?.[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = (ev) => {
	try {
	handleSinglePreview(JSON.parse(ev.target?.result as string));
	} catch {
	setSingleParsedJson(null);
	setSingleParseError(t("codexImportInvalidJson") || "Could not parse JSON");
	}
	};
	reader.readAsText(file);
	}

[gemini-code-assist]

When importing via the "Paste" tab, singleJson is null, which means previewGeminiJson(singleJson) will return null for the email, and the success notification will not display the imported account email. Parse the pasted text to extract the email for the success notification.

Suggested change

	const preview = previewGeminiJson(singleJson);
	let jsonToPreview = singleJson;
	if (singleSubTab === "paste") {
	try {
	jsonToPreview = JSON.parse(singlePasteText);
	} catch {}
	}
	const preview = previewGeminiJson(jsonToPreview);

[gemini-code-assist]

According to the Repository Style Guide (Section 1: File Placement & Organization), all unit tests, integration tests, ecosystem tests, or Vitest files MUST strictly be placed within the tests/ directory (e.g., tests/unit/, tests/integration/). Please move this test file to the tests/ directory.

References

1. ALL unit tests, integration tests, ecosystem tests, or Vitest files MUST strictly be placed within the tests/ directory (e.g., tests/unit/, tests/integration/). NEVER create test files in the project root (/). ^(link)