# zidane-ui/onboarding

> The setup wizard over an OnboardingHost: the provider, the flow with its eleven steps, and the hooks and the frame to build your own.

Import: `import { … } from 'zidane-ui/onboarding'`. Source: [ui/src/onboarding/index.ts](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/index.ts).

Use this entry point to show the setup wizard of zidane in a React app. `OnboardingProvider` starts a run over an `OnboardingHost`. `OnboardingFlow` shows the run: the steps in a rail (dots on narrow windows), the current step and its number, and the keyboard. Enter moves on, and Escape goes back. To replace a step, pass your component in `steps`. To build your own flow, use `useOnboarding`, `useOnboardingStep`, `OnboardingStepFrame` and the step components. The model in [`zidane/chat/pure`](https://zidane.si/docs/reference/chat-pure.md) defines the steps, their order and what a run writes. The host contract is in [`zidane-ui/onboarding/headless`](https://zidane.si/docs/reference/ui-onboarding-headless.md), and a fixture host in [`zidane-ui/onboarding/testing`](https://zidane.si/docs/reference/ui-onboarding-testing.md).

```tsx
import type { OnboardingHost } from 'zidane-ui/onboarding/headless'
import { OnboardingFlow, OnboardingProvider } from 'zidane-ui/onboarding'

declare const host: OnboardingHost

export function Setup({ onClose }: { onClose: () => void }) {
  return (
    <OnboardingProvider host={host} onDone={onClose}>
      <OnboardingFlow />
    </OnboardingProvider>
  )
}
```

## Components

### `ApprovalDemo`

Component.

The mini demos of the setup wizard: small decorative scenes of what a
feature, an extension or an approval mode does, and the scenes of the
tutorials, one per topic, each taking the step on show.

```ts
function ApprovalDemo(props: ApprovalDemoProps): Element
```

**Parameters**

- `props` (`ApprovalDemoProps`): Component props.

**Returns** `Element`

Source: [ui/src/onboarding/demos/autonomy.tsx:113](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/autonomy.tsx#L113)

### `AutonomyStep`

Component.

The Autonomy step.

```ts
function AutonomyStep(props: AutonomyStepProps): Element
```

**Parameters**

- `props` (`AutonomyStepProps`): The [`AutonomyStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#AutonomyStepProps).

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/AutonomyStep.tsx:44](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/AutonomyStep.tsx#L44)

### `ConnectorsStep`

Component.

The Connectors step.

```ts
function ConnectorsStep(props: ConnectorsStepProps): Element | null
```

**Parameters**

- `props` (`ConnectorsStepProps`): The [`ConnectorsStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#ConnectorsStepProps).

**Returns** `Element | null`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ConnectorsStep.tsx:46](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ConnectorsStep.tsx#L46)

### `ConnectProviderCard`

Component.

Renders the Connect a provider card. Its strings are `connectProviderTitle`, `connectProviderBody` and
`connectProviderAction` of the onboarding labels; it needs no `OnboardingProvider`.

```ts
function ConnectProviderCard(props: ConnectProviderCardProps): Element
```

**Parameters**

- `props` (`ConnectProviderCardProps`): `onConnect`, plus the attributes of the card's `div`.

**Returns** `Element`

**Props**

- `onConnect` (`() => void`): Opens Connect: the wizard in `connect` mode, or the app's own provider setup.

Source: [ui/src/onboarding/ConnectProviderCard.tsx:27](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/ConnectProviderCard.tsx#L27)

### `ConnectStep`

Component.

The Connect step.

```ts
function ConnectStep(props: ConnectStepProps): Element
```

**Parameters**

- `props` (`ConnectStepProps`): The [`ConnectStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#ConnectStepProps).

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ConnectStep.tsx:29](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ConnectStep.tsx#L29)

### `ConversationPresetPreview`

Component.

Renders the sample conversation with tabs for your settings and for each
preset. A tab only previews. The Use button applies the previewed preset.

```ts
function ConversationPresetPreview(props: ConversationPresetPreviewProps): Element
```

**Parameters**

- `props` (`ConversationPresetPreviewProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the block.
- `maxHeight?` (`number`): The height of the preview's scroller, in pixels.
- `onApply` (`(preset: TranscriptPresetId) => void`): Applies a preset: every setting of `transcriptPreset(id).settings`.
- `settings` (`Partial<Settings>`): The settings in effect.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/conversation.tsx:134](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/conversation.tsx#L134)

### `ConversationPreview`

Component.

Renders the sample conversation with a set of transcript settings, in a small window.

```ts
function ConversationPreview(props: ConversationPreviewProps): Element
```

**Parameters**

- `props` (`ConversationPreviewProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the window.
- `maxHeight?` (`number`): The height of the window's scroller, in pixels.
- `settings` (`Partial<Settings>`): The settings to draw the sample with.
- `style?` (`CSSProperties`): Inline styles on the root element.
- `title?` (`string`): The caption of the window. Defaults to the `preview` label.

Source: [ui/src/onboarding/conversation.tsx:92](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/conversation.tsx#L92)

### `ConversationStep`

Component.

The Conversation step.

```ts
function ConversationStep(props: ConversationStepProps): Element
```

**Parameters**

- `props` (`ConversationStepProps`): The [`ConversationStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#ConversationStepProps).

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ConversationStep.tsx:64](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ConversationStep.tsx#L64)

### `DeliveryDemo`

Component.

Renders the demo of a "Messages during a run" choice.

```ts
function DeliveryDemo(props: DeliveryDemoProps): Element
```

**Parameters**

- `props` (`DeliveryDemoProps`): Component props.

**Returns** `Element`

Source: [ui/src/onboarding/demos/delivery.tsx:109](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/delivery.tsx#L109)

### `DemoStage`

Component.

Renders the stage of a demo: a canvas-toned panel with a faint dot grid.

```ts
function DemoStage(props: DemoStageProps): Element
```

**Parameters**

- `props` (`DemoStageProps`): Component props.

**Returns** `Element`

Source: [ui/src/onboarding/demos/parts.tsx:34](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/parts.tsx#L34)

### `ExtensionDemo`

Component.

Renders the demo of a native extension, or nothing for an extension without one.

```ts
function ExtensionDemo(props: ExtensionDemoProps): Element | null
```

**Parameters**

- `props` (`ExtensionDemoProps`): Component props.

**Returns** `Element | null`

Source: [ui/src/onboarding/demos/extensions.tsx:180](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/extensions.tsx#L180)

### `ExtensionMark`

Component.

Renders an extension's mark: its own icon, its logo, or its letter, on a tinted tile. The
Extensions rows, the source browser's rows and the settings nav draw this one.

```ts
function ExtensionMark(props: ExtensionMarkProps): Element
```

**Parameters**

- `props` (`ExtensionMarkProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `entry` (`ExtensionMarkEntry`): The extension: its name, display name, own icon and logo.
- `size?` (`BrandMarkSize`): 18, 28 or 40 pixels, or one em (`xs`, the settings nav's icon box).

Source: [ui/src/onboarding/marks.tsx:96](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/marks.tsx#L96)

### `ExtensionsStep`

Component.

The Extensions step.

```ts
function ExtensionsStep(props: ExtensionsStepProps): Element | null
```

**Parameters**

- `props` (`ExtensionsStepProps`): The [`ExtensionsStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#ExtensionsStepProps).

**Returns** `Element | null`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ExtensionsStep.tsx:41](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ExtensionsStep.tsx#L41)

### `FeatureDemo`

Component.

Renders the demo of a feature, or nothing for a feature without one.

```ts
function FeatureDemo(props: FeatureDemoProps): Element | null
```

**Parameters**

- `props` (`FeatureDemoProps`): Component props.

**Returns** `Element | null`

Source: [ui/src/onboarding/demos/features.tsx:559](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/features.tsx#L559)

### `FeaturesStep`

Component.

The Features step.

```ts
function FeaturesStep(props: FeaturesStepProps): Element
```

**Parameters**

- `props` (`FeaturesStepProps`): The [`FeaturesStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#FeaturesStepProps).

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/FeaturesStep.tsx:35](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/FeaturesStep.tsx#L35)

### `ImportStep`

Component.

The Bring your setup step.

```ts
function ImportStep(props: ImportStepProps): Element
```

**Parameters**

- `props` (`ImportStepProps`): The [`ImportStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#ImportStepProps).

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ImportStep.tsx:38](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ImportStep.tsx#L38)

### `LookStep`

Component.

The Look step.

```ts
function LookStep(props: LookStepProps): Element
```

**Parameters**

- `props` (`LookStepProps`): The [`LookStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#LookStepProps).

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/LookStep.tsx:138](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/LookStep.tsx#L138)

### `OnboardingFlow`

Component.

Renders the run: progress, the current step, and the keyboard.

```ts
function OnboardingFlow(props: OnboardingFlowProps): Element
```

**Parameters**

- `props` (`OnboardingFlowProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the flow.
- `header?` (`ReactNode`): Shown above the rail, such as the app's name.
- `label?` (`string`): Accessible name of the progress, for a page that shows more than one flow. Defaults to the `steps` label.
- `steps?` (`Partial<Record<OnboardingStepId, ComponentType>>`): Components that replace the built-in steps, by step.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/OnboardingFlow.tsx:84](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingFlow.tsx#L84)

### `OnboardingHostProvider`

Component.

Puts an [`OnboardingHost`](https://zidane.si/docs/reference/ui-onboarding-headless.md#OnboardingHost) in context for the `OnboardingProvider`s below (what `AppHostProvider` does with
its `onboarding`).

```ts
function OnboardingHostProvider(props: OnboardingHostProviderProps): Element
```

**Parameters**

- `props` (`OnboardingHostProviderProps`): The host and the app.

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The app.
- `host` (`OnboardingHost`): The host the `OnboardingProvider`s below run on when they are given none.

Source: [ui/src/onboarding/OnboardingProvider.tsx:52](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L52)

### `OnboardingProvider`

Component.

Provides a setup wizard run over a host to the steps below it.

```ts
function OnboardingProvider(props: OnboardingProviderProps): Element
```

**Parameters**

- `props` (`OnboardingProviderProps`): Provider props.

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The flow, or your own steps.
- `fallback?` (`ReactNode`): Shown while the host is still detecting. Defaults to a quiet "Looking around" line.
- `host?` (`OnboardingHost`): The app's host: what the run reads and the actions it asks for. Default: the [`OnboardingHostProvider`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingHostProvider)'s.
- `labels?` (`Partial<{ accent: string; accentTheme: string; addDiagnosticToChat: (message: string) => string; added: string; address: string; addressPlaceholder: string; addsConnector: (connector: string) => string; addToChat: string; agentName: (agent: OnboardingAgentId) => string; allowOnce: string; allSources: string; alwaysAllow: string; apiKeyFor: (provider: string) => string; appIcon: string; approvalAsk: (command: string) => string; approvedByModel: string; askedWhenUnsure: string; back: string; background: string; browse: string; browseFailed: (message: string) => string; browsing: (source: string) => string; cancel: string; change: string; changeLater: string; changeStep: (step: string) => string; clearPicks: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; configure: string; confirm: string; connected: string; connectFirst: string; connectProviderAction: string; connectProviderBody: string; connectProviderTitle: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; createToken: string; credentialsAt: (path: string) => string; current: string; custom: string; darkTheme: string; demoAddress: string; demoAllowed: string; demoApproved: string; demoAsksYou: string; demoBlocked: string; demoBranch: string; demoCalls: string; demoCommitCommand: string; demoCommitMessage: string; demoEstimateSession: string; demoEstimateTask: string; demoFlowCalls: readonly ['read_file src/app.ts', 'edit src/limits.ts', 'bun test', 'git commit']; demoFolders: readonly ['my-app', '.zidane', 'extensions', 'deploy.ts']; demoGenericTitle: string; demoGhost: string; demoGoal: string; demoIssue: string; demoIssuePrompt: string; demoMessage: string; demoMessageCalls: readonly ['read app.ts', 'edit api.ts']; demoNotifyApp: string; demoNotifyBody: string; demoPageButton: string; demoPersonalSessions: readonly ['Plan the trip to Lisbon', 'Sort the tax receipts']; demoProjectPath: string; demoPromptGhost: string; demoPromptStart: string; demoQueued: string; demoReminderFrom: string; demoReminderIn: string; demoReminderNow: string; demoReminderText: string; demoReminderTyped: string; demoRiskyCall: string; demoRunEnded: string; demoScript: readonly ['const files = await glob(\'src/**/*.ts\')', 'for (const file of files) await read(file)']; demoSearchQuery: string; demoSearchResults: readonly ['vite.dev/guide/migration', 'github.com/vitejs/vite/releases', 'vite.dev/blog/announcing-vite6']; demoSecretDots: string; demoSecretPath: string; demoSecretPrompt: string; demoSecretSave: string; demoSecretSaved: string; demoSpacePersonal: string; demoSpaceWork: string; demoSteeredCall: string; demoStep: string; demoTab: string; demoTerminalError: string; demoTerminalLines: readonly ['$ bun dev', 'ready on localhost:5173', 'GET /chat 200 in 12 ms']; demoTitle: string; demoTyped: string; demoUpdateReady: string; demoUsageLabel: string; demoUsagePercent: string; demoVersion: string; demoWorkSessions: readonly ['Fix the login redirect', 'Review the rate limit']; deny: string; detecting: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; done: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; effort: string; effortHint: string; effortLabel: (level: NonNullable<'off' | 'max' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh' | 'adaptive' | undefined>) => string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; experimental: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; filterSkills: string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; found: string; foundAgent: (agent: OnboardingAgentId) => string; foundEnvKey: (envKey: string) => string; foundGithub: (login: string | undefined, source: string) => string; foundLocalServer: (server: OnboardingLocalServer) => string; foundSaved: (provider: string) => string; foundSignedIn: (provider: string) => string; fromImport: (agent: string) => string; fromRepo: (repo: string) => string; fullSetup: string; fullSetupDetail: string; fullSetupTime: string; goToDefinition: string; goToStep: (step: string) => string; importAgents: string; importAllProjects: string; importCommands: string; importFrom: (agent: string) => string; importMcps: string; importNames: (list: readonly string[]) => string; importNothing: string; importSessions: string; importSessionsDetail: (project: number, all: number) => string; importSkills: string; importSkipped: (count: number) => string; installed: string; installing: string; installProvider: (provider: string) => string; isDefault: (name: string) => string; lightTheme: string; listingTruncated: string; loading: string; localFound: (server: OnboardingLocalServer) => string; matchesPreset: (preset: string) => string; messagesDuringRun: string; messagesDuringRunHint: string; modalBack: string; modalFailed: string; mode: string; modeDark: string; model: string; modeLight: string; modeSystem: string; moreOptions: string; moreProviders: string; needs: (list: readonly string[]) => string; needsAccount: (account: string) => string; needsCommand: (name: string, optional: boolean) => string; needsConnector: (connector: string) => string; needsDecisions: string; next: string; noAccount: string; noGhLogin: string; noReferences: string; noSkillMatch: string; noSkills: string; noSkillsHint: string; notNow: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; pack: string; packHint: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; presetInUse: string; presetYours: string; prevents: string; preview: string; previewPresets: string; previous: string; quickStart: string; quickStartDetail: string; quickStartTime: string; readInPlaceDetail: string; readInPlaceLabel: string; readInPlaceTitle: (agents: readonly string[]) => string; readyConfigured: string; readyEnv: (envKey: string) => string; readyKey: string; readyOAuth: string; recapAccent: (accent: string) => string; recapIcon: (icon: string) => string; recapLookSystem: (dark: string, light: string) => string; recapNone: string; recapProvider: (provider: string, model?: string) => string; recapSwitched: (on: readonly string[], off: readonly string[]) => string; recommended: string; recommendedSources: string; reload: string; rename: string; retry: string; runsWithoutAsking: string; sampleCall: string; sampleCommand: string; sampleShortCommand: string; sandboxed: string; save: string; saveFailed: (message: string) => string; saving: string; sceneAddServer: string; sceneAgent: string; sceneApiKey: string; sceneBranches: readonly ['main', 'fix-login']; sceneCall: string; sceneClick: string; sceneCmdClick: string; sceneCode: string; sceneCodeTypo: string; sceneCommand: string; sceneCredentials: string; sceneDesktop: string; sceneDiagnostic: string; sceneEditor: string; sceneEnvKey: string; sceneExtensionAdds: readonly ['/standup', 'deploy', 'Panel', 'Provider']; sceneExtensionCode: readonly ['export default defineExtension({', '  name: \'hello\',', '  setup(ctx) {', '    ctx.registerCommand(\'standup\')']; sceneExtensionFile: string; sceneExtensionName: string; sceneFileName: string; sceneFilesPanel: string; sceneHost: string; sceneListening: string; sceneLocal: string; sceneMcpFile: string; sceneNeedsTrust: string; sceneNewRun: string; sceneOnlyYou: string; sceneOr: string; scenePath: string; sceneProjectExtension: string; scenePromptParts: readonly ['zidane rules', 'AGENTS.md', 'MCP servers', 'Skills']; scenePromptTokens: readonly ['2.1k', '640', '320', '410']; sceneProvider: string; sceneResult: string; sceneSandbox: string; sceneSandboxes: readonly ['Docker', 'E2B', 'Daytona']; sceneSaved: string; sceneSecretCommand: string; sceneSecretDots: string; sceneSecretName: string; sceneSecretOutput: string; sceneSecretPrompt: string; sceneSecretSave: string; sceneSecretsFolder: string; sceneSecretTtl: string; sceneServer: string; sceneServerStart: string; sceneService: string; sceneSession: string; sceneSignedIn: string; sceneSkillAbouts: readonly ['Test first', 'Read PDFs']; sceneSkillNames: readonly ['tdd', 'pdf', 'docx']; sceneSkillPrompt: string; sceneSkillsFolder: string; sceneSkillUsing: string; sceneSystemFile: string; sceneSystemPrompt: string; sceneTerminal: string; sceneToken: string; sceneTokenCreate: string; sceneWorktree: string; sceneWss: string; sceneZidaneFolder: string; screenBack: (screen: string) => string; screenBackKey: string; selectAll: string; setup: string; signIn: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; signInWith: (account: string) => string; skillCount: (count: number) => string; skillsPicked: (count: number) => string; skip: string; skipSetup: string; sourceChipName: (label: string, picked: number) => string; sourceField: string; sourceName: (label: string, repo: string) => string; sourcePlaceholder: string; spendCap: string; spendCapDetail: string; stars: (count: number) => string; start: string; stepLabel: (step: OnboardingStepId) => string; stepLede: (step: OnboardingStepId) => string; stepOf: (index: number, count: number) => string; steps: string; stepTitle: (step: OnboardingStepId) => string; taskDone: string; taskFailed: string; taskNeedsSignIn: string; taskQueued: string; taskRunning: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; testAgain: string; testFailed: string; testing: string; testOk: (model: string, seconds: string) => string; toAdd: (count: number) => string; toInstall: (count: number) => string; tokenFor: (connector: string) => string; tokenOptional: string; tokenOptionalAuth: string; tokenOrGhLogin: string; tokenSignIn: string; tutorialOnServer: (topic: TutorialTopic, host: string) => TutorialWords; tutorials: Readonly<Record<TutorialTopic, TutorialWords>>; unlocks: string; useApiKey: string; usedIn: (step: string) => string; useGhLogin: string; usePreset: (preset: string) => string; usesGhLogin: (login?: string) => string; useSignIn: string; usesTokens: string; useToken: string; viaExtension: string; viewOnGithub: string; viewOnNpm: string; whatYoullSee: string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }>`): Overrides for the wizard's strings. Keys you leave out keep the default English label.
- `onDone?` (`(result: OnboardingResult) => void`): Called once the result is saved: close the wizard here.
- `start?` (`OnboardingStepId`): Opens the run at this step instead of its first, when the run has it.

Source: [ui/src/onboarding/OnboardingProvider.tsx:82](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L82)

### `OnboardingStepFrame`

Component.

Renders a step's page, its footer wired to the run.

```ts
function OnboardingStepFrame(props: OnboardingStepFrameProps): Element
```

**Parameters**

- `props` (`OnboardingStepFrameProps`): Component props.

**Returns** `Element`

**Props**

- `aside?` (`ReactNode`): A live preview beside the body.
- `busy?` (`boolean`): Continue is working.
- `children?` (`ReactNode`): The step's body.
- `className?` (`string`): Extra classes on the root element.
- `continueDisabled?` (`boolean`): The user cannot press Continue yet.
- `continueLabel?` (`ReactNode`): Text of the Continue button. Defaults to Continue. On the last step, it defaults to Start, or Done for Connect alone.
- `note?` (`ReactNode`): Muted text before the buttons, such as why Continue is off.
- `onContinue?` (`() => void`): Runs instead of moving on.

Source: [ui/src/onboarding/OnboardingStepFrame.tsx:39](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingStepFrame.tsx#L39)

### `ProviderMark`

Component.

Renders a provider's logo: its own, the one of the extension that adds it, a chip for a local server, or its letter.

```ts
function ProviderMark(props: ProviderMarkProps): Element
```

**Parameters**

- `props` (`ProviderMarkProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `provider` (`Pick<OnboardingProvider, 'key' | 'label' | 'brand' | 'viaExtension'>`): The provider.
- `size?` (`BrandMarkSize`): 18, 28 or 40 pixels.

Source: [ui/src/onboarding/marks.tsx:40](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/marks.tsx#L40)

### `ReadyStep`

Component.

The Ready step.

```ts
function ReadyStep(props: ReadyStepProps): Element
```

**Parameters**

- `props` (`ReadyStepProps`): The [`ReadyStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#ReadyStepProps).

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ReadyStep.tsx:157](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ReadyStep.tsx#L157)

### `SandboxDemo`

Component.

The mini demos of the setup wizard: small decorative scenes of what a
feature, an extension or an approval mode does, and the scenes of the
tutorials, one per topic, each taking the step on show.

```ts
function SandboxDemo(props: DemoProps): Element
```

**Parameters**

- `props` (`DemoProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `on` (`boolean`): The switch is on: the demo plays. Off: it dims and stands still.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/demos/autonomy.tsx:127](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/autonomy.tsx#L127)

### `SkillSourceBrowser`

Component.

Renders the skill source browser: a field, the recommended sources, and the skills of the open source.

```ts
function SkillSourceBrowser(props: SkillSourceBrowserProps): Element
```

**Parameters**

- `props` (`SkillSourceBrowserProps`): Component props.

**Returns** `Element`

**Props**

- `browse` (`(input: string) => Promise<SkillSourceListing>`): Lists a source: `browseSkillSource` in the app, over its IPC when the UI runs elsewhere.
- `className?` (`string`): Extra classes on the browser.
- `compact?` (`boolean`): The small version: the recommended sources as chips, and no preview images.
- `images?` (`SkillSourceImages`): Where the avatars and previews come from. Defaults to GitHub.
- `initial?` (`string`): A source to open at once.
- `installed?` (`readonly string[]`): Names of the skills already installed: their rows show Installed and stay checked.
- `onToggle` (`(picks: readonly SkillPick[], on: boolean) => void`): Picks or unpicks skills: one row, or a whole source.
- `picks` (`readonly SkillPick[]`): The skills picked so far, from any source.
- `sources?` (`readonly RecommendedSkillSource[]`): The sources to suggest. Defaults to `RECOMMENDED_SKILL_SOURCES`.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/skills/SkillSourceBrowser.tsx:68](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/skills/SkillSourceBrowser.tsx#L68)

### `SkillsStep`

Component.

The Skills step.

```ts
function SkillsStep(props: SkillsStepProps): Element | null
```

**Parameters**

- `props` (`SkillsStepProps`): The [`SkillsStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#SkillsStepProps).

**Returns** `Element | null`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/SkillsStep.tsx:25](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/SkillsStep.tsx#L25)

### `SourceBrowser`

Component.

Renders a source browser: a field, the recommended sources, and the rows of the open source.

```ts
function SourceBrowser<L, I, P extends SourcePick>(
  props: SourceBrowserProps<L, I, P>,
): Element
```

**Type parameters**

- `L`
- `I`
- `P` (`extends SourcePick`)

**Parameters**

- `props` (`SourceBrowserProps<L, I, P>`): Component props.

**Returns** `Element`

**Props**

- `browse` (`(input: string) => Promise<L>`): Lists a source. A rejection shows as a source that did not load, with Retry.
- `cardOf` (`(listing: L) => SourceCard`): The card over a listing's rows: its name, picture, link and description.
- `className?` (`string`): Extra classes on the browser.
- `compact?` (`boolean`): The small version: the recommended sources as chips, and no preview images.
- `failureOf?` (`(listing: L) => string | undefined`): A listing that holds why it could not be read, and nothing to show: it shows as a failed source.
- `images` (`SkillSourceImages`): Where the avatars and previews come from.
- `initial?` (`string`): A source to open at once.
- `itemsOf` (`(listing: L) => readonly I[]`): The rows of a listing.
- `noteOf?` (`(listing: L) => ReactNode`): A calm note over a listing's rows (a source out of reach, the rows from the app's own catalog).
- `onListed?` (`(listing: L) => void`): Called once per source when its listing first arrives (a preselection to pick).
- `onToggle` (`(picks: readonly P[], on: boolean) => void`): Picks or unpicks rows: one row, or a whole source.
- `pickOf` (`(item: I, listing: L) => P`): A row's pick.
- `picks` (`readonly P[]`): The picks so far, from any source.
- `renderRow` (`(row: SourceBrowserRow<L, I, P>) => ReactNode`): Draws one row.
- `searchText` (`(item: I) => readonly string[]`): The texts the filter matches on.
- `selectable` (`(item: I, listing: L) => boolean`): Whether a row can be picked (not installed yet, installable). Select all takes these.
- `sources` (`readonly RecommendedSkillSource[]`): The sources to suggest.
- `style?` (`CSSProperties`): Inline styles on the root element.
- `truncatedOf?` (`(listing: L) => boolean`): The listing stopped early.
- `words` (`SourceBrowserWords`): The words that depend on what it lists.

Source: [ui/src/onboarding/sources/SourceBrowser.tsx:136](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/sources/SourceBrowser.tsx#L136)

### `Tutorial`

Component.

Renders the tutorial of a topic: its scene, which plays the steps in turn, beside the steps.

```ts
function Tutorial(props: TutorialProps): Element
```

**Parameters**

- `props` (`TutorialProps`): Component props.

**Returns** `Element`

**Props**

- `actions?` (`ReactNode`): Buttons that act on it, such as "Build an extension".
- `className?` (`string`): Extra classes on the block.
- `host?` (`string`): The server it is about, by name: the steps that name this computer name it instead. Absent: this computer.
- `surface?` (`'tray' | 'raised'`, default `'tray'`): The block's surface (`HowItWorks`): `raised` on a bare panel.
- `topic` (`TutorialTopic`): What the tutorial explains.

Source: [ui/src/onboarding/tutorials.tsx:34](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/tutorials.tsx#L34)

### `WelcomeStep`

Component.

The Welcome step.

```ts
function WelcomeStep(props: WelcomeStepProps): Element
```

**Parameters**

- `props` (`WelcomeStepProps`): The [`WelcomeStepProps`](https://zidane.si/docs/reference/ui-onboarding.md#WelcomeStepProps).

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/WelcomeStep.tsx:96](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/WelcomeStep.tsx#L96)

## Functions

### `extensionMarkOf`

Function.

The mark of an extension: `extensionMark` of its entry, the rule every app and every row shares.

```ts
function extensionMarkOf(entry: ExtensionMarkEntry): ExtensionMark
```

**Parameters**

- `entry` (`ExtensionMarkEntry`): The extension.

**Returns** `ExtensionMark`

Source: [ui/src/onboarding/marks.tsx:71](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/marks.tsx#L71)

### `hasFeatureDemo`

Function.

Whether a feature has a demo.

```ts
function hasFeatureDemo(key: BooleanSettingKey): boolean
```

**Parameters**

- `key` (`BooleanSettingKey`): The feature's setting.

**Returns** `boolean`

Source: [ui/src/onboarding/demos/features.tsx:544](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/features.tsx#L544)

### `transcriptPreviewOptions`

Function.

The transcript options that a set of settings gives: the keys it sets, the rest left to the transcript's defaults.

```ts
function transcriptPreviewOptions(
  settings: Partial<Settings>,
): Partial<TranscriptOptions>
```

**Parameters**

- `settings` (`Partial<Settings>`): The settings to read.

**Returns** `Partial<TranscriptOptions>`

Source: [ui/src/onboarding/conversation.tsx:67](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/conversation.tsx#L67)

### `useOnboarding`

Function.

Returns the run from the nearest [`OnboardingProvider`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingProvider). Throws when called outside one.

```ts
function useOnboarding(): OnboardingRun
```

**Returns** `OnboardingRun`

Source: [ui/src/onboarding/OnboardingProvider.tsx:165](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L165)

### `useOnboardingHost`

Function.

The [`OnboardingHost`](https://zidane.si/docs/reference/ui-onboarding-headless.md#OnboardingHost) from the nearest [`OnboardingHostProvider`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingHostProvider), or `null`.

```ts
function useOnboardingHost(): OnboardingHost | null
```

**Returns** `OnboardingHost | null`

Source: [ui/src/onboarding/OnboardingProvider.tsx:57](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L57)

### `useOnboardingLabels`

Function.

Returns the wizard's strings: the defaults merged with any overrides given to [`OnboardingProvider`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingProvider) or `LabelsProvider`.

```ts
function useOnboardingLabels(): { accent: string; accentTheme: string; addDiagnosticToChat: (message: string) => string; added: string; address: string; addressPlaceholder: string; addsConnector: (connector: string) => string; addToChat: string; agentName: (agent: OnboardingAgentId) => string; allowOnce: string; allSources: string; alwaysAllow: string; apiKeyFor: (provider: string) => string; appIcon: string; approvalAsk: (command: string) => string; approvedByModel: string; askedWhenUnsure: string; back: string; background: string; browse: string; browseFailed: (message: string) => string; browsing: (source: string) => string; cancel: string; change: string; changeLater: string; changeStep: (step: string) => string; clearPicks: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; configure: string; confirm: string; connected: string; connectFirst: string; connectProviderAction: string; connectProviderBody: string; connectProviderTitle: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; createToken: string; credentialsAt: (path: string) => string; current: string; custom: string; darkTheme: string; demoAddress: string; demoAllowed: string; demoApproved: string; demoAsksYou: string; demoBlocked: string; demoBranch: string; demoCalls: string; demoCommitCommand: string; demoCommitMessage: string; demoEstimateSession: string; demoEstimateTask: string; demoFlowCalls: readonly ['read_file src/app.ts', 'edit src/limits.ts', 'bun test', 'git commit']; demoFolders: readonly ['my-app', '.zidane', 'extensions', 'deploy.ts']; demoGenericTitle: string; demoGhost: string; demoGoal: string; demoIssue: string; demoIssuePrompt: string; demoMessage: string; demoMessageCalls: readonly ['read app.ts', 'edit api.ts']; demoNotifyApp: string; demoNotifyBody: string; demoPageButton: string; demoPersonalSessions: readonly ['Plan the trip to Lisbon', 'Sort the tax receipts']; demoProjectPath: string; demoPromptGhost: string; demoPromptStart: string; demoQueued: string; demoReminderFrom: string; demoReminderIn: string; demoReminderNow: string; demoReminderText: string; demoReminderTyped: string; demoRiskyCall: string; demoRunEnded: string; demoScript: readonly ['const files = await glob(\'src/**/*.ts\')', 'for (const file of files) await read(file)']; demoSearchQuery: string; demoSearchResults: readonly ['vite.dev/guide/migration', 'github.com/vitejs/vite/releases', 'vite.dev/blog/announcing-vite6']; demoSecretDots: string; demoSecretPath: string; demoSecretPrompt: string; demoSecretSave: string; demoSecretSaved: string; demoSpacePersonal: string; demoSpaceWork: string; demoSteeredCall: string; demoStep: string; demoTab: string; demoTerminalError: string; demoTerminalLines: readonly ['$ bun dev', 'ready on localhost:5173', 'GET /chat 200 in 12 ms']; demoTitle: string; demoTyped: string; demoUpdateReady: string; demoUsageLabel: string; demoUsagePercent: string; demoVersion: string; demoWorkSessions: readonly ['Fix the login redirect', 'Review the rate limit']; deny: string; detecting: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; done: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; effort: string; effortHint: string; effortLabel: (level: NonNullable<'off' | 'max' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh' | 'adaptive' | undefined>) => string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; experimental: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; filterSkills: string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; found: string; foundAgent: (agent: OnboardingAgentId) => string; foundEnvKey: (envKey: string) => string; foundGithub: (login: string | undefined, source: string) => string; foundLocalServer: (server: OnboardingLocalServer) => string; foundSaved: (provider: string) => string; foundSignedIn: (provider: string) => string; fromImport: (agent: string) => string; fromRepo: (repo: string) => string; fullSetup: string; fullSetupDetail: string; fullSetupTime: string; goToDefinition: string; goToStep: (step: string) => string; importAgents: string; importAllProjects: string; importCommands: string; importFrom: (agent: string) => string; importMcps: string; importNames: (list: readonly string[]) => string; importNothing: string; importSessions: string; importSessionsDetail: (project: number, all: number) => string; importSkills: string; importSkipped: (count: number) => string; installed: string; installing: string; installProvider: (provider: string) => string; isDefault: (name: string) => string; lightTheme: string; listingTruncated: string; loading: string; localFound: (server: OnboardingLocalServer) => string; matchesPreset: (preset: string) => string; messagesDuringRun: string; messagesDuringRunHint: string; modalBack: string; modalFailed: string; mode: string; modeDark: string; model: string; modeLight: string; modeSystem: string; moreOptions: string; moreProviders: string; needs: (list: readonly string[]) => string; needsAccount: (account: string) => string; needsCommand: (name: string, optional: boolean) => string; needsConnector: (connector: string) => string; needsDecisions: string; next: string; noAccount: string; noGhLogin: string; noReferences: string; noSkillMatch: string; noSkills: string; noSkillsHint: string; notNow: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; pack: string; packHint: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; presetInUse: string; presetYours: string; prevents: string; preview: string; previewPresets: string; previous: string; quickStart: string; quickStartDetail: string; quickStartTime: string; readInPlaceDetail: string; readInPlaceLabel: string; readInPlaceTitle: (agents: readonly string[]) => string; readyConfigured: string; readyEnv: (envKey: string) => string; readyKey: string; readyOAuth: string; recapAccent: (accent: string) => string; recapIcon: (icon: string) => string; recapLookSystem: (dark: string, light: string) => string; recapNone: string; recapProvider: (provider: string, model?: string) => string; recapSwitched: (on: readonly string[], off: readonly string[]) => string; recommended: string; recommendedSources: string; reload: string; rename: string; retry: string; runsWithoutAsking: string; sampleCall: string; sampleCommand: string; sampleShortCommand: string; sandboxed: string; save: string; saveFailed: (message: string) => string; saving: string; sceneAddServer: string; sceneAgent: string; sceneApiKey: string; sceneBranches: readonly ['main', 'fix-login']; sceneCall: string; sceneClick: string; sceneCmdClick: string; sceneCode: string; sceneCodeTypo: string; sceneCommand: string; sceneCredentials: string; sceneDesktop: string; sceneDiagnostic: string; sceneEditor: string; sceneEnvKey: string; sceneExtensionAdds: readonly ['/standup', 'deploy', 'Panel', 'Provider']; sceneExtensionCode: readonly ['export default defineExtension({', '  name: \'hello\',', '  setup(ctx) {', '    ctx.registerCommand(\'standup\')']; sceneExtensionFile: string; sceneExtensionName: string; sceneFileName: string; sceneFilesPanel: string; sceneHost: string; sceneListening: string; sceneLocal: string; sceneMcpFile: string; sceneNeedsTrust: string; sceneNewRun: string; sceneOnlyYou: string; sceneOr: string; scenePath: string; sceneProjectExtension: string; scenePromptParts: readonly ['zidane rules', 'AGENTS.md', 'MCP servers', 'Skills']; scenePromptTokens: readonly ['2.1k', '640', '320', '410']; sceneProvider: string; sceneResult: string; sceneSandbox: string; sceneSandboxes: readonly ['Docker', 'E2B', 'Daytona']; sceneSaved: string; sceneSecretCommand: string; sceneSecretDots: string; sceneSecretName: string; sceneSecretOutput: string; sceneSecretPrompt: string; sceneSecretSave: string; sceneSecretsFolder: string; sceneSecretTtl: string; sceneServer: string; sceneServerStart: string; sceneService: string; sceneSession: string; sceneSignedIn: string; sceneSkillAbouts: readonly ['Test first', 'Read PDFs']; sceneSkillNames: readonly ['tdd', 'pdf', 'docx']; sceneSkillPrompt: string; sceneSkillsFolder: string; sceneSkillUsing: string; sceneSystemFile: string; sceneSystemPrompt: string; sceneTerminal: string; sceneToken: string; sceneTokenCreate: string; sceneWorktree: string; sceneWss: string; sceneZidaneFolder: string; screenBack: (screen: string) => string; screenBackKey: string; selectAll: string; setup: string; signIn: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; signInWith: (account: string) => string; skillCount: (count: number) => string; skillsPicked: (count: number) => string; skip: string; skipSetup: string; sourceChipName: (label: string, picked: number) => string; sourceField: string; sourceName: (label: string, repo: string) => string; sourcePlaceholder: string; spendCap: string; spendCapDetail: string; stars: (count: number) => string; start: string; stepLabel: (step: OnboardingStepId) => string; stepLede: (step: OnboardingStepId) => string; stepOf: (index: number, count: number) => string; steps: string; stepTitle: (step: OnboardingStepId) => string; taskDone: string; taskFailed: string; taskNeedsSignIn: string; taskQueued: string; taskRunning: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; testAgain: string; testFailed: string; testing: string; testOk: (model: string, seconds: string) => string; toAdd: (count: number) => string; toInstall: (count: number) => string; tokenFor: (connector: string) => string; tokenOptional: string; tokenOptionalAuth: string; tokenOrGhLogin: string; tokenSignIn: string; tutorialOnServer: (topic: TutorialTopic, host: string) => TutorialWords; tutorials: Readonly<Record<TutorialTopic, TutorialWords>>; unlocks: string; useApiKey: string; usedIn: (step: string) => string; useGhLogin: string; usePreset: (preset: string) => string; usesGhLogin: (login?: string) => string; useSignIn: string; usesTokens: string; useToken: string; viaExtension: string; viewOnGithub: string; viewOnNpm: string; whatYoullSee: string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }
```

**Returns** `{ accent: string; accentTheme: string; addDiagnosticToChat: (message: string) => string; added: string; address: string; addressPlaceholder: string; addsConnector: (connector: string) => string; addToChat: string; agentName: (agent: OnboardingAgentId) => string; allowOnce: string; allSources: string; alwaysAllow: string; apiKeyFor: (provider: string) => string; appIcon: string; approvalAsk: (command: string) => string; approvedByModel: string; askedWhenUnsure: string; back: string; background: string; browse: string; browseFailed: (message: string) => string; browsing: (source: string) => string; cancel: string; change: string; changeLater: string; changeStep: (step: string) => string; clearPicks: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; configure: string; confirm: string; connected: string; connectFirst: string; connectProviderAction: string; connectProviderBody: string; connectProviderTitle: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; createToken: string; credentialsAt: (path: string) => string; current: string; custom: string; darkTheme: string; demoAddress: string; demoAllowed: string; demoApproved: string; demoAsksYou: string; demoBlocked: string; demoBranch: string; demoCalls: string; demoCommitCommand: string; demoCommitMessage: string; demoEstimateSession: string; demoEstimateTask: string; demoFlowCalls: readonly ['read_file src/app.ts', 'edit src/limits.ts', 'bun test', 'git commit']; demoFolders: readonly ['my-app', '.zidane', 'extensions', 'deploy.ts']; demoGenericTitle: string; demoGhost: string; demoGoal: string; demoIssue: string; demoIssuePrompt: string; demoMessage: string; demoMessageCalls: readonly ['read app.ts', 'edit api.ts']; demoNotifyApp: string; demoNotifyBody: string; demoPageButton: string; demoPersonalSessions: readonly ['Plan the trip to Lisbon', 'Sort the tax receipts']; demoProjectPath: string; demoPromptGhost: string; demoPromptStart: string; demoQueued: string; demoReminderFrom: string; demoReminderIn: string; demoReminderNow: string; demoReminderText: string; demoReminderTyped: string; demoRiskyCall: string; demoRunEnded: string; demoScript: readonly ['const files = await glob(\'src/**/*.ts\')', 'for (const file of files) await read(file)']; demoSearchQuery: string; demoSearchResults: readonly ['vite.dev/guide/migration', 'github.com/vitejs/vite/releases', 'vite.dev/blog/announcing-vite6']; demoSecretDots: string; demoSecretPath: string; demoSecretPrompt: string; demoSecretSave: string; demoSecretSaved: string; demoSpacePersonal: string; demoSpaceWork: string; demoSteeredCall: string; demoStep: string; demoTab: string; demoTerminalError: string; demoTerminalLines: readonly ['$ bun dev', 'ready on localhost:5173', 'GET /chat 200 in 12 ms']; demoTitle: string; demoTyped: string; demoUpdateReady: string; demoUsageLabel: string; demoUsagePercent: string; demoVersion: string; demoWorkSessions: readonly ['Fix the login redirect', 'Review the rate limit']; deny: string; detecting: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; done: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; effort: string; effortHint: string; effortLabel: (level: NonNullable<'off' | 'max' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh' | 'adaptive' | undefined>) => string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; experimental: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; filterSkills: string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; found: string; foundAgent: (agent: OnboardingAgentId) => string; foundEnvKey: (envKey: string) => string; foundGithub: (login: string | undefined, source: string) => string; foundLocalServer: (server: OnboardingLocalServer) => string; foundSaved: (provider: string) => string; foundSignedIn: (provider: string) => string; fromImport: (agent: string) => string; fromRepo: (repo: string) => string; fullSetup: string; fullSetupDetail: string; fullSetupTime: string; goToDefinition: string; goToStep: (step: string) => string; importAgents: string; importAllProjects: string; importCommands: string; importFrom: (agent: string) => string; importMcps: string; importNames: (list: readonly string[]) => string; importNothing: string; importSessions: string; importSessionsDetail: (project: number, all: number) => string; importSkills: string; importSkipped: (count: number) => string; installed: string; installing: string; installProvider: (provider: string) => string; isDefault: (name: string) => string; lightTheme: string; listingTruncated: string; loading: string; localFound: (server: OnboardingLocalServer) => string; matchesPreset: (preset: string) => string; messagesDuringRun: string; messagesDuringRunHint: string; modalBack: string; modalFailed: string; mode: string; modeDark: string; model: string; modeLight: string; modeSystem: string; moreOptions: string; moreProviders: string; needs: (list: readonly string[]) => string; needsAccount: (account: string) => string; needsCommand: (name: string, optional: boolean) => string; needsConnector: (connector: string) => string; needsDecisions: string; next: string; noAccount: string; noGhLogin: string; noReferences: string; noSkillMatch: string; noSkills: string; noSkillsHint: string; notNow: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; pack: string; packHint: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; presetInUse: string; presetYours: string; prevents: string; preview: string; previewPresets: string; previous: string; quickStart: string; quickStartDetail: string; quickStartTime: string; readInPlaceDetail: string; readInPlaceLabel: string; readInPlaceTitle: (agents: readonly string[]) => string; readyConfigured: string; readyEnv: (envKey: string) => string; readyKey: string; readyOAuth: string; recapAccent: (accent: string) => string; recapIcon: (icon: string) => string; recapLookSystem: (dark: string, light: string) => string; recapNone: string; recapProvider: (provider: string, model?: string) => string; recapSwitched: (on: readonly string[], off: readonly string[]) => string; recommended: string; recommendedSources: string; reload: string; rename: string; retry: string; runsWithoutAsking: string; sampleCall: string; sampleCommand: string; sampleShortCommand: string; sandboxed: string; save: string; saveFailed: (message: string) => string; saving: string; sceneAddServer: string; sceneAgent: string; sceneApiKey: string; sceneBranches: readonly ['main', 'fix-login']; sceneCall: string; sceneClick: string; sceneCmdClick: string; sceneCode: string; sceneCodeTypo: string; sceneCommand: string; sceneCredentials: string; sceneDesktop: string; sceneDiagnostic: string; sceneEditor: string; sceneEnvKey: string; sceneExtensionAdds: readonly ['/standup', 'deploy', 'Panel', 'Provider']; sceneExtensionCode: readonly ['export default defineExtension({', '  name: \'hello\',', '  setup(ctx) {', '    ctx.registerCommand(\'standup\')']; sceneExtensionFile: string; sceneExtensionName: string; sceneFileName: string; sceneFilesPanel: string; sceneHost: string; sceneListening: string; sceneLocal: string; sceneMcpFile: string; sceneNeedsTrust: string; sceneNewRun: string; sceneOnlyYou: string; sceneOr: string; scenePath: string; sceneProjectExtension: string; scenePromptParts: readonly ['zidane rules', 'AGENTS.md', 'MCP servers', 'Skills']; scenePromptTokens: readonly ['2.1k', '640', '320', '410']; sceneProvider: string; sceneResult: string; sceneSandbox: string; sceneSandboxes: readonly ['Docker', 'E2B', 'Daytona']; sceneSaved: string; sceneSecretCommand: string; sceneSecretDots: string; sceneSecretName: string; sceneSecretOutput: string; sceneSecretPrompt: string; sceneSecretSave: string; sceneSecretsFolder: string; sceneSecretTtl: string; sceneServer: string; sceneServerStart: string; sceneService: string; sceneSession: string; sceneSignedIn: string; sceneSkillAbouts: readonly ['Test first', 'Read PDFs']; sceneSkillNames: readonly ['tdd', 'pdf', 'docx']; sceneSkillPrompt: string; sceneSkillsFolder: string; sceneSkillUsing: string; sceneSystemFile: string; sceneSystemPrompt: string; sceneTerminal: string; sceneToken: string; sceneTokenCreate: string; sceneWorktree: string; sceneWss: string; sceneZidaneFolder: string; screenBack: (screen: string) => string; screenBackKey: string; selectAll: string; setup: string; signIn: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; signInWith: (account: string) => string; skillCount: (count: number) => string; skillsPicked: (count: number) => string; skip: string; skipSetup: string; sourceChipName: (label: string, picked: number) => string; sourceField: string; sourceName: (label: string, repo: string) => string; sourcePlaceholder: string; spendCap: string; spendCapDetail: string; stars: (count: number) => string; start: string; stepLabel: (step: OnboardingStepId) => string; stepLede: (step: OnboardingStepId) => string; stepOf: (index: number, count: number) => string; steps: string; stepTitle: (step: OnboardingStepId) => string; taskDone: string; taskFailed: string; taskNeedsSignIn: string; taskQueued: string; taskRunning: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; testAgain: string; testFailed: string; testing: string; testOk: (model: string, seconds: string) => string; toAdd: (count: number) => string; toInstall: (count: number) => string; tokenFor: (connector: string) => string; tokenOptional: string; tokenOptionalAuth: string; tokenOrGhLogin: string; tokenSignIn: string; tutorialOnServer: (topic: TutorialTopic, host: string) => TutorialWords; tutorials: Readonly<Record<TutorialTopic, TutorialWords>>; unlocks: string; useApiKey: string; usedIn: (step: string) => string; useGhLogin: string; usePreset: (preset: string) => string; usesGhLogin: (login?: string) => string; useSignIn: string; usesTokens: string; useToken: string; viaExtension: string; viewOnGithub: string; viewOnNpm: string; whatYoullSee: string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }`

Source: [ui/src/onboarding/OnboardingProvider.tsx:174](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L174)

### `useOnboardingStep`

Function.

Returns the current step and the moves out of it.

```ts
function useOnboardingStep(): OnboardingStepNav
```

**Returns** `OnboardingStepNav`

Source: [ui/src/onboarding/OnboardingProvider.tsx:198](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L198)

### `useSignIn`

Function.

Follows one browser sign-in at a time.

```ts
function useSignIn(onDone?: (account?: string) => void): SignInHandle
```

**Parameters**

- `onDone?` (`(account?: string) => void`): Called once when a sign-in ends signed in.

**Returns** `SignInHandle`

Source: [ui/src/onboarding/useSignIn.ts:33](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/useSignIn.ts#L33)

## Constants

### `GITHUB_SKILL_SOURCE_IMAGES`

Constant.

The pictures of GitHub: owner avatars and repository previews.

```ts
const GITHUB_SKILL_SOURCE_IMAGES: SkillSourceImages
```

Source: [ui/src/onboarding/skills/SkillSourceBrowser.tsx:29](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/skills/SkillSourceBrowser.tsx#L29)

### `NATIVE_EXTENSION_ICONS`

Constant.

The icons of the native extensions, by name (their catalog `icon.gui`).

```ts
const NATIVE_EXTENSION_ICONS: Readonly<Record<string, string>>
```

Source: [ui/src/onboarding/marks.tsx:21](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/marks.tsx#L21)

### `ONBOARDING_STEP_COMPONENTS`

Constant.

The component of each step, as [`OnboardingFlow`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingFlow) renders them.

```ts
const ONBOARDING_STEP_COMPONENTS: Readonly<Record<OnboardingStepId, ComponentType>>
```

Source: [ui/src/onboarding/OnboardingFlow.tsx:29](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingFlow.tsx#L29)

### `TUTORIAL_SCENES`

Constant.

The scene of each tutorial.

```ts
const TUTORIAL_SCENES: Readonly<Record<TutorialTopic, ComponentType<SceneProps>>>
```

Source: [ui/src/onboarding/demos/how-it-works.tsx:753](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/how-it-works.tsx#L753)

## Interfaces

### `AutonomyStepProps`

Interface.

Props of [`AutonomyStep`](https://zidane.si/docs/reference/ui-onboarding.md#AutonomyStep).

```ts
interface AutonomyStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/AutonomyStep.tsx:34](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/AutonomyStep.tsx#L34)

### `ConnectorsStepProps`

Interface.

Props of [`ConnectorsStep`](https://zidane.si/docs/reference/ui-onboarding.md#ConnectorsStep).

```ts
interface ConnectorsStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ConnectorsStep.tsx:36](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ConnectorsStep.tsx#L36)

### `ConnectProviderCardProps`

Interface.

Props of [`ConnectProviderCard`](https://zidane.si/docs/reference/ui-onboarding.md#ConnectProviderCard): the attributes of its `div`, plus `onConnect`.

```ts
interface ConnectProviderCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>
```

**Properties**

- `onConnect` (`() => void`): Opens Connect: the wizard in `connect` mode, or the app's own provider setup.

Source: [ui/src/onboarding/ConnectProviderCard.tsx:16](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/ConnectProviderCard.tsx#L16)

### `ConnectStepProps`

Interface.

Props of [`ConnectStep`](https://zidane.si/docs/reference/ui-onboarding.md#ConnectStep).

```ts
interface ConnectStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ConnectStep.tsx:19](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ConnectStep.tsx#L19)

### `ConversationPresetPreviewProps`

Interface.

Props of [`ConversationPresetPreview`](https://zidane.si/docs/reference/ui-onboarding.md#ConversationPresetPreview).

```ts
interface ConversationPresetPreviewProps
```

**Properties**

- `className?` (`string`): Extra classes on the block.
- `maxHeight?` (`number`): The height of the preview's scroller, in pixels.
- `onApply` (`(preset: TranscriptPresetId) => void`): Applies a preset: every setting of `transcriptPreset(id).settings`.
- `settings` (`Partial<Settings>`): The settings in effect.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/conversation.tsx:115](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/conversation.tsx#L115)

### `ConversationPreviewProps`

Interface.

Props of [`ConversationPreview`](https://zidane.si/docs/reference/ui-onboarding.md#ConversationPreview).

```ts
interface ConversationPreviewProps
```

**Properties**

- `className?` (`string`): Extra classes on the window.
- `maxHeight?` (`number`): The height of the window's scroller, in pixels.
- `settings` (`Partial<Settings>`): The settings to draw the sample with.
- `style?` (`CSSProperties`): Inline styles on the root element.
- `title?` (`string`): The caption of the window. Defaults to the `preview` label.

Source: [ui/src/onboarding/conversation.tsx:74](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/conversation.tsx#L74)

### `ConversationStepProps`

Interface.

Props of [`ConversationStep`](https://zidane.si/docs/reference/ui-onboarding.md#ConversationStep).

```ts
interface ConversationStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ConversationStep.tsx:54](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ConversationStep.tsx#L54)

### `DemoProps`

Interface.

What every demo takes: whether the switch it shows is on.

```ts
interface DemoProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `on` (`boolean`): The switch is on: the demo plays. Off: it dims and stands still.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/demos/parts.tsx:10](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/parts.tsx#L10)

### `ExtensionMarkEntry`

Interface.

The extension an [`ExtensionMark`](https://zidane.si/docs/reference/ui-onboarding.md#ExtensionMark) draws.

```ts
interface ExtensionMarkEntry
```

**Properties**

- `brand?` (`string`): A logo a listing gives it (a Simple Icons slug), read after its own icon.
- `icon?` (`{ gui?: string; tui?: string }`): Its own icon (definition or manifest), which wins over everything.
- `label?` (`string`): Its display name. Absent: the catalog's label, else `name`.
- `name` (`string`): Its id (folder name), which also finds its native catalog entry.

Source: [ui/src/onboarding/marks.tsx:55](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/marks.tsx#L55)

### `ExtensionMarkProps`

Interface.

Props of [`ExtensionMark`](https://zidane.si/docs/reference/ui-onboarding.md#ExtensionMark).

```ts
interface ExtensionMarkProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `entry` (`ExtensionMarkEntry`): The extension: its name, display name, own icon and logo.
- `size?` (`BrandMarkSize`): 18, 28 or 40 pixels, or one em (`xs`, the settings nav's icon box).

Source: [ui/src/onboarding/marks.tsx:81](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/marks.tsx#L81)

### `ExtensionsStepProps`

Interface.

Props of [`ExtensionsStep`](https://zidane.si/docs/reference/ui-onboarding.md#ExtensionsStep).

```ts
interface ExtensionsStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ExtensionsStep.tsx:31](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ExtensionsStep.tsx#L31)

### `FeaturesStepProps`

Interface.

Props of [`FeaturesStep`](https://zidane.si/docs/reference/ui-onboarding.md#FeaturesStep).

```ts
interface FeaturesStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/FeaturesStep.tsx:25](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/FeaturesStep.tsx#L25)

### `ImportStepProps`

Interface.

Props of [`ImportStep`](https://zidane.si/docs/reference/ui-onboarding.md#ImportStep).

```ts
interface ImportStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ImportStep.tsx:28](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ImportStep.tsx#L28)

### `LookStepProps`

Interface.

Props of [`LookStep`](https://zidane.si/docs/reference/ui-onboarding.md#LookStep).

```ts
interface LookStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/LookStep.tsx:128](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/LookStep.tsx#L128)

### `OnboardingFlowProps`

Interface.

Props of [`OnboardingFlow`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingFlow).

```ts
interface OnboardingFlowProps
```

**Properties**

- `className?` (`string`): Extra classes on the flow.
- `header?` (`ReactNode`): Shown above the rail, such as the app's name.
- `label?` (`string`): Accessible name of the progress, for a page that shows more than one flow. Defaults to the `steps` label.
- `steps?` (`Partial<Record<OnboardingStepId, ComponentType>>`): Components that replace the built-in steps, by step.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/OnboardingFlow.tsx:66](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingFlow.tsx#L66)

### `OnboardingHostProviderProps`

Interface.

Props for [`OnboardingHostProvider`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingHostProvider).

```ts
interface OnboardingHostProviderProps
```

**Properties**

- `children` (`ReactNode`): The app.
- `host` (`OnboardingHost`): The host the `OnboardingProvider`s below run on when they are given none.

Source: [ui/src/onboarding/OnboardingProvider.tsx:39](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L39)

### `OnboardingProviderProps`

Interface.

Props of [`OnboardingProvider`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingProvider).

```ts
interface OnboardingProviderProps
```

**Properties**

- `children` (`ReactNode`): The flow, or your own steps.
- `fallback?` (`ReactNode`): Shown while the host is still detecting. Defaults to a quiet "Looking around" line.
- `host?` (`OnboardingHost`): The app's host: what the run reads and the actions it asks for. Default: the [`OnboardingHostProvider`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingHostProvider)'s.
- `labels?` (`Partial<{ accent: string; accentTheme: string; addDiagnosticToChat: (message: string) => string; added: string; address: string; addressPlaceholder: string; addsConnector: (connector: string) => string; addToChat: string; agentName: (agent: OnboardingAgentId) => string; allowOnce: string; allSources: string; alwaysAllow: string; apiKeyFor: (provider: string) => string; appIcon: string; approvalAsk: (command: string) => string; approvedByModel: string; askedWhenUnsure: string; back: string; background: string; browse: string; browseFailed: (message: string) => string; browsing: (source: string) => string; cancel: string; change: string; changeLater: string; changeStep: (step: string) => string; clearPicks: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; configure: string; confirm: string; connected: string; connectFirst: string; connectProviderAction: string; connectProviderBody: string; connectProviderTitle: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; createToken: string; credentialsAt: (path: string) => string; current: string; custom: string; darkTheme: string; demoAddress: string; demoAllowed: string; demoApproved: string; demoAsksYou: string; demoBlocked: string; demoBranch: string; demoCalls: string; demoCommitCommand: string; demoCommitMessage: string; demoEstimateSession: string; demoEstimateTask: string; demoFlowCalls: readonly ['read_file src/app.ts', 'edit src/limits.ts', 'bun test', 'git commit']; demoFolders: readonly ['my-app', '.zidane', 'extensions', 'deploy.ts']; demoGenericTitle: string; demoGhost: string; demoGoal: string; demoIssue: string; demoIssuePrompt: string; demoMessage: string; demoMessageCalls: readonly ['read app.ts', 'edit api.ts']; demoNotifyApp: string; demoNotifyBody: string; demoPageButton: string; demoPersonalSessions: readonly ['Plan the trip to Lisbon', 'Sort the tax receipts']; demoProjectPath: string; demoPromptGhost: string; demoPromptStart: string; demoQueued: string; demoReminderFrom: string; demoReminderIn: string; demoReminderNow: string; demoReminderText: string; demoReminderTyped: string; demoRiskyCall: string; demoRunEnded: string; demoScript: readonly ['const files = await glob(\'src/**/*.ts\')', 'for (const file of files) await read(file)']; demoSearchQuery: string; demoSearchResults: readonly ['vite.dev/guide/migration', 'github.com/vitejs/vite/releases', 'vite.dev/blog/announcing-vite6']; demoSecretDots: string; demoSecretPath: string; demoSecretPrompt: string; demoSecretSave: string; demoSecretSaved: string; demoSpacePersonal: string; demoSpaceWork: string; demoSteeredCall: string; demoStep: string; demoTab: string; demoTerminalError: string; demoTerminalLines: readonly ['$ bun dev', 'ready on localhost:5173', 'GET /chat 200 in 12 ms']; demoTitle: string; demoTyped: string; demoUpdateReady: string; demoUsageLabel: string; demoUsagePercent: string; demoVersion: string; demoWorkSessions: readonly ['Fix the login redirect', 'Review the rate limit']; deny: string; detecting: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; done: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; effort: string; effortHint: string; effortLabel: (level: NonNullable<'off' | 'max' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh' | 'adaptive' | undefined>) => string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; experimental: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; filterSkills: string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; found: string; foundAgent: (agent: OnboardingAgentId) => string; foundEnvKey: (envKey: string) => string; foundGithub: (login: string | undefined, source: string) => string; foundLocalServer: (server: OnboardingLocalServer) => string; foundSaved: (provider: string) => string; foundSignedIn: (provider: string) => string; fromImport: (agent: string) => string; fromRepo: (repo: string) => string; fullSetup: string; fullSetupDetail: string; fullSetupTime: string; goToDefinition: string; goToStep: (step: string) => string; importAgents: string; importAllProjects: string; importCommands: string; importFrom: (agent: string) => string; importMcps: string; importNames: (list: readonly string[]) => string; importNothing: string; importSessions: string; importSessionsDetail: (project: number, all: number) => string; importSkills: string; importSkipped: (count: number) => string; installed: string; installing: string; installProvider: (provider: string) => string; isDefault: (name: string) => string; lightTheme: string; listingTruncated: string; loading: string; localFound: (server: OnboardingLocalServer) => string; matchesPreset: (preset: string) => string; messagesDuringRun: string; messagesDuringRunHint: string; modalBack: string; modalFailed: string; mode: string; modeDark: string; model: string; modeLight: string; modeSystem: string; moreOptions: string; moreProviders: string; needs: (list: readonly string[]) => string; needsAccount: (account: string) => string; needsCommand: (name: string, optional: boolean) => string; needsConnector: (connector: string) => string; needsDecisions: string; next: string; noAccount: string; noGhLogin: string; noReferences: string; noSkillMatch: string; noSkills: string; noSkillsHint: string; notNow: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; pack: string; packHint: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; presetInUse: string; presetYours: string; prevents: string; preview: string; previewPresets: string; previous: string; quickStart: string; quickStartDetail: string; quickStartTime: string; readInPlaceDetail: string; readInPlaceLabel: string; readInPlaceTitle: (agents: readonly string[]) => string; readyConfigured: string; readyEnv: (envKey: string) => string; readyKey: string; readyOAuth: string; recapAccent: (accent: string) => string; recapIcon: (icon: string) => string; recapLookSystem: (dark: string, light: string) => string; recapNone: string; recapProvider: (provider: string, model?: string) => string; recapSwitched: (on: readonly string[], off: readonly string[]) => string; recommended: string; recommendedSources: string; reload: string; rename: string; retry: string; runsWithoutAsking: string; sampleCall: string; sampleCommand: string; sampleShortCommand: string; sandboxed: string; save: string; saveFailed: (message: string) => string; saving: string; sceneAddServer: string; sceneAgent: string; sceneApiKey: string; sceneBranches: readonly ['main', 'fix-login']; sceneCall: string; sceneClick: string; sceneCmdClick: string; sceneCode: string; sceneCodeTypo: string; sceneCommand: string; sceneCredentials: string; sceneDesktop: string; sceneDiagnostic: string; sceneEditor: string; sceneEnvKey: string; sceneExtensionAdds: readonly ['/standup', 'deploy', 'Panel', 'Provider']; sceneExtensionCode: readonly ['export default defineExtension({', '  name: \'hello\',', '  setup(ctx) {', '    ctx.registerCommand(\'standup\')']; sceneExtensionFile: string; sceneExtensionName: string; sceneFileName: string; sceneFilesPanel: string; sceneHost: string; sceneListening: string; sceneLocal: string; sceneMcpFile: string; sceneNeedsTrust: string; sceneNewRun: string; sceneOnlyYou: string; sceneOr: string; scenePath: string; sceneProjectExtension: string; scenePromptParts: readonly ['zidane rules', 'AGENTS.md', 'MCP servers', 'Skills']; scenePromptTokens: readonly ['2.1k', '640', '320', '410']; sceneProvider: string; sceneResult: string; sceneSandbox: string; sceneSandboxes: readonly ['Docker', 'E2B', 'Daytona']; sceneSaved: string; sceneSecretCommand: string; sceneSecretDots: string; sceneSecretName: string; sceneSecretOutput: string; sceneSecretPrompt: string; sceneSecretSave: string; sceneSecretsFolder: string; sceneSecretTtl: string; sceneServer: string; sceneServerStart: string; sceneService: string; sceneSession: string; sceneSignedIn: string; sceneSkillAbouts: readonly ['Test first', 'Read PDFs']; sceneSkillNames: readonly ['tdd', 'pdf', 'docx']; sceneSkillPrompt: string; sceneSkillsFolder: string; sceneSkillUsing: string; sceneSystemFile: string; sceneSystemPrompt: string; sceneTerminal: string; sceneToken: string; sceneTokenCreate: string; sceneWorktree: string; sceneWss: string; sceneZidaneFolder: string; screenBack: (screen: string) => string; screenBackKey: string; selectAll: string; setup: string; signIn: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; signInWith: (account: string) => string; skillCount: (count: number) => string; skillsPicked: (count: number) => string; skip: string; skipSetup: string; sourceChipName: (label: string, picked: number) => string; sourceField: string; sourceName: (label: string, repo: string) => string; sourcePlaceholder: string; spendCap: string; spendCapDetail: string; stars: (count: number) => string; start: string; stepLabel: (step: OnboardingStepId) => string; stepLede: (step: OnboardingStepId) => string; stepOf: (index: number, count: number) => string; steps: string; stepTitle: (step: OnboardingStepId) => string; taskDone: string; taskFailed: string; taskNeedsSignIn: string; taskQueued: string; taskRunning: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; testAgain: string; testFailed: string; testing: string; testOk: (model: string, seconds: string) => string; toAdd: (count: number) => string; toInstall: (count: number) => string; tokenFor: (connector: string) => string; tokenOptional: string; tokenOptionalAuth: string; tokenOrGhLogin: string; tokenSignIn: string; tutorialOnServer: (topic: TutorialTopic, host: string) => TutorialWords; tutorials: Readonly<Record<TutorialTopic, TutorialWords>>; unlocks: string; useApiKey: string; usedIn: (step: string) => string; useGhLogin: string; usePreset: (preset: string) => string; usesGhLogin: (login?: string) => string; useSignIn: string; usesTokens: string; useToken: string; viaExtension: string; viewOnGithub: string; viewOnNpm: string; whatYoullSee: string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }>`): Overrides for the wizard's strings. Keys you leave out keep the default English label.
- `onDone?` (`(result: OnboardingResult) => void`): Called once the result is saved: close the wizard here.
- `start?` (`OnboardingStepId`): Opens the run at this step instead of its first, when the run has it.

Source: [ui/src/onboarding/OnboardingProvider.tsx:62](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L62)

### `OnboardingRun`

Interface.

The run in context, from the nearest [`OnboardingProvider`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingProvider).

```ts
interface OnboardingRun
```

**Properties**

- `controller` (`OnboardingRun`): The run's controller.
- `dispatch` (`(action: OnboardingAction) => void`): Applies an action to the run.
- `host` (`OnboardingHost`): The app's host.
- `phase` (`OnboardingPhase`): Where the run is in its life.
- `setup` (`OnboardingSetup`): What the run started from, kept current by the host.
- `state` (`OnboardingFlowState`): The run: steps, picks and background tasks.

Source: [ui/src/onboarding/OnboardingProvider.tsx:149](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L149)

### `OnboardingStepFrameProps`

Interface.

Props of [`OnboardingStepFrame`](https://zidane.si/docs/reference/ui-onboarding.md#OnboardingStepFrame).

```ts
interface OnboardingStepFrameProps
```

**Properties**

- `aside?` (`ReactNode`): A live preview beside the body.
- `busy?` (`boolean`): Continue is working.
- `children?` (`ReactNode`): The step's body.
- `className?` (`string`): Extra classes on the root element.
- `continueDisabled?` (`boolean`): The user cannot press Continue yet.
- `continueLabel?` (`ReactNode`): Text of the Continue button. Defaults to Continue. On the last step, it defaults to Start, or Done for Connect alone.
- `note?` (`ReactNode`): Muted text before the buttons, such as why Continue is off.
- `onContinue?` (`() => void`): Runs instead of moving on.

Source: [ui/src/onboarding/OnboardingStepFrame.tsx:15](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingStepFrame.tsx#L15)

### `OnboardingStepNav`

Interface.

The current step and the moves out of it, for a step's footer.

```ts
interface OnboardingStepNav
```

**Properties**

- `back?` (`() => void`): Goes to the previous step. Absent on the first one.
- `count` (`number`): The number of steps in the run.
- `index` (`number`): Its position in the run, from 0.
- `last` (`boolean`): The last step: moving on saves the result.
- `next` (`() => void`): Moves on.
- `skip?` (`() => void`): Puts the picks of the step back and moves on. Absent when the user cannot skip the step.
- `step` (`OnboardingStepId`): The current step.

Source: [ui/src/onboarding/OnboardingProvider.tsx:180](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/OnboardingProvider.tsx#L180)

### `ProviderMarkProps`

Interface.

Props of [`ProviderMark`](https://zidane.si/docs/reference/ui-onboarding.md#ProviderMark).

```ts
interface ProviderMarkProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `provider` (`Pick<OnboardingProvider, 'key' | 'label' | 'brand' | 'viaExtension'>`): The provider.
- `size?` (`BrandMarkSize`): 18, 28 or 40 pixels.

Source: [ui/src/onboarding/marks.tsx:26](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/marks.tsx#L26)

### `ReadyStepProps`

Interface.

Props of [`ReadyStep`](https://zidane.si/docs/reference/ui-onboarding.md#ReadyStep).

```ts
interface ReadyStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/ReadyStep.tsx:147](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/ReadyStep.tsx#L147)

### `SceneProps`

Interface.

What every tutorial scene takes.

```ts
interface SceneProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `step` (`number`): The step on show, from 0.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/demos/tour.tsx:13](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/demos/tour.tsx#L13)

### `SignInHandle`

Interface.

A sign-in a component runs.

```ts
interface SignInHandle
```

**Properties**

- `cancel` (`() => void`): Stops the sign-in and forgets it.
- `start` (`(begin: () => SignInFlow) => void`): Starts a sign-in, replacing one in progress.
- `state` (`OnboardingSignInState | null`): Where the sign-in is. It is `null` before the sign-in starts.
- `submit?` (`(text: string) => void`): Answers a question or passes a pasted code. Absent: the flow takes no input.

Source: [ui/src/onboarding/useSignIn.ts:17](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/useSignIn.ts#L17)

### `SkillSourceBrowserProps`

Interface.

Props of [`SkillSourceBrowser`](https://zidane.si/docs/reference/ui-onboarding.md#SkillSourceBrowser).

```ts
interface SkillSourceBrowserProps
```

**Properties**

- `browse` (`(input: string) => Promise<SkillSourceListing>`): Lists a source: `browseSkillSource` in the app, over its IPC when the UI runs elsewhere.
- `className?` (`string`): Extra classes on the browser.
- `compact?` (`boolean`): The small version: the recommended sources as chips, and no preview images.
- `images?` (`SkillSourceImages`): Where the avatars and previews come from. Defaults to GitHub.
- `initial?` (`string`): A source to open at once.
- `installed?` (`readonly string[]`): Names of the skills already installed: their rows show Installed and stay checked.
- `onToggle` (`(picks: readonly SkillPick[], on: boolean) => void`): Picks or unpicks skills: one row, or a whole source.
- `picks` (`readonly SkillPick[]`): The skills picked so far, from any source.
- `sources?` (`readonly RecommendedSkillSource[]`): The sources to suggest. Defaults to `RECOMMENDED_SKILL_SOURCES`.
- `style?` (`CSSProperties`): Inline styles on the root element.

Source: [ui/src/onboarding/skills/SkillSourceBrowser.tsx:40](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/skills/SkillSourceBrowser.tsx#L40)

### `SkillsStepProps`

Interface.

Props of [`SkillsStep`](https://zidane.si/docs/reference/ui-onboarding.md#SkillsStep).

```ts
interface SkillsStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/SkillsStep.tsx:15](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/SkillsStep.tsx#L15)

### `SourceBrowserProps`

Interface.

Props of [`SourceBrowser`](https://zidane.si/docs/reference/ui-onboarding.md#SourceBrowser).

```ts
interface SourceBrowserProps<L, I, P extends SourcePick>
```

**Type parameters**

- `L`
- `I`
- `P` (`extends SourcePick`)

**Properties**

- `browse` (`(input: string) => Promise<L>`): Lists a source. A rejection shows as a source that did not load, with Retry.
- `cardOf` (`(listing: L) => SourceCard`): The card over a listing's rows: its name, picture, link and description.
- `className?` (`string`): Extra classes on the browser.
- `compact?` (`boolean`): The small version: the recommended sources as chips, and no preview images.
- `failureOf?` (`(listing: L) => string | undefined`): A listing that holds why it could not be read, and nothing to show: it shows as a failed source.
- `images` (`SkillSourceImages`): Where the avatars and previews come from.
- `initial?` (`string`): A source to open at once.
- `itemsOf` (`(listing: L) => readonly I[]`): The rows of a listing.
- `noteOf?` (`(listing: L) => ReactNode`): A calm note over a listing's rows (a source out of reach, the rows from the app's own catalog).
- `onListed?` (`(listing: L) => void`): Called once per source when its listing first arrives (a preselection to pick).
- `onToggle` (`(picks: readonly P[], on: boolean) => void`): Picks or unpicks rows: one row, or a whole source.
- `pickOf` (`(item: I, listing: L) => P`): A row's pick.
- `picks` (`readonly P[]`): The picks so far, from any source.
- `renderRow` (`(row: SourceBrowserRow<L, I, P>) => ReactNode`): Draws one row.
- `searchText` (`(item: I) => readonly string[]`): The texts the filter matches on.
- `selectable` (`(item: I, listing: L) => boolean`): Whether a row can be picked (not installed yet, installable). Select all takes these.
- `sources` (`readonly RecommendedSkillSource[]`): The sources to suggest.
- `style?` (`CSSProperties`): Inline styles on the root element.
- `truncatedOf?` (`(listing: L) => boolean`): The listing stopped early.
- `words` (`SourceBrowserWords`): The words that depend on what it lists.

Source: [ui/src/onboarding/sources/SourceBrowser.tsx:88](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/sources/SourceBrowser.tsx#L88)

### `SourceBrowserRow`

Interface.

What `SourceBrowserProps.renderRow` gets for one row.

```ts
interface SourceBrowserRow<L, I, P extends SourcePick>
```

**Type parameters**

- `L`
- `I`
- `P` (`extends SourcePick`)

**Properties**

- `item` (`I`): The row's item.
- `listing` (`L`): The listing it comes from.
- `onToggle` (`(on: boolean) => void`): Picks or unpicks it.
- `pick` (`P`): Its pick.
- `picked` (`boolean`): It is picked.

Source: [ui/src/onboarding/sources/SourceBrowser.tsx:65](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/sources/SourceBrowser.tsx#L65)

### `SourceBrowserWords`

Interface.

The words of a [`SourceBrowser`](https://zidane.si/docs/reference/ui-onboarding.md#SourceBrowser) that depend on what it lists.

```ts
interface SourceBrowserWords
```

**Properties**

- `count` (`(count: number) => string`): How many rows the open source holds: `12 skills`.
- `empty` (`string`): The open source holds nothing to install.
- `emptyHint` (`string`): Under `SourceBrowserWords.empty`.
- `filter` (`string`): The filter field's label and placeholder.
- `noMatch` (`string`): No row matches the filter.

Source: [ui/src/onboarding/sources/SourceBrowser.tsx:51](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/sources/SourceBrowser.tsx#L51)

### `SourceCard`

Interface.

What the card of an open source shows. A skills listing's `source` is one.

```ts
interface SourceCard
```

**Properties**

- `avatarUrl?` (`string`): The owner's avatar, when `images` has none.
- `collection?` (`boolean`): A skills pack: its skills come from other repositories.
- `description?` (`string`): Its own description.
- `imageUrl?` (`string`): The preview image, when `images` has none.
- `kind` (`string`): `npm` links to npm; anything else to GitHub.
- `label` (`string`): Its short name: `owner/repo`, the package.
- `owner?` (`string`): GitHub owner: the avatar and the preview.
- `repo?` (`string`): GitHub repository: the preview.
- `stars?` (`number`): GitHub stars.
- `url?` (`string`): The page to open. Absent: no link.

Source: [ui/src/onboarding/skills/parts.tsx:250](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/skills/parts.tsx#L250)

### `SourcePick`

Interface.

A pick: anything with a key that is stable across listings of the same source.

```ts
interface SourcePick
```

**Properties**

- `key` (`string`): Identifies the pick among all picks, from any source.

Source: [ui/src/onboarding/sources/SourceBrowser.tsx:45](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/sources/SourceBrowser.tsx#L45)

### `TutorialProps`

Interface.

Props of [`Tutorial`](https://zidane.si/docs/reference/ui-onboarding.md#Tutorial).

```ts
interface TutorialProps
```

**Properties**

- `actions?` (`ReactNode`): Buttons that act on it, such as "Build an extension".
- `className?` (`string`): Extra classes on the block.
- `host?` (`string`): The server it is about, by name: the steps that name this computer name it instead. Absent: this computer.
- `surface?` (`'tray' | 'raised'`, default `'tray'`): The block's surface (`HowItWorks`): `raised` on a bare panel.
- `topic` (`TutorialTopic`): What the tutorial explains.

Source: [ui/src/onboarding/tutorials.tsx:16](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/tutorials.tsx#L16)

### `WelcomeStepProps`

Interface.

Props of [`WelcomeStep`](https://zidane.si/docs/reference/ui-onboarding.md#WelcomeStep).

```ts
interface WelcomeStepProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.

Source: [ui/src/onboarding/steps/WelcomeStep.tsx:86](https://github.com/Tahul/zidane/blob/main/ui/src/onboarding/steps/WelcomeStep.tsx#L86)