posthog Ink TUI
The wizard renders its terminal interface with Ink and React. Pi is an agent harness; it does not replace this renderer. Read wizard-development for architecture and harness/sequence policy before structural changes.
Start with the existing surface
- For screen flow or state, read ARCHITECTURE.md.
- For layout or controls, read PRIMITIVES.md and the relevant component's props.
- For composition and keyboard behavior, read PATTERNS.md.
- For terminal sizing, startup, or noninteractive behavior, read TERMINAL-COMPAT.md.
package.json owns supported versions: currently Node
≥22.22.0, Ink ^6.8.0, React ^19.2.4, and @inkjs/ui ^2.0.0. Use installed
package types for API details; keep this skill focused on the wizard's
conventions rather than copying upstream component manuals.
Add a screen
- Create a component in screens.
- Add its
ScreenIdin screen-sequences.ts. - Register the component in screen-registry.tsx.
- Reference it through
screenIdin the owning program's steps, with the appropriate visibility, completion, and gate predicates.
Screen sequences derive from program steps. Do not hand-maintain a second
sequence array or add program navigation to the router. Additional state or
service wiring depends on the screen's needs; App remains the shared shell.
Preserve the UI boundary
Business logic calls WizardUI through getUI. Screens use WizardStore setters for reactive changes. The router resolves program screens from session predicates; overlays interrupt that resolution. Local state is appropriate for presentation details such as tab selection, not wizard progression.
For new state, first decide whether it belongs in
WizardSession or display-only store state.
Use an explicit setter that notifies subscribers. When business logic needs the
operation, extend WizardUI, InkUI, and
LoggingUI together. Reuse existing enums and
union types rather than introducing competing status vocabularies.
Reuse and check
Compose existing primitives and use styles.ts for shared colors, icons, and alignment. Export new public primitives from primitives/index.ts, add a realistic playground demo, and register it in PlaygroundApp.tsx.
Run pnpm try --playground to inspect primitives. Use
exploring-the-wizard when exercising actual
screen flows. Follow the repository's validation guidance; choose focused
behavior checks for changed predicates or input handling, and visual inspection
for layout changes.