refactor(#3501): god-component Phase 1g-1j — client 4062→3408 LOC (-654)

[diegosouzapw]

Part of #3501 (strangler-fig decomposition of the providers/[id] god-component toward ≤800 LOC).

What

• fix: ProxyConfigModal.onSaved called loadConnProxies(connections) which was unbound in the client (only fetchProxyConfig is destructured) → latent ReferenceError. Replaced with fetchProxyConfig(). (Escaped typecheck:core — doesn't cover .tsx — and SWC build.)
• 1g: extract ProviderPlaygroundPanel → components/ProviderPlaygroundPanel.tsx (105)
• 1h: extract useCommandCodeAuth → hooks/useCommandCodeAuth.ts (290)
• 1i: extract useExternalLinkFlow + ExternalLinkModal → hooks/ + components/ (96 + 66)
• 1j: extract useAuthFileHandlers (Codex/Claude/Gemini apply+export) → hooks/useAuthFileHandlers.ts (300)
• Fixed phase1f.test.tsx cycle-safety test that had a hardcoded absolute worktree path (broke outside that worktree) → resolved from repo root.
• Baseline ratcheted: client 4063→3409; models/route.ts 2344→2426 reconciled (feat(vertex): dynamic model discovery (surface image models + full catalog) #3712 vertex drift).

Validation

• Pure extraction, zero logic change. typecheck:core clean, check:cycles OK (providers/[id], 37 files, no new cycles), file-size gate green, provider-page vitest 32/32, test:vitest 171/171.

Co-authored-by: oyi77 14921983+oyi77@users.noreply.github.com

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[gemini-code-assist]

Code Review

This pull request refactors the ProviderDetailPageClient component by extracting several stateful flows into dedicated hooks (useCommandCodeAuth, useExternalLinkFlow, and useAuthFileHandlers) and components (ProviderPlaygroundPanel and ExternalLinkModal) to improve modularity and reduce file size. It also resolves a hardcoded absolute path in the test suite to ensure tests run correctly across different environments. The reviewer's feedback identifies a potential infinite polling loop in useCommandCodeAuth if the expiration date is malformed, and highlights several instances of hardcoded Portuguese strings in the newly extracted components and hooks that should be localized using next-intl.

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]

If data.expiresAt is malformed or in an unexpected format, new Date(data.expiresAt).getTime() will return NaN. Any comparison with NaN (such as Date.now() >= deadline) evaluates to false, which would cause the polling loop to run indefinitely without ever expiring.

Consider parsing the date defensively and falling back to the default timeout if the parsed value is NaN.

      const parsedExpiresAt = data.expiresAt ? new Date(data.expiresAt).getTime() : NaN;
      const deadline = !isNaN(parsedExpiresAt) ? parsedExpiresAt : Date.now() + 180000;

[gemini-code-assist]

The newly extracted ExternalLinkModal contains several hardcoded Portuguese user-facing strings. To support internationalization (i18n) and maintain consistency with the rest of the application, these strings should be localized using next-intl.

You can import useTranslations from next-intl directly inside this client component and use keys from your translation files (e.g., providers namespace).

Suggested change

	"use client";
	import { Modal, Button } from "@/shared/components";
	"use client";
	import { Modal, Button } from "@/shared/components";
	import { useTranslations } from "next-intl";

[gemini-code-assist]

The useExternalLinkFlow hook contains several hardcoded Portuguese strings for user notifications and error messages. To support internationalization (i18n), pass the translation function t as a parameter to the hook and use it to localize these messages.

Suggested change

	type UseExternalLinkFlowParams = {
	providerId: string;
	notify: { success: (msg: string) => void; error: (msg: string) => void };
	fetchConnections: () => Promise<void> | void;
	};
	export function useExternalLinkFlow({
	providerId,
	notify,
	fetchConnections,
	}: UseExternalLinkFlowParams) {
	type UseExternalLinkFlowParams = {
	providerId: string;
	notify: { success: (msg: string) => void; error: (msg: string) => void };
	fetchConnections: () => Promise<void> | void;
	t: (key: string) => string;
	};
	export function useExternalLinkFlow({
	providerId,
	notify,
	fetchConnections,
	t,
	}: UseExternalLinkFlowParams) {

[gemini-code-assist]

Pass the translation function t to useExternalLinkFlow to support localization of user-facing messages within the hook.

Suggested change

	const {
	externalLinkModalOpen,
	setExternalLinkModalOpen,
	externalLinkUrl,
	externalLinkToken,
	externalLinkLoading,
	externalLinkError,
	externalLinkCopied,
	externalLinkCopy,
	openExternalLinkFlow,
	} = useExternalLinkFlow({ providerId, notify, fetchConnections });
	const {
	externalLinkModalOpen,
	setExternalLinkModalOpen,
	externalLinkUrl,
	externalLinkToken,
	externalLinkLoading,
	externalLinkError,
	externalLinkCopied,
	externalLinkCopy,
	openExternalLinkFlow,
	} = useExternalLinkFlow({ providerId, notify, fetchConnections, t });

[kilo-code-bot]

Code Review Summary

Status: 4 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
WARNING	4

Files Reviewed (7 files)

• src/app/(dashboard)/dashboard/providers/[id]/ProviderDetailPageClient.tsx - Refactoring extraction, missing t parameter in useExternalLinkFlow call
• src/app/(dashboard)/dashboard/providers/[id]/hooks/useCommandCodeAuth.ts (✱ NEW✱) - Date parsing vulnerability with NaN comparison
• src/app/(dashboard)/dashboard/providers/[id]/hooks/useExternalLinkFlow.ts (✱ NEW✱) - Missing t parameter for i18n support
• src/app/(dashboard)/dashboard/providers/[id]/hooks/useAuthFileHandlers.ts (✱ NEW✱) - No issues identified
• src/app/(dashboard)/dashboard/providers/[id]/components/ExternalLinkModal.tsx (✱ NEW✱) - Hardcoded Portuguese strings
• src/app/(dashboard)/dashboard/providers/[id]/components/ProviderPlaygroundPanel.tsx (✱ NEW✱) - No issues identified
• src/app/(dashboard)/dashboard/providers/[id]/__tests__/phase1f.test.tsx - Test path fix

Note: All issues in this PR are covered by existing review comments. The PR is a refactoring (Phase 1g-1j of #3501) that extracts hooks and components from a large page component. The changes are well-structured but need i18n improvements and a defensive date parsing fix.

---

_{Reviewed by laguna-m.1-20260312:free · 5,041,718 tokens}