onboarding-01

v0.3.4

Four-step onboarding wizard - custom model, connectors, pipelines, then department - with per-step loading and submitting states. Embeds the custom-model and add-connection dialogs.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/onboarding-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/card, @signalos/text-field, @signalos/dropdown-menu, @signalos/tooltip, @signalos/addconnector-01, @signalos/pipelinewizard-01, @signalos/addmodels-01, @signalos/badge, @signalos/input, @signalos/select, @signalos/form-dialog, @signalos/onboarding-wizard, @signalos/add-card, @signalos/confirm-dialog, @signalos/icon-button, @signalos/status-badge) into your app - you own the copy. Requires access.

usage

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

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

Props

PipelineLike

Prop	Type	Default
pipeline_id*	`string`	-
name*	`string`	-
description	`string \| undefined`	-
status*	`SemanticsPipelineStatus`	-
pipeline_type	`SemanticsPipelineType \| undefined`	-
connector_count*	`number`	-
created_at*	`string`	-
current_stage*	`SemanticsStageName`	-

Onboarding01Props

Prop	Type	Default	Description
open*	`boolean`	-	Whether the onboarding wizard dialog is open.
onOpenChange*	`(open: boolean) => void`	-	Called when the dialog requests to open or close.
currentStep	`number \| undefined`	0	Zero-indexed current step. Steps are ordered: 0 = Custom Model, 1 = Connectors, 2 = Pipelines, 3 = Department
onNext	`(() => void) \| undefined`	-	Called when the user advances to the next step.
onBack	`(() => void) \| undefined`	-	Called when the user navigates back to the previous step.
onFinish	`(() => void) \| undefined`	-	Called when the user completes the final step and submits the wizard. The parent is responsible for any submission side-effects and for closing the dialog via `onOpenChange(false)`.
isSubmitting	`boolean \| undefined`	false	Whether a submission is in flight. Disables the Finish button and shows a spinner on the last step.
canProceed	`boolean \| undefined`	true	Whether the current step's primary action is permitted. When `false` the Next / Finish button is disabled.
error	`ReactNode`	-	An error message rendered above the footer actions. Omit to show nothing.
eyebrow	`ReactNode`	-	Optional eyebrow text rendered above the wizard title in the header.
title	`ReactNode`	"Set up your workspace"	Wizard title rendered in the header.
subtitle	`ReactNode`	"Follow the steps below to configure SignalOS for your team."	Subtitle rendered below the title in the header.
className	`string \| undefined`	-
pipelines	`PipelineLike[] \| undefined`	[]	Pipelines to display on the Pipelines step.
isPipelinesLoading	`boolean \| undefined`	false	Whether pipelines are currently loading.
onCreatePipeline	`(() => void) \| undefined`	-	Called when the user requests to create a new pipeline.
onEditPipeline	`((pipeline: PipelineLike) => void) \| undefined`	-	Called when the user requests to edit an existing pipeline.
onDeletePipeline	`((pipeline: PipelineLike) => void) \| undefined`	-	Called when the user requests to delete an existing pipeline.
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the root element.
connectors	`ConnectorLike[] \| undefined`	[]	Platform connections to display in the connector grid.
isConnectorsLoading	`boolean \| undefined`	false	Whether connectors are still loading.
onAddConnector*	`() => void`	-	Called when the user requests to add a connector.
customModels	`CustomModelLike[] \| undefined`	[]	Custom models already saved by the user.
isLoadingCustomModels	`boolean \| undefined`	false	Whether the custom models list is loading.
isTestingModel	`boolean \| undefined`	false	Whether a connection test is in flight.
testingModelId	`string \| null \| undefined`	-	ID of the model whose test connection call is in-flight.
onOpenCreateModel	`(() => void) \| undefined`	-	Called when the user opens the "create custom model" dialog.
onOpenEditModel	`((model: CustomModelLike) => void) \| undefined`	-	Called when the user opens the "edit custom model" dialog.
onDeleteModel	`((model: CustomModelLike) => void) \| undefined`	-	Called when the user deletes a custom model.
onTestModel	`((model: CustomModelLike) => void) \| undefined`	-	Called when the user tests a custom model connection.
serverRoles	`ServerRoleLike[] \| undefined`	[]	Roles already persisted server-side (read-only).
isServerRolesLoading	`boolean \| undefined`	false	Whether server roles are still loading.
localRoles	`LocalRoleLike[] \| undefined`	[]	Locally-created roles not yet saved.
allUsers	`UserLike[] \| undefined`	[]	Existing platform users for the escalation-manager picker.
members	`MemberLike[] \| undefined`	[]	Members added locally during this onboarding session.
onAddRole	`((role: { name: string; description: string; }) => void) \| undefined`	-
onUpdateRole	`((tempId: string, role: { name: string; description: string; }) => void) \| undefined`	-
onDeleteRole	`((tempId: string) => void) \| undefined`	-
onAddMember	`((member: Omit<MemberLike, "id">) => void) \| undefined`	-
onUpdateMember	`((id: string, member: MemberLike) => void) \| undefined`	-
onDeleteMember	`((id?: string \| undefined) => void) \| undefined`	-
editingPipeline	`SemanticsPipelineListItemLike \| null \| undefined`	-	The pipeline currently being edited (opens the edit dialog when set).
isEditingPipelineSubmitting	`boolean \| undefined`	false	Whether the edit-pipeline save is in flight.
onEditingPipelineOpenChange	`((open: boolean) => void) \| undefined`	-	Called when the edit-pipeline dialog requests open/close.
onSavePipelineEdit	`((payload: { name?: string \| undefined; description?: string \| undefined; }) => void) \| undefined`	-	Called when the user saves pipeline edits.
customModelDialog	`CustomModelDialogPassthroughProps \| undefined`	-	All props forwarded verbatim to the embedded CustomModelDialog. When omitted the dialog is not rendered.
addConnectionModal	`AddConnectionModalPassthroughProps \| undefined`	-	All props forwarded verbatim to the embedded AddConnectionModal. When omitted the modal is not rendered.
createPipelineWizard	`CreatePipelineWizardPassthroughProps \| undefined`	-	All props forwarded verbatim to the embedded CreatePipelineWizard. When omitted the wizard is not rendered.
deletePipelineConfirm	`Pick<ConfirmDialogProps, "open" \| "onOpenChange" \| "description" \| "title" \| "onConfirm" \| "isConfirming" \| "confirmLabel" \| "cancelLabel" \| "dialogTestId" \| "confirmTestId" \| "cancelTestId"> \| undefined`	-	Props forwarded to the delete-pipeline ConfirmDialog. When omitted the dialog is not rendered.

