1"use client";
2
3import { ProviderInstanceIcon } from "../chat/ProviderInstanceIcon";
4
5import { Radio as RadioPrimitive } from "@base-ui/react/radio";
6import { CheckIcon } from "lucide-react";
7import { useMemo, useState } from "react";
8import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
9import {
10 type AcpRegistrySearchAgent,
11 AuthProvidersManageScope,
12 ProviderInstanceId,
13 ProviderDriverKind,
14 type EnvironmentId,
15 type ProviderInstanceConfig,
16 type ProviderInstanceEnvironmentVariable,
17} from "@t3tools/contracts";
18
19import {
20 useEnvironmentSettings,
21 usePersistEnvironmentProviderInstanceMutation,
22} from "../../hooks/useSettings";
23
24import { cn } from "../../lib/utils";
25import { normalizeProviderAccentColor } from "../../providerInstances";
26import { readEnvironmentScope, useEnvironmentScope } from "../../state/session";
27import { Button } from "../ui/button";
28import { ChatGptConnectionButton } from "./ChatGptConnectionButton";
29import { Dialog } from "../ui/dialog";
30import { Badge } from "../ui/badge";
31import { Input } from "../ui/input";
32import { RadioGroup } from "../ui/radio-group";
33import { toastManager } from "../ui/toast";
34import { providerClients } from "./providerDriverMeta";
35import { ProviderAccentColorPicker } from "./ProviderAccentColorPicker";
36import { SettingsGroup } from "./SettingsGroup";
37import { SettingsRow } from "./settingsLayout";
38import { ProviderSettingsForm, deriveProviderSettingsFields } from "./ProviderSettingsForm";
39import { WizardPanel, WizardPopup, WizardHeader, WizardFooter } from "../ui/wizard";
40import {
41 ADD_PROVIDER_WIZARD_STEPS,
42 ACP_REGISTRY_WIZARD_STEPS,
43 LOCAL_ACP_WIZARD_STEPS,
44 deriveAvailableInstanceId,
45 resolveAcpRegistryWizardNavigation,
46 resolveWizardNavigation,
47 updateProviderIdentityDraft,
48 type ProviderIdentityDraft,
49 type WizardNavigation,
50} from "./AddProviderInstanceDialog.logic";
51import { AddProviderInstanceWizardSteps } from "./AddProviderInstanceWizardSteps";
52import { AcpRegistrySearchStep } from "./AcpRegistrySearchStep";
53import { ProviderWizardAuthenticationStep } from "./ProviderWizardAuthenticationStep";
54import { resolveOfficialAcpRegistryIconUrl } from "./AcpRegistryIcon";
55import { AddManagedCodexAccountDialog } from "./CodexSetupSection";
56import { ProviderEnvironmentSection } from "./ProviderInstanceCard";
57
58/**
59 * Normalize a user-provided label into a slug suffix for the instance id.
60 * The full id is formed by prefixing the driver slug. For example, label "Work" on
61 * driver "codex" becomes `codex_work`. Output is trimmed to 48 chars so the
62 * final composed id stays under the 64-char slug cap enforced by
63 * `ProviderInstanceId` in `@t3tools/contracts`.
64 */
65function slugifyLabel(value: string): string {
66 return value
67 .trim()
68 .toLowerCase()
69 .replace(/[^a-z0-9]+/g, "_")
70 .replace(/^_+|_+$/g, "")
71 .slice(0, 48);
72}
73
74function deriveInstanceId(driver: ProviderDriverKind, label: string): string {
75 const slug = slugifyLabel(label);
76 return slug ? `${driver}_${slug}` : "";
77}
78
79const INSTANCE_ID_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]*$/;
80const DEFAULT_DRIVER_KIND = ProviderDriverKind.make("codex");
81const ACP_REGISTRY_DRIVER_KIND = ProviderDriverKind.make("acpRegistry");
82const DEFAULT_DRIVER_OPTION = providerClients.definitions[0]!;
83const EMPTY_CONFIG_DRAFT: Record<string, unknown> = {};
84/**
85 * Validate an instance id against the same slug rules the server applies in
86 * `ProviderInstanceId` (see `packages/contracts/src/providerInstance.ts`).
87 * Returns a user-facing error string, or `null` if valid.
88 */
89function validateInstanceId(id: string, existing: ReadonlySet<string>): string | null {
90 if (id.length === 0) return "Instance ID is required.";
91 if (id.length > 64) return "Instance ID must be 64 characters or fewer.";
92 if (!INSTANCE_ID_PATTERN.test(id)) {
93 return "Instance ID must start with a letter and use only letters, digits, '-', or '_'.";
94 }
95 if (existing.has(id)) return `An instance named '${id}' already exists.`;
96 return null;
97}
98
99interface AddProviderInstanceDialogProps {
100 readonly open: boolean;
101 readonly environmentId: EnvironmentId;
102 readonly environmentLabel: string;
103 readonly onOpenChange: (open: boolean) => void;
104 readonly onCreated?: (instanceId: ProviderInstanceId) => void;
105}
106
107export function AddProviderInstanceDialog({
108 open,
109 environmentId,
110 environmentLabel,
111 onOpenChange,
112 onCreated,
113}: AddProviderInstanceDialogProps) {
114 const settings = useEnvironmentSettings(environmentId);
115 const persistProviderInstance = usePersistEnvironmentProviderInstanceMutation(environmentId);
116 const canManageProviders = useEnvironmentScope(environmentId, AuthProvidersManageScope);
117
118 const [wizardStep, setWizardStep] = useState(0);
119 const [addingChatGptAccount, setAddingChatGptAccount] = useState(false);
120 const [driver, setDriver] = useState<ProviderDriverKind>(DEFAULT_DRIVER_KIND);
121 const [identityByDriver, setIdentityByDriver] = useState<Record<string, ProviderIdentityDraft>>(
122 {},
123 );
124 const [selectedAcp, setSelectedAcp] = useState<AcpRegistrySearchAgent | null>(null);
125 const [localEnvironment, setLocalEnvironment] = useState<
126 ReadonlyArray<ProviderInstanceEnvironmentVariable>
127 >([]);
128 const [isManualAcpConfiguration, setIsManualAcpConfiguration] = useState(false);
129 const [isRegistryLoading, setIsRegistryLoading] = useState(false);
130 const [isPreparingRegistryAgent, setIsPreparingRegistryAgent] = useState(false);
131 // Driver-specific config drafts keyed by driver so toggling between drivers
132 // during the same dialog session does not lose in-progress input.
133 const [configByDriver, setConfigByDriver] = useState<Record<string, Record<string, unknown>>>({});
134 // Errors are suppressed until the user has tried to submit once. After that
135 // they update live so fixing the problem clears the message in place.
136 const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);
137 const [isSaving, setIsSaving] = useState(false);
138 const [createdInstanceId, setCreatedInstanceId] = useState<ProviderInstanceId | null>(null);
139
140 // Codex and Claude run at their default slots before they are configured, so
141 // those ids stay reserved; other unconfigured default slots are free to take.
142 const existingIds = useMemo(
143 () => new Set(["codex", "claudeAgent", ...Object.keys(settings.providerInstances ?? {})]),
144 [settings.providerInstances],
145 );
146
147 const driverOption = providerClients.get(driver) ?? DEFAULT_DRIVER_OPTION;
148 const isAcpRegistry = driver === ACP_REGISTRY_DRIVER_KIND;
149 const defaultIdentity: ProviderIdentityDraft = {
150 label: driverOption.label,
151 accentColor: "",
152 instanceIdOverride: null,
153 };
154 const { label, accentColor, instanceIdOverride } = identityByDriver[driver] ?? defaultIdentity;
155 const instanceId =
156 instanceIdOverride ??
157 deriveAvailableInstanceId(
158 (candidateLabel) => {
159 if (!candidateLabel.trim() || candidateLabel === driverOption.label) {
160 return isAcpRegistry ? `${driver}_custom` : driver;
161 }
162 return deriveInstanceId(driver, candidateLabel);
163 },
164 label,
165 existingIds,
166 );
167 const driverSettingsFields = useMemo(
168 () => deriveProviderSettingsFields(driverOption),
169 [driverOption],
170 );
171 const instanceIdError = validateInstanceId(instanceId, existingIds);
172 const showInstanceIdError = hasAttemptedSubmit && instanceIdError !== null;
173 const identityStep = 1;
174 const previewLabel = label.trim() || `${driverOption.label} Workspace`;
175
176 const configDraft = configByDriver[driver] ?? EMPTY_CONFIG_DRAFT;
177 const isLocalAcp = isAcpRegistry && isManualAcpConfiguration && configDraft.source === "local";
178 const localCommandPath =
179 typeof configDraft.commandPath === "string" ? configDraft.commandPath.trim() : "";
180 const manualAgentId = typeof configDraft.agentId === "string" ? configDraft.agentId.trim() : "";
181 const acpSelectionError = isLocalAcp
182 ? localCommandPath.length > 0
183 ? null
184 : "Executable is required."
185 : selectedAcp !== null || (isManualAcpConfiguration && manualAgentId.length > 0)
186 ? null
187 : "Select an ACP or configure one manually.";
188 const wizardStepSummaries = isAcpRegistry
189 ? ([
190 isLocalAcp ? "Local ACP command" : (selectedAcp?.name ?? (manualAgentId || null)),
191 previewLabel,
192 null,
193 ] as const)
194 : ([driverOption.label, previewLabel, null] as const);
195 const setConfigDraft = (config: Record<string, unknown> | undefined) => {
196 setConfigByDriver((existing) => {
197 const next = { ...existing };
198 if (config === undefined || Object.keys(config).length === 0) {
199 delete next[driver];
200 } else {
201 next[driver] = config;
202 }
203 return next;
204 });
205 };
206 const setIdentityDraft = (update: Partial<ProviderIdentityDraft>) => {
207 setIdentityByDriver((existing) => ({
208 ...existing,
209 [driver]: { ...(existing[driver] ?? defaultIdentity), ...update },
210 }));
211 };
212
213 const applyWizardNavigation = (navigation: WizardNavigation) => {
214 if (isSaving || isPreparingRegistryAgent || createdInstanceId) return;
215 if (navigation.kind === "blocked") {
216 setHasAttemptedSubmit(true);
217 }
218 if (isAcpRegistry && !isLocalAcp && navigation.kind === "navigate" && navigation.step === 2) {
219 void handleSave();
220 return;
221 }
222 setWizardStep(navigation.step);
223 };
224
225 const navigateToStep = (requestedStep: number) => {
226 applyWizardNavigation(
227 isAcpRegistry
228 ? isLocalAcp
229 ? resolveWizardNavigation(wizardStep, requestedStep, LOCAL_ACP_WIZARD_STEPS.length, {
230 instanceIdError,
231 prerequisite: { step: 0, error: acpSelectionError },
232 })
233 : resolveAcpRegistryWizardNavigation(wizardStep, requestedStep, {
234 instanceIdError,
235 selectionError: acpSelectionError,
236 })
237 : resolveWizardNavigation(wizardStep, requestedStep, ADD_PROVIDER_WIZARD_STEPS.length, {
238 instanceIdError,
239 }),
240 );
241 };
242
243 const handleAcpPrepared = (agent: AcpRegistrySearchAgent) => {
244 setDriver(ACP_REGISTRY_DRIVER_KIND);
245 const nextLabel = agent.name;
246 const registryIconUrl = resolveOfficialAcpRegistryIconUrl(agent.icon);
247 const nextInstanceId = deriveAvailableInstanceId(
248 (candidateLabel) => deriveInstanceId(ACP_REGISTRY_DRIVER_KIND, candidateLabel),
249 nextLabel,
250 existingIds,
251 );
252 setSelectedAcp(agent);
253 setIsManualAcpConfiguration(false);
254 setIdentityByDriver((existing) =>
255 updateProviderIdentityDraft(existing, ACP_REGISTRY_DRIVER_KIND, {
256 label: nextLabel,
257 instanceIdOverride: nextInstanceId,
258 }),
259 );
260 setConfigByDriver((existing) => ({
261 ...existing,
262 [ACP_REGISTRY_DRIVER_KIND]: {
263 agentId: agent.id,
264 distribution: "auto",
265 ...(registryIconUrl ? { registryIconUrl } : {}),
266 },
267 }));
268 setHasAttemptedSubmit(false);
269 setWizardStep(1);
270 };
271
272 const handleManualAcpConfiguration = () => {
273 setDriver(ACP_REGISTRY_DRIVER_KIND);
274 setSelectedAcp(null);
275 setIsManualAcpConfiguration(true);
276 setConfigByDriver((existing) => {
277 const next = { ...existing };
278 delete next[ACP_REGISTRY_DRIVER_KIND];
279 return next;
280 });
281 setIdentityByDriver((existing) =>
282 updateProviderIdentityDraft(existing, ACP_REGISTRY_DRIVER_KIND, {
283 label: "",
284 instanceIdOverride: null,
285 }),
286 );
287 setHasAttemptedSubmit(false);
288 };
289
290 const handleLocalAcpConfiguration = () => {
291 setDriver(ACP_REGISTRY_DRIVER_KIND);
292 setSelectedAcp(null);
293 setIsManualAcpConfiguration(true);
294 setConfigByDriver((existing) => ({
295 ...existing,
296 [ACP_REGISTRY_DRIVER_KIND]: { source: "local", commandArgs: [] },
297 }));
298 setIdentityByDriver((existing) =>
299 updateProviderIdentityDraft(existing, ACP_REGISTRY_DRIVER_KIND, {
300 label: "Local ACP",
301 instanceIdOverride: null,
302 }),
303 );
304 setLocalEnvironment([]);
305 setHasAttemptedSubmit(false);
306 };
307
308 const handleSave = async () => {
309 if (!readEnvironmentScope(environmentId, AuthProvidersManageScope)) return;
310 if (isSaving || createdInstanceId) return;
311 setHasAttemptedSubmit(true);
312 if (instanceIdError !== null || (isAcpRegistry && acpSelectionError !== null)) return;
313
314 const config =
315 driver === "codex"
316 ? { ...configByDriver[driver], setupMode: "existing" }
317 : (configByDriver[driver] ?? {});
318 const hasConfig = Object.keys(config).length > 0;
319 const normalizedAccentColor = normalizeProviderAccentColor(accentColor);
320
321 const nextInstance: ProviderInstanceConfig = {
322 driver,
323 enabled: true,
324 ...(label.trim().length > 0 ? { displayName: label.trim() } : {}),
325 ...(normalizedAccentColor ? { accentColor: normalizedAccentColor } : {}),
326 ...(hasConfig ? { config } : {}),
327 ...(isLocalAcp && localEnvironment.length > 0 ? { environment: localEnvironment } : {}),
328 };
329 // `ProviderInstanceId.make` revalidates the slug; we've already checked
330 // it via `validateInstanceId`, but going through the brand constructor
331 // keeps the type boundary honest and guards against any future drift in
332 // the slug rules.
333 const brandedId = ProviderInstanceId.make(instanceId);
334 setIsSaving(true);
335 const result = await persistProviderInstance({
336 operation: "create",
337 instanceId: brandedId,
338 instance: nextInstance,
339 });
340 if (result._tag === "Failure") {
341 const error = squashAtomCommandFailure(result);
342 setIsSaving(false);
343 toastManager.add({
344 type: "error",
345 title: "Could not add provider instance",
346 description: error instanceof Error ? error.message : "The settings update failed.",
347 });
348 return;
349 }
350 onCreated?.(brandedId);
351 if (isAcpRegistry && !isLocalAcp) {
352 setCreatedInstanceId(brandedId);
353 setIsSaving(false);
354 setWizardStep(2);
355 return;
356 }
357 toastManager.add({
358 type: "success",
359 title: "Provider instance added",
360 description: `${driverOption.label} instance '${instanceId}' was added.`,
361 });
362 onOpenChange(false);
363 };
364
365 if (addingChatGptAccount) {
366 return (
367 <AddManagedCodexAccountDialog
368 environmentId={environmentId}
369 onClose={() => onOpenChange(false)}
370 />
371 );
372 }
373
374 return (
375 <Dialog open={open} onOpenChange={onOpenChange}>
376 <WizardPopup size="wide">
377 <WizardHeader
378 title="Add provider"
379 description={<>Add an account or configure a provider on {environmentLabel}.</>}
380 >
381 {isAcpRegistry ? (
382 <AddProviderInstanceWizardSteps
383 currentStep={wizardStep}
384 summaries={wizardStepSummaries}
385 instanceIdError={instanceIdError}
386 steps={isLocalAcp ? LOCAL_ACP_WIZARD_STEPS : ACP_REGISTRY_WIZARD_STEPS}
387 disabled={isSaving || isPreparingRegistryAgent || createdInstanceId !== null}
388 identityStep={1}
389 prerequisite={{ step: 0, error: acpSelectionError }}
390 onNavigation={applyWizardNavigation}
391 />
392 ) : (
393 <AddProviderInstanceWizardSteps
394 currentStep={wizardStep}
395 summaries={wizardStepSummaries}
396 instanceIdError={instanceIdError}
397 disabled={isSaving || isPreparingRegistryAgent}
398 onNavigation={applyWizardNavigation}
399 />
400 )}
401 </WizardHeader>
402
403 {createdInstanceId ? (
404 <ProviderWizardAuthenticationStep
405 environmentId={environmentId}
406 environmentLabel={environmentLabel}
407 instanceId={createdInstanceId}
408 onFinish={() => onOpenChange(false)}
409 />
410 ) : (
411 <>
412 <WizardPanel
413 className={cn(isAcpRegistry && wizardStep === identityStep && "min-h-72")}
414 holdHeight={wizardStep === 0 && !isManualAcpConfiguration && isRegistryLoading}
415 >
416 <div className={cn("grid gap-2", wizardStep !== 0 && "hidden")}>
417 <div id="add-instance-driver-label" className="text-sm font-medium text-foreground">
418 Provider
419 </div>
420 <RadioGroup
421 disabled={isPreparingRegistryAgent}
422 value={driver}
423 onValueChange={(value) => {
424 setDriver(ProviderDriverKind.make(value));
425 setIsManualAcpConfiguration(false);
426 setHasAttemptedSubmit(false);
427 }}
428 aria-labelledby="add-instance-driver-label"
429 className="grid grid-cols-1 sm:grid-cols-2"
430 >
431 {providerClients.definitions
432 .filter((option) => option.driverKind !== ACP_REGISTRY_DRIVER_KIND)
433 .map((option) => {
434 return (
435 <RadioPrimitive.Root
436 key={option.driverKind}
437 value={option.driverKind}
438 className="relative flex cursor-pointer items-center gap-3 rounded-lg bg-card px-3 py-3 text-left text-muted-foreground outline-none ring-1 ring-black/5 hover:bg-muted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-checked:bg-primary/8 data-checked:text-foreground data-checked:ring-2 data-checked:ring-inset data-checked:ring-primary data-checked:hover:bg-primary/8 dark:bg-white/3 dark:ring-white/5 dark:hover:bg-white/5 dark:data-checked:bg-primary/15 dark:data-checked:ring-primary dark:data-checked:hover:bg-primary/15"
439 >
440 <ProviderInstanceIcon
441 driverKind={option.driverKind}
442 displayName={option.label}
443 iconClassName="size-4"
444 />
445 <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
446 {option.label}
447 </span>
448 <RadioPrimitive.Indicator
449 className="grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground"
450 aria-hidden
451 >
452 <CheckIcon className="size-3.5 shrink-0" />
453 </RadioPrimitive.Indicator>
454 {option.badgeLabel ? (
455 <Badge variant="warning" size="sm">
456 {option.badgeLabel}
457 </Badge>
458 ) : null}
459 </RadioPrimitive.Root>
460 );
461 })}
462 </RadioGroup>
463 </div>
464
465 {wizardStep === 0 ? (
466 <div className="space-y-4 pt-4">
467 <div className="flex items-center gap-3 text-xs text-muted-foreground">
468 <div aria-hidden className="flex-1 border-t border-border/70" />
469 <span>Or choose from ACP Registry</span>
470 <div aria-hidden className="flex-1 border-t border-border/70" />
471 </div>
472 {isAcpRegistry && isManualAcpConfiguration ? (
473 <div className="grid gap-4">
474 <div className="flex items-start justify-between gap-3">
475 <div>
476 <h3 className="text-sm font-medium text-foreground">
477 {isLocalAcp ? "Local ACP command" : "Enter manually"}
478 </h3>
479 <p className="mt-0.5 text-xs text-muted-foreground">
480 {isLocalAcp
481 ? `Run an installed ACP executable on ${environmentLabel}.`
482 : "Enter an official registry ID and any local executable or auth override."}
483 </p>
484 </div>
485 <Button
486 onClick={() => {
487 setIsManualAcpConfiguration(false);
488 setHasAttemptedSubmit(false);
489 }}
490 size="xs"
491 variant="ghost"
492 >
493 Search registry
494 </Button>
495 </div>
496 <SettingsGroup variant="plain">
497 <ProviderSettingsForm
498 definition={driverOption}
499 value={configDraft}
500 idPrefix="add-provider-acpRegistry-manual"
501 variant="settings"
502 onChange={setConfigDraft}
503 />
504 {isLocalAcp ? (
505 <ProviderEnvironmentSection
506 environment={localEnvironment}
507 onChange={setLocalEnvironment}
508 />
509 ) : null}
510 </SettingsGroup>
511 {isAcpRegistry && hasAttemptedSubmit && acpSelectionError ? (
512 <p className="text-2xs text-destructive">{acpSelectionError}</p>
513 ) : null}
514 </div>
515 ) : (
516 <>
517 <AcpRegistrySearchStep
518 environmentId={environmentId}
519 providerInstances={settings.providerInstances}
520 onPrepared={handleAcpPrepared}
521 onManualConfiguration={handleManualAcpConfiguration}
522 onLocalConfiguration={handleLocalAcpConfiguration}
523 onLoadingChange={setIsRegistryLoading}
524 onPreparingChange={setIsPreparingRegistryAgent}
525 />
526 {isAcpRegistry && hasAttemptedSubmit && acpSelectionError ? (
527 <p className="mt-2 text-2xs text-destructive">{acpSelectionError}</p>
528 ) : null}
529 </>
530 )}
531 </div>
532 ) : null}
533
534 {isAcpRegistry && wizardStep === 1 && selectedAcp ? (
535 <div className="mb-4 flex items-start justify-between gap-3 border-b border-border/70 pb-3">
536 <div className="min-w-0">
537 <p className="truncate text-sm font-medium text-foreground">
538 {selectedAcp.name}
539 </p>
540 <p className="mt-0.5 text-xs text-muted-foreground">
541 v{selectedAcp.version} · {selectedAcp.distribution}
542 </p>
543 </div>
544 <div className="flex shrink-0 gap-2 text-2xs">
545 {selectedAcp.website ? (
546 <a
547 aria-label={`Open documentation for ${selectedAcp.name} (${selectedAcp.id})`}
548 className="text-muted-foreground hover:text-foreground"
549 href={selectedAcp.website}
550 rel="noreferrer"
551 target="_blank"
552 >
553 Docs
554 </a>
555 ) : null}
556 {selectedAcp.repository ? (
557 <a
558 aria-label={`Open source for ${selectedAcp.name} (${selectedAcp.id})`}
559 className="text-muted-foreground hover:text-foreground"
560 href={selectedAcp.repository}
561 rel="noreferrer"
562 target="_blank"
563 >
564 Source
565 </a>
566 ) : null}
567 </div>
568 </div>
569 ) : null}
570
571 <SettingsGroup
572 variant="plain"
573 className={cn(wizardStep !== identityStep && "hidden")}
574 >
575 <SettingsRow
576 title={<label htmlFor="add-provider-label">Label</label>}
577 description={
578 <span id="add-provider-label-description">Shown in the provider list.</span>
579 }
580 control={
581 <Input
582 id="add-provider-label"
583 aria-describedby="add-provider-label-description"
584 size="sm"
585 className="w-full @min-[32rem]/settings-row:w-56"
586 placeholder="e.g. Work"
587 value={label}
588 onChange={(event) => setIdentityDraft({ label: event.target.value })}
589 />
590 }
591 />
592 <SettingsRow
593 title={<label htmlFor="add-provider-instance-id">Instance ID</label>}
594 description={
595 <span id="add-provider-instance-id-description">
596 Letters, digits, '-', or '_'.
597 </span>
598 }
599 status={
600 showInstanceIdError ? (
601 <span
602 id="add-provider-instance-id-error"
603 role="alert"
604 className="text-destructive"
605 >
606 {instanceIdError}
607 </span>
608 ) : undefined
609 }
610 control={
611 <Input
612 id="add-provider-instance-id"
613 aria-describedby={
614 showInstanceIdError
615 ? "add-provider-instance-id-description add-provider-instance-id-error"
616 : "add-provider-instance-id-description"
617 }
618 size="sm"
619 className="w-full @min-[32rem]/settings-row:w-56"
620 placeholder={`${driver}_work`}
621 value={instanceId}
622 onChange={(event) => {
623 setIdentityDraft({ instanceIdOverride: event.target.value });
624 }}
625 aria-invalid={showInstanceIdError}
626 />
627 }
628 />
629 <SettingsRow
630 title="Accent color"
631 description="Optional marker shown in the picker."
632 control={
633 <ProviderAccentColorPicker
634 displayName={label || driverOption.label}
635 value={accentColor || undefined}
636 onCommit={(value) => setIdentityDraft({ accentColor: value })}
637 layout="inline"
638 />
639 }
640 />
641 </SettingsGroup>
642
643 {!isAcpRegistry && driverSettingsFields.length > 0 ? (
644 <SettingsGroup variant="plain" className={cn(wizardStep !== 2 && "hidden")}>
645 <ProviderSettingsForm
646 definition={driverOption}
647 value={configDraft}
648 idPrefix={`add-provider-${driver}`}
649 variant="settings"
650 onChange={setConfigDraft}
651 />
652 </SettingsGroup>
653 ) : !isAcpRegistry && wizardStep === 2 ? (
654 <div className="grid gap-2">
655 <p className="text-sm text-muted-foreground">
656 This driver has no required configuration. You can add the instance now.
657 </p>
658 </div>
659 ) : null}
660 </WizardPanel>
661
662 <WizardFooter>
663 <Button
664 variant={wizardStep === 0 ? "ghost-muted" : "outline"}
665 size="sm"
666 disabled={isSaving || isPreparingRegistryAgent}
667 onClick={() => {
668 if (wizardStep === 0) {
669 onOpenChange(false);
670 return;
671 }
672 setWizardStep((step) => Math.max(0, step - 1));
673 }}
674 >
675 {wizardStep === 0 ? "Cancel" : "Back"}
676 </Button>
677 {wizardStep === 0 && driver === "codex" ? (
678 <>
679 <Button variant="outline" size="sm" onClick={() => navigateToStep(1)}>
680 Configure manually
681 </Button>
682 <ChatGptConnectionButton
683 size="sm"
684 onClick={() => setAddingChatGptAccount(true)}
685 />
686 </>
687 ) : wizardStep < (isAcpRegistry ? 1 : 2) ? (
688 <Button
689 size="sm"
690 disabled={isPreparingRegistryAgent}
691 onClick={() => navigateToStep(wizardStep + 1)}
692 >
693 Next
694 </Button>
695 ) : (
696 <Button
697 size="sm"
698 disabled={isSaving || !canManageProviders}
699 onClick={() => void handleSave()}
700 >
701 {isSaving
702 ? "Adding..."
703 : isAcpRegistry && !isLocalAcp
704 ? "Continue to sign-in"
705 : "Add instance"}
706 </Button>
707 )}
708 </WizardFooter>
709 </>
710 )}
711 </WizardPopup>
712 </Dialog>
713 );
714}