@wix/agent-skills 1.16.3 → 1.18.0

package/skills/wix-headless-fast/references/forms/seed/SEED.md

@@ -0,0 +1,108 @@
+# Forms — seed contract
+
+`seed-forms.mjs` takes a plain-data plan and creates the site's forms. You write labels and
+kinds; the seed derives everything the API demands — per-field UUIDs, the two-level options
+nesting, the validation block that must exist even when empty, the choice enum that has to
+agree with the component's options, the immutable `target`, and a layout referencing every
+field. Those are the rules a hand-built payload gets wrong while still returning `200`.
+
+**⚠️ Seed BEFORE building the form UI.** This is the one vertical that does not run in parallel
+with the client: the page renders the fields this creates, and imports the id it returns.
+
+**Additive only** — an existing form with the same name is left exactly as it is and reported
+with `created: false`. Re-running never makes a second copy and never edits one.
+
+## Run
+
+```bash
+node <SKILL_ROOT>/references/forms/seed/seed-forms.mjs plan.json    # from the project root
+```
+
+## Plan
+
+```json
+{
+  "forms": [
+    {
+      "name": "Contact",
+      "submitText": "Send enquiry",
+      "fields": [
+        { "label": "Your name",  "kind": "text",     "required": true },
+        { "label": "Email",      "kind": "email",    "required": true },
+        { "label": "Phone",      "kind": "phone" },
+        { "label": "Project type", "kind": "select", "choices": ["Brand identity", "Website redesign"] },
+        { "label": "Services",   "kind": "multi",    "choices": ["SEO", "Copywriting"] },
+        { "label": "Budget",     "kind": "number",   "min": 500, "max": 50000 },
+        { "label": "Message",    "kind": "textarea", "placeholder": "Tell us about the project" },
+        { "label": "I accept the terms", "kind": "checkbox", "required": true }
+      ]
+    }
+  ]
+}
+```
+
+| key | meaning |
+|---|---|
+| `name` | the form's name in the owner's dashboard, and the idempotency key |
+| `submitText` | the submit button's wording (default `"Submit"`) |
+| `fields[].label` | what the visitor reads — also the basis of the storage key |
+| `fields[].kind` | one of the kinds below |
+| `fields[].required` | default `false` |
+| `fields[].placeholder` · `default` | optional; passed to the control |
+| `fields[].choices` | `select` · `radio` · `multi` — strings, or `{ value, label }` |
+| `fields[].min` · `max` | `number` · `rating` bounds |
+| `fields[].maxLength` | text length cap |
+| `fields[].fileLimit` | `file` — how many files (default 1) |
+| `fields[].lines` | `textarea` — rows (default 4) |
+
+### Kinds
+
+`text` · `textarea` · `email` · `phone` · `url` · `firstName` · `lastName` · `company` ·
+`date` · `number` · `rating` · `select` · `radio` · `multi` · `checkbox` · `file` · `address`
+
+`email`, `phone`, `firstName`, `lastName`, `company` are the CONTACTS kinds — Wix maps them
+onto the owner's CRM contact, so prefer them over a plain `text` field for those.
+
+## Result
+
+```json
+{ "forms": [ { "name": "Contact",
+               "formId": "0e0…",
+               "created": true,
+               "fields": [ { "target": "your_name_k3f9x2", "label": "Your name" }, … ],
+               "fieldsLive": 8,
+               "degraded": [] } ] }
+```
+
+**`formId` is what the page imports.** `fields[].target` is each input's `name` — the page
+does not need them (it renders `form.fields` from the live schema), but they are the keys the
+owner's submissions are stored under.
+
+**`degraded` must be empty.** It is the read-back check: the seed re-reads the created form and
+compares each field's `componentType` against what it sent. A non-empty list means a field was
+accepted and then stored as something else — almost always a choice field that lost its options
+and became a plain text box. Fix the plan, delete nothing, and create the form again under a
+new name; a `200` on create does not mean the field survived.
+
+## What the seed does
+
+1. Installs the Wix Forms app (idempotent).
+2. Lists existing forms in the `wix.form_app.form` namespace — a name match is skipped.
+3. Expands each field, creates the form, reads it back and checks every `componentType`.
+
+## Traps this seed already handles
+
+Listed because a hand-rolled payload hits all of them, and each returns `200` first:
+
+- **A choice field declares its options twice** — the component's `options[]` and the
+  validation `enum` (or `items.stringOptions.enum` + `itemType` for a multi). Disagree and the
+  field is created as a plain text box.
+- **`validation` must be present even when empty**, nested under the *input-type* block, not
+  the component one. Absent, the target is not registered as an accepted value and every
+  submission is rejected with `UNKNOWN_VALUE_ERROR` on a key that IS in the schema.
+- **`required` lives at `inputOptions.required`**, never inside a validation block.
+- **`steps` must reference every field, the submit button included.** A field missing from the
+  layout never appears in the owner's dashboard — they cannot edit what the site renders.
+- **`target` is immutable** and must be unique within the form: letters, digits and single
+  underscores, starting with a letter.
+- **Use `formFields`, never `fields`** — the latter is the legacy API.

package/skills/wix-headless-fast/references/forms/seed/seed-forms.mjs

@@ -0,0 +1,320 @@
+// Forms seed — a BUILD-TIME script, never shipped in the app. Run from the project root
+// (where wix.config.json lives) with a plan file:
+//
+//   node <SKILL_ROOT>/references/forms/seed/seed-forms.mjs plan.json
+//
+// It mints its own site token via the Wix CLI, installs the Wix Forms app if needed, expands
+// each plan field into the nested Form Schemas v4 shape, creates the forms, and READS EACH ONE
+// BACK to prove the fields survived (a create returns 200 even when a choice field silently
+// degraded to a plain text box). Prints a JSON result to stdout.
+//
+// Plan shape (see SEED.md):
+//   { "forms": [{ "name", "submitText"?, "fields": [
+//       { "label", "kind", "required"?, "placeholder"?, "choices"?, "min"?, "max"? } ] }] }
+//
+// The plan is PLAIN DATA — labels and kinds. Everything the API demands and the docs bury is
+// derived here: per-field UUIDs, the two-level options nesting, the validation block that must
+// exist even when empty, the choice enum that must agree with the component's options, the
+// snake_case+suffix target, and a `steps` layout referencing every field including the submit
+// button (a field missing from `steps` never appears in the owner's dashboard).
+//
+// Seeding is ADDITIVE — never deletes or overwrites existing forms.
+import { execFileSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { randomUUID } from "node:crypto";
+
+const API = "https://www.wixapis.com";
+const FORMS_APP_ID = "225dd912-7dea-4738-8688-4b8c6955ffc2";
+const NAMESPACE = "wix.form_app.form";
+
+export function makeCtx({ cwd = process.cwd() } = {}) {
+  const config = JSON.parse(readFileSync(`${cwd}/wix.config.json`, "utf8"));
+  const siteId = config.siteId ?? config.projectId;
+  if (!siteId) throw new Error("wix.config.json has no siteId — is this a Wix CLI project?");
+  const token = execFileSync("npx", ["@wix/cli@latest", "token", "--site", siteId], {
+    encoding: "utf8",
+    cwd,
+  }).trim();
+  if (!token) throw new Error("The Wix CLI returned no token — run `npx @wix/cli@latest login` first.");
+  return { token, siteId };
+}
+
+async function req(ctx, path, { method = "POST", body } = {}) {
+  const res = await fetch(API + path, {
+    method,
+    headers: {
+      Authorization: `Bearer ${ctx.token}`,
+      "wix-site-id": ctx.siteId,
+      "Content-Type": "application/json",
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const json = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(`${method} ${path} -> ${res.status}: ${JSON.stringify(json).slice(0, 400)}`);
+  return json;
+}
+
+/** Idempotent. Nothing here works until the app is installed. */
+export async function installFormsApp(ctx) {
+  try {
+    await req(ctx, "/apps-installer-service/v1/app-instance/install", {
+      body: {
+        tenant: { tenantType: "SITE", id: ctx.siteId },
+        appInstance: { appDefId: FORMS_APP_ID, enabled: true },
+      },
+    });
+  } catch {
+    /* already installed is fine */
+  }
+}
+
+// ---- field expansion -------------------------------------------------------------------------
+
+// kind → { inputType, componentType, identifier, block, componentBlock, format? }
+// The two block names are what the API nests settings under, and they are named after the
+// field's own enums — which is why they are looked up here rather than spelled at each call.
+const KINDS = {
+  text:      { inputType: "STRING", componentType: "TEXT_INPUT",     identifier: "TEXT_INPUT" },
+  textarea:  { inputType: "STRING", componentType: "TEXT_INPUT",     identifier: "TEXT_AREA" },
+  email:     { inputType: "STRING", componentType: "TEXT_INPUT",     identifier: "CONTACTS_EMAIL", format: "EMAIL" },
+  phone:     { inputType: "STRING", componentType: "TEXT_INPUT",     identifier: "CONTACTS_PHONE", format: "PHONE" },
+  url:       { inputType: "STRING", componentType: "TEXT_INPUT",     identifier: "URL_INPUT", format: "URL" },
+  firstName: { inputType: "STRING", componentType: "TEXT_INPUT",     identifier: "CONTACTS_FIRST_NAME" },
+  lastName:  { inputType: "STRING", componentType: "TEXT_INPUT",     identifier: "CONTACTS_LAST_NAME" },
+  company:   { inputType: "STRING", componentType: "TEXT_INPUT",     identifier: "CONTACTS_COMPANY" },
+  date:      { inputType: "STRING", componentType: "DATE_PICKER",    identifier: "DATE_PICKER", format: "DATE" },
+  number:    { inputType: "NUMBER", componentType: "NUMBER_INPUT",   identifier: "NUMBER_INPUT" },
+  rating:    { inputType: "NUMBER", componentType: "RATING_INPUT",   identifier: "RATING_INPUT" },
+  select:    { inputType: "STRING", componentType: "DROPDOWN",       identifier: "DROPDOWN" },
+  radio:     { inputType: "STRING", componentType: "RADIO_GROUP",    identifier: "RADIO_GROUP" },
+  multi:     { inputType: "ARRAY",  componentType: "CHECKBOX_GROUP", identifier: "CHECKBOX_GROUP" },
+  checkbox:  { inputType: "BOOLEAN", componentType: "CHECKBOX",      identifier: "CHECKBOX" },
+  file:      { inputType: "WIX_FILE", componentType: "FILE_UPLOAD",  identifier: "FILE_UPLOAD" },
+  address:   { inputType: "ADDRESS", componentType: "MULTILINE_ADDRESS", identifier: "MULTILINE_ADDRESS" },
+};
+
+const INPUT_BLOCK = {
+  STRING: "stringOptions", NUMBER: "numberOptions", BOOLEAN: "booleanOptions",
+  ARRAY: "arrayOptions", ADDRESS: "addressOptions", WIX_FILE: "wixFileOptions",
+};
+const COMPONENT_BLOCK = {
+  TEXT_INPUT: "textInputOptions", NUMBER_INPUT: "numberInputOptions",
+  RATING_INPUT: "ratingInputOptions", DATE_PICKER: "datePickerOptions",
+  CHECKBOX: "checkboxOptions", CHECKBOX_GROUP: "checkboxGroupOptions",
+  RADIO_GROUP: "radioGroupOptions", DROPDOWN: "dropdownOptions",
+  MULTILINE_ADDRESS: "multilineAddressOptions", FILE_UPLOAD: "fileUploadOptions",
+};
+
+/**
+ * `target` is the IMMUTABLE submission key: starts with a letter, letters/digits/underscore
+ * only, no doubled underscore, unique within the form. The random suffix is what keeps two
+ * fields with the same label apart.
+ */
+function targetFor(label, taken) {
+  const base =
+    String(label)
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "_")
+      .replace(/_+/g, "_")
+      .replace(/^_|_$/g, "")
+      .replace(/^(?=\d)/, "f_")
+      .slice(0, 40) || "field";
+  let target;
+  do {
+    target = `${base}_${Math.random().toString(36).slice(2, 8)}`;
+  } while (taken.has(target));
+  taken.add(target);
+  return target;
+}
+
+function buildField(spec, taken) {
+  const kind = KINDS[spec.kind];
+  if (!kind) {
+    throw new Error(
+      `field "${spec.label}": unknown kind "${spec.kind}" — one of ${Object.keys(KINDS).join(", ")}`,
+    );
+  }
+  const choices = spec.choices ?? [];
+  if ((spec.kind === "select" || spec.kind === "radio" || spec.kind === "multi") && !choices.length) {
+    throw new Error(`field "${spec.label}": kind "${spec.kind}" needs a non-empty choices array`);
+  }
+
+  const target = targetFor(spec.label, taken);
+  const options = choices.map((c) => {
+    const value = typeof c === "string" ? c : c.value;
+    return { id: randomUUID(), label: typeof c === "string" ? c : (c.label ?? c.value), value };
+  });
+  const values = options.map((o) => o.value);
+
+  // A choice field declares its options TWICE — here and in the validation enum — and the two
+  // must agree. Disagree and the create still returns 200: the field is created as a plain
+  // text box, losing its choices. Both are derived from the same list, so they cannot drift.
+  const validation = {};
+  if (kind.format) validation.format = kind.format;
+  if (spec.min != null) validation.minimum = spec.min;
+  if (spec.max != null) validation.maximum = spec.max;
+  if (spec.maxLength != null) validation.maxLength = spec.maxLength;
+  if (values.length) {
+    if (kind.inputType === "ARRAY") {
+      validation.itemType = "STRING";
+      validation.items = { stringOptions: { enum: values } };
+    } else {
+      validation.enum = values;
+    }
+  }
+  if (spec.kind === "file") validation.fileLimit = spec.fileLimit ?? 1;
+
+  const component = { label: spec.label, showLabel: true };
+  if (spec.placeholder) component.placeholder = spec.placeholder;
+  if (options.length) component.options = options;
+  if (spec.kind === "textarea") component.numberOfLines = spec.lines ?? 4;
+  if (spec.default != null) component.default = spec.default;
+
+  return {
+    id: randomUUID(),
+    identifier: kind.identifier,
+    fieldType: "INPUT",
+    inputOptions: {
+      target,
+      inputType: kind.inputType,
+      // `required` lives HERE, never inside the validation block.
+      required: spec.required ?? false,
+      [INPUT_BLOCK[kind.inputType]]: {
+        // `validation` is always present, even as {}, and nests under the INPUT-TYPE block —
+        // not the component one. Absent, the target is not registered as an accepted value and
+        // every submission comes back UNKNOWN_VALUE_ERROR on a key that IS in the schema.
+        validation,
+        componentType: kind.componentType,
+        [COMPONENT_BLOCK[kind.componentType]]: component,
+      },
+    },
+  };
+}
+
+function buildForm(planForm) {
+  const taken = new Set();
+  const fields = (planForm.fields ?? []).map((f) => buildField(f, taken));
+  if (!fields.length) throw new Error(`form "${planForm.name}": no fields`);
+
+  const submit = {
+    id: randomUUID(),
+    identifier: "SUBMIT_BUTTON",
+    fieldType: "DISPLAY",
+    displayOptions: {
+      displayFieldType: "SUBMIT_BUTTON",
+      pageNavigationOptions: { submitText: planForm.submitText ?? "Submit" },
+    },
+  };
+
+  // `steps` must reference EVERY field, the submit button included — a field missing from the
+  // layout never appears in the owner's dashboard, so they cannot edit what the site renders.
+  const items = [...fields, submit].map((f, i) => ({
+    fieldId: f.id,
+    row: i,
+    column: 0,
+    width: 12,
+  }));
+
+  return {
+    name: planForm.name,
+    namespace: NAMESPACE,
+    formFields: [...fields, submit],
+    steps: [{ id: randomUUID(), layout: { large: { items }, medium: { items }, small: { items } } }],
+  };
+}
+
+// ---- operations ------------------------------------------------------------------------------
+
+/**
+ * Read the form back and confirm each field kept its componentType. A create returns 200 even
+ * when a choice field degraded to a plain text box, so this is the only check that catches it.
+ */
+async function verifyForm(ctx, formId, expected) {
+  const { form } = await req(ctx, `/form-schema-service/v4/forms/${formId}`, { method: "GET" });
+  const live = new Map(
+    (form?.formFields ?? [])
+      .filter((f) => f.fieldType === "INPUT")
+      .map((f) => {
+        const block = f.inputOptions?.[INPUT_BLOCK[f.inputOptions?.inputType]] ?? {};
+        return [f.inputOptions?.target, block.componentType];
+      }),
+  );
+  const degraded = expected
+    .filter((e) => live.get(e.target) !== e.componentType)
+    .map((e) => `${e.target}: expected ${e.componentType}, got ${live.get(e.target) ?? "MISSING"}`);
+  return { fieldsLive: live.size, degraded };
+}
+
+/**
+ * Create every form in the plan. Existing forms are left alone — matching by name, since a
+ * re-run must not create a second copy of the same form.
+ */
+export async function setupForms(ctx, plan) {
+  await installFormsApp(ctx);
+
+  const existing = await req(
+    ctx,
+    `/form-schema-service/v4/forms?namespace=${encodeURIComponent(NAMESPACE)}`,
+    { method: "GET" },
+  ).catch(() => ({ forms: [] }));
+  const byName = new Map((existing.forms ?? []).map((f) => [f.name, f]));
+
+  const out = [];
+  for (const planForm of plan.forms ?? []) {
+    const already = byName.get(planForm.name);
+    if (already) {
+      out.push({
+        name: planForm.name,
+        formId: already.id ?? already._id,
+        created: false,
+        fields: (already.formFields ?? [])
+          .filter((f) => f.fieldType === "INPUT")
+          .map((f) => ({ target: f.inputOptions?.target, label: planForm.name })),
+      });
+      continue;
+    }
+
+    const body = buildForm(planForm);
+    const { form } = await req(ctx, "/form-schema-service/v4/forms", { body: { form: body } });
+    const formId = form?.id ?? form?._id;
+    if (!formId) throw new Error(`form "${planForm.name}": created but no id returned`);
+
+    const expected = body.formFields
+      .filter((f) => f.fieldType === "INPUT")
+      .map((f) => ({
+        target: f.inputOptions.target,
+        componentType: f.inputOptions[INPUT_BLOCK[f.inputOptions.inputType]].componentType,
+      }));
+    const check = await verifyForm(ctx, formId, expected);
+
+    out.push({
+      name: planForm.name,
+      formId,
+      created: true,
+      fields: body.formFields
+        .filter((f) => f.fieldType === "INPUT")
+        .map((f, i) => ({ target: f.inputOptions.target, label: planForm.fields[i].label })),
+      ...check,
+    });
+  }
+  return { forms: out };
+}
+
+// ---- CLI entry -------------------------------------------------------------------------------
+
+const invokedDirectly = process.argv[1] && import.meta.url.endsWith(process.argv[1].split("/").pop());
+if (invokedDirectly) {
+  const planPath = process.argv[2];
+  if (!planPath) {
+    console.error("usage: node seed-forms.mjs <plan.json>   (run from the project root)");
+    process.exit(1);
+  }
+  const plan = JSON.parse(readFileSync(planPath, "utf8"));
+  const ctx = makeCtx();
+  setupForms(ctx, plan)
+    .then((result) => console.log(JSON.stringify(result, null, 2)))
+    .catch((e) => {
+      console.error(e.message);
+      process.exit(1);
+    });
+}

package/skills/wix-headless-fast/references/members/INSTRUCTIONS.md

@@ -0,0 +1,63 @@
+# Members — custom in-app login
+
+The Members vertical ships a **custom credential login**, not the Wix-hosted
+login-page redirect. Members sign up and sign in on `/login` with email and
+password; the shipped client exchanges a direct-login session into member
+tokens into the managed `wixSession` cookie. That makes the member identity
+available to both the custom client and Astro's ambient SDK calls after the
+next navigation. Do not replace the auth implementation or add a second client.
+
+## Shipped files
+
+| File                                                                      | Purpose                                                                  |
+| ------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| `wix/members/client.ts`                                                   | Explicit `OAuthStrategy` client that syncs direct-login tokens to Astro. |
+| `wix/members/auth.ts`                                                     | Direct `register`, `login`, verification, and logout state machine.      |
+| `wix/members/member-store.ts` + `hooks/members/useMember.ts`              | Module-scoped session state shared by Astro islands.                     |
+| `components/members/LoginForm.tsx`                                        | Branded in-app sign-in/sign-up and verification UI.                      |
+| `components/members/MemberMenu.tsx`, `RequireAuth.tsx`, `AccountView.tsx` | Header control, client gate, and account surface references.             |
+| `pages/login.astro`, `pages/account.astro`                                | Custom-login and gated-account routes.                                   |
+
+## Wire it
+
+1. Keep `<MemberMenu client:only="react" />` in the winning site header.
+2. Keep the shipped `/login` route. It is the only login surface; never link to
+   `/api/auth/login`, build an OAuth callback page, or redirect to Wix login.
+3. Keep `/account` client-gated with `<RequireAuth>`. A visitor sees a link to
+   `/login`; a member sees their actual profile.
+4. Build your own visual chrome around these shipped components using the site
+   tokens. Do not mock a signed-in member or infer identity from local UI state.
+
+## Direct-login contract
+
+- `login(email, password)` and `register(email, password, profile)` return all
+  Wix states: `SUCCESS`, `EMAIL_VERIFICATION_REQUIRED`,
+  `OWNER_APPROVAL_REQUIRED`, or `FAILURE`. The shipped form handles each one.
+- A successful state calls `getMemberTokensForDirectLogin` then `setTokens` on
+  the same client. It writes Astro's `wixSession` cookie, so the next page
+  request and browser islands run later SDK calls as that member.
+- No login redirect URI is required for credential login. Password-reset and
+  logout return URLs remain the only optional redirect surfaces.
+- The public OAuth client ID is written as `WIX_MEMBERS_CLIENT_ID` by deploy,
+  even for managed Astro. It is public; never add an OAuth secret to the app.
+- Identity needs no Members Area app. Profile data and custom profile fields do;
+  the member seed installs the Members Area app.
+
+## Rules
+
+- No Wix-hosted login flow, `/api/auth/login`, OAuth callback, or callback URI
+  requirement for credential login.
+- Keep one explicit custom-members client. Do not instantiate one per component.
+- Do not use `auth.elevate()` for a member reading their own records.
+- Surface login failure and the verification/approval states; never silently
+  fall back to anonymous UI.
+
+## Verify
+
+- [ ] `/login` renders an in-app email/password sign-in and sign-up form.
+- [ ] A successful sign-in changes the header and unlocks `/account` without a
+      Wix-hosted login redirect.
+- [ ] Email verification and owner approval are rendered as states, not errors.
+- [ ] Reload preserves the member session; the next server render also sees it;
+      logout clears it.
+- [ ] No mocked member data, redirect-based login, or extra auth client exists.

package/skills/wix-headless-fast/references/members/app/components/members/AccountView.tsx

@@ -0,0 +1,60 @@
+// REFERENCE account surface: profile card + log-out on the @theme tokens. Correct and
+// complete; per the skill's model you design your own on useMember. On Astro the page
+// passes the SSR-resolved member as initialMember; a SPA mounts it inside <RequireAuth>.
+import { useMember } from "../../hooks/members/useMember";
+import type { CurrentMember } from "../../wix/members/types";
+
+export interface AccountViewProps {
+  initialMember?: CurrentMember | null;
+}
+
+export default function AccountView({ initialMember }: AccountViewProps) {
+  const { member, loggedIn, loading, error, logout } = useMember({ initialMember });
+
+  if (loading) {
+    return (
+      <div className="mx-auto max-w-md" aria-busy="true">
+        <div className="h-40 animate-pulse rounded-lg bg-secondary" />
+      </div>
+    );
+  }
+
+  if (!loggedIn) {
+    return <p className="py-16 text-center text-muted-foreground">You're logged out.</p>;
+  }
+
+  return (
+    <div className="mx-auto max-w-md rounded-lg border border-border p-8">
+      <div className="flex items-center gap-4">
+        {member?.photoUrl ? (
+          <img src={member.photoUrl} alt="" className="h-16 w-16 rounded-full object-cover" />
+        ) : (
+          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary text-xl font-semibold">
+            {(member?.displayName ?? "M").slice(0, 1).toUpperCase()}
+          </span>
+        )}
+        <div>
+          <p className="text-lg font-semibold text-foreground">{member?.displayName ?? "Member"}</p>
+          {member?.loginEmail && <p className="text-sm text-muted-foreground">{member.loginEmail}</p>}
+          {member?.memberSince && (
+            <p className="mt-0.5 text-xs text-muted-foreground">Member since {member.memberSince}</p>
+          )}
+        </div>
+      </div>
+      {!member && (
+        <p className="mt-4 text-sm text-muted-foreground">
+          Logged in, but profile details are unavailable — the Wix Members Area app isn't installed
+          on this site.
+        </p>
+      )}
+      {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+      <button
+        type="button"
+        onClick={() => void logout()}
+        className="mt-6 rounded-full border border-border px-5 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+      >
+        Log out
+      </button>
+    </div>
+  );
+}