Evidence: Site Builder — bring your own AI provider (Claude or Grok), open sessions (ZER0-087)¶
Generated by test/visual/site-builder-providers-evidence.mjs against a local docker compose up of this branch (BASE_URL=http://localhost:4000). The dev proxy is mocked with page.route for the online states (the same status shape the real proxy returns, with a Grok key held as a session token), so these montages need no credential; the real proxy, the Grok translation and the credential store are pinned by test/test_providers.mjs, test/test_wizard_store.mjs and a browser run against a mock xAI upstream (see the PR description).
What changed¶
Before this change the Connect step had exactly one path: a Claude Code OAuth token in .env, and the dev proxy refused to start without one. The Claude session followed the nine steps only, could write a new project but not touch it afterwards, and could not produce images.
Now the Connect step lets the user pick Claude (Anthropic) or Grok (xAI), paste their own token for the session (sent once to the localhost proxy, kept in its memory, masked everywhere, optionally saved to .env with mode 600), choose a model and an image renderer, and choose between the guided steps and an open session that can open an existing site, edit its files, generate images and rebuild it. The side panel names the connected provider, shows the mode, and has a Stop button for long tool runs. The Build step lists existing sites and opens one as the working project, with a jekyll build action beside docker compose up.
Images¶
| File | Shows |
|---|---|
01-connect-before-after.png |
The Connect step, proxy offline. When BEFORE_URL is set (the autogen lane serves the base branch on :4001) the base-branch card sits above this PR's card; locally only the AFTER panel renders. Every provider/token/model/mode control is inert offline. |
02-connect-grok-session.png |
Proxy online holding a Grok key: selecting keyless Claude shows needs a token with the composer locked and the Grok card carrying its masked session key; selecting Grok plus the open session gives Grok connected, the Grok model list and the open-session prompts. Third panel: the side panel naming the provider and mode. |
03-build-existing-site.png |
The Build step's existing-site picker and jekyll build button; after Open the folder is the working project and the panel shows its file count with jekyll build / git status shortcuts. |
04-connect-mobile.png |
The Connect step at 390px: cards, token form and mode switch stack; page overflow is 0px. (The base branch overflowed by 162px on every step at this width because the Connect step's command boxes could not shrink — fixed here with min-width: 0 on the .sb-steps text column.) |
metrics.json records the counts the montages annotate (provider cards, mode options, the password-type token field, disabled controls offline, badge text before/after picking Grok, the Grok model list, open-session chip count, projects listed, mobile overflow).
Regression test¶
test/visual/features/setup-wizard.spec.js (smoke tier) pins: the Connect step's controls and their offline-inert state; with a mocked proxy holding a Grok key the panel connects as Grok, a keyless provider reads "needs a token" with the composer locked, the model list is Grok's, the generated _config.yml follows the provider, a pasted token is POSTed once to the localhost proxy and cleared from the page and never appears in browser storage; the open session swaps the prompts and survives a reload; the Build step lists the proxy's sites and Open sets the target and shows the working-project card.