ConnectorLike

Prop	Type	Default
id*	`string`	-
name*	`string`	-
connector_name	`string \| undefined`	-

CustomModelLike

Prop	Type	Default
id*	`string`	-
name*	`string`	-
provider_kind*	`string`	-
model_id	`string \| null \| undefined`	-
endpoint_url	`string \| null \| undefined`	-
api_version	`string \| null \| undefined`	-
config	`Record<string, unknown> \| null \| undefined`	-
has_api_key*	`boolean`	-
status*	`"error" \| "active" \| "inactive"`	-
error_message	`string \| null \| undefined`	-
created_at*	`string`	-
last_checked_at	`string \| null \| undefined`	-

ServerRoleLike

Prop	Type	Default
id	`string \| undefined`	-
name*	`string`	-
description*	`string`	-

LocalRoleLike

Prop	Type	Default
tempId*	`string`	-
name*	`string`	-
description*	`string`	-

UserLike

Prop	Type	Default
id*	`string`	-
full_name*	`string`	-
email*	`string`	-

MemberLike

Prop	Type	Default
id	`string \| undefined`	-
full_name*	`string`	-
role_id*	`string`	-
email*	`string`	-
password*	`string`	-
manager_id	`string \| undefined`	-

SemanticsPipelineListItemLike

Prop	Type	Default
pipeline_id*	`string`	-
name	`string \| undefined`	-
description	`string \| undefined`	-
status*	`string`	-
current_stage*	`string`	-
connector_count*	`number`	-
created_at*	`string`	-
pipeline_type	`string \| undefined`	-

Supporting types

export type CustomModelDialogPassthroughProps = Omit<
  CustomModelDialogProps,
  "data-testid"
>

export type AddConnectionModalPassthroughProps = Pick<
  AddConnectionModalProps,
  | "open"
  | "onOpenChange"
  | "step"
  | "connectorUrl"
  | "connectionName"
  | "purposeDetails"
  | "availableConnectors"
  | "currentSpec"
  | "configValues"
  | "testResult"
  | "localError"
  | "isLoadingAvailable"
  | "isLoadingSpec"
  | "isTesting"
  | "isCreating"
  | "isLaunching"
  | "skipPipelineLaunch"
  | "getConnectorIcon"
  | "onSelectConnector"
  | "onManualConnect"
  | "onBack"
  | "onTestConnection"
  | "onSaveConnection"
  | "onConfigChange"
  | "onConnectionNameChange"
  | "onConnectorUrlChange"
  | "onPurposeChange"
>

export type CreatePipelineWizardPassthroughProps = Pick<
  CreatePipelineWizardProps,
  | "open"
  | "onOpenChange"
  | "step"
  | "onStepChange"
  | "name"
  | "onNameChange"
  | "description"
  | "onDescriptionChange"
  | "selectedConnectionIds"
  | "onSelectedConnectionIdsChange"
  | "fieldErrors"
  | "onFieldErrorsChange"
  | "reasoningModel"
  | "onReasoningModelChange"
  | "supportingModel"
  | "onSupportingModelChange"
  | "embeddingModel"
  | "onEmbeddingModelChange"
  | "connections"
  | "llmModels"
  | "embeddingModels"
  | "isLoadingModels"
  | "isLoadingQuestions"
  | "isLoadingConnectors"
  | "isSubmitting"
  | "contextQuestions"
  | "contextAnswers"
  | "onContextAnswerChange"
  | "onOpen"
  | "onSubmit"
  | "onCreateCustomModel"
>

export type SemanticsPipelineType = "single" | "multi_source"

export type SemanticsPipelineStatus =
  "pending" | "running" | "awaiting_review" | "completed" | "failed"

export type SemanticsStageName =
  | "discover"
  | "content_profile"
  | "questionnaire"
  | "glossary"
  | "internal_relationships"
  | "cross_source_enrichment"
  | "functions"
  | "signal_rules"
  | "equilibria"

Changelog

0.3.4

Replace the copied placeholder description with one that actually describes this block; the registry description is what the agent skill shows as "pick it when".

0.3.3

Decompose DepartmentSetup into MemberForm, MemberList, and RolesSection subcomponents under components/departmentsetup/.
Wire AddConnectionModal, CustomModelDialog, and CreatePipelineWizard block imports into the onboarding flow.

0.3.2

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

onboarding-01

0.3.1

format the code

0.3.0

Declare @signalos/addconnector-01 as a registryDependency so consumers pulling onboarding-01 automatically receive addconnector-01.

0.2.2

Wire CreatePipelineWizard and AddConnectionModal into Onboarding01: both are now rendered outside the wizard dialog (so they layer correctly) and driven by new optional prop groups createPipelineWizard and addConnectionModal. Pass either prop object to enable the respective modal; omit it to suppress the render entirely.
Add AddConnectionModalPassthroughProps and CreatePipelineWizardPassthroughProps type aliases in Onboarding01.types.ts so callers get a single import for the full prop shapes required by each embedded modal.

0.2.1

Replace all raw color-scale utilities (error-500, success-700, warning-600, info-500, etc.) with semantic tokens (text-destructive, text-text-success, bg-bg-warning, border-border-error, etc.) across CustomModelsStep, PipelineListStep, and DepartmentSetup so client theme overrides apply correctly.

0.2.0

Full rewrite of Onboarding01.tsx: the block now orchestrates the four-step onboarding flow (Custom Model → Connectors → Pipelines → Department) inside an OnboardingWizard dialog. All navigation state is owned by the caller via props (open, currentStep, onNext, onBack, onFinish).
Add Onboarding01Props in Onboarding01.types.tsx with a fully documented prop contract including canProceed, isSubmitting, error, title, subtitle, eyebrow, and pipeline-step props.
Introduce PipelineLike structural interface in Onboarding01.types.tsx so the block remains free of app domain types.
Add Onboarding01.constant.tsx with ONBOARDING_STEPS, default title, subtitle, and test-id constants.
PipelineListStep is now a named export and uses PipelineLike instead of the app type SemanticsPipelineListItem.
Add Onboarding01.test.tsx covering: closed/open render, default and custom title, step routing, Next/Back/Finish callbacks, canProceed disabled state, error message, and isSubmitting state.
Update Onboarding01.preview.tsx with seven catalog scenarios covering every step, the loading state, the error state, and the submitting state.

0.1.0

Initial scaffold: thin wrapper around OnboardingWizard.