Source: c125 operations-wizard — prior art, app.qpoint.io app/components/wizard/* + utils/sequin.js at f5faf10 · 2026-10-27
The simple linear wizard app.qpoint.io used for every complex selection routine: installing Qtap and Qscan, activating data-risk and vulnerability scanning, creating a label, configuring the MCP client, onboarding preferences. It was never extracted to the layer. These are replicas: copied, not redesigned, so c125 starts from what shipped. Each file's header comment names its source and its only changes.
1 · Steps: tabs or linear
A Sequin walks an array of steps (id, title, optional tab, optional wizard overrides). With tabs, every step is reachable from the top. Linear shows the step title, Back, "Next : …" and Continue. The last step swaps Continue for Submit.
2 · Listener → end: the install shape
Install Qtap's step model, reduced: choose an environment, then an installation step in listener mode with block: true. Continue stays hidden until listenConfirmation() turns true (a real first signal), then an end step with FinalStep. This is the "wait for the first ping" pattern c125's J2 (deploy) needs.
ToggleHarness: a narrow column of choices, the edu slot beside it.
3 · The pieces alone
4 · What it hands c125
- A step is data. Steps are an array of ids and titles, and each can override the wizard per step (mode, block, noNextBtn, noTitle, submitTxt). A tour step can be the same shape plus a page and a target.
- Waiting is a mode. listener + block holds a step until the world confirms it. That is how journey progress can come from real state rather than ticked boxes.
- The edu slot is the documentation. Every step already had a place for the why. That's the seed of "the UI becomes the documentation".
- It lives inside one container. Every flow mounts the wizard in a page region (an empty state, the install page, a settings panel). It can't cross pages; a tour has to.
- The radar is the richer one. PingListener runs Radar from the unmerged origin/mask-image branch (2024-06-05): a black disc with a line layer turning every 12 s under the sweep every 6 s. All twelve of that branch's layers are in assets/images/wizard/mask-image/.
- Found while copying: in app.qpoint.io, Continue's btn-outline loses to UxButton's grape fill (here the outline wins: it depends on CSS order), the callBack prop is never read (the code reads callback), pingConfirm is commented out, and the /dev/wizards install, connect and deploy demos no longer resolve their components.