jekyll-theme-zer0 1.28.0 → 1.30.0

data/_includes/setup/wizard.html

@@ -1,331 +1,1033 @@
-{% comment %} Feature: ZER0-067 {% endcomment %}
-<!--
+{% comment %} Feature: ZER0-067, ZER0-086, ZER0-087 {% endcomment %}
+{% comment %}
   ===================================================================
-  SETUP WIZARD — Interactive _config.yml Generator
+  SITE BUILDER — guided, Claude-assisted site setup wizard
   ===================================================================
 
-  File: wizard.html
-  Path: _includes/setup/wizard.html
-  Purpose: Multi-step Bootstrap form that builds a complete _config.yml
-           and lets the user download or copy it.
-
-  Dependencies: Bootstrap 5.3, assets/js/setup-wizard.js
-  Environment: Development only (guarded by calling page)
+  Component:   setup/wizard
+  Path:        _includes/setup/wizard.html
+  Purpose:     Nine-step wizard that takes a reader from "nothing installed"
+               to a complete, personalised zer0-mistakes site: prerequisites,
+               identity, URLs, structure, appearance, voice, integrations and
+               a Build step that writes the project and starts Docker — with
+               an embedded AI session (Claude or Grok, the user's own token)
+               that can read the form, fill it in, read the theme's real
+               source, drive the build, and — in an open session — modify an
+               existing site file by file and generate images for it.
+  Params:      none — configured via site.site_builder + site.ai_chat, data
+               from _data/site_builder.yml
+  Depends on:  Bootstrap 5.3, Bootstrap Icons, assets/js/setup-wizard.js
+               (form, generators, drafts), assets/js/site-builder.js (Claude
+               session + dev-proxy tools), _sass/components/_setup-wizard.scss,
+               setup/prereq-checklist.html, setup/claude-session.html
+  Notes:
+    - Works with NO proxy at all: the form, every generated file, per-file
+      download and the self-extracting bundle are pure client-side, so a
+      GitHub Pages consumer on the welcome layout still gets a full wizard.
+      Live prerequisite checks, "Write project" and the Docker actions
+      light up when the local dev proxy answers GET
+      {site_builder.endpoint}/status; the AI panel lights up once the
+      chosen provider has a credential — from .env, or pasted on the
+      Connect step (sent once to the localhost proxy, never stored in the
+      page). See templates/deploy/chat-proxy/.
+    - Layout at lg+: stepper (2) · steps (6) · side column (4) holding the
+      Claude session on top and the live file preview underneath, so every
+      answer and every generated file stays in view on every step.
+    - Stable-height contract (T-040 / #408): `.wizard-panes` is a CSS grid
+      with every pane in one cell; `.wizard-nav` is pinned with mt-auto. Do
+      not put inactive panes back on display:none — see _setup-wizard.scss.
+    - Draft persistence: every field, switch and check is mirrored to
+      localStorage under `zer0-setup-draft` (debounced) and restored on load.
+      "Start over" clears it; a successful project write clears it too.
+    - Accessibility: the stepper is a vertical tablist; each pane is a
+      tabpanel; status regions use aria-live; icons are aria-hidden; every
+      control has a label; touch targets are ≥ 44px.
   ===================================================================
--->
+{% endcomment %}
+
+{% assign sb = site.data.site_builder %}
+{% assign sb_cfg = site.site_builder %}
+{% assign sb_port = sb_cfg.default_port | default: 4000 %}
 
-<div class="container py-4" id="setup-wizard">
-  <div class="row justify-content-center">
-    <div class="col-lg-10">
+<div class="container-xl py-4" id="setup-wizard" data-default-port="{{ sb_port }}">
 
-      <h1 class="mb-2"><i class="bi bi-gear-wide-connected"></i> Site Setup Wizard</h1>
-      <p class="lead text-muted mb-4">
-        Fill in the form to generate a personalised <code>_config.yml</code>.
-        Download it and replace the one in your project root.
+  <header class="wizard-header d-flex flex-wrap align-items-end justify-content-between gap-3 mb-4">
+    <div>
+      <p class="text-uppercase small fw-semibold text-body-secondary mb-1">
+        <i class="bi bi-magic" aria-hidden="true"></i> zer0-mistakes
       </p>
+      <h1 class="mb-1">Site Builder</h1>
+      <p class="lead text-body-secondary mb-0">
+        Answer a few questions — or just talk to Claude or Grok — and leave with a running site.
+      </p>
+    </div>
+    <div class="d-flex align-items-center gap-2">
+      <span id="wizard-draft-chip" class="wizard-draft-chip" hidden aria-live="polite">
+        <i class="bi bi-cloud-check" aria-hidden="true"></i> Draft saved
+      </span>
+      <button class="btn btn-outline-secondary btn-sm" type="button" id="btn-reset"
+              title="Clear every answer and start again">
+        <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i> Start over
+      </button>
+    </div>
+  </header>
 
-      <!-- ============================================================ -->
-      <!-- Progress Tabs                                                 -->
-      <!-- ============================================================ -->
-      <ul class="nav nav-pills nav-fill mb-4" id="wizardTabs" role="tablist">
-        <li class="nav-item" role="presentation">
-          <button class="nav-link active" id="tab-identity"
-                  data-bs-toggle="pill" data-bs-target="#step-identity"
-                  type="button" role="tab">
-            <i class="bi bi-person-badge"></i> Identity
-          </button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="tab-urls"
-                  data-bs-toggle="pill" data-bs-target="#step-urls"
-                  type="button" role="tab">
-            <i class="bi bi-link-45deg"></i> URLs
-          </button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="tab-collections"
-                  data-bs-toggle="pill" data-bs-target="#step-collections"
-                  type="button" role="tab">
-            <i class="bi bi-collection"></i> Collections
-          </button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="tab-analytics"
-                  data-bs-toggle="pill" data-bs-target="#step-analytics"
-                  type="button" role="tab">
-            <i class="bi bi-graph-up"></i> Analytics
-          </button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" id="tab-review"
-                  data-bs-toggle="pill" data-bs-target="#step-review"
-                  type="button" role="tab">
-            <i class="bi bi-file-earmark-code"></i> Review
+  <div class="row g-4 wizard-grid">
+
+    {% comment %} ============================================================ {% endcomment %}
+    {% comment %} 1. Vertical stepper (generated from _data/site_builder.yml)  {% endcomment %}
+    {% comment %} ============================================================ {% endcomment %}
+    <div class="col-lg-2">
+      <div class="wizard-stepper-wrap sticky-lg-top">
+        <div class="nav flex-column wizard-stepper" id="wizardTabs" role="tablist"
+             aria-orientation="vertical" aria-label="Site Builder steps">
+          {% for step in sb.steps %}
+          <button class="wizard-step{% if forloop.first %} is-active{% endif %}" id="tab-{{ step.id }}"
+                  data-bs-toggle="pill" data-bs-target="#step-{{ step.id }}"
+                  type="button" role="tab" aria-controls="step-{{ step.id }}"
+                  aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
+                  data-step="{{ forloop.index }}" data-step-id="{{ step.id }}"
+                  title="{{ step.summary | escape }}">
+            <span class="wizard-step-marker" aria-hidden="true"><i class="bi {{ step.icon }}"></i></span>
+            <span class="wizard-step-text">
+              <span class="wizard-step-label">{{ step.label }}</span>
+              <span class="wizard-step-state visually-hidden">{% if forloop.first %}current step{% endif %}</span>
+            </span>
           </button>
-        </li>
-      </ul>
+          {% endfor %}
+        </div>
+        <div class="wizard-progress mt-3" aria-hidden="true">
+          <div class="progress" style="height: 4px;">
+            <div class="progress-bar" id="wizard-progress-bar" role="progressbar" style="width: 0%"></div>
+          </div>
+          <div class="small text-body-secondary mt-1" id="wizard-progress-text">Step 1 of {{ sb.steps | size }}</div>
+        </div>
+      </div>
+    </div>
 
-      <!-- ============================================================ -->
-      <!-- Step Panels                                                   -->
-      <!-- ============================================================ -->
-      <div class="tab-content" id="wizardTabContent">
+    {% comment %} ============================================================ {% endcomment %}
+    {% comment %} 2. Step panes                                                 {% endcomment %}
+    {% comment %} ============================================================ {% endcomment %}
+    <div class="col-lg-6">
+      <div class="tab-content wizard-panes" id="wizardTabContent">
 
-        <!-- ───── Step 1: Identity ───── -->
-        <div class="tab-pane fade show active" id="step-identity" role="tabpanel">
+        {% comment %} ───── Step 1: Connect ───── {% endcomment %}
+        <div class="tab-pane fade show active" id="step-connect" role="tabpanel" aria-labelledby="tab-connect">
           <div class="card">
             <div class="card-body">
-              <h4 class="card-title mb-3">Site Identity</h4>
+              <h2 class="h4 card-title mb-1">Connect your AI</h2>
+              <p class="text-body-secondary">
+                The builder runs entirely in your browser. Connect <strong>Claude</strong> or <strong>Grok</strong> through the
+                <strong>local dev proxy</strong> with your own token and it can fill in these forms, check your machine, read the
+                theme's source, write <em>or modify</em> your project, generate images and start Docker — in the order you choose.
+              </p>
 
-              <div class="mb-3">
-                <label for="cfg-title" class="form-label">Site Title</label>
-                <input type="text" class="form-control cfg-field" id="cfg-title"
-                       placeholder="My Awesome Site" data-key="title">
+              <div class="sb-connect-status alert d-flex align-items-start gap-3 mb-3" id="connect-status"
+                   role="status" aria-live="polite" data-state="checking">
+                <span class="sb-status-dot mt-1" aria-hidden="true"></span>
+                <div class="flex-grow-1">
+                  <div class="fw-semibold sb-status-title">Looking for the dev proxy…</div>
+                  <div class="small sb-status-detail">Checking <code class="sb-endpoint"></code></div>
+                </div>
+                <button class="btn btn-sm btn-outline-primary" type="button" id="btn-connect-retry">
+                  <i class="bi bi-arrow-repeat" aria-hidden="true"></i> Retry
+                </button>
               </div>
 
-              <div class="mb-3">
-                <label for="cfg-subtitle" class="form-label">Subtitle <small class="text-muted">(optional)</small></label>
-                <input type="text" class="form-control cfg-field" id="cfg-subtitle"
-                       placeholder="A short tagline" data-key="subtitle">
-              </div>
+              <fieldset class="mb-3" id="sb-providers">
+                <legend class="form-label fs-6 mb-2">AI provider</legend>
+                <div class="row g-2">
+                  {% for p in sb.providers %}
+                  <div class="col-sm-6">
+                    <input type="radio" class="btn-check" name="sb_provider" id="sb-provider-{{ p.id }}"
+                           value="{{ p.id }}" autocomplete="off" {% if forloop.first %}checked{% endif %}>
+                    <label class="btn btn-outline-primary w-100 text-start wizard-choice sb-provider-card" for="sb-provider-{{ p.id }}">
+                      <span class="d-flex justify-content-between align-items-center gap-2">
+                        <span class="fw-semibold"><i class="bi {{ p.icon }}" aria-hidden="true"></i> {{ p.label }} <small class="fw-normal">{{ p.vendor }}</small></span>
+                        <span class="badge rounded-pill text-bg-secondary sb-provider-state" data-provider="{{ p.id }}">proxy offline</span>
+                      </span>
+                      <span class="small d-block">{{ p.description }}</span>
+                    </label>
+                  </div>
+                  {% endfor %}
+                </div>
+              </fieldset>
 
-              <div class="mb-3">
-                <label for="cfg-description" class="form-label">Description <small class="text-muted">(SEO, ≤ 160 chars)</small></label>
-                <textarea class="form-control cfg-field" id="cfg-description" rows="2"
-                          maxlength="160" data-key="description"
-                          placeholder="Brief description of your site for search engines"></textarea>
-                <div class="form-text"><span id="desc-count">0</span>/160</div>
-              </div>
+              <form class="sb-credential mb-3" id="sb-credential-form" autocomplete="off">
+                <label for="sb-token" class="form-label fw-semibold">Token for <span class="sb-provider-name">Claude</span></label>
+                <div class="input-group">
+                  <input type="password" class="form-control" id="sb-token" placeholder="sk-ant-oat01-…"
+                         autocomplete="off" autocapitalize="off" spellcheck="false" disabled>
+                  <button class="btn btn-primary" type="submit" id="sb-token-use" disabled>
+                    <i class="bi bi-plug" aria-hidden="true"></i> Use for this session
+                  </button>
+                </div>
+                <div class="form-text" id="sb-token-hint">Mint one with <code>claude setup-token</code>. The token goes once to the local proxy and stays in its memory — never in this page or your browser storage.</div>
+                <div class="form-check form-switch mt-2">
+                  <input class="form-check-input" type="checkbox" id="sb-token-persist" disabled>
+                  <label class="form-check-label small" for="sb-token-persist">Also save it to <code>.env</code> (mode 600) so the proxy remembers it next time</label>
+                </div>
+                <div class="small mt-2" id="sb-credential-status" aria-live="polite"></div>
+              </form>
 
-              <div class="row">
-                <div class="col-md-6 mb-3">
-                  <label for="cfg-author" class="form-label">Author / Owner</label>
-                  <input type="text" class="form-control cfg-field" id="cfg-author"
-                         placeholder="Your Name" data-key="founder">
+              <div class="row g-3 mb-3">
+                <div class="col-md-6">
+                  <label for="sb-model" class="form-label">Model</label>
+                  <select class="form-select form-select-sm" id="sb-model" disabled>
+                    <option value="{{ sb_cfg.model | default: site.ai_chat.model | default: 'claude-opus-4-8' }}">{{ sb_cfg.model | default: site.ai_chat.model | default: 'claude-opus-4-8' }}</option>
+                  </select>
+                  <div class="form-text" id="sb-model-note">Sent with every request; the proxy can pin one with <code>CHAT_MODEL</code> / <code>XAI_CHAT_MODEL</code>.</div>
                 </div>
-                <div class="col-md-6 mb-3">
-                  <label for="cfg-email" class="form-label">Email</label>
-                  <input type="email" class="form-control cfg-field" id="cfg-email"
-                         placeholder="you@example.com" data-key="email">
+                <div class="col-md-6">
+                  <label for="sb-image-provider" class="form-label">Image generation</label>
+                  <select class="form-select form-select-sm" id="sb-image-provider" disabled>
+                    <option value="">Off</option>
+                    {% for ip in sb.image_providers %}<option value="{{ ip.id }}" data-label="{{ ip.label }} ({{ ip.vendor }})">{{ ip.label }} ({{ ip.vendor }})</option>{% endfor %}
+                  </select>
+                  <div class="form-text" id="sb-image-note">Renders hero, logo and post images straight into the project's <code>assets/</code>.</div>
                 </div>
               </div>
 
-              <div class="mb-3">
-                <label for="cfg-github-user" class="form-label">GitHub Username</label>
-                <input type="text" class="form-control cfg-field" id="cfg-github-user"
-                       placeholder="your-username" data-key="github_user">
+              <fieldset class="mb-3" id="sb-mode">
+                <legend class="form-label fs-6 mb-2">How do you want to work?</legend>
+                <div class="row g-2">
+                  {% for m in sb.session_modes %}
+                  <div class="col-sm-6">
+                    <input type="radio" class="btn-check" name="sb_mode" id="sb-mode-{{ m.id }}" value="{{ m.id }}"
+                           autocomplete="off" {% if m.id == sb_cfg.mode %}checked{% elsif sb_cfg.mode == nil and forloop.first %}checked{% endif %}>
+                    <label class="btn btn-outline-secondary w-100 text-start wizard-choice" for="sb-mode-{{ m.id }}">
+                      <span class="fw-semibold d-block"><i class="bi {{ m.icon }}" aria-hidden="true"></i> {{ m.label }}</span>
+                      <span class="small d-block">{{ m.description }}</span>
+                    </label>
+                  </div>
+                  {% endfor %}
+                </div>
+              </fieldset>
+
+              <div class="sb-connect-howto" id="connect-howto">
+                <h3 class="h6 text-uppercase text-body-secondary">How to connect (once, on your machine)</h3>
+                <ol class="sb-steps list-unstyled mb-3">
+                  <li>
+                    <span class="sb-step-num" aria-hidden="true">1</span>
+                    <div>
+                      <div class="fw-semibold">Start the dev proxy next to the site</div>
+                      <p class="small text-body-secondary mb-1">Node 20.6+. It starts without any key and waits for the token you paste above; <code>--env-file=.env</code> loads keys you saved earlier.</p>
+                      <div class="wizard-cmd"><code>node --env-file=.env templates/deploy/chat-proxy/dev-proxy.mjs</code><button class="btn btn-sm btn-link" type="button" data-copy="node --env-file=.env templates/deploy/chat-proxy/dev-proxy.mjs" aria-label="Copy command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></div>
+                    </div>
+                  </li>
+                  <li>
+                    <span class="sb-step-num" aria-hidden="true">2</span>
+                    <div>
+                      <div class="fw-semibold">Get a token from the provider you picked</div>
+                      <p class="small text-body-secondary mb-1">Claude: a personal OAuth token from the Claude Code CLI (Pro/Max) or an API key from console.anthropic.com. Grok: an API key from <a href="https://console.x.ai/" target="_blank" rel="noopener">console.x.ai</a>.</p>
+                      <div class="wizard-cmd"><code>claude setup-token</code><button class="btn btn-sm btn-link" type="button" data-copy="claude setup-token" aria-label="Copy command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></div>
+                    </div>
+                  </li>
+                  <li>
+                    <span class="sb-step-num" aria-hidden="true">3</span>
+                    <div>
+                      <div class="fw-semibold">Paste it above — or keep it in <code>.env</code></div>
+                      <p class="small text-body-secondary mb-1">Pasting keeps the token in the proxy's memory for this run (tick the switch to save it). Or put it in the git-ignored <code>.env</code> yourself and restart the proxy.</p>
+                      <div class="wizard-cmd"><code>CLAUDE_CODE_OAUTH_TOKEN=sk-ant-oat01-…   # or XAI_API_KEY=xai-…</code></div>
+                    </div>
+                  </li>
+                </ol>
+                <details class="small">
+                  <summary class="text-body-secondary">What the proxy is allowed to do</summary>
+                  <ul class="mt-2 mb-0">
+                    <li>Hold the token you paste in memory only; write it to <code>.env</code> (mode 600) only when you tick the switch; report it masked.</li>
+                    <li>Run a fixed list of read-only version checks (Docker, Git, gh, VS Code, Node, Claude CLI).</li>
+                    <li>Read text source files inside the theme checkout — never <code>.env</code>, keys or build output.</li>
+                    <li>Write generated files into a folder beside the theme (never inside it), and read, edit, add or delete text files inside a site you open there — each change behind a confirmation card.</li>
+                    <li>Save generated images (PNG/JPEG/WebP only) under that site's <code>assets/</code>.</li>
+                    <li>Run <code>docker compose</code> up / ps / logs / down / build and <code>git status</code> / diff / log / init in that folder — nothing else.</li>
+                  </ul>
+                </details>
               </div>
 
-              <div class="mb-3">
-                <label for="cfg-repo-name" class="form-label">Repository Name</label>
-                <input type="text" class="form-control cfg-field" id="cfg-repo-name"
-                       placeholder="my-site" data-key="repository_name">
-                <div class="form-text">The GitHub repository name for this site (e.g. <code>my-site</code>).</div>
+              <div class="alert alert-light border small mt-3 mb-0">
+                <i class="bi bi-info-circle" aria-hidden="true"></i>
+                No proxy? Continue anyway. Every step still works and the Build step gives you the files and the commands to run yourself.
               </div>
 
-              <div class="text-end">
-                <button class="btn btn-primary btn-next" data-next="tab-urls">
-                  Next: URLs <i class="bi bi-arrow-right"></i>
+              <div class="wizard-nav">
+                <button class="btn btn-primary btn-next" data-next="tab-prereqs">
+                  Next: Prerequisites <i class="bi bi-arrow-right" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- ───── Step 2: URLs ───── -->
-        <div class="tab-pane fade" id="step-urls" role="tabpanel">
+        {% comment %} ───── Step 2: Prerequisites ───── {% endcomment %}
+        <div class="tab-pane fade" id="step-prereqs" role="tabpanel" aria-labelledby="tab-prereqs">
           <div class="card">
             <div class="card-body">
-              <h4 class="card-title mb-3">URLs &amp; Deployment</h4>
+              <h2 class="h4 card-title mb-1">Prerequisites</h2>
+              <p class="text-body-secondary">
+                Docker runs Jekyll for you, Git and the GitHub CLI publish it. Connected? Press
+                <strong>Run checks</strong>. Otherwise tick each item as you install it.
+              </p>
+              {% include setup/prereq-checklist.html %}
+              <div class="wizard-nav d-flex justify-content-between">
+                <button class="btn btn-outline-secondary btn-prev" data-prev="tab-connect">
+                  <i class="bi bi-arrow-left" aria-hidden="true"></i> Back
+                </button>
+                <button class="btn btn-primary btn-next" data-next="tab-identity">
+                  Next: Identity <i class="bi bi-arrow-right" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {% comment %} ───── Step 3: Identity ───── {% endcomment %}
+        <div class="tab-pane fade" id="step-identity" role="tabpanel" aria-labelledby="tab-identity">
+          <div class="card">
+            <div class="card-body">
+              <h2 class="h4 card-title mb-1">Site identity</h2>
+              <p class="text-body-secondary">Describe the site in your own words first — the assistant uses that brief to draft everything else.</p>
 
               <div class="mb-3">
-                <label for="cfg-url" class="form-label">Site URL</label>
-                <input type="url" class="form-control cfg-field" id="cfg-url"
-                       placeholder="https://yourdomain.com" data-key="url">
-                <div class="form-text">Your production URL. For GitHub Pages: <code>https://USERNAME.github.io</code></div>
+                <label for="cfg-brief" class="form-label fw-semibold">What is this site about, and who is it for?</label>
+                <textarea class="form-control cfg-field" id="cfg-brief" rows="3" data-key="brief"
+                          placeholder="e.g. A blog about running Postgres in production, written for backend engineers who are new to operations."></textarea>
+                <div class="form-text d-flex justify-content-between">
+                  <span>The brief is not published; it steers the drafts.</span>
+                  <button class="btn btn-link btn-sm p-0 sb-ask" type="button"
+                          data-ask="Here is my brief: {brief}. Draft a title, subtitle, tagline and a 120–160 character description for the site, then apply them.">
+                    <i class="bi bi-stars" aria-hidden="true"></i> Draft with <span class="sb-provider-name">Claude</span>
+                  </button>
+                </div>
               </div>
 
-              <div class="mb-3">
-                <label for="cfg-baseurl" class="form-label">Base URL <small class="text-muted">(path prefix)</small></label>
-                <input type="text" class="form-control cfg-field" id="cfg-baseurl"
-                       placeholder="/repo-name" data-key="baseurl">
-                <div class="form-text">Leave empty for apex domains. Use <code>/repo-name</code> for project pages.</div>
+              <div class="row g-3">
+                <div class="col-md-7">
+                  <label for="cfg-title" class="form-label">Site title <span class="text-danger" aria-hidden="true">*</span></label>
+                  <input type="text" class="form-control cfg-field" id="cfg-title" placeholder="My Awesome Site"
+                         data-key="title" data-recommended="Site Title" maxlength="60" autocomplete="off">
+                  <div class="form-text">Shown in the navbar, browser tab and feed.</div>
+                </div>
+                <div class="col-md-5">
+                  <label for="cfg-subtitle" class="form-label">Subtitle <small class="text-body-secondary">(optional)</small></label>
+                  <input type="text" class="form-control cfg-field" id="cfg-subtitle" placeholder="Notes from the field"
+                         data-key="subtitle" maxlength="80" autocomplete="off">
+                </div>
+                <div class="col-12">
+                  <label for="cfg-tagline" class="form-label">Tagline <small class="text-body-secondary">(optional)</small></label>
+                  <input type="text" class="form-control cfg-field" id="cfg-tagline" placeholder="One line for the home hero"
+                         data-key="tagline" maxlength="120" autocomplete="off">
+                </div>
+                <div class="col-12">
+                  <label for="cfg-description" class="form-label">Description</label>
+                  <textarea class="form-control cfg-field" id="cfg-description" rows="2" data-key="description"
+                            data-recommended="Description" maxlength="240"
+                            placeholder="A search-friendly sentence about the site."></textarea>
+                  <div class="form-text d-flex justify-content-between">
+                    <span>Meta description for search and social cards. Aim for 120–160 characters.</span>
+                    <span><span id="desc-count">0</span>/160</span>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label for="cfg-author" class="form-label">Author / owner</label>
+                  <input type="text" class="form-control cfg-field" id="cfg-author" placeholder="Your name"
+                         data-key="founder" data-recommended="Author / Owner" autocomplete="name">
+                </div>
+                <div class="col-md-6">
+                  <label for="cfg-email" class="form-label">Contact email</label>
+                  <input type="email" class="form-control cfg-field" id="cfg-email" placeholder="you@example.com"
+                         data-key="email" data-recommended="Email" autocomplete="email" aria-describedby="cfg-email-feedback">
+                  <div class="invalid-feedback" id="cfg-email-feedback"></div>
+                </div>
               </div>
 
-              <div class="mb-3">
-                <label for="cfg-remote-theme" class="form-label">Remote Theme</label>
-                <input type="text" class="form-control cfg-field" id="cfg-remote-theme"
-                       value="bamr87/zer0-mistakes" data-key="remote_theme">
-                <div class="form-text">Used by GitHub Pages. Set to <code>false</code> for local development.</div>
+              <div class="wizard-nav d-flex justify-content-between">
+                <button class="btn btn-outline-secondary btn-prev" data-prev="tab-prereqs">
+                  <i class="bi bi-arrow-left" aria-hidden="true"></i> Back
+                </button>
+                <button class="btn btn-primary btn-next" data-next="tab-urls">
+                  Next: URLs <i class="bi bi-arrow-right" aria-hidden="true"></i>
+                </button>
               </div>
+            </div>
+          </div>
+        </div>
 
-              <div class="mb-3">
-                <label for="cfg-permalink" class="form-label">Permalink Style</label>
-                <select class="form-select cfg-field" id="cfg-permalink" data-key="permalink">
-                  <option value="/:categories/:title/">/:categories/:title/</option>
-                  <option value="/blog/:year/:month/:day/:title/">Date-based</option>
-                  <option value="/:title/">Title only</option>
-                  <option value="pretty">Pretty (/:categories/:year/:month/:day/:title/)</option>
-                </select>
+        {% comment %} ───── Step 4: URLs ───── {% endcomment %}
+        <div class="tab-pane fade" id="step-urls" role="tabpanel" aria-labelledby="tab-urls">
+          <div class="card">
+            <div class="card-body">
+              <h2 class="h4 card-title mb-1">GitHub &amp; URLs</h2>
+              <p class="text-body-secondary">Where the code lives and where the site is served from.</p>
+
+              <div class="row g-3">
+                <div class="col-md-6">
+                  <label for="cfg-github-user" class="form-label">GitHub username</label>
+                  <div class="input-group">
+                    <span class="input-group-text"><i class="bi bi-github" aria-hidden="true"></i></span>
+                    <input type="text" class="form-control cfg-field" id="cfg-github-user" placeholder="octocat"
+                           data-key="github_user" data-recommended="GitHub Username" autocomplete="username">
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label for="cfg-repo-name" class="form-label">Repository name</label>
+                  <input type="text" class="form-control cfg-field" id="cfg-repo-name" placeholder="my-site"
+                         data-key="repository_name" data-recommended="Repository Name" autocomplete="off">
+                  <div class="form-text">Also the project folder name in the Build step.</div>
+                </div>
+
+                <div class="col-12">
+                  <fieldset>
+                    <legend class="form-label fs-6 mb-2">How will the theme be loaded?</legend>
+                    <div class="row g-2">
+                      {% for t in sb.deploy_targets %}
+                      <div class="col-md-6">
+                        <input type="radio" class="btn-check cfg-radio" name="deploy_target" id="deploy-{{ t.id }}"
+                               value="{{ t.id }}" data-key="deploy_target" autocomplete="off"
+                               {% if forloop.first %}checked{% endif %}>
+                        <label class="btn btn-outline-primary w-100 text-start wizard-choice" for="deploy-{{ t.id }}">
+                          <span class="fw-semibold d-block">{{ t.label }}</span>
+                          <span class="small d-block">{{ t.description }}</span>
+                        </label>
+                      </div>
+                      {% endfor %}
+                    </div>
+                  </fieldset>
+                </div>
+
+                <div class="col-md-8">
+                  <label for="cfg-url" class="form-label">Site URL</label>
+                  <div class="input-group">
+                    <input type="url" class="form-control cfg-field" id="cfg-url" placeholder="https://octocat.github.io"
+                           data-key="url" data-recommended="Site URL" aria-describedby="cfg-url-feedback" autocomplete="url">
+                    <button class="btn btn-outline-secondary" type="button" id="btn-suggest-urls" title="Fill url and baseurl from the GitHub fields">
+                      <i class="bi bi-lightning-charge" aria-hidden="true"></i> Suggest
+                    </button>
+                    <div class="invalid-feedback" id="cfg-url-feedback"></div>
+                  </div>
+                </div>
+                <div class="col-md-4">
+                  <label for="cfg-baseurl" class="form-label">Base path</label>
+                  <input type="text" class="form-control cfg-field" id="cfg-baseurl" placeholder="/my-site"
+                         data-key="baseurl" autocomplete="off">
+                  <div class="form-text">Empty for <code>user.github.io</code>; <code>/repo</code> for project sites.</div>
+                </div>
+
+                <div class="col-md-6">
+                  <label for="cfg-permalink" class="form-label">Permalink style</label>
+                  <select class="form-select cfg-field" id="cfg-permalink" data-key="permalink">
+                    <option value="/:categories/:title/">/:categories/:title/</option>
+                    <option value="/:title/">/:title/</option>
+                    <option value="/:year/:month/:title/">/:year/:month/:title/</option>
+                    <option value="pretty">pretty</option>
+                  </select>
+                </div>
+                <div class="col-md-3">
+                  <label for="cfg-port" class="form-label">Dev port</label>
+                  <input type="number" class="form-control cfg-field" id="cfg-port" min="1024" max="65535"
+                         value="{{ sb_port }}" data-key="port">
+                </div>
+                <div class="col-md-3">
+                  <label for="cfg-remote-theme" class="form-label">Remote theme</label>
+                  <input type="text" class="form-control cfg-field" id="cfg-remote-theme" value="bamr87/zer0-mistakes"
+                         data-key="remote_theme" autocomplete="off">
+                </div>
               </div>
 
-              <div class="d-flex justify-content-between">
+              <div class="wizard-nav d-flex justify-content-between">
                 <button class="btn btn-outline-secondary btn-prev" data-prev="tab-identity">
-                  <i class="bi bi-arrow-left"></i> Back
+                  <i class="bi bi-arrow-left" aria-hidden="true"></i> Back
                 </button>
-                <button class="btn btn-primary btn-next" data-next="tab-collections">
-                  Next: Collections <i class="bi bi-arrow-right"></i>
+                <button class="btn btn-primary btn-next" data-next="tab-structure">
+                  Next: Structure <i class="bi bi-arrow-right" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- ───── Step 3: Collections ───── -->
-        <div class="tab-pane fade" id="step-collections" role="tabpanel">
+        {% comment %} ───── Step 5: Structure ───── {% endcomment %}
+        <div class="tab-pane fade" id="step-structure" role="tabpanel" aria-labelledby="tab-structure">
           <div class="card">
             <div class="card-body">
-              <h4 class="card-title mb-3">Content Collections</h4>
-              <p class="text-muted">Toggle which content collections to enable.</p>
+              <h2 class="h4 card-title mb-1">Structure</h2>
+              <p class="text-body-secondary">Pick a starting shape, then fine-tune the collections and the top navigation.</p>
 
-              <div class="form-check form-switch mb-3">
-                <input class="form-check-input cfg-collection" type="checkbox" id="col-posts" checked data-col="posts">
-                <label class="form-check-label" for="col-posts">
-                  <strong>Blog Posts</strong> — <code>pages/_posts/</code>
-                </label>
-              </div>
+              <fieldset class="mb-3">
+                <legend class="form-label fs-6 mb-2">Kind of site</legend>
+                <div class="d-flex flex-wrap gap-2">
+                  {% for st in sb.site_types %}
+                  <input type="radio" class="btn-check cfg-radio" name="site_type" id="site-type-{{ st.id }}"
+                         value="{{ st.id }}" data-key="site_type" data-collections="{{ st.collections | join: ',' }}" autocomplete="off">
+                  <label class="btn btn-outline-secondary btn-sm rounded-pill" for="site-type-{{ st.id }}">{{ st.label }}</label>
+                  {% endfor %}
+                </div>
+              </fieldset>
 
-              <div class="form-check form-switch mb-3">
-                <input class="form-check-input cfg-collection" type="checkbox" id="col-docs" checked data-col="docs">
-                <label class="form-check-label" for="col-docs">
-                  <strong>Documentation</strong> — <code>pages/_docs/</code>
-                </label>
-              </div>
+              <fieldset class="mb-3">
+                <legend class="form-label fs-6 mb-2">Collections</legend>
+                <div class="row g-2">
+                  {% for c in sb.collections %}
+                  <div class="col-sm-6">
+                    <div class="form-check wizard-check">
+                      <input class="form-check-input cfg-collection" type="checkbox" id="col-{{ c.id }}"
+                             data-col="{{ c.id }}" data-layout="{{ c.layout }}" data-permalink="{{ c.permalink }}"
+                             {% if c.default %}checked{% endif %}>
+                      <label class="form-check-label" for="col-{{ c.id }}">
+                        <i class="bi {{ c.icon }} me-1" aria-hidden="true"></i><strong>{{ c.label }}</strong>
+                        <span class="d-block small text-body-secondary">{{ c.description }}</span>
+                      </label>
+                    </div>
+                  </div>
+                  {% endfor %}
+                </div>
+              </fieldset>
 
-              <div class="form-check form-switch mb-3">
-                <input class="form-check-input cfg-collection" type="checkbox" id="col-about" checked data-col="about">
-                <label class="form-check-label" for="col-about">
-                  <strong>About Pages</strong> — <code>pages/_about/</code>
-                </label>
+              <div class="row g-3 mb-3">
+                <div class="col-md-6">
+                  <fieldset>
+                    <legend class="form-label fs-6 mb-2">Navigation style</legend>
+                    <div class="d-flex flex-wrap gap-2">
+                      {% for n in sb.navigation_styles %}
+                      <input type="radio" class="btn-check cfg-radio" name="nav_style" id="nav-style-{{ n.id }}" value="{{ n.id }}"
+                             data-key="plan.navigation.style" autocomplete="off" {% if forloop.first %}checked{% endif %}>
+                      <label class="btn btn-outline-secondary btn-sm rounded-pill" for="nav-style-{{ n.id }}" title="{{ n.description | escape }}">{{ n.label }}</label>
+                      {% endfor %}
+                    </div>
+                  </fieldset>
+                </div>
+                <div class="col-md-6">
+                  <label for="cfg-sidebar-mode" class="form-label fs-6 mb-2">Sidebar</label>
+                  <select class="form-select form-select-sm cfg-field" id="cfg-sidebar-mode" data-key="plan.navigation.sidebar">
+                    {% for m in sb.sidebar_modes %}<option value="{{ m.id }}" title="{{ m.description | escape }}">{{ m.label }} — {{ m.description }}</option>{% endfor %}
+                  </select>
+                </div>
               </div>
 
-              <div class="form-check form-switch mb-3">
-                <input class="form-check-input cfg-collection" type="checkbox" id="col-notes" data-col="notes">
-                <label class="form-check-label" for="col-notes">
-                  <strong>Notes</strong> — <code>pages/_notes/</code>
-                </label>
-              </div>
+              <fieldset class="mb-3">
+                <legend class="form-label fs-6 mb-2 d-flex justify-content-between align-items-center">
+                  <span>Landing page</span>
+                  <button class="btn btn-link btn-sm p-0 sb-ask" type="button"
+                          data-ask="Design the landing page for my site: pick the template, write the hero (eyebrow, headline, subheadline, up to three CTAs) and fill every section with real copy from my brief — then apply it with set_site_plan.">
+                    <i class="bi bi-stars" aria-hidden="true"></i> Design with <span class="sb-provider-name">Claude</span>
+                  </button>
+                </legend>
+                <div class="row g-2">
+                  {% for t in sb.landing_templates %}
+                  <div class="col-sm-6 col-lg-4">
+                    <input type="radio" class="btn-check cfg-radio" name="landing_template" id="landing-{{ t.id }}" value="{{ t.id }}"
+                           data-key="plan.landing.template" autocomplete="off" {% if t.id == 'hero' %}checked{% endif %}>
+                    <label class="btn btn-outline-primary w-100 text-start wizard-choice" for="landing-{{ t.id }}">
+                      <span class="fw-semibold d-block">{{ t.label }}</span>
+                      <span class="small d-block">{{ t.description }}</span>
+                    </label>
+                  </div>
+                  {% endfor %}
+                </div>
+                <div class="form-text" id="landing-summary" aria-live="polite"></div>
+              </fieldset>
 
-              <div class="form-check form-switch mb-3">
-                <input class="form-check-input cfg-collection" type="checkbox" id="col-notebooks" data-col="notebooks">
-                <label class="form-check-label" for="col-notebooks">
-                  <strong>Notebooks</strong> — <code>pages/_notebooks/</code>
-                </label>
-              </div>
+              <fieldset class="mb-3">
+                <legend class="form-label fs-6 mb-2 d-flex justify-content-between align-items-center">
+                  <span>Example pages <span class="badge text-bg-secondary rounded-pill" id="pages-count">0</span></span>
+                  <span>
+                    <button class="btn btn-link btn-sm p-0 me-2 sb-ask" type="button"
+                            data-ask="Plan five or six example pages for my site across the enabled collections — each with a slug, title, description and a 150–300 word Markdown body in the {tone} tone for {audience} — then apply them with set_site_plan.">
+                      <i class="bi bi-stars" aria-hidden="true"></i> Plan with <span class="sb-provider-name">Claude</span>
+                    </button>
+                    <button class="btn btn-link btn-sm p-0" type="button" id="btn-page-add">
+                      <i class="bi bi-plus-circle" aria-hidden="true"></i> Add page
+                    </button>
+                  </span>
+                </legend>
+                <div id="pages-planner" class="pages-planner" aria-live="polite"></div>
+                <div class="form-text">Each row becomes a real file with front matter. Bodies come from the assistant, or are drafted from the title.</div>
+              </fieldset>
 
-              <div class="d-flex justify-content-between">
+              <fieldset>
+                <legend class="form-label fs-6 mb-2 d-flex justify-content-between align-items-center">
+                  <span>Main navigation</span>
+                  <span>
+                    <button class="btn btn-link btn-sm p-0 me-2" type="button" id="btn-nav-regenerate" title="Rebuild the menu from the selected collections">
+                      <i class="bi bi-arrow-repeat" aria-hidden="true"></i> From collections
+                    </button>
+                    <button class="btn btn-link btn-sm p-0" type="button" id="btn-nav-add">
+                      <i class="bi bi-plus-circle" aria-hidden="true"></i> Add item
+                    </button>
+                  </span>
+                </legend>
+                <div id="nav-editor" class="nav-editor" aria-live="polite"></div>
+              </fieldset>
+
+              <div class="wizard-nav d-flex justify-content-between">
                 <button class="btn btn-outline-secondary btn-prev" data-prev="tab-urls">
-                  <i class="bi bi-arrow-left"></i> Back
+                  <i class="bi bi-arrow-left" aria-hidden="true"></i> Back
                 </button>
-                <button class="btn btn-primary btn-next" data-next="tab-analytics">
-                  Next: Analytics <i class="bi bi-arrow-right"></i>
+                <button class="btn btn-primary btn-next" data-next="tab-appearance">
+                  Next: Appearance <i class="bi bi-arrow-right" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- ───── Step 4: Analytics ───── -->
-        <div class="tab-pane fade" id="step-analytics" role="tabpanel">
+        {% comment %} ───── Step 6: Appearance ───── {% endcomment %}
+        <div class="tab-pane fade" id="step-appearance" role="tabpanel" aria-labelledby="tab-appearance">
           <div class="card">
             <div class="card-body">
-              <h4 class="card-title mb-3">Analytics &amp; Integrations</h4>
+              <h2 class="h4 card-title mb-1">Appearance</h2>
+              <p class="text-body-secondary">Seven skins re-colour every component and background layer. Preview any of them on this page.</p>
 
-              <div class="mb-3">
-                <label for="cfg-ga" class="form-label">Google Analytics ID <small class="text-muted">(optional)</small></label>
-                <input type="text" class="form-control cfg-field" id="cfg-ga"
-                       placeholder="G-XXXXXXXXXX" data-key="google_analytics">
+              <fieldset class="mb-3">
+                <legend class="form-label fs-6 mb-2">Skin</legend>
+                <div class="row g-2 skin-grid">
+                  {% for s in sb.skins %}
+                  <div class="col-6 col-md-4">
+                    <input type="radio" class="btn-check cfg-radio" name="theme_skin" id="skin-{{ s.id }}"
+                           value="{{ s.id }}" data-key="theme_skin" autocomplete="off" {% if forloop.first %}checked{% endif %}>
+                    <label class="skin-card" for="skin-{{ s.id }}">
+                      <span class="skin-swatch" aria-hidden="true"
+                            style="--sw-a: {{ s.primary }}; --sw-b: {{ s.accent }};"></span>
+                      <span class="skin-name">{{ s.label }}</span>
+                      <span class="skin-mood">{{ s.mood }}</span>
+                    </label>
+                  </div>
+                  {% endfor %}
+                </div>
+                <div class="form-text d-flex justify-content-between align-items-center flex-wrap gap-2">
+                  <span>Applies <code>theme_skin</code> in <code>_config.yml</code>.</span>
+                  <span class="d-flex gap-2">
+                    <button class="btn btn-link btn-sm p-0 sb-ask" type="button"
+                            data-ask="Generate a hero image for the landing page that fits my brief, the {theme_skin} skin and the chosen palette (no text in the image), save it as assets/images/hero.png in my project, and set landing.hero.image to /assets/images/hero.png.">
+                      <i class="bi bi-image" aria-hidden="true"></i> Hero image with <span class="sb-provider-name">Claude</span>
+                    </button>
+                    <button class="btn btn-outline-secondary btn-sm" type="button" id="btn-skin-preview" aria-pressed="false">
+                      <i class="bi bi-eye" aria-hidden="true"></i> Preview on this page
+                    </button>
+                  </span>
+                </div>
+              </fieldset>
+
+              <div class="row g-3">
+                <div class="col-md-6">
+                  <label for="cfg-color-mode" class="form-label">Colour mode</label>
+                  <select class="form-select cfg-field" id="cfg-color-mode" data-key="color_mode_default">
+                    {% for m in sb.color_modes %}<option value="{{ m.id }}">{{ m.label }}</option>{% endfor %}
+                  </select>
+                </div>
+                <div class="col-md-6 d-flex flex-column justify-content-end gap-2">
+                  <div class="form-check form-switch">
+                    <input class="form-check-input cfg-switch" type="checkbox" id="cfg-color-lock" data-key="color_mode_lock">
+                    <label class="form-check-label" for="cfg-color-lock">Lock the colour mode (hide the toggle)</label>
+                  </div>
+                  <div class="form-check form-switch">
+                    <input class="form-check-input cfg-switch" type="checkbox" id="cfg-backgrounds" data-key="theme_background" checked>
+                    <label class="form-check-label" for="cfg-backgrounds">SVG background layers (gradient, pattern, noise)</label>
+                  </div>
+                </div>
+                <div class="col-12">
+                  <fieldset>
+                    <legend class="form-label fs-6 mb-2">Palette <small class="text-body-secondary">layered over the skin</small></legend>
+                    <div class="d-flex flex-wrap gap-2 palette-grid">
+                      {% for p in sb.palettes %}
+                      <input type="radio" class="btn-check cfg-radio" name="palette" id="palette-{{ p.id }}" value="{{ p.id }}"
+                             data-key="plan.theme.palette.preset" autocomplete="off" {% if forloop.first %}checked{% endif %}>
+                      <label class="palette-card" for="palette-{{ p.id }}" title="{{ p.description | default: p.label | escape }}">
+                        <span class="palette-swatches" aria-hidden="true">
+                          {% if p.primary %}
+                          <span style="background: {{ p.primary }}"></span><span style="background: {{ p.secondary }}"></span><span style="background: {{ p.accent }}"></span>
+                          {% else %}
+                          <span class="palette-swatch-skin"></span>
+                          {% endif %}
+                        </span>
+                        <span class="palette-name">{{ p.label }}</span>
+                      </label>
+                      {% endfor %}
+                      <input type="radio" class="btn-check cfg-radio" name="palette" id="palette-custom" value="custom" data-key="plan.theme.palette.preset" autocomplete="off">
+                      <label class="palette-card" for="palette-custom" title="Pick your own three colours">
+                        <span class="palette-swatches palette-swatches--custom" aria-hidden="true"><i class="bi bi-eyedropper"></i></span>
+                        <span class="palette-name">Custom</span>
+                      </label>
+                    </div>
+                    <div class="row g-2 mt-2 wizard-subfields" data-for="palette-custom" hidden>
+                      <div class="col-4"><label for="cfg-color-primary" class="form-label small mb-1">Primary</label><input type="color" class="form-control form-control-color cfg-field" id="cfg-color-primary" data-key="plan.theme.palette.primary" value="#0d6efd"></div>
+                      <div class="col-4"><label for="cfg-color-secondary" class="form-label small mb-1">Secondary</label><input type="color" class="form-control form-control-color cfg-field" id="cfg-color-secondary" data-key="plan.theme.palette.secondary" value="#6c757d"></div>
+                      <div class="col-4"><label for="cfg-color-accent" class="form-label small mb-1">Accent</label><input type="color" class="form-control form-control-color cfg-field" id="cfg-color-accent" data-key="plan.theme.palette.accent" value="#20c997"></div>
+                    </div>
+                  </fieldset>
+                </div>
+                <div class="col-md-7">
+                  <label for="cfg-fonts" class="form-label">Fonts</label>
+                  <select class="form-select cfg-field" id="cfg-fonts" data-key="plan.theme.fonts">
+                    {% for fp in sb.font_pairings %}<option value="{{ fp.id }}">{{ fp.label }} — {{ fp.description }}</option>{% endfor %}
+                  </select>
+                  <div class="form-text font-preview" id="font-preview">The quick brown fox jumps over the lazy dog. <strong>Headline weight</strong>.</div>
+                </div>
+                <div class="col-md-5">
+                  <fieldset>
+                    <legend class="form-label fs-6 mb-2">Corners</legend>
+                    <div class="btn-group w-100" role="group" aria-label="Corner radius">
+                      {% for r in sb.radius_options %}
+                      <input type="radio" class="btn-check cfg-radio" name="radius" id="radius-{{ r.id }}" value="{{ r.id }}" data-key="plan.theme.radius" autocomplete="off" {% if r.id == 'soft' %}checked{% endif %}>
+                      <label class="btn btn-outline-secondary" for="radius-{{ r.id }}">{{ r.label }}</label>
+                      {% endfor %}
+                    </div>
+                  </fieldset>
+                </div>
+                <div class="col-md-6">
+                  <label for="cfg-title-icon" class="form-label">Navbar icon <small class="text-body-secondary">(Bootstrap icon name)</small></label>
+                  <div class="input-group">
+                    <span class="input-group-text"><i class="bi bi-robot" id="cfg-title-icon-preview" aria-hidden="true"></i></span>
+                    <input type="text" class="form-control cfg-field" id="cfg-title-icon" value="robot" data-key="title_icon" autocomplete="off">
+                  </div>
+                </div>
+              </div>
+
+              <div class="wizard-nav d-flex justify-content-between">
+                <button class="btn btn-outline-secondary btn-prev" data-prev="tab-structure">
+                  <i class="bi bi-arrow-left" aria-hidden="true"></i> Back
+                </button>
+                <button class="btn btn-primary btn-next" data-next="tab-voice">
+                  Next: Voice <i class="bi bi-arrow-right" aria-hidden="true"></i>
+                </button>
               </div>
+            </div>
+          </div>
+        </div>
 
-              <div class="mb-4">
-                <label class="form-label">PostHog Analytics</label>
-                <div class="form-check form-switch mb-2">
-                  <input class="form-check-input" type="checkbox" id="cfg-posthog-enabled" data-key="posthog.enabled">
-                  <label class="form-check-label" for="cfg-posthog-enabled">Enable PostHog</label>
+        {% comment %} ───── Step 7: Voice ───── {% endcomment %}
+        <div class="tab-pane fade" id="step-voice" role="tabpanel" aria-labelledby="tab-voice">
+          <div class="card">
+            <div class="card-body">
+              <h2 class="h4 card-title mb-1">Voice &amp; first content</h2>
+              <p class="text-body-secondary">Set the tone, then let the assistant draft the welcome post and about page — or write them yourself.</p>
+
+              <div class="row g-3 mb-3">
+                <div class="col-md-7">
+                  <fieldset>
+                    <legend class="form-label fs-6 mb-2">Tone</legend>
+                    <div class="d-flex flex-wrap gap-2">
+                      {% for t in sb.tones %}
+                      <input type="radio" class="btn-check cfg-radio" name="tone" id="tone-{{ t.id }}" value="{{ t.id }}"
+                             data-key="tone" autocomplete="off" {% if forloop.first %}checked{% endif %}>
+                      <label class="btn btn-outline-secondary btn-sm rounded-pill" for="tone-{{ t.id }}" title="{{ t.description | escape }}">{{ t.label }}</label>
+                      {% endfor %}
+                    </div>
+                  </fieldset>
+                </div>
+                <div class="col-md-5">
+                  <label for="cfg-audience" class="form-label">Audience</label>
+                  <select class="form-select cfg-field" id="cfg-audience" data-key="audience">
+                    {% for a in sb.audiences %}<option value="{{ a.id }}">{{ a.label }}</option>{% endfor %}
+                  </select>
                 </div>
-                <input type="text" class="form-control cfg-field" id="cfg-posthog-key"
-                       placeholder="phc_your_key_here" data-key="posthog.api_key">
               </div>
 
               <div class="mb-3">
-                <label class="form-label">Social Links <small class="text-muted">(optional)</small></label>
-                <div class="row g-2">
-                  <div class="col-md-6">
-                    <div class="input-group">
-                      <span class="input-group-text"><i class="bi bi-twitter-x"></i></span>
-                      <input type="text" class="form-control cfg-field" placeholder="username" data-key="twitter_username">
+                <label for="cfg-welcome-title" class="form-label d-flex justify-content-between">
+                  <span>Welcome post title</span>
+                  <button class="btn btn-link btn-sm p-0 sb-ask" type="button"
+                          data-ask="Using my brief and the {tone} tone for {audience}, write the welcome post (title + 150–250 words of Markdown body) and the about page (100–200 words), then apply both.">
+                    <i class="bi bi-stars" aria-hidden="true"></i> Draft both with <span class="sb-provider-name">Claude</span>
+                  </button>
+                </label>
+                <input type="text" class="form-control cfg-field" id="cfg-welcome-title" data-key="welcome_title"
+                       placeholder="Hello, world" autocomplete="off">
+              </div>
+              <div class="mb-3">
+                <label for="cfg-welcome-body" class="form-label">Welcome post body <small class="text-body-secondary">(Markdown)</small></label>
+                <textarea class="form-control cfg-field font-monospace small" id="cfg-welcome-body" rows="5" data-key="welcome_body"
+                          placeholder="Why this site exists, what readers will find, what is coming next."></textarea>
+              </div>
+              <div>
+                <label for="cfg-about-body" class="form-label">About page <small class="text-body-secondary">(Markdown)</small></label>
+                <textarea class="form-control cfg-field font-monospace small" id="cfg-about-body" rows="4" data-key="about_body"
+                          placeholder="Who you are, what you do, how to reach you."></textarea>
+              </div>
+
+              <div class="wizard-nav d-flex justify-content-between">
+                <button class="btn btn-outline-secondary btn-prev" data-prev="tab-appearance">
+                  <i class="bi bi-arrow-left" aria-hidden="true"></i> Back
+                </button>
+                <button class="btn btn-primary btn-next" data-next="tab-integrations">
+                  Next: Integrations <i class="bi bi-arrow-right" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {% comment %} ───── Step 8: Integrations ───── {% endcomment %}
+        <div class="tab-pane fade" id="step-integrations" role="tabpanel" aria-labelledby="tab-integrations">
+          <div class="card">
+            <div class="card-body">
+              <h2 class="h4 card-title mb-1">Integrations</h2>
+              <p class="text-body-secondary">Everything here is off-by-default safe: nothing sends data until you add a key, and keys never go in <code>_config.yml</code>.</p>
+
+              <div class="list-group wizard-integrations mb-3">
+                {% for i in sb.integrations %}
+                <div class="list-group-item">
+                  <div class="form-check form-switch d-flex align-items-start gap-3 ps-0">
+                    <input class="form-check-input cfg-switch ms-0 mt-1 flex-shrink-0" type="checkbox" id="int-{{ i.id }}"
+                           data-key="integration.{{ i.id }}" {% if i.default %}checked{% endif %}>
+                    <label class="form-check-label flex-grow-1" for="int-{{ i.id }}">
+                      <i class="bi {{ i.icon }} me-1" aria-hidden="true"></i><strong>{{ i.label }}</strong>
+                      <span class="d-block small text-body-secondary">{{ i.description }}</span>
+                    </label>
+                  </div>
+                  {% if i.id == 'giscus' %}
+                  <div class="row g-2 mt-2 wizard-subfields" data-for="int-giscus">
+                    <div class="col-md-6">
+                      <label for="cfg-giscus-repo-id" class="form-label small mb-1">Repo ID</label>
+                      <input type="text" class="form-control form-control-sm cfg-field" id="cfg-giscus-repo-id" data-key="giscus.repo_id" placeholder="R_kgDO…" autocomplete="off">
+                    </div>
+                    <div class="col-md-6">
+                      <label for="cfg-giscus-category-id" class="form-label small mb-1">Category ID</label>
+                      <input type="text" class="form-control form-control-sm cfg-field" id="cfg-giscus-category-id" data-key="giscus.category_id" placeholder="DIC_kwDO…" autocomplete="off">
+                    </div>
+                    <div class="col-12 form-text">Get both from <a href="https://giscus.app" target="_blank" rel="noopener">giscus.app</a> after enabling Discussions on the repo.</div>
+                  </div>
+                  {% endif %}
+                  {% if i.id == 'posthog' %}
+                  <div class="row g-2 mt-2 wizard-subfields" data-for="int-posthog">
+                    <div class="col-12">
+                      <label for="cfg-posthog-key" class="form-label small mb-1">PostHog project key</label>
+                      <input type="text" class="form-control form-control-sm cfg-field" id="cfg-posthog-key" data-key="posthog.api_key" placeholder="phc_…" autocomplete="off">
                     </div>
                   </div>
-                  <div class="col-md-6">
-                    <div class="input-group">
-                      <span class="input-group-text"><i class="bi bi-linkedin"></i></span>
-                      <input type="text" class="form-control cfg-field" placeholder="username" data-key="linkedin_username">
+                  {% endif %}
+                  {% if i.id == 'ai_chat' %}
+                  <div class="row g-2 mt-2 wizard-subfields" data-for="int-ai_chat">
+                    <div class="col-md-6">
+                      <label for="cfg-ai-provider" class="form-label small mb-1">Chat provider</label>
+                      <select class="form-select form-select-sm cfg-field" id="cfg-ai-provider" data-key="ai_provider">
+                        {% for p in sb.providers %}<option value="{{ p.id }}">{{ p.label }} ({{ p.vendor }})</option>{% endfor %}
+                      </select>
                     </div>
+                    <div class="col-12 form-text">Written as <code>ai_chat.provider</code>; the site's chat proxy needs the matching key (<code>.env.example</code> lists it).</div>
                   </div>
+                  {% endif %}
                 </div>
+                {% endfor %}
               </div>
 
-              <div class="d-flex justify-content-between">
-                <button class="btn btn-outline-secondary btn-prev" data-prev="tab-collections">
-                  <i class="bi bi-arrow-left"></i> Back
+              <div class="row g-3">
+                <div class="col-md-6">
+                  <label for="cfg-ga" class="form-label">Google Analytics 4 ID <small class="text-body-secondary">(optional)</small></label>
+                  <input type="text" class="form-control cfg-field" id="cfg-ga" placeholder="G-XXXXXXXXXX" data-key="google_analytics" autocomplete="off">
+                </div>
+                <div class="col-md-3">
+                  <label for="cfg-twitter" class="form-label">X / Twitter</label>
+                  <div class="input-group">
+                    <span class="input-group-text"><i class="bi bi-twitter-x" aria-hidden="true"></i></span>
+                    <input type="text" class="form-control cfg-field" id="cfg-twitter" placeholder="handle" data-key="twitter_username" autocomplete="off">
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <label for="cfg-linkedin" class="form-label">LinkedIn</label>
+                  <div class="input-group">
+                    <span class="input-group-text"><i class="bi bi-linkedin" aria-hidden="true"></i></span>
+                    <input type="text" class="form-control cfg-field" id="cfg-linkedin" placeholder="handle" data-key="linkedin_username" autocomplete="off">
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label for="cfg-image-provider" class="form-label">Preview-image renderer <small class="text-body-secondary">(optional)</small></label>
+                  <select class="form-select cfg-field" id="cfg-image-provider" data-key="image_provider">
+                    <option value="">None</option>
+                    {% for ip in sb.image_providers %}<option value="{{ ip.id }}">{{ ip.label }} ({{ ip.vendor }}) — {{ ip.model }}</option>{% endfor %}
+                  </select>
+                  <div class="form-text">Pre-configures <code>preview_images</code> in <code>_config.yml</code> for the theme's preview-image generator; the key goes in <code>.env</code>.</div>
+                </div>
+              </div>
+
+              <div class="wizard-nav d-flex justify-content-between">
+                <button class="btn btn-outline-secondary btn-prev" data-prev="tab-voice">
+                  <i class="bi bi-arrow-left" aria-hidden="true"></i> Back
                 </button>
-                <button class="btn btn-primary btn-next" data-next="tab-review">
-                  Review &amp; Download <i class="bi bi-arrow-right"></i>
+                <button class="btn btn-primary btn-next" data-next="tab-build">
+                  Next: Build <i class="bi bi-arrow-right" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- ───── Step 5: Review & Download ───── -->
-        <div class="tab-pane fade" id="step-review" role="tabpanel">
+        {% comment %} ───── Step 9: Build ───── {% endcomment %}
+        <div class="tab-pane fade" id="step-build" role="tabpanel" aria-labelledby="tab-build">
           <div class="card">
             <div class="card-body">
-              <h4 class="card-title mb-3">Review Your Configuration</h4>
-              <p class="text-muted">This is the <code>_config.yml</code> that will be generated. Review it, then download or copy.</p>
-
-              <div class="position-relative">
-                <pre class="bg-dark text-light p-3 rounded" style="max-height:450px;overflow:auto"><code id="yaml-preview">Loading…</code></pre>
-                <button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2" id="btn-copy"
-                        title="Copy to clipboard">
-                  <i class="bi bi-clipboard"></i>
-                </button>
-              </div>
+              <h2 class="h4 card-title mb-1">Build &amp; launch</h2>
+              <p class="text-body-secondary">Every file is in the preview on the right. Write the project and start Docker from here, or take the files and run the commands yourself.</p>
 
-              <div class="d-flex justify-content-between mt-3">
-                <button class="btn btn-outline-secondary btn-prev" data-prev="tab-analytics">
-                  <i class="bi bi-arrow-left"></i> Back
-                </button>
-                <div>
-                  <button class="btn btn-outline-primary me-2" id="btn-copy-full">
-                    <i class="bi bi-clipboard"></i> Copy YAML
+              <div id="wizard-review-warnings" role="status" aria-live="polite" class="mb-3"></div>
+
+              <div class="mb-3" id="sb-project-picker">
+                <label for="sb-project-select" class="form-label fw-semibold">Modify an existing site</label>
+                <div class="input-group">
+                  <select class="form-select" id="sb-project-select" disabled>
+                    <option value="">Connect the dev proxy to list sites</option>
+                  </select>
+                  <button class="btn btn-outline-secondary sb-needs-proxy" type="button" id="btn-project-open" disabled>
+                    <i class="bi bi-folder2-open" aria-hidden="true"></i> Open
                   </button>
-                  <button class="btn btn-primary" id="btn-download">
-                    <i class="bi bi-download"></i> Download _config.yml
+                </div>
+                <div class="form-text">Any site under the target root — one this builder wrote, or one you copied there. The assistant can then read, edit and add files, generate images and rebuild it.</div>
+              </div>
+
+              <div class="mb-3">
+                <label for="cfg-target" class="form-label fw-semibold">Project folder</label>
+                <div class="input-group">
+                  <span class="input-group-text sb-target-root" id="target-root" title="New sites are created under this folder">…/</span>
+                  <input type="text" class="form-control cfg-field" id="cfg-target" data-key="target" placeholder="my-site" autocomplete="off" aria-describedby="target-resolved">
+                  <button class="btn btn-outline-secondary" type="button" id="btn-target-check">
+                    <i class="bi bi-folder2-open" aria-hidden="true"></i> Check
                   </button>
                 </div>
+                <div class="form-text" id="target-resolved">Created beside the theme checkout. Must be new or empty unless you allow overwriting.</div>
+                <div class="form-check form-switch mt-2">
+                  <input class="form-check-input cfg-switch" type="checkbox" id="cfg-overwrite" data-key="overwrite">
+                  <label class="form-check-label" for="cfg-overwrite">Allow replacing files that already exist there</label>
+                </div>
               </div>
 
-              <div class="alert alert-info mt-4" role="alert">
-                <i class="bi bi-info-circle"></i>
-                <strong>Next step:</strong> Replace the <code>_config.yml</code> in your project root with the downloaded file, then restart your dev server.
+              <div class="sb-build-actions d-grid gap-2 d-sm-flex flex-wrap mb-3">
+                <button class="btn btn-primary sb-needs-proxy" type="button" id="btn-write-project" disabled>
+                  <i class="bi bi-hdd" aria-hidden="true"></i> Write project
+                </button>
+                <button class="btn btn-success sb-needs-proxy" type="button" id="btn-compose-up" disabled>
+                  <i class="bi bi-play-fill" aria-hidden="true"></i> docker compose up
+                </button>
+                <button class="btn btn-outline-secondary sb-needs-proxy" type="button" id="btn-compose-build" disabled
+                        title="Runs jekyll build inside the running container to validate the site">
+                  <i class="bi bi-hammer" aria-hidden="true"></i> jekyll build
+                </button>
+                <button class="btn btn-outline-secondary sb-needs-proxy" type="button" id="btn-compose-logs" disabled>
+                  <i class="bi bi-terminal" aria-hidden="true"></i> Logs
+                </button>
+                <button class="btn btn-outline-danger sb-needs-proxy" type="button" id="btn-compose-down" disabled>
+                  <i class="bi bi-stop-fill" aria-hidden="true"></i> Stop
+                </button>
+                <a class="btn btn-outline-primary" id="btn-open-site" href="http://localhost:{{ sb_port }}/" target="_blank" rel="noopener">
+                  <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i> Open site
+                </a>
+                <button class="btn btn-outline-secondary" type="button" id="btn-check-live">
+                  <i class="bi bi-activity" aria-hidden="true"></i> Is it live?
+                </button>
+              </div>
+              <p class="small text-body-secondary sb-proxy-hint" id="build-proxy-hint">
+                <i class="bi bi-plug" aria-hidden="true"></i> Connect the dev proxy (step 1) to write and run from here. Without it, download the bundle and run the commands below.
+              </p>
+
+              <pre class="wizard-terminal" id="wizard-terminal" aria-live="polite" aria-label="Build output" tabindex="0" hidden></pre>
+
+              <details class="mt-3" id="manual-run">
+                <summary class="fw-semibold">Run it yourself</summary>
+                <ol class="small mt-2 mb-0 sb-manual-steps">
+                  <li>Download <strong>Bundle</strong> from the preview panel and run it: <span class="wizard-cmd d-inline-flex"><code id="cmd-bundle">bash zer0-site-bundle.sh my-site</code><button class="btn btn-sm btn-link" type="button" data-copy-target="#cmd-bundle" aria-label="Copy command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></span></li>
+                  <li>Start the dev server: <span class="wizard-cmd d-inline-flex"><code id="cmd-up">cd my-site &amp;&amp; docker compose up</code><button class="btn btn-sm btn-link" type="button" data-copy-target="#cmd-up" aria-label="Copy command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></span></li>
+                  <li>Open <a id="link-local" href="http://localhost:{{ sb_port }}/" target="_blank" rel="noopener">http://localhost:{{ sb_port }}/</a>. Edit a file — the page reloads by itself.</li>
+                  <li>Publish: <span class="wizard-cmd d-inline-flex"><code id="cmd-publish">gh repo create my-site --public --source=. --push</code><button class="btn btn-sm btn-link" type="button" data-copy-target="#cmd-publish" aria-label="Copy command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></span> then enable Pages in the repository settings.</li>
+                </ol>
+              </details>
+
+              <div class="wizard-nav d-flex justify-content-between">
+                <button class="btn btn-outline-secondary btn-prev" data-prev="tab-integrations">
+                  <i class="bi bi-arrow-left" aria-hidden="true"></i> Back
+                </button>
+                <button class="btn btn-outline-primary" type="button" id="btn-download-all">
+                  <i class="bi bi-file-earmark-zip" aria-hidden="true"></i> Download bundle
+                </button>
               </div>
             </div>
           </div>
         </div>
 
-      </div><!-- /tab-content -->
+      </div>{% comment %} /tab-content {% endcomment %}
+    </div>
+
+    {% comment %} ============================================================ {% endcomment %}
+    {% comment %} 3. Side column — Claude session + live multi-file preview     {% endcomment %}
+    {% comment %} ============================================================ {% endcomment %}
+    <div class="col-lg-4">
+      <aside class="wizard-side sticky-lg-top" aria-label="AI session and generated files">
+
+        {% include setup/claude-session.html %}
+
+        <section class="wizard-preview mt-3" aria-labelledby="wizard-preview-heading">
+          <div class="d-flex align-items-center justify-content-between mb-2">
+            <h2 class="h6 mb-0" id="wizard-preview-heading">
+              <i class="bi bi-files" aria-hidden="true"></i> Generated files
+            </h2>
+            <span class="badge text-bg-secondary wizard-preview-live">live</span>
+          </div>
+
+          <div class="wizard-file-tabs nav nav-pills flex-nowrap overflow-auto mb-2" id="wizard-file-tabs" role="tablist" aria-label="Generated files">
+            {% for f in sb.generated_files %}
+            <button class="nav-link wizard-file-tab{% if forloop.first %} active{% endif %}" type="button" role="tab"
+                    data-file="{{ f.path }}" title="{{ f.description | escape }}"
+                    aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">{{ f.label }}</button>
+            {% endfor %}
+          </div>
+
+          <div class="position-relative">
+            <pre class="wizard-preview-code bg-dark text-light p-3 rounded" data-file="_config.yml"><code id="yaml-preview">Loading…</code></pre>
+            <button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2" id="btn-copy"
+                    type="button" title="Copy this file" aria-label="Copy this file to clipboard">
+              <i class="bi bi-clipboard" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="small text-body-secondary mt-1" id="wizard-file-description"></div>
+
+          <div class="d-grid gap-2 d-sm-flex mt-3">
+            <button class="btn btn-outline-primary flex-sm-fill" id="btn-copy-full" type="button">
+              <i class="bi bi-clipboard" aria-hidden="true"></i> Copy file
+            </button>
+            <button class="btn btn-primary flex-sm-fill" id="btn-download" type="button">
+              <i class="bi bi-download" aria-hidden="true"></i> Download file
+            </button>
+          </div>
+        </section>
+      </aside>
+    </div>
+
+  </div>{% comment %} /row {% endcomment %}
+
+  <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
+    <div class="toast align-items-center text-bg-dark border-0" id="wizard-toast" role="status" aria-live="polite" aria-atomic="true">
+      <div class="d-flex">
+        <div class="toast-body" id="wizard-toast-body">Copied</div>
+        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
     </div>
   </div>
 </div>
 
-<script src="{{ '/assets/js/setup-wizard.js' | relative_url }}"></script>
+{% comment %} Catalogs + framework brief shared by both scripts (from _data/site_builder.yml). {% endcomment %}
+<script id="siteBuilderData" type="application/json">{{ sb | jsonify }}</script>
+
+{% comment %}
+  Runtime configuration. The AI session is proxy-only: the endpoint below is
+  the dev proxy's /api/wizard base; chat goes to ai_chat.endpoint (or an explicit
+  site_builder.chat_endpoint). No credential is ever present in this JSON —
+  a token pasted on the Connect step goes straight to the localhost proxy.
+{% endcomment %}
+<script id="siteBuilderConfig" type="application/json">
+{
+  "enabled": {% if sb_cfg.enabled == false %}false{% else %}true{% endif %},
+  "endpoint": {{ sb_cfg.endpoint | default: "/api/wizard" | jsonify }},
+  "chatEndpoint": {{ sb_cfg.chat_endpoint | default: site.ai_chat.endpoint | default: "/api/chat" | jsonify }},
+  "provider": {{ sb_cfg.provider | default: "auto" | jsonify }},
+  "model": {{ sb_cfg.model | default: site.ai_chat.model | default: "claude-opus-4-8" | jsonify }},
+  "mode": {{ sb_cfg.mode | default: "guided" | jsonify }},
+  "imageProvider": {{ sb_cfg.image_provider | default: "" | jsonify }},
+  "maxTokens": {{ sb_cfg.max_tokens | default: 8192 }},
+  "defaultPort": {{ sb_port }},
+  "searchIndex": {{ "/search.json" | relative_url | jsonify }},
+  "docsBase": {{ "/docs/" | relative_url | jsonify }},
+  "themeVersion": {{ site.theme_version | default: site.data.theme-manifest.version | default: "" | jsonify }},
+  "themeRepository": "bamr87/zer0-mistakes"
+}
+</script>
+
+<script defer src="{{ '/assets/js/setup-wizard.js' | relative_url }}"></script>
+<script defer src="{{ '/assets/js/site-builder.js' | relative_url }}"></script>