# Create Pipeline Wizard (`pipelinewizard-01`) - SignalOS page block

> Four-step modal wizard for creating a pipeline: configure name, description, and model orchestration (Details), answer domain context questions (Context), select data source connections (Connectors), then review and submit (Review). Fully controlled props API with per-step loading states.

- **Version:** 0.2.0
- **Kind:** block (group: reusable-components) · **Category:** pages
- **Install:** `npx shadcn@latest add @signalos/pipelinewizard-01`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/button, @signalos/select, @signalos/textarea, @signalos/form-dialog, @signalos/text-field
- **npm dependencies:** lucide-react@^1.7.0
- **Files installed:** `src/components/blocks/pipelinewizard-01/CreatePipelineWizard.tsx`, `src/components/blocks/pipelinewizard-01/CreatePipelineWizard.types.ts`, `src/components/blocks/pipelinewizard-01/CreatePipelineWizard.constants.ts`, `src/components/blocks/pipelinewizard-01/components/ModelSelect.tsx`, `src/components/blocks/pipelinewizard-01/components/ReviewRow.tsx`, `src/components/blocks/pipelinewizard-01/components/WizardStepIndicator.tsx`, `src/components/blocks/pipelinewizard-01/components/WizardStepBody.tsx`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
// after: npx shadcn@latest add @signalos/pipelinewizard-01
// mount the pulled page in a route, e.g. src/app/reusable-components/page.tsx
import CreatePipelineWizard from "@/components/blocks/pipelinewizard-01/CreatePipelineWizard"

export default function Page() {
  return <CreatePipelineWizard />
}
```

## Props

### `ConnectionLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | yes | - |  |
| `name` | `string` | yes | - |  |
| `connector_name` | `string \| undefined` | no | - | Connector type label, e.g. "salesforce". |
| `status` | `string \| undefined` | no | - | Connection status label, e.g. "active". |

### `OrchestrationModelLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `canonical` | `string` | yes | - |  |
| `display` | `string` | yes | - |  |
| `family_display` | `string \| undefined` | no | - | Provider / family grouping label shown as a select section header. |
| `lifecycle_warning` | `boolean \| undefined` | no | - | When set, the model is flagged as retiring in the picker. |

### `ContextQuestion`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `question_key` | `string` | yes | - |  |
| `question_text` | `string` | yes | - |  |
| `context` | `string \| undefined` | no | - |  |

### `CreatePipelinePayload`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | yes | - |  |
| `description` | `string \| undefined` | no | - |  |
| `platform_connection_ids` | `string[]` | yes | - | Selected connection ids. |
| `onboarding_context` | `string \| undefined` | no | - | Collected onboarding context, already formatted as a string. |
| `model` | `string \| undefined` | no | - |  |
| `supporting_model` | `string \| undefined` | no | - |  |
| `embedding_model` | `string \| undefined` | no | - |  |

### `CreatePipelineWizardProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `open` | `boolean` | yes | - |  |
| `onOpenChange` | `(open: boolean) => void` | yes | - |  |
| `step` | `number \| undefined` | no | - | The currently active step index (0–3). When provided, the wizard is fully controlled: the parent owns step transitions and should react to `onStepChange` to kick off per-step data fetches. |
| `onStepChange` | `((step: number) => void) \| undefined` | no | - | Called when the wizard wants to move to a different step index. |
| `name` | `string \| undefined` | no | - |  |
| `onNameChange` | `((value: string) => void) \| undefined` | no | - |  |
| `description` | `string \| undefined` | no | - |  |
| `onDescriptionChange` | `((value: string) => void) \| undefined` | no | - |  |
| `selectedConnectionIds` | `string[] \| undefined` | no | - |  |
| `onSelectedConnectionIdsChange` | `((ids: string[]) => void) \| undefined` | no | - |  |
| `fieldErrors` | `Record<string, string> \| undefined` | no | - |  |
| `onFieldErrorsChange` | `((errors: Record<string, string>) => void) \| undefined` | no | - |  |
| `reasoningModel` | `string \| undefined` | no | - |  |
| `onReasoningModelChange` | `((canonical: string) => void) \| undefined` | no | - |  |
| `supportingModel` | `string \| undefined` | no | - |  |
| `onSupportingModelChange` | `((canonical: string) => void) \| undefined` | no | - |  |
| `embeddingModel` | `string \| undefined` | no | - |  |
| `onEmbeddingModelChange` | `((canonical: string) => void) \| undefined` | no | - |  |
| `connections` | `ConnectionLike[] \| undefined` | no | - |  |
| `llmModels` | `OrchestrationModelLike[] \| undefined` | no | - |  |
| `embeddingModels` | `OrchestrationModelLike[] \| undefined` | no | - |  |
| `isLoadingModels` | `boolean \| undefined` | no | - | True while models are being fetched (Step 1). |
| `isLoadingQuestions` | `boolean \| undefined` | no | - | True while onboarding questions are being fetched (Step 2). |
| `isLoadingConnectors` | `boolean \| undefined` | no | - | True while connectors are being fetched (Step 3). |
| `isSubmitting` | `boolean \| undefined` | no | - | True while the create mutation is in-flight. |
| `contextQuestions` | `ContextQuestion[] \| undefined` | no | - |  |
| `contextAnswers` | `Record<string, string> \| undefined` | no | - | Current answer map, keyed by `question_key`. |
| `onContextAnswerChange` | `((key: string, value: string) => void) \| undefined` | no | - |  |
| `onOpen` | `(() => void) \| undefined` | no | - | Called when the wizard is first opened so the parent can kick off fetches. |
| `onSubmit` | `((payload: CreatePipelinePayload) => void) \| undefined` | no | - | Called with the collected form data when the user clicks "Create pipeline". |
| `onCreateCustomModel` | `(() => void) \| undefined` | no | - | Called when the user clicks "Create model" inside the model picker. |
| `data-testid` | `string \| undefined` | no | - | Test identifier rendered as `data-testid` on the dialog content. |

## Changelog

## 0.2.0

- Extract `WizardStepBody` and `WizardStepIndicator` into dedicated component files; export `ModelSelect` and `ReviewRow` from the `components/` folder.
- Add `WizardStep` and `WizardStepIndicatorProps` type definitions; ship new component files in registry manifest.

## 0.1.6

- Fix cross-item imports to use canonical @/components paths; add missing signalos.category to manifests.

# pipelinewizard01
## 0.1.5
- format the code
## 0.1.4

- Post-initial content update.

## 0.1.0

- Initial release: four-step pipeline creation wizard (Details → Context → Connectors → Review)
  composed from FormDialog, TextField, Textarea, and Select primitives. Fully controlled props API
  with per-step loading states, context questions, model orchestration pickers, and connector
  multi-selection. Step state can be lifted to the parent via `step` / `onStepChange` to trigger
  per-step data fetches.