@explorer02/cfm-survey-sdk 0.2.4 → 0.2.6

package/templates/docs/MANIFEST.json

@@ -19,10 +19,10 @@
   "surveyUiConfig": {
     "artifact": "survey-ui-config.json",
     "schema": "templates/survey-ui-config.schema.json",
-    "cliCommand": "npx cfm-sdk customize-ui",
+    "cliCommand": "npx cfm-sdk customize",
     "cliCommands": {
-      "aws": "npx cfm-sdk customize-ui",
-      "local": "npx cfm-sdk customize",
+      "default": "npx cfm-sdk customize",
+      "remoteClient": "npx cfm-sdk customize-ui",
       "exportPreviews": "npx cfm-sdk export-previews"
     },
     "wizardApiDoc": "00-integration/wizard-api.md",
@@ -156,6 +156,10 @@
       "path": "00-integration/client-lib-folder.md",
       "purpose": "src/lib layout — customFieldValues + surveyUi portable templates"
     },
+    {
+      "path": "00-integration/wizard-chrome-contract.md",
+      "purpose": "Wizard DOM/CSS hook contract — copy-first Header/Footer/ProgressBar templates (Phase 5)"
+    },
     {
       "path": "00-integration/wizard-preview-build-guide.md",
       "purpose": "Build client components for wizard live preview — --cfm-* vars and data-cfm-* hooks (Phase 5)"
@@ -178,7 +182,19 @@
     },
     {
       "path": "00-integration/wizard-api.md",
-      "purpose": "EC2 /wizard/* API for customize-ui and preview hosting"
+      "purpose": "EC2 /wizard/* API — customize-ui remote-client fallback only"
+    },
+    {
+      "path": "00-integration/wizard-troubleshooting.md",
+      "purpose": "Fix mock preview, local vs EC2, layout toggles, all-11-types wizard export (Phase 6b)"
+    },
+    {
+      "path": "00-integration/mockup-ui-extraction.md",
+      "purpose": "UI-only extraction from client mockup — no logic/language/types from images (Phase 0–4)"
+    },
+    {
+      "path": "00-integration/placeholders-and-custom-fields-wiring.md",
+      "purpose": "Discover placeholder + _c_ keys from fetch; precise useSurveySDK wiring (Phase 4–5)"
     }
   ],
   "templateScaleFiles": [
@@ -203,7 +219,7 @@
       "apiBaseEnv": "CFM_DEPLOY_API_BASE",
       "apiBaseDefault": "http://43.204.26.213:3000",
       "wizardClientUrlPattern": "{CFM_DEPLOY_API_BASE}/wizard-app/index.html?session={sessionId}&secret={sessionSecret}",
-      "wizardClientUrlNote": "Printed by customize-ui after component previews upload to S3 — agent copies link and sends to client",
+      "wizardClientUrlNote": "customize-ui only (remote client): EC2 link after preview upload — default is npx cfm-sdk customize on localhost",
       "instanceIdEnv": "CFM_INSTANCE_ID",
       "outDirEnv": "OUT_DIR",
       "healthPath": "/health",
@@ -263,11 +279,12 @@
         "../AGENT.md",
         "00-integration/agent-operating-contract.md",
         "00-integration/agent-execution-flow.md",
+        "00-integration/mockup-ui-extraction.md",
         "MANIFEST.json"
       ],
       "actions": [
         "detectFramework",
-        "extractBrandingFromClientPrompt"
+        "extractUiOnlyFromMockup"
       ]
     },
     {
@@ -320,6 +337,8 @@
       "readAlways": [
         "00-integration/agent-operating-contract.md",
         "00-integration/agent-execution-flow.md",
+        "00-integration/mockup-ui-extraction.md",
+        "00-integration/placeholders-and-custom-fields-wiring.md",
         "00-integration/component-checklist.md",
         "00-integration/canonical-survey-fixtures.md",
         "00-integration/client-lib-folder.md",
@@ -409,21 +428,23 @@
         "00-integration/ui-customization-wizard.md",
         "00-integration/wizard-preview-build-guide.md",
         "00-integration/wizard-question-type-styling.md",
-        "00-integration/wizard-api.md"
+        "00-integration/wizard-api.md",
+        "00-integration/wizard-troubleshooting.md"
       ],
-      "cliCommand": "npx cfm-sdk customize-ui",
-      "cliCommandLocal": "npx cfm-sdk customize",
+      "cliCommand": "npx cfm-sdk customize",
+      "cliCommandRemote": "npx cfm-sdk customize-ui",
       "cliConfirmCommand": "npx cfm-sdk confirm-ui-config",
-      "output": "survey-ui-config.final.json",
-      "outputArtifacts": [
+      "output": "survey-ui-config.json",
+      "outputArtifactsRemote": [
         "survey-ui-config.seed.json",
         "survey-ui-config.final.json",
         "survey-ui-config.diff.json",
         "survey-ui-config.diff.md"
       ],
       "agentMustWait": true,
-      "waitUntil": "cliExit0ConfigurationReady",
-      "clientHandoff": "shareDeployedWizardUrlAfterS3Upload",
+      "waitUntil": "cliExit0UiConfigurationSaved",
+      "clientHandoff": "openLocalhostWizardSameMachine",
+      "clientHandoffRemote": "shareDeployedWizardUrlAfterPreviewUpload",
       "prerequisites": [
         "phase6VerifyPassed",
         "devServerRunning"

package/templates/docs/index.md

@@ -77,9 +77,9 @@ Full step-by-step: [`agent-execution-flow.md`](00-integration/agent-execution-fl
 | **2** Instance ID | Get JWT | `useSurveySDK.md` — **ask client** |
 | **3** SDK contract | Hook + logic | `client-integration-guide.md`, `question-type-sdk-matrix.md`, logic docs |
 | **4** Plan | Inventory + copy dispatcher | `component-checklist.md`, per-type MANIFEST docs, `implementation_plan.md` |
-| **5** Build | Wizard-ready UI | `constraints.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md`, `03-ui-specs/*` |
+| **5** Build | Wizard-ready UI | `wizard-chrome-contract.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md`, `03-ui-specs/*` |
 | **6** Verify | Build + dev server | `verify-agent-build.sh` — **ask wizard** |
-| **6b** Wizard | Optional customize | `customize-ui` — only if client said yes |
+| **6b** Wizard | Optional customize | **`npx cfm-sdk customize`** (default) — EC2 `customize-ui` only if client on another device |
 | **6c** Apply | Sync final config | `apply-ui-config.md` |
 | **7** Deploy | Production | **ask deploy** — `aws-deploy.md` or Vercel |
 
@@ -101,7 +101,7 @@ Every agent build includes these even if the client later skips the wizard:
 | Scale components | `templates/*Scale*.tsx` etc. | `src/components/` per inventory |
 | Draft config | agent-written | `./survey-ui-config.json` |
 
-**Chrome:** `data-cfm-logo` / `data-cfm-logo-text`, `data-cfm-company`, `data-cfm-btn-next`, `data-cfm-btn-back`, `data-cfm-survey-title`, `data-cfm-thank-you` — see `wizard-preview-build-guide.md`.
+**Chrome:** copy `templates/docs/templates/Header.tsx` etc. — see `wizard-chrome-contract.md` for full hook list.
 
 **Selection pattern:** focus ring = outer border + inner dot; cell selected = annulus fill — see `wizard-question-type-styling.md`.
 
@@ -130,12 +130,10 @@ Run: `bash templates/verify-agent-build.sh`
 Only after Phase 6 passes and client says **yes**:
 
 ```bash
-export CFM_INSTANCE_ID="<JWT>"
-export CFM_DEPLOY_API_BASE="http://43.204.26.213:3000"
-npx cfm-sdk customize-ui   # uploads previews → prints client link → WAITS until submit
+npx cfm-sdk customize   # DEFAULT — opens localhost:4200, WAITS until client saves
 ```
 
-**Phase 6b:** CLI uploads component previews to S3, prints deployed wizard link for the client, polls until `Configuration ready`. Read `survey-ui-config.diff.md`. Do **not** apply yet.
+**Phase 6b:** Client on same machine → `customize` writes `survey-ui-config.json` directly. Remote client → `customize-ui` + EC2 link (see `wizard-troubleshooting.md`). Apply per `apply-ui-config.md`.
 
 **Phase 6c:** Apply from `survey-ui-config.final.json` per [`wizard-config-handoff.md`](00-integration/wizard-config-handoff.md) + [`apply-ui-config.md`](00-integration/apply-ui-config.md) — **every** diff path. Then:
 
@@ -151,13 +149,13 @@ Re-run verify script + build.
 
 | When | Read |
 |------|------|
-| **Always first** | `agent-operating-contract.md`, `agent-execution-flow.md`, `index.md`, `client-integration-guide.md`, `constraints.md` |
+| **Always first** | `agent-operating-contract.md`, `agent-execution-flow.md`, `mockup-ui-extraction.md`, `index.md`, `client-integration-guide.md`, `constraints.md` |
 | Phase 3 contract | `question-type-sdk-matrix.md`, `useSurveySDK.md`, logic/navigation docs |
-| Before React code | `component-checklist.md`, `templates/Question.tsx`, per-type `03-ui-specs/*` |
+| Phase 4 plan | `mockup-ui-extraction.md`, `placeholders-and-custom-fields-wiring.md`, `component-checklist.md`, per-type `03-ui-specs/*` |
 | Wizard build | `wizard-preview-build-guide.md`, `wizard-question-type-styling.md` |
-| Wizard run | `wizard-config-handoff.md`, `ui-customization-wizard.md`, `wizard-api.md` |
+| Wizard run | `wizard-config-handoff.md`, `ui-customization-wizard.md`, `wizard-api.md`, `wizard-troubleshooting.md` |
 | After wizard (apply all paths) | `apply-ui-config.md` |
-| Deploy | `aws-deploy.md`, `setup.md#nextjs-aws-static-export` |
+| Deploy | `aws-deploy.md` (§ Logos & local assets), `setup.md#nextjs-aws-static-export` |
 | Config audit | `02-reference/config-field-index.md` |
 
 ---

package/templates/docs/templates/Footer.tsx

@@ -0,0 +1,72 @@
+/**
+ * Wizard-ready Footer — copy to src/components/Footer.tsx
+ * Required: footer.cfm-footer, data-cfm-copyright, data-cfm-footer-links, data-cfm-footer-logo
+ */
+'use client';
+
+export default function Footer() {
+  return (
+    <footer
+      className="cfm-footer w-full"
+      style={{
+        background: 'var(--cfm-footer-bg, #262626)',
+        color: 'var(--cfm-footer-text, #9ca3af)',
+        padding: 'var(--cfm-footer-padding-y, 24px) var(--cfm-footer-padding-x, 40px)',
+      }}
+    >
+      <div
+        className="cfm-footer-inner mx-auto grid w-full max-w-4xl items-end gap-6"
+        style={{
+          display: 'var(--cfm-footer-inner-display, grid)',
+          flexDirection: 'var(--cfm-footer-inner-direction, row)' as React.CSSProperties['flexDirection'],
+          gridTemplateColumns: '1fr 1fr 1fr',
+        }}
+      >
+        <div
+          className="space-y-3"
+          style={{
+            gridColumn: 'var(--cfm-footer-logo-col, 1)',
+            justifySelf: 'var(--cfm-footer-logo-justify, start)',
+          }}
+        >
+          <img
+            data-cfm-footer-logo
+            data-cfm-logo
+            src="./logo.svg"
+            alt=""
+            style={{
+              display: 'none',
+              width: 'var(--cfm-footer-logo-width, 120px)',
+              height: 'var(--cfm-footer-logo-height, 32px)',
+              objectFit: 'contain',
+            }}
+          />
+          <p
+            data-cfm-copyright
+            className="text-xs"
+            style={{ color: 'var(--cfm-footer-text, #9ca3af)' }}
+          >
+            © Company
+          </p>
+        </div>
+
+        <nav
+          data-cfm-footer-links
+          className="flex flex-wrap gap-x-6 gap-y-2 text-xs"
+          style={{
+            gridColumn: 'var(--cfm-footer-links-col, 3)',
+            justifySelf: 'var(--cfm-footer-links-justify, end)',
+          }}
+        >
+          <a
+            href="#"
+            className="transition-colors hover:opacity-80"
+            style={{ color: 'var(--cfm-footer-link, #9ca3af)' }}
+          >
+            Privacy
+          </a>
+        </nav>
+      </div>
+    </footer>
+  );
+}

package/templates/docs/templates/Header.tsx

@@ -0,0 +1,84 @@
+/**
+ * Wizard-ready Header — copy to src/components/Header.tsx
+ * Required hooks: data-cfm-logo, data-cfm-logo-text, data-cfm-company
+ * Required class: cfm-header (layout toggles target header only — not progress bar)
+ */
+'use client';
+
+type HeaderProps = {
+  /** When true, omits outer shadow — use inside SurveyStickyChrome */
+  embedded?: boolean;
+};
+
+export default function Header({ embedded = false }: HeaderProps) {
+  return (
+    <header
+      className={`cfm-header relative w-full ${embedded ? '' : 'z-10 shadow-[0_2px_8px_rgba(0,0,0,0.06)]'}`}
+      style={{
+        height: 'var(--cfm-header-height, 120px)',
+        background: 'var(--cfm-header-bg, #fff)',
+        borderBottom: '1px solid var(--cfm-header-border, #e5e7eb)',
+        boxShadow: embedded ? undefined : 'var(--cfm-header-shadow, 0 2px 8px rgba(0,0,0,0.06))',
+      }}
+    >
+      <div
+        className="cfm-header-inner grid h-full w-full items-center"
+        style={{
+          gridTemplateColumns: '1fr 1fr 1fr',
+          padding: `0 var(--cfm-header-padding-x, 40px)`,
+          gap: 'var(--cfm-header-brand-gap, 16px)',
+        }}
+      >
+        <div
+          className="flex items-center"
+          style={{
+            gridColumn: 'var(--cfm-header-logo-col, 1)',
+            justifySelf: 'var(--cfm-header-logo-justify, start)',
+          }}
+        >
+          <img
+            data-cfm-logo
+            src="./logo.svg"
+            alt="Logo"
+            className="object-contain"
+            style={{
+              display: 'none',
+              width: 'var(--cfm-header-logo-width, 120px)',
+              height: 'var(--cfm-header-logo-height, 120px)',
+              padding: 'var(--cfm-header-logo-padding, 10px)',
+              background: 'var(--cfm-primary)',
+            }}
+          />
+          <span
+            data-cfm-logo-text
+            className="font-semibold"
+            style={{
+              color: 'var(--cfm-header-company-color, var(--cfm-text))',
+              fontSize: 'var(--cfm-header-company-size, 18px)',
+              fontWeight: 'var(--cfm-header-company-weight, 600)',
+            }}
+          >
+            Company
+          </span>
+        </div>
+
+        <span
+          data-cfm-company
+          className="font-semibold"
+          style={{
+            gridColumn: 'var(--cfm-header-company-col, 2)',
+            justifySelf: 'var(--cfm-header-company-justify, center)',
+            marginTop: 'var(--cfm-header-company-margin-top, 0)',
+            marginLeft: 'var(--cfm-header-company-margin-left, 0)',
+            marginRight: 'var(--cfm-header-company-margin-right, 0)',
+            color: 'var(--cfm-header-company-color, var(--cfm-text))',
+            fontSize: 'var(--cfm-header-company-size, 18px)',
+            fontWeight: 'var(--cfm-header-company-weight, 600)',
+          }}
+        >
+          Company Name
+        </span>
+      </div>
+    </header>
+  );
+}

package/templates/docs/templates/LanguageSelector.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import type { SurveyLanguage } from '@explorer02/cfm-survey-sdk';
+
+type LanguageSelectorProps = {
+  languages: SurveyLanguage[];
+  selectedLanguage: string;
+  onChange: (language: string) => void;
+};
+
+/** Wizard toggle showLanguageSwitcher targets [data-cfm-language] */
+export default function LanguageSelector({
+  languages,
+  selectedLanguage,
+  onChange,
+}: LanguageSelectorProps) {
+  if (languages.length <= 1) return null;
+
+  return (
+    <div data-cfm-language className="mb-6 flex justify-end">
+      <select
+        value={selectedLanguage}
+        onChange={(e) => onChange(e.target.value)}
+        className="rounded border px-3 py-1.5 text-sm outline-none"
+        style={{
+          background: 'var(--cfm-language-bg, #fff)',
+          color: 'var(--cfm-language-text, #2563eb)',
+          borderColor: 'var(--cfm-language-border, #2563eb)',
+          borderRadius: 'var(--cfm-border-radius, 8px)',
+        }}
+      >
+        {languages.map((lang) => (
+          <option key={lang.code} value={lang.code}>
+            {lang.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

package/templates/docs/templates/PreviewBridgeInit.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useEffect } from 'react';
+import { initPreviewBridge } from '@/lib/previewBridge';
+
+/** Mount once in root layout — enables localhost dev preview with npx cfm-sdk customize */
+export function PreviewBridgeInit() {
+  useEffect(() => {
+    const cleanup = initPreviewBridge();
+    return cleanup;
+  }, []);
+  return null;
+}

package/templates/docs/templates/ProgressBar.tsx

@@ -0,0 +1,33 @@
+/**
+ * Wizard-ready ProgressBar — copy to src/components/ProgressBar.tsx
+ * Required: data-cfm-progress + class cfm-progress (separate from header toggle)
+ */
+'use client';
+
+type ProgressBarProps = {
+  progressPercentage: number;
+};
+
+export default function ProgressBar({ progressPercentage }: ProgressBarProps) {
+  const width = Math.min(100, Math.max(0, progressPercentage));
+
+  return (
+    <div data-cfm-progress className="cfm-progress w-full">
+      <div
+        className="w-full overflow-hidden rounded-full"
+        style={{
+          height: 'var(--cfm-progress-height, 12px)',
+          background: 'var(--cfm-progress-track, #e5e7eb)',
+        }}
+      >
+        <div
+          className="h-full rounded-full transition-all duration-300 ease-out"
+          style={{
+            width: `${width}%`,
+            background: 'var(--cfm-progress-fill, var(--cfm-primary))',
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/docs/templates/Question.tsx

@@ -101,13 +101,35 @@ export default function Question({
   }, [question, allAnswers, allQuestions, customFieldValues]);
 
   return (
-    <section id={question.id} className="space-y-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
-      <h2 className="text-lg font-medium leading-relaxed text-gray-900">
+    <section
+      id={question.id}
+      className="cfm-question-card space-y-4"
+      style={{
+        background: 'var(--cfm-card-bg, #fff)',
+        borderColor: 'var(--cfm-card-border-color, #e5e7eb)',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        padding: 'var(--cfm-card-padding, 24px)',
+        boxShadow: 'var(--cfm-card-shadow, 0 1px 3px rgba(0,0,0,0.1))',
+        borderRadius: 'var(--cfm-border-radius, 12px)',
+        fontFamily: 'var(--cfm-font-family)',
+      }}
+    >
+      <h2
+        className="text-lg font-medium leading-relaxed"
+        style={{ color: 'var(--cfm-text, #111827)' }}
+      >
         {question.questionNumber != null && (
-          <span className="mr-1 font-semibold">{question.questionNumber}.</span>
+          <span data-cfm-question-number className="mr-1 font-semibold">
+            {question.questionNumber}.
+          </span>
         )}
         <span dangerouslySetInnerHTML={{ __html: displayQuestionText }} />
-        {question.required && <span className="text-red-500 ml-1">*</span>}
+        {question.required && (
+          <span data-cfm-required className="ml-1 text-red-500">
+            *
+          </span>
+        )}
       </h2>
       {displayQuestionDescription && (
         <div
@@ -182,7 +204,14 @@ export default function Question({
                 return (
                   <label
                     key={option.id}
-                    className={`flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer transition-all ${isSelected ? 'border-[#e20074] bg-[#fdf2f8]' : 'border-[#e5e5e5] bg-white hover:bg-gray-50/50'}`}
+                    className="flex cursor-pointer items-center gap-4 transition-all"
+                    style={{
+                      borderRadius: 'var(--cfm-mcq-border-radius, 8px)',
+                      border: `2px solid ${isSelected ? 'var(--cfm-mcq-selected-accent, var(--cfm-primary))' : 'var(--cfm-card-border-color, #e5e7eb)'}`,
+                      background: isSelected ? 'var(--cfm-mcq-selected-bg, var(--cfm-secondary))' : 'var(--cfm-card-bg, #fff)',
+                      padding: 'var(--cfm-mcq-card-padding, 12px)',
+                      marginBottom: 'var(--cfm-mcq-option-gap, 8px)',
+                    }}
                   >
                     <input
                       type="checkbox"
@@ -211,7 +240,14 @@ export default function Question({
               return (
                 <label
                   key={option.id}
-                  className={`flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer transition-all ${isSelected ? 'border-[#e20074] bg-[#fdf2f8]' : 'border-[#e5e5e5] bg-white hover:bg-gray-50/50'}`}
+                  className="flex cursor-pointer items-center gap-4 transition-all"
+                  style={{
+                    borderRadius: 'var(--cfm-mcq-border-radius, 8px)',
+                    border: `2px solid ${isSelected ? 'var(--cfm-mcq-selected-accent, var(--cfm-primary))' : 'var(--cfm-card-border-color, #e5e7eb)'}`,
+                    background: isSelected ? 'var(--cfm-mcq-selected-bg, var(--cfm-secondary))' : 'var(--cfm-card-bg, #fff)',
+                    padding: 'var(--cfm-mcq-card-padding, 12px)',
+                    marginBottom: 'var(--cfm-mcq-option-gap, 8px)',
+                  }}
                 >
                   <input
                     type="radio"
@@ -245,11 +281,18 @@ export default function Question({
 
       {question.type === QUESTION_TYPE.TEXTFIELD && (
         <textarea
+          data-cfm-textfield
           rows={question.inputVariant === 'long' ? 4 : 1}
           value={(selectedValue as string) ?? ''}
           onChange={e => onSelect(e.target.value)}
           placeholder={question.placeholder || 'Type your response here...'}
-          className="w-full rounded border border-gray-300 p-4 text-sm outline-none focus:border-[#e20074]"
+          className="w-full outline-none"
+          style={{
+            height: question.inputVariant === 'long' ? undefined : 'var(--cfm-input-height, 44px)',
+            borderRadius: 'var(--cfm-input-radius, 8px)',
+            border: '1px solid var(--cfm-input-border, #d1d5db)',
+            padding: 'var(--cfm-input-padding, 12px)',
+          }}
         />
       )}
 

package/templates/docs/templates/SurveyStickyChrome.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Header from '@/components/Header';
 import ProgressBar from '@/components/ProgressBar';
 
@@ -6,17 +8,29 @@ type SurveyStickyChromeProps = {
 };
 
 /**
- * Sticky top chrome: brand header + progress bar.
- * Keeps progress visible while scrolling long pages (e.g. last question below the fold).
+ * Sticky chrome — header and progress are SEPARATE targets for wizard layout toggles.
+ * - showHeader → .cfm-header only
+ * - showProgressBar → [data-cfm-progress] / .cfm-progress only
+ * Do NOT put cfm-header on this wrapper.
  */
 export default function SurveyStickyChrome({ progressPercentage }: SurveyStickyChromeProps) {
   return (
     <div
-      className="sticky top-0 z-30 shadow-[0_2px_8px_rgba(0,0,0,0.06)]"
-      style={{ background: 'var(--cfm-header-bg, #fff)' }}
+      className="cfm-sticky-chrome sticky top-0 z-30"
+      style={{
+        background: 'var(--cfm-header-bg, #fff)',
+        boxShadow: 'var(--cfm-header-shadow, 0 2px 8px rgba(0,0,0,0.06))',
+      }}
     >
       <Header embedded />
-      <div className="mx-auto w-full max-w-4xl px-4 pb-5 pt-4 sm:px-6 lg:px-8">
+      <div
+        className="mx-auto w-full px-4 sm:px-6 lg:px-8"
+        style={{
+          maxWidth: 'var(--cfm-max-width, 48rem)',
+          paddingTop: 'var(--cfm-sticky-pt, 16px)',
+          paddingBottom: 'var(--cfm-sticky-pb, 20px)',
+        }}
+      >
         <ProgressBar progressPercentage={progressPercentage} />
       </div>
     </div>

package/templates/docs/templates/deploy-to-aws.sh

@@ -24,6 +24,55 @@ echo "API: $CFM_DEPLOY_API_BASE"
 echo "OUT: $OUT_DIR ($FILE_COUNT files)"
 echo
 
+# Verify wizard logos and other public assets made it into the static build (not just browser memory).
+python3 <<'PY' || exit 1
+import json, os, re, sys
+from pathlib import Path
+
+out = Path(os.environ["OUT_DIR"])
+root = Path(os.environ.get("PROJECT_ROOT", os.getcwd()))
+config_path = root / "survey-ui-config.json"
+missing = []
+
+if config_path.is_file():
+    cfg = json.load(open(config_path))
+    logo = (cfg.get("global") or {}).get("logo") or {}
+    fn = logo.get("fileName")
+    url = logo.get("url") or ""
+    if fn:
+        if url.startswith("data:"):
+            print(f"FAIL: global.logo.url is a data: URL — apply Phase 6c: Header src=./{fn}, file in public/")
+            sys.exit(1)
+        for base in (root / "public", out):
+            if not (base / fn).is_file():
+                missing.append(str(base / fn))
+        if missing:
+            print("FAIL: logo file missing from build output:")
+            for p in missing:
+                print(f"  - {p}")
+            print("Fix: run confirm-ui-config (EC2 wizard) or re-upload in customize; update Header data-cfm-logo src")
+            sys.exit(1)
+        print(f"Logo OK: {fn} in out/")
+    else:
+        print("No global.logo.fileName in survey-ui-config.json — skipping logo check")
+
+for header in sorted((root / "src").rglob("Header.tsx")):
+    text = header.read_text()
+    for m in re.finditer(r'data-cfm-logo[^>]*\ssrc=["\']([^"\']+)["\']', text):
+        src = m.group(1)
+        if src.startswith(("http://", "https://", "data:")):
+            print(f"FAIL: {header} uses external/data logo src: {src[:60]}")
+            sys.exit(1)
+        rel = src.lstrip("./").lstrip("/")
+        if rel and not (out / rel).is_file():
+            missing.append(str(out / rel))
+            print(f"FAIL: Header references {src} but {out / rel} not in build")
+            sys.exit(1)
+
+if not missing:
+    print("Static asset preflight OK")
+PY
+
 HEALTH=$(curl -s "$CFM_DEPLOY_API_BASE/health")
 echo "Health: $HEALTH"
 echo
@@ -111,4 +160,29 @@ if [ "$HTTP" != "200" ]; then
   exit 1
 fi
 
+# Optional: verify logo asset under same deploy prefix (broken img = missing from out/ or wrong Header src)
+python3 <<'PY' || true
+import json, os, re, subprocess
+from pathlib import Path
+from urllib.parse import urljoin
+
+root = Path(os.environ.get("PROJECT_ROOT", os.getcwd()))
+cfg_path = root / "survey-ui-config.json"
+live = json.load(open("/tmp/deploy-complete.json"))["url"]
+if not cfg_path.is_file():
+    raise SystemExit(0)
+fn = ((json.load(open(cfg_path)).get("global") or {}).get("logo") or {}).get("fileName")
+if not fn:
+    raise SystemExit(0)
+base = live.rsplit("/", 1)[0] + "/"
+logo_url = urljoin(base, fn)
+code = subprocess.check_output(
+    ["curl", "-s", "-o", "/dev/null", "-w", "%{http_code}", logo_url],
+    text=True,
+).strip()
+print(f"Logo asset: {logo_url} → HTTP {code}")
+if code != "200":
+    print("WARN: logo missing on CloudFront — rebuild after Phase 6c logo apply (see aws-deploy.md § Static assets)")
+PY
+
 echo "=== Deploy complete ==="