"use client"; import { CheckIcon } from "lucide-react";import { Radio as RadioPrimitive } from "@base-ui/react/radio";import { useCallback, useMemo, useReducer } from "react";import {  ProviderInstanceId,  ProviderDriverKind,  type ProviderInstanceConfig,} from "@t3tools/contracts"; import { useSettings, useUpdateSettings } from "../../hooks/useSettings";import { cn } from "../../lib/utils";import { normalizeProviderAccentColor } from "../../providerInstances";import { Button } from "../ui/button";import { ACPRegistryIcon, Gemini, GithubCopilotIcon, PiAgentIcon, type Icon } from "../Icons";import {  Dialog,  DialogDescription,  DialogFooter,  DialogHeader,  DialogPopup,  DialogTitle,} from "../ui/dialog";import { Badge } from "../ui/badge";import { Input } from "../ui/input";import { RadioGroup } from "../ui/radio-group";import { toastManager } from "../ui/toast";import { DRIVER_OPTION_BY_VALUE, DRIVER_OPTIONS } from "./providerDriverMeta";import { ProviderSettingsForm, deriveProviderSettingsFields } from "./ProviderSettingsForm";import { AnimatedHeight } from "../AnimatedHeight"; const PROVIDER_ACCENT_SWATCHES = [  "#2563eb",  "#16a34a",  "#ea580c",  "#dc2626",  "#7c3aed",  "#0891b2",] as const; /** * Normalize a user-provided label into a slug suffix for the instance id. * The full id is formed by prefixing the driver slug — e.g. label "Work" on * driver "codex" becomes `codex_work`. Output is trimmed to 48 chars so the * final composed id stays under the 64-char slug cap enforced by * `ProviderInstanceId` in `@t3tools/contracts`. */function slugifyLabel(value: string): string {  return value    .trim()    .toLowerCase()    .replace(/[^a-z0-9]+/g, "_")    .replace(/^_+|_+$/g, "")    .slice(0, 48);} function deriveInstanceId(driver: ProviderDriverKind, label: string): string {  const slug = slugifyLabel(label);  return slug ? `${driver}_${slug}` : "";} const INSTANCE_ID_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]*$/;const DEFAULT_DRIVER_KIND = ProviderDriverKind.make("codex");const DEFAULT_DRIVER_OPTION = DRIVER_OPTIONS[0]!;const EMPTY_CONFIG_DRAFT: Record<string, unknown> = {};const WIZARD_STEPS = ["Driver", "Identity", "Config"] as const;interface ComingSoonDriverOption {  readonly value: ProviderDriverKind;  readonly label: string;  readonly icon: Icon;} const COMING_SOON_DRIVER_OPTIONS: readonly ComingSoonDriverOption[] = [  {    value: ProviderDriverKind.make("githubCopilot"),    label: "Github Copilot",    icon: GithubCopilotIcon,  },  {    value: ProviderDriverKind.make("gemini"),    label: "Gemini",    icon: Gemini,  },  {    value: ProviderDriverKind.make("acpRegistry"),    label: "ACP Registry",    icon: ACPRegistryIcon,  },  {    value: ProviderDriverKind.make("piAgent"),    label: "Pi Agent",    icon: PiAgentIcon,  },]; /** * Validate an instance id against the same slug rules the server applies in * `ProviderInstanceId` (see `packages/contracts/src/providerInstance.ts`). * Returns a user-facing error string, or `null` if valid. */function validateInstanceId(id: string, existing: ReadonlySet<string>): string | null {  if (id.length === 0) return "Instance ID is required.";  if (id.length > 64) return "Instance ID must be 64 characters or fewer.";  if (!INSTANCE_ID_PATTERN.test(id)) {    return "Instance ID must start with a letter and use only letters, digits, '-', or '_'.";  }  if (existing.has(id)) return `An instance named '${id}' already exists.`;  return null;} interface AddProviderInstanceDialogProps {  open: boolean;  onOpenChange: (open: boolean) => void;} interface AddProviderInstanceDraftState {  readonly wizardStep: number;  readonly driver: ProviderDriverKind;  readonly label: string;  readonly accentColor: string;  readonly manualInstanceId: string;  readonly instanceIdDirty: boolean;  readonly configByDriver: Record<string, Record<string, unknown>>;  readonly hasAttemptedSubmit: boolean;} type AddProviderInstanceDraftAction =  | { readonly type: "setWizardStep"; readonly step: number }  | { readonly type: "setDriver"; readonly driver: ProviderDriverKind }  | { readonly type: "setLabel"; readonly label: string }  | { readonly type: "setAccentColor"; readonly accentColor: string }  | { readonly type: "setManualInstanceId"; readonly instanceId: string }  | {      readonly type: "setConfigDraft";      readonly driver: ProviderDriverKind;      readonly config: Record<string, unknown> | undefined;    }  | { readonly type: "markAttemptedSubmit" }; function createInitialAddProviderInstanceDraftState(): AddProviderInstanceDraftState {  return {    wizardStep: 0,    driver: DEFAULT_DRIVER_KIND,    label: "",    accentColor: "",    manualInstanceId: "",    instanceIdDirty: false,    configByDriver: {},    hasAttemptedSubmit: false,  };} function addProviderInstanceDraftReducer(  state: AddProviderInstanceDraftState,  action: AddProviderInstanceDraftAction,): AddProviderInstanceDraftState {  switch (action.type) {    case "setWizardStep":      return state.wizardStep === action.step ? state : { ...state, wizardStep: action.step };    case "setDriver":      return state.driver === action.driver ? state : { ...state, driver: action.driver };    case "setLabel":      return state.label === action.label ? state : { ...state, label: action.label };    case "setAccentColor":      return state.accentColor === action.accentColor        ? state        : { ...state, accentColor: action.accentColor };    case "setManualInstanceId":      return state.manualInstanceId === action.instanceId && state.instanceIdDirty        ? state        : { ...state, manualInstanceId: action.instanceId, instanceIdDirty: true };    case "setConfigDraft": {      const next = { ...state.configByDriver };      if (action.config === undefined || Object.keys(action.config).length === 0) {        delete next[action.driver];      } else {        next[action.driver] = action.config;      }      return { ...state, configByDriver: next };    }    case "markAttemptedSubmit":      return state.hasAttemptedSubmit ? state : { ...state, hasAttemptedSubmit: true };  }} export function AddProviderInstanceDialog({ open, onOpenChange }: AddProviderInstanceDialogProps) {  return (    <Dialog open={open} onOpenChange={onOpenChange}>      {open ? <AddProviderInstanceDialogContent onOpenChange={onOpenChange} /> : null}    </Dialog>  );} function AddProviderInstanceDialogContent({  onOpenChange,}: Pick<AddProviderInstanceDialogProps, "onOpenChange">) {  const settings = useSettings();  const { updateSettings } = useUpdateSettings();  const [draft, dispatch] = useReducer(    addProviderInstanceDraftReducer,    undefined,    createInitialAddProviderInstanceDraftState,  );  const {    wizardStep,    driver,    label,    accentColor,    manualInstanceId,    instanceIdDirty,    configByDriver,    hasAttemptedSubmit,  } = draft;   const existingIds = useMemo(    () => new Set(Object.keys(settings.providerInstances ?? {})),    [settings.providerInstances],  );   const driverOption = DRIVER_OPTION_BY_VALUE[driver] ?? DEFAULT_DRIVER_OPTION;  const driverSettingsFields = useMemo(    () => deriveProviderSettingsFields(driverOption),    [driverOption],  );  const derivedInstanceId = deriveInstanceId(driver, label);  const instanceId = instanceIdDirty ? manualInstanceId : derivedInstanceId;  const instanceIdError = validateInstanceId(instanceId, existingIds);  const showInstanceIdError = hasAttemptedSubmit && instanceIdError !== null;  const previewLabel = label.trim() || `${driverOption.label} Workspace`;  const wizardStepSummaries = [driverOption.label, previewLabel, null] as const;   const configDraft = configByDriver[driver] ?? EMPTY_CONFIG_DRAFT;  const setConfigDraft = useCallback(    (config: Record<string, unknown> | undefined) => {      dispatch({ type: "setConfigDraft", driver, config });    },    [driver],  );   const handleSave = useCallback(() => {    dispatch({ type: "markAttemptedSubmit" });    if (instanceIdError !== null) return;     const config = configByDriver[driver] ?? {};    const hasConfig = Object.keys(config).length > 0;    const normalizedAccentColor = normalizeProviderAccentColor(accentColor);     const nextInstance: ProviderInstanceConfig = {      driver,      enabled: true,      ...(label.trim().length > 0 ? { displayName: label.trim() } : {}),      ...(normalizedAccentColor ? { accentColor: normalizedAccentColor } : {}),      ...(hasConfig ? { config } : {}),    };    // `ProviderInstanceId.make` revalidates the slug; we've already checked    // it via `validateInstanceId`, but going through the brand constructor    // keeps the type boundary honest and guards against any future drift in    // the slug rules.    const brandedId = ProviderInstanceId.make(instanceId);    const nextMap = {      ...settings.providerInstances,      [brandedId]: nextInstance,    };    try {      updateSettings({ providerInstances: nextMap });      toastManager.add({        type: "success",        title: "Provider instance added",        description: `${driverOption.label} instance '${instanceId}' was added.`,      });      onOpenChange(false);    } catch (error) {      toastManager.add({        type: "error",        title: "Could not add provider instance",        description: error instanceof Error ? error.message : "Update failed.",      });    }  }, [    driver,    driverOption,    configByDriver,    instanceId,    instanceIdError,    label,    accentColor,    onOpenChange,    settings.providerInstances,    updateSettings,  ]);   return (    <DialogPopup className="max-w-xl overflow-hidden">      <div className="flex min-h-0 flex-col overflow-hidden border-foreground/10 bg-background shadow-2xl">        <AddProviderInstanceDialogHeader          wizardStep={wizardStep}          wizardStepSummaries={wizardStepSummaries}          onStepSelect={(step) => dispatch({ type: "setWizardStep", step })}        />        <AddProviderInstanceDialogPanel          wizardStep={wizardStep}          driver={driver}          driverOption={driverOption}          driverSettingsFields={driverSettingsFields}          label={label}          onLabelChange={(nextLabel) => dispatch({ type: "setLabel", label: nextLabel })}          instanceId={instanceId}          instanceIdError={instanceIdError}          showInstanceIdError={showInstanceIdError}          onInstanceIdChange={(nextInstanceId) =>            dispatch({ type: "setManualInstanceId", instanceId: nextInstanceId })          }          accentColor={accentColor}          onAccentColorChange={(nextAccentColor) =>            dispatch({ type: "setAccentColor", accentColor: nextAccentColor })          }          onDriverChange={(nextDriver) => dispatch({ type: "setDriver", driver: nextDriver })}          configDraft={configDraft}          onConfigDraftChange={setConfigDraft}        />        <AddProviderInstanceDialogFooter          wizardStep={wizardStep}          onBack={() => {            if (wizardStep === 0) {              onOpenChange(false);              return;            }            dispatch({ type: "setWizardStep", step: Math.max(0, wizardStep - 1) });          }}          onNext={() =>            dispatch({              type: "setWizardStep",              step: Math.min(WIZARD_STEPS.length - 1, wizardStep + 1),            })          }          onSave={handleSave}        />      </div>    </DialogPopup>  );} function AddProviderInstanceDialogHeader(props: {  wizardStep: number;  wizardStepSummaries: readonly (string | null)[];  onStepSelect: (step: number) => void;}) {  return (    <DialogHeader className="border-b border-border/70 bg-background">      <DialogTitle>Add provider instance</DialogTitle>      <DialogDescription>        Configure an additional provider instance — for example, a second Codex install pointed at a        different workspace.      </DialogDescription>      <div className="grid grid-cols-3 gap-2">        {WIZARD_STEPS.map((step, index) => (          <button            key={step}            type="button"            className={cn(              "grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-x-2 rounded-lg border px-3 py-2 text-left",              index === props.wizardStep                ? "border-primary bg-primary/10 ring-1 ring-primary/25"                : index < props.wizardStep                  ? "border-border bg-background"                  : "border-border bg-muted/40",            )}            onClick={() => props.onStepSelect(index)}          >            <span              className={cn(                "row-span-2 mt-0.5 grid size-4 place-items-center rounded-full border",                index < props.wizardStep                  ? "border-primary bg-primary text-primary-foreground"                  : index === props.wizardStep                    ? "border-primary bg-background"                    : "border-muted-foreground/35 bg-background",              )}              aria-hidden            >              {index < props.wizardStep ? <CheckIcon className="size-3" /> : null}            </span>            <span className="text-[10px] font-medium uppercase text-muted-foreground">              Step {index + 1}            </span>            <span className="truncate text-xs font-semibold text-foreground">              {step}              {index < props.wizardStep && props.wizardStepSummaries[index]                ? `: ${props.wizardStepSummaries[index]}`                : ""}            </span>          </button>        ))}      </div>    </DialogHeader>  );} function AddProviderInstanceDialogPanel(props: {  wizardStep: number;  driver: ProviderDriverKind;  driverOption: typeof DEFAULT_DRIVER_OPTION;  driverSettingsFields: ReturnType<typeof deriveProviderSettingsFields>;  label: string;  onLabelChange: (label: string) => void;  instanceId: string;  instanceIdError: string | null;  showInstanceIdError: boolean;  onInstanceIdChange: (instanceId: string) => void;  accentColor: string;  onAccentColorChange: (accentColor: string) => void;  onDriverChange: (driver: ProviderDriverKind) => void;  configDraft: Record<string, unknown>;  onConfigDraftChange: (config: Record<string, unknown> | undefined) => void;}) {  return (    <div      data-slot="dialog-panel"      className="space-y-4 border-b border-border/70 bg-muted/20 px-6 py-5"    >      <AnimatedHeight>        <AddProviderInstanceDriverStep          active={props.wizardStep === 0}          driver={props.driver}          onDriverChange={props.onDriverChange}        />        <AddProviderInstanceIdentityStep          active={props.wizardStep === 1}          driver={props.driver}          label={props.label}          onLabelChange={props.onLabelChange}          instanceId={props.instanceId}          instanceIdError={props.instanceIdError}          showInstanceIdError={props.showInstanceIdError}          onInstanceIdChange={props.onInstanceIdChange}          accentColor={props.accentColor}          onAccentColorChange={props.onAccentColorChange}        />        <AddProviderInstanceConfigStep          active={props.wizardStep === 2}          driver={props.driver}          driverOption={props.driverOption}          driverSettingsFields={props.driverSettingsFields}          configDraft={props.configDraft}          onConfigDraftChange={props.onConfigDraftChange}        />      </AnimatedHeight>    </div>  );} function AddProviderInstanceDriverStep(props: {  active: boolean;  driver: ProviderDriverKind;  onDriverChange: (driver: ProviderDriverKind) => void;}) {  return (    <div className={cn("grid gap-2", !props.active && "hidden")}>      <span id="add-instance-driver-label" className="text-xs font-medium text-foreground">        Driver      </span>      <RadioGroup        value={props.driver}        onValueChange={(value) => props.onDriverChange(ProviderDriverKind.make(value))}        aria-labelledby="add-instance-driver-label"        className="grid grid-cols-2 gap-2.5"      >        {DRIVER_OPTIONS.map((option) => {          const IconComponent = option.icon;          const isSelected = option.value === props.driver;          return (            <RadioPrimitive.Root              key={option.value}              value={option.value}              className={cn(                "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left outline-none transition-[background-color,border-color,box-shadow]",                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",                isSelected                  ? "border-primary bg-background shadow-sm ring-2 ring-primary/35"                  : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50",              )}            >              <IconComponent className="size-5 shrink-0" aria-hidden />              <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">                {option.label}              </span>              {option.badgeLabel ? (                <Badge variant="warning" size="sm">                  {option.badgeLabel}                </Badge>              ) : null}            </RadioPrimitive.Root>          );        })}        {COMING_SOON_DRIVER_OPTIONS.map((option) => {          const IconComponent = option.icon;          return (            <RadioPrimitive.Root              key={option.value}

Lines 1–500 of 682. Load more