claude-code/src/components/wizard/WizardDialogLayout.tsx

import React, { type ReactNode } from 'react';
import type { Theme } from '../../utils/theme.js';
import { Dialog } from '@anthropic/ink';
import { useWizard } from './useWizard.js';
import { WizardNavigationFooter } from './WizardNavigationFooter.js';

type Props = {
  title?: string;
  color?: keyof Theme;
  children: ReactNode;
  subtitle?: string;
  footerText?: ReactNode;
};

export function WizardDialogLayout({
  title: titleOverride,
  color = 'suggestion',
  children,
  subtitle,
  footerText,
}: Props): ReactNode {
  const { currentStepIndex, totalSteps, title: providerTitle, showStepCounter, goBack } = useWizard();
  const title = titleOverride || providerTitle || 'Wizard';
  const stepSuffix = showStepCounter !== false ? ` (${currentStepIndex + 1}/${totalSteps})` : '';

  return (
    <>
      <Dialog
        title={`${title}${stepSuffix}`}
        subtitle={subtitle}
        onCancel={goBack}
        color={color}
        hideInputGuide
        isCancelActive={false}
      >
        {children}
      </Dialog>
      <WizardNavigationFooter instructions={footerText} />
    </>
  );
}