@redeemid/emdash 0.0.31 → 0.0.32

package/README.md

@@ -27,7 +27,7 @@ Selling a membership is ordinary Shopify: a product, a checkout, and a Flow work
 - **For shoppers:** product pages with options, subscriptions and Product structured data, a product sitemap, collections with Shopify's filters and sorting, product search, recommendations, a cart page and cart drawer, discount codes, local prices by market, and a checkout that opens signed in for members. It all works without JavaScript.
 - **For members:** sign in, Account and Sign out without ever seeing the word "Shopify"; a member card with levels, renewal and end dates; preferences saved on their customer record; download or delete what the site keeps about them.
 - **For editors:** Paywall break, Members only, Sold on its own, Plan, Product, Collection, Product search, Contribution and Preferences blocks; an Access panel on every entry; teasers, a monthly or weekly meter, drip, badges and protected file downloads.
-- **For staff:** an Overview, then Members, Access (with Map and Test tabs), Reports, Privacy and Connection (Status, Setup, Webhooks, Health and App events tabs) in the EmDash admin, and a dashboard card. New content types and taxonomies appear on their own, so access never needs a code change.
+- **For staff:** an Overview, then Members, Access (with Map and Test tabs), Reports, Events (Webhook, App and Health tabs), Privacy and Connection (Status, then a tab per setup step) in the EmDash admin, and a dashboard card. New content types and taxonomies appear on their own, so access never needs a code change.
 - **For developers:** Astro components for every piece, `canRead()` and friends for your own code, a storefront from the Storefront API with a cart and a signed-in checkout, a browser client with analytics events, signed outbound events, MCP tools for AI agents and a `redeemid-emdash` command.
 
 ## Requirements
@@ -75,14 +75,14 @@ import Content from "@redeemid/emdash/components/Content.astro";
 <Content value={post.data.content} collection="posts" terms={post.data.terms} id={post.id} title={post.data.title} />
 ```
 
-Set the secrets, open **Plugins → RedeemID → Connection → Setup** in the admin, and work down the steps. [Getting started](docs/getting-started.md) walks through all of it.
+Set the secrets, open **Plugins → RedeemID → Connection** in the admin, and work through its tabs. [Getting started](docs/getting-started.md) walks through all of it.
 
 ## Documentation
 
 | Guide | What's in it |
 | --- | --- |
 | [Getting started](docs/getting-started.md) | Requirements, install, config, secrets, templates and a first check |
-| [Connect a store](docs/shopify-setup.md) | The Shopify side: sign-in client, Storefront tokens and the webhook app |
+| [Connect a store](docs/shopify-setup.md) | The Shopify side: sign-in client, Storefront tokens and the Admin API app |
 | [Shopify Flow recipes](docs/shopify-flow.md) | Tag on a paid order, remove on refund or cancellation, passes that end |
 | [Content and templates](docs/content.md) | `<Content>`, the Paywall break, Members only, the wall, `<Gate>`, badges, plan cards, site search and replacement text |
 | [Access](docs/access.md) | Rules, levels, the Access page and the entry panel, meter and drip, selling one entry, features and protected files |

package/docs/developer-api.md

@@ -56,7 +56,7 @@ Under `/_emdash/api/auth/redeemid/`. Same-origin only: EmDash checks `Origin` on
 - `api/state` (GET): the visitor's own state.
 
   ```json
-  { "apiVersion": "1.5.0", "version": "0.0.31", "signedIn": true, "linked": true,
+  { "apiVersion": "1.5.0", "version": "0.0.32", "signedIn": true, "linked": true,
     "levels": ["gold"], "features": ["ad-free"], "cart": { "count": 2 },
     "meter": { "used": 1, "limit": 3, "period": "month" } }
   ```
@@ -125,7 +125,7 @@ Signed outbound webhooks for a CRM or email tool. Verify `X-RedeemID-Signature`
 events: { url: "https://hooks.example.com/redeemid", only: ["member.signed_in", "member.levels_changed"] },
 ```
 
-With `REDEEMID_EVENTS_SECRET` set, RedeemID POSTs `{ id, event, at, data }` to the URL with the headers `X-RedeemID-Event`, `X-RedeemID-Delivery` (the `id`) and `X-RedeemID-Signature: sha256=<hex HMAC-SHA256 of the raw body>`. Check the signature before you trust a body. Events go out after the response (with `waitUntil` on Workers), so sign-in, webhooks and pages never wait for your receiver. Each try waits at most 3 seconds; a send that fails is tried again after 1 second and after 5 seconds. One that fails all three tries is kept under **App events → Failed events**, where staff can **Send again** (same `id`, so drop duplicates by it) or **Clear** it; failed events are deleted after 30 days.
+With `REDEEMID_EVENTS_SECRET` set, RedeemID POSTs `{ id, event, at, data }` to the URL with the headers `X-RedeemID-Event`, `X-RedeemID-Delivery` (the `id`) and `X-RedeemID-Signature: sha256=<hex HMAC-SHA256 of the raw body>`. Check the signature before you trust a body. Events go out after the response (with `waitUntil` on Workers), so sign-in, webhooks and pages never wait for your receiver. Each try waits at most 3 seconds; a send that fails is tried again after 1 second and after 5 seconds. One that fails all three tries is kept under **Events → App → Failed events**, where staff can **Send again** (same `id`, so drop duplicates by it) or **Clear** it; failed events are deleted after 30 days.
 
 | Event | `data` |
 | --- | --- |

package/docs/getting-started.md

@@ -12,7 +12,7 @@ From an empty EmDash site to a locked post that opens for a tagged customer.
 
 ## 1. Set up Shopify
 
-Follow [Connect a store](shopify-setup.md). It gives you a Customer Account API client, Storefront API tokens and a webhook app. Once the package is installed, **Plugins → RedeemID → Connection → Setup** walks through the same steps for your site, with its own callback URI filled in, and says which are done.
+Follow [Connect a store](shopify-setup.md). It gives you a Customer Account API client, Storefront API tokens and an Admin API app (staff tools, resyncs and webhooks). Once the package is installed, **Plugins → RedeemID → Connection** walks through the same steps for your site, one tab each, with its own callback URI filled in, and marks the ones that are done.
 
 ## 2. Install
 
@@ -68,7 +68,7 @@ REDEEMID_SHOPIFY_ADMIN_APP_CLIENT_SECRET=…          # verifies webhooks
 REDEEMID_SHOPIFY_STOREFRONT_PRIVATE_TOKEN=…         # only to sell on the site: plans, shop and checkout
 ```
 
-The [secrets reference](reference.md#secrets) lists the rest. Connection → Setup prints the command for each secret its steps need.
+The [secrets reference](reference.md#secrets) lists the rest. Connection prints the command for each secret its steps need.
 
 ## 5. Render content through RedeemID
 
@@ -89,6 +89,6 @@ Use `<Content>` in place of `<PortableText>` for every body that may be locked,
 ## 6. Check it
 
 1. Finish EmDash setup as staff first. Store customers can't create the first account.
-2. Open **Plugins → RedeemID → Connection → Setup**. Work down the steps until it says RedeemID is set up (it registers the webhooks for you). **Status** lists every setting as Set or Missing.
+2. Open **Plugins → RedeemID → Connection**. Work through the step tabs until each has a check mark (the Webhooks tab registers the webhooks for you). **Status** lists every setting as Set or Missing.
 3. Tag a test customer `member` in Shopify, open a locked post, and sign in as that customer. The post opens.
 4. Remove the tag in Shopify. The post locks again once the webhook arrives.

package/docs/production.md

@@ -48,5 +48,5 @@ Each action counts separately per visitor (by `CF-Connecting-IP`), and Cloudflar
 - **A setting shows Missing on Connection → Status.** Check the name: Connection → Status lists any `REDEEMID_` variable it doesn't read. Set it as a runtime secret, not a build variable. On Workers, a deploy can remove plain-text dashboard variables, so use encrypted secrets.
 - **Sign-in comes back with a notice.** The code says why; see [notices](reference.md#notices). `sign_in_unavailable` means store discovery failed, usually a wrong `shop`. `not_configured` means the client ID or `shop` is missing.
 - **Register webhooks names a refused topic.** The app lacks a scope, such as `read_customer_merge` for `customers/merge`. Add it to the app, have the store accept the new version, and press Register again.
-- **Tags changed in Shopify but the site didn't follow.** Check Connection → Webhooks and Health, and App events with Problems only. Resync the member from their page, or ask them to press Refresh membership.
+- **Tags changed in Shopify but the site didn't follow.** Check Events → Webhook and Health, and Events → App with Problems only. Resync the member from their page, or ask them to press Refresh membership.
 - **A member sees the visitor's page.** A cache is serving it. See [caching](#caching).

package/docs/reference.md

@@ -110,7 +110,7 @@ The full developer API (stable exports, JSON routes, the browser client and its
 
 Under `/_emdash/api/auth/redeemid/`: `login`, `callback`, `logout`, `webhook`, `buy`, `cart`, `cart-edit`, `account`, `preferences` and `privacy`, and the JSON routes `api/state`, `api/cart` and `api/search`. Staff-only routes for the admin, agents and the command line are under `/_emdash/api/plugins/redeemid/`.
 
-In the Customer Account API client, set the callback URI to `https://<site>/_emdash/api/auth/redeemid/callback`, the logout URI to `https://<site>/`, and (public clients) the JavaScript origin to `https://<site>`. Point webhooks at `https://<site>/_emdash/api/auth/redeemid/webhook`: `customers/create`, `customers/update`, `customers/delete`, `customers/disable`, `customers/enable`, `customers/merge`, `customer.tags_added` and `customer.tags_removed` (Connection → Setup registers these for you). The compliance topics `customers/data_request`, `customers/redact` and `shop/redact` go to the same URL, set in the app's own configuration.
+In the Customer Account API client, set the callback URI to `https://<site>/_emdash/api/auth/redeemid/callback`, the logout URI to `https://<site>/`, and (public clients) the JavaScript origin to `https://<site>`. Point webhooks at `https://<site>/_emdash/api/auth/redeemid/webhook`: `customers/create`, `customers/update`, `customers/delete`, `customers/disable`, `customers/enable`, `customers/merge`, `customer.tags_added` and `customer.tags_removed` (Connection → Webhooks registers these for you). The compliance topics `customers/data_request`, `customers/redact` and `shop/redact` go to the same URL, set in the app's own configuration.
 
 ## Notices
 

package/docs/shopify-flow.md

@@ -63,7 +63,7 @@ After a purchase, **Refresh membership** on the member card reads their tags aga
 
 ## Check a recipe
 
-1. Under **Plugins → RedeemID → Connection → Status → Webhook subscriptions**, make sure `customer.tags_added` and `customer.tags_removed` show as Registered. The Setup tab registers them for you.
+1. Under **Plugins → RedeemID → Connection → Webhooks**, make sure `customer.tags_added` and `customer.tags_removed` show as Registered. The tab registers them for you.
 2. Buy the product with a test customer, using Shopify's Bogus Gateway or a 100% discount code.
 3. In Flow, open the workflow's **Recent runs**. The run should show the tag added.
 4. Open **Plugins → RedeemID → Members**, then the customer. The level should be on top and the tag under **Tags**.

package/docs/shopify-setup.md

@@ -2,7 +2,7 @@
 
 What to set up in Shopify, and on the site, to run RedeemID on an EmDash site. One store can serve several sites: each site gets its own Headless storefront for sign-in, and each receives webhooks.
 
-Once the package is installed, **Plugins → RedeemID → Connection → Setup** in the EmDash admin walks through these same steps with your site's own addresses filled in, checks each one, and registers the webhooks for you.
+Once the package is installed, **Plugins → RedeemID → Connection** in the EmDash admin walks through these same steps, one tab each, with your site's own addresses filled in, checks each one, and registers the webhooks for you.
 
 ## 1. Sign-in: a Headless storefront
 
@@ -27,7 +27,7 @@ The store must use the new customer accounts (Settings → Customer accounts). C
 
 RedeemID keeps tags and status current from webhooks sent by a Shopify app on the store (for example a Dev Dashboard app). Shopify signs every webhook with that app's **client secret**, which is the site's webhook secret.
 
-Give the app the `read_customers` and `write_customers` Admin API scopes (`write_customers` alone is enough, since a write scope includes its read scope), plus `read_customer_merge` for `customers/merge`, and set its **client ID** on the site as well. Then Connection → Setup (or the Webhook subscriptions on Connection → Status) registers these topics at `https://<site>/_emdash/api/auth/redeemid/webhook` with one button:
+Give the app the `read_customers` and `write_customers` Admin API scopes (`write_customers` alone is enough, since a write scope includes its read scope), plus `read_customer_merge` for `customers/merge`, and set its **client ID** on the site as well. Then Connection → Webhooks registers these topics at `https://<site>/_emdash/api/auth/redeemid/webhook` with one button:
 
 `customers/create`, `customers/update`, `customers/delete`, `customers/disable`, `customers/enable`, `customers/merge`, `customer.tags_added`, `customer.tags_removed`
 
@@ -47,8 +47,8 @@ Set the secrets. On Cloudflare Workers:
 npx wrangler secret put REDEEMID_SHOPIFY_STORE_DOMAIN                   # e.g. my-store.myshopify.com, unless `shop` is in the config
 npx wrangler secret put REDEEMID_SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID     # Customer Account API client ID
 npx wrangler secret put REDEEMID_SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_SECRET # confidential clients only
-npx wrangler secret put REDEEMID_SHOPIFY_ADMIN_APP_CLIENT_SECRET        # the webhook app's client secret
-npx wrangler secret put REDEEMID_SHOPIFY_ADMIN_APP_CLIENT_ID            # optional; the webhook app's client ID, for the staff tools
+npx wrangler secret put REDEEMID_SHOPIFY_ADMIN_APP_CLIENT_SECRET        # the Admin API app's client secret (signs webhooks)
+npx wrangler secret put REDEEMID_SHOPIFY_ADMIN_APP_CLIENT_ID            # optional; the Admin API app's client ID, for the staff tools
 npx wrangler secret put REDEEMID_EVENTS_SECRET                          # optional; signs outbound events (events.url)
 npx wrangler secret put REDEEMID_SHOPIFY_STOREFRONT_PRIVATE_TOKEN       # optional; the Storefront API private token, to sell on the site (plans, shop, checkout)
 npx wrangler secret put REDEEMID_SHOPIFY_STOREFRONT_PUBLIC_TOKEN        # optional; used only without the private token

package/docs/staff.md

@@ -2,12 +2,12 @@
 
 ## Staff tools
 
-With `REDEEMID_SHOPIFY_ADMIN_APP_CLIENT_ID` set, RedeemID gets an Admin API token for the webhook app with the client credentials grant. The app must be in the same Shopify organization as the store, as Dev Dashboard apps are, and needs `read_customers` and `write_customers`. Then, under **Plugins → RedeemID**:
+With `REDEEMID_SHOPIFY_ADMIN_APP_CLIENT_ID` set, RedeemID gets an Admin API token for the Admin API app with the client credentials grant. The app must be in the same Shopify organization as the store, as Dev Dashboard apps are, and needs `read_customers` and `write_customers`. Then, under **Plugins → RedeemID**:
 
 - **Member detail.** Account, levels and tag count on top, then tabs: Membership (levels, features, membership dates and level history), Tags (add in a dialog, remove), Account (email, consent, last sync and the site user) and Privacy. Resync from Shopify, and on a myshopify.com store, open the customer in Shopify. Tag edits are made in Shopify and read back. Nothing is granted on the site.
 - **Site user.** Signing in links a customer to the site user with the same verified email. When the emails differ, staff link the customer to an existing Subscriber by that user's email on the member's page (never a staff account, never a user linked to another customer), or unlink them. This part needs no Admin API app.
 - **Bulk resync.** Reads the 25 members synced longest ago, few enough for the Workers free limit of 50 database queries a request. Press it again for the next 25. It never runs on its own.
-- **Webhook subscriptions.** Connection → Status → Webhook subscriptions lists the store's subscriptions to this site and registers any that are missing. A topic Shopify refuses, such as `customers/merge` without `read_customer_merge`, is named with the reason and doesn't stop the others. `customers/redact` stays in the app's own settings.
+- **Webhook subscriptions.** Connection → Webhooks lists the store's subscriptions to this site and registers any that are missing. A topic Shopify refuses, such as `customers/merge` without `read_customer_merge`, is named with the reason and doesn't stop the others. `customers/redact` stays in the app's own settings.
 - **Access → Test.** A collection, an entry, terms and a reader's tags in; the verdict out.
 
 Resync updates email, name, tags, email marketing consent and the membership dates. Enabled or disabled status comes only from the enable and disable webhooks. With the app set up, two more things read the customer from the Admin API as it is now: every sign-in (and Refresh membership), and every `customer.tags_added` or `customer.tags_removed` webhook. Those topics carry only the change and can arrive out of order, so reading the current tags keeps the mirror right. Without the app, or when the read fails, the webhook's change is applied as sent.
@@ -27,11 +27,13 @@ RedeemID reads them with the Admin API (resync, sign-in, tag webhooks), so they
 
 ## Overview, dashboard card and Connection
 
-**Plugins → RedeemID → Overview** is the first page: anything that needs doing (setup steps left, webhook problems, open privacy requests), cards for sign-in, members, webhooks, access, privacy and setup with links to each, members by level, recent app events and links to the docs, the store's customers and Flow. The **RedeemID** card on the EmDash dashboard shows the same alerts and counts with links to Overview, Members, Access and Connection's Webhooks tab (or its Setup tab while something is missing).
+**Plugins → RedeemID → Overview** is the first page: anything that needs doing (setup steps left, webhook problems, open privacy requests), cards for sign-in, members, webhooks, access, privacy and setup with links to each, members by level, recent app events and links to the docs, the store's customers and Flow. The **RedeemID** card on the EmDash dashboard shows the same alerts and counts with links to Overview, Members, Access and Events (or Connection while a setup step is left).
 
-**Connection** holds everything about the store link in five tabs: Status, Setup, Webhooks, Health and App events. It opens on Setup until every step is done, then on Status. Each tab has its own address, such as `/_emdash/admin/plugins/redeemid/connection/webhooks`, which the dashboard card and Overview link to.
+**Connection** holds the store link: **Status** (the values to copy into Shopify, and every setting as Set or Missing), then one tab per setup step: Store, Sign-in, Admin app, Webhooks, First level, Try it and Storefront. A finished step's tab shows a check mark. It opens on the first step not done, then on Status once they all are.
 
-**Status** shows the addresses to paste into Shopify (callback URI, JavaScript origin, logout URI, webhook URL) and the store domain as read-only fields with copy buttons, every setting as Set or Missing with the environment variable it comes from, the template checks and the webhook subscriptions.
+**Events** shows what happened, in three tabs: Webhook, App and Health. Each tab of both pages has its own address, such as `/_emdash/admin/plugins/redeemid/connection/sign-in` or `/_emdash/admin/plugins/redeemid/events/app`, which the dashboard card and Overview link to.
+
+**Status** shows the addresses to paste into Shopify (callback URI, JavaScript origin, logout URI, webhook URL) and the store domain as read-only fields with copy buttons, every setting as Set or Missing with the environment variable it comes from, and the template checks.
 
 The admin pages are built as Block Kit on the server. The package's admin entry (`@redeemid/emdash/admin`, loaded by EmDash from the plugin descriptor) renders them in the browser and adds what Block Kit has no block for: copy fields, dialogs and linked cards. It needs `react`, `@cloudflare/kumo` and `@emdash-cms/blocks`, which every EmDash site already has through `emdash`.
 
@@ -39,10 +41,10 @@ The admin pages are built as Block Kit on the server. The package's admin entry
 
 Members gain and lose access only when Shopify sends tag changes, so RedeemID shows what arrived and warns when deliveries stop.
 
-- **Connection → Webhooks.** Each delivery's topic, what became of it (processed, skipped, older than what's stored, not used) and the customer ID, with counts of deliveries turned away (bad signature) and failed (storage errors; Shopify sends those again).
-- **Connection → Health.** Once a day RedeemID registers again any subscription Shopify dropped (with the Admin API app), and warns when no webhook has come in for a number of days (3 by default, 0 turns it off), or when deliveries were turned away or failed in the last day. **Check now** runs it at once. Warnings show on the page and the dashboard widget. If you enter an address on the Health tab and the site has an EmDash email provider, they also go by email: once when problems start or change, then once a week while they last.
-- **Webhook subscriptions** (on Connection → Status). The endpoint, whether signatures can be checked, and the subscriptions.
-- **Connection → App events.** What RedeemID did and what came of it: webhooks received, turned away and failed, sign-ins and refusals (by reason), Admin API calls (by operation, with timings), resyncs, tag edits, webhook registrations, settings saves, outbound events that failed, metered reads and the health checks. Filter by event or show problems only. Entries hold ids, labels and outcomes, never bodies, tokens or emails. Failed outbound events also keep the event body (ids and levels, never an email or a name) so they can be sent again.
+- **Events → Webhook.** Each delivery's topic, what became of it (processed, skipped, older than what's stored, not used) and the customer ID, with counts of deliveries turned away (bad signature) and failed (storage errors; Shopify sends those again).
+- **Events → Health.** Once a day RedeemID registers again any subscription Shopify dropped (with the Admin API app), and warns when no webhook has come in for a number of days (3 by default, 0 turns it off), or when deliveries were turned away or failed in the last day. **Check now** runs it at once. Warnings show on the page and the dashboard widget. If you enter an address on the Health tab and the site has an EmDash email provider, they also go by email: once when problems start or change, then once a week while they last.
+- **Subscriptions** (on Connection → Webhooks). The endpoint, whether signatures can be checked, and the subscriptions.
+- **Events → App.** What RedeemID did and what came of it: webhooks received, turned away and failed, sign-ins and refusals (by reason), Admin API calls (by operation, with timings), resyncs, tag edits, webhook registrations, settings saves, outbound events that failed, metered reads and the health checks. Filter by event or show problems only. Entries hold ids, labels and outcomes, never bodies, tokens or emails. Failed outbound events also keep the event body (ids and levels, never an email or a name) so they can be sent again.
 - **Reports.** Members on each level, who joined and left in the last 30 days and by week for 12 weeks (from each member's tag dates), sign-ins and metered reads.
 
 App events and delivery records are kept 30 days. The daily check runs from EmDash's scheduler: on Node it runs by itself; on Cloudflare Workers, add a Cron Trigger to the site's Worker as EmDash's deployment guide describes. The plugin asks for `email:send` only to send these warnings.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@redeemid/emdash",
-	"version": "0.0.31",
+	"version": "0.0.32",
 	"description": "Shopify commerce for EmDash sites: storefront, cart, checkout, customer accounts, memberships and paywalls. Shopify runs commerce; EmDash runs content.",
 	"type": "module",
 	"license": "MIT",

package/src/descriptor.ts

@@ -12,8 +12,8 @@ import { VERSION } from "./version.js";
  * Every page shares one sidebar folder, so RedeemID shows as a single
  * RedeemID entry under Plugins (opening to these pages) instead of loose
  * items mixed in with other plugins' pages. Overview comes first; then the
- * day-to-day pages (people and access), then Connection, whose tabs hold
- * Status, Setup, Webhooks, Health and App events.
+ * day-to-day pages (people, access and what happened), then Connection,
+ * with Status and one tab per setup step.
  */
 const GROUP = "RedeemID";
 export const PAGES = [
@@ -21,12 +21,15 @@ export const PAGES = [
 	{ path: "/members", label: "Members", icon: "users", group: GROUP },
 	{ path: "/access", label: "Access", icon: "lock", group: GROUP },
 	{ path: "/reports", label: "Reports", icon: "chart", group: GROUP },
+	{ path: "/events", label: "Events", icon: "pulse", group: GROUP },
 	{ path: "/privacy", label: "Privacy", icon: "shield-check", group: GROUP },
 	{ path: "/connection", label: "Connection", icon: "plugs-connected", group: GROUP },
 ];
-/** Connection's tabs by address (/connection/webhooks), so a link can open one. */
-export const CONNECTION_TABS = ["status", "setup", "webhooks", "health", "events"] as const;
-export const TAB_PATHS = CONNECTION_TABS.map((t) => `/connection/${t}`);
+/** Connection's tabs by address (/connection/sign-in), so a link can open one: Status, then a tab per setup step. */
+export const CONNECTION_TABS = ["status", "store", "sign-in", "app", "webhooks", "level", "try", "storefront"] as const;
+/** Events' tabs by address (/events/app). */
+export const EVENTS_TABS = ["webhook", "app", "health"] as const;
+export const TAB_PATHS = [...CONNECTION_TABS.map((t) => `/connection/${t}`), ...EVENTS_TABS.map((t) => `/events/${t}`)];
 /** The Access panel on every saved entry, in every collection (new ones too). */
 export const EDITOR_PANELS = [{ id: "access", title: "Access", route: "access-panel", order: 10 }];
 export const WIDGETS = [{ id: "status", title: "RedeemID", size: "half" as const }];

package/src/monitor.ts

@@ -1,11 +1,12 @@
 /**
  * Watching what RedeemID does, in the admin (Block Kit):
  *
- * - Webhooks: what Shopify sent and what became of it (Received), whether
- *   deliveries are flowing (Health: the daily check, rejected and failed
- *   deliveries, and when to warn staff by email), and where Shopify sends them
- *   (Setup: endpoint, signatures, subscriptions).
- * - App events: the log in log.ts, newest first, by event or problems only.
+ * - Webhooks: what Shopify sent and what became of it (Events → Webhook),
+ *   whether deliveries are flowing (Events → Health: the daily check, rejected
+ *   and failed deliveries, and when to warn staff by email), and where Shopify
+ *   sends them (Connection → Webhooks: endpoint, signatures, subscriptions).
+ * - App events (Events → App): the log in log.ts, newest first, by event or
+ *   problems only.
  * - Reports: members by level, who joined and left, sign-ins and metered reads.
  *
  * The daily check re-creates subscriptions Shopify dropped and never changes
@@ -129,7 +130,7 @@ export async function healthCheck(env_: MonitorEnv): Promise<HealthResult> {
 
 	const last = await lastDelivery(s);
 	if (settings.quietDays > 0) {
-		if (!last) problems.push({ level: "warn", text: "No webhooks received yet. Check the webhook subscriptions under Connection → Status." });
+		if (!last) problems.push({ level: "warn", text: "No webhooks received yet. Check the webhook subscriptions under Connection → Webhooks." });
 		else if (Date.parse(last.receivedAt) < now - settings.quietDays * DAY) {
 			const days = Math.floor((now - Date.parse(last.receivedAt)) / DAY);
 			problems.push({ level: "warn", text: `No webhooks for ${days} days. Quiet stores are normal; if customers changed in Shopify since, check Setup.` });
@@ -140,7 +141,7 @@ export async function healthCheck(env_: MonitorEnv): Promise<HealthResult> {
 	const rejected = await count(s, "webhook.rejected", day);
 	if (rejected) problems.push({ level: "warn", text: `${rejected} ${rejected === 1 ? "delivery was" : "deliveries were"} turned away in the last day (bad signature): check the webhook signing secret.` });
 	const failed = await count(s, "webhook.failed", day);
-	if (failed) problems.push({ level: "error", text: `${failed} ${failed === 1 ? "delivery" : "deliveries"} failed to save in the last day. Shopify sends them again; see App events.` });
+	if (failed) problems.push({ level: "error", text: `${failed} ${failed === 1 ? "delivery" : "deliveries"} failed to save in the last day. Shopify sends them again; see Events → App.` });
 
 	const result: HealthResult = { at: new Date(now).toISOString(), problems, registered, subscriptions };
 	result.emailed = await alert(env_, settings, result, now);
@@ -195,10 +196,7 @@ export async function tidy(s: Stores): Promise<void> {
 
 export { topicName };
 
-// ---------------------------------------------------------------- Webhooks page
-
-export const WEBHOOK_TABS = ["received", "health", "setup"] as const;
-export type WebhookTab = (typeof WEBHOOK_TABS)[number];
+// ---------------------------------------------------------------- Webhook panels
 
 const OUTCOMES: Record<string, string> = {
 	processed: "Processed",
@@ -210,7 +208,11 @@ const OUTCOMES: Record<string, string> = {
 
 const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 
-export async function webhooksPage(env_: MonitorEnv, tab: WebhookTab = "received", toast?: Toast, cursor?: string): Promise<Blocks> {
+/**
+ * The webhook parts of the admin: deliveries and their health (Events →
+ * Webhook and Health) and the app's subscriptions (Connection → Webhooks).
+ */
+export async function webhookPanels(env_: MonitorEnv, cursor?: string): Promise<{ received: unknown[]; health: unknown[]; subscriptions: unknown[]; attention: boolean }> {
 	const { s, kv } = env_;
 	const now = env_.now?.() ?? Date.now();
 	const month = since(now, LOG_DAYS);
@@ -236,7 +238,7 @@ export async function webhooksPage(env_: MonitorEnv, tab: WebhookTab = "received
 				{ label: "Failed", value: String(failed), ...(failed ? { trend: "down" } : {}) },
 			],
 		},
-		...(cursor ? [{ type: "actions", elements: [{ type: "button", action_id: "webhooks_tab", value: "received", label: "Back to the newest", style: "secondary" }] }] : []),
+		...(cursor ? [{ type: "actions", elements: [{ type: "button", action_id: "deliveries_page", value: "", label: "Back to the newest", style: "secondary" }] }] : []),
 		{
 			type: "table",
 			page_action_id: "deliveries_page",
@@ -303,7 +305,7 @@ export async function webhooksPage(env_: MonitorEnv, tab: WebhookTab = "received
 		},
 	];
 
-	const setupTab = [
+	const subscriptions = [
 		{ type: "context", text: "Where Shopify sends deliveries, how they're checked, and the app's webhook subscriptions." },
 		{ type: "section", text: `Endpoint: ${env_.uri}` },
 		{
@@ -316,21 +318,7 @@ export async function webhooksPage(env_: MonitorEnv, tab: WebhookTab = "received
 		{ type: "context", text: "customers/redact, customers/data_request and shop/redact are set in the app's compliance webhooks, not here." },
 	];
 
-	return {
-		blocks: [
-			{ type: "header", text: "Webhooks" },
-			{
-				type: "tab",
-				default_tab: WEBHOOK_TABS.indexOf(tab),
-				panels: [
-					{ label: "Received", blocks: receivedTab },
-					{ label: attention ? "Health (!)" : "Health", blocks: healthTab },
-					{ label: "Setup", blocks: setupTab },
-				],
-			},
-		],
-		...(toast ? { toast } : {}),
-	};
+	return { received: receivedTab, health: healthTab, subscriptions, attention };
 }
 
 const SUBS: Record<HealthResult["subscriptions"], string> = {
@@ -385,7 +373,6 @@ export async function eventsPage(s: Stores, filter: EventFilter = {}, cursor?: s
 	const failed = cursor ? null : await s.failedEvents.query({ orderBy: { at: "desc" }, limit: 50 }).catch(() => null);
 	return {
 		blocks: [
-			{ type: "header", text: "App events" },
 			{
 				type: "context",
 				text: `What RedeemID did and what came of it: webhooks, sign-ins, calls to Shopify, staff actions, settings saves and outbound events. Kept ${LOG_DAYS} days. Never bodies, tokens or emails.`,
@@ -467,7 +454,7 @@ function failedBlocks(list: FailedEvent[]): unknown[] {
 					action_id: "failed_clear_all",
 					label: "Clear all",
 					style: "danger",
-					confirm: { title: "Clear every failed event?", text: "They won't be sent. App events keeps the record that they failed.", confirm: "Clear all", deny: "Cancel", style: "danger" },
+					confirm: { title: "Clear every failed event?", text: "They won't be sent. Events → App keeps the record that they failed.", confirm: "Clear all", deny: "Cancel", style: "danger" },
 				},
 			],
 		},
@@ -559,7 +546,7 @@ export async function reportsPage(config: RedeemIDConfig, s: Stores, now = Date.
 			{ type: "header", text: "Reports" },
 			{
 				type: "context",
-				text: "A level is joined or left when Shopify adds or removes its tag. Counts come from each member's tag dates; sign-ins and metered reads from App events (kept 30 days).",
+				text: "A level is joined or left when Shopify adds or removes its tag. Counts come from each member's tag dates; sign-ins and metered reads from Events → App (kept 30 days).",
 			},
 			{
 				type: "stats",

package/src/plugin.ts

@@ -34,17 +34,17 @@ import { deleteAccess, entryKey, loadAccess, onLevels, withSaved } from "./setti
 import { env, ENV, shopOrigin, storeDomain, unknownEnvNames, type LevelConfig, type RedeemIDConfig } from "./config.js";
 import { discover } from "./shopify.js";
 import { stores, type MemberRecord, type Stores } from "./storage.js";
-import { CONNECTION_TABS, EDITOR_PANELS, PAGES, WIDGETS } from "./descriptor.js";
+import { CONNECTION_TABS, EDITOR_PANELS, EVENTS_TABS, PAGES, WIDGETS } from "./descriptor.js";
 import { VERSION } from "./version.js";
 import { AdminError, adminConfigured } from "./admin-api.js";
 import { cancelShopifyErasure, closeRequest, eraseMember, exportMember, exportRequest, recentRequests, requestShopifyErasure } from "./privacy.js";
 import { bulkResync, BULK_BATCH, memberDetail, privacyPage, registerWebhooks, resyncOne, staffLink, staffUnlink, tagEdit } from "./staff.js";
 import { textProblems } from "./text.js";
 import { cacheFindings, gatedFindings, templateFindings } from "./template-scan.js";
-import { setupFacts, setupPage, setupSteps, WEBHOOK } from "./setup.js";
+import { nextStep, requiredSteps, setupFacts, setupPanels, setupSteps, STEP_TABS, WEBHOOK } from "./setup.js";
 import { record } from "./log.js";
 import { resend } from "./events.js";
-import { eventRow, eventsPage, healthCheck, HEALTH_TASK, lastCheck, parseFilter, reportsPage, saveMonitor, WEBHOOK_PATH, WEBHOOK_TABS, webhooksPage, type MonitorEnv, type WebhookTab } from "./monitor.js";
+import { eventRow, eventsPage, healthCheck, HEALTH_TASK, lastCheck, parseFilter, reportsPage, saveMonitor, WEBHOOK_PATH, webhookPanels, type MonitorEnv } from "./monitor.js";
 import { z } from "astro/zod";
 import { AgentError, explainAccess, findProducts, getCollection, getMember, getProduct, getRules, levelChanges, listLevels, siteHealth, type ExplainInput } from "./agents.js";
 
@@ -289,11 +289,14 @@ export function createPlugin(code: RedeemIDConfig = {}): ResolvedPlugin {
 						if (i.page === "/members") return await membersPage(config);
 						if (i.page === "/access") return await accessPage(await accessEnv(config));
 						if (i.page === "/reports") return await reportsPage(config, await memberStores());
-						// Connection, or one of its tabs by address (/connection/webhooks).
+						// Connection and Events, or one of their tabs by address (/connection/sign-in, /events/app).
 						if (i.page === "/connection" || i.page?.startsWith("/connection/")) {
 							await scheduleHealth(ctx);
-							const tab = i.page.split("/")[2] as ConnectionTab | undefined;
-							return await connectionPage(config, ctx, tab && CONNECTION_TABS.includes(tab) ? tab : undefined);
+							return await connectionPage(config, ctx, tabOf(CONNECTION_TABS, i.page.split("/")[2]));
+						}
+						if (i.page === "/events" || i.page?.startsWith("/events/")) {
+							await scheduleHealth(ctx);
+							return await eventsAdminPage(config, ctx, tabOf(EVENTS_TABS, i.page.split("/")[2]));
 						}
 						if (i.page === "/privacy") return await privacyPage(await memberStores());
 						if (i.page === "widget:status") return await statusWidget(config, ctx);
@@ -484,14 +487,11 @@ async function setupAction(
 	config: RedeemIDConfig,
 	live: () => Promise<RedeemIDConfig>,
 	ctx: RouteContext,
-	i: { action_id?: string; values?: Record<string, unknown> },
+	i: { action_id?: string; value?: unknown; values?: Record<string, unknown> },
 ) {
-	const s = await memberStores();
 	const origin = siteOrigin(ctx);
-	const page = async (toast?: { type: "success" | "error" | "info"; message: string }) => {
-		const now = await live();
-		return connectionPage(now, ctx, "setup", { setup: setupPage(await setupFacts(now, s, origin), toast) });
-	};
+	const tab: ConnectionTab = i.action_id === "setup_register" ? "webhooks" : i.action_id === "setup_level" ? "level" : (tabOf(CONNECTION_TABS, i.value) ?? "status");
+	const page = async (toast?: { type: "success" | "error" | "info"; message: string }) => connectionPage(await live(), ctx, tab, toast);
 	if (i.action_id === "setup_register") {
 		try {
 			const { added, failed } = await registerWebhooks(config, origin + WEBHOOK);
@@ -588,41 +588,37 @@ async function action(
 				const done = added.length ? `Registered ${added.length} webhooks.` : failed.length ? "" : "Nothing was missing.";
 				const refused = failed.map((f) => `Shopify refused ${f.topic}: ${f.message}`).join(" ");
 				await record({ event: "staff.webhooks", label: "register", status: failed.length ? `${failed.length} refused` : `${added.length} registered`, level: failed.length ? "warn" : "ok", origin: "staff" });
-				return connectionPage(config, ctx, "status", { hooks: await webhooksPage(monitor(), "setup", { type: failed.length ? "error" : "success", message: [done, refused].filter(Boolean).join(" ") }) });
+				return connectionPage(config, ctx, "webhooks", { type: failed.length ? "error" : "success", message: [done, refused].filter(Boolean).join(" ") });
 			} catch (e) {
-				return connectionPage(config, ctx, "status", { hooks: await webhooksPage(monitor(), "setup", fail(e)) });
+				return connectionPage(config, ctx, "webhooks", fail(e));
 			}
 		}
-		case "webhooks_tab": {
-			const tab = WEBHOOK_TABS.includes(i.value as WebhookTab) ? (i.value as WebhookTab) : "received";
-			return connectionPage(config, ctx, tab === "setup" ? "status" : tab === "health" ? "health" : "webhooks");
-		}
 		case "deliveries_page":
-			return connectionPage(config, ctx, "webhooks", { hooks: await webhooksPage(monitor(), "received", undefined, cursorOf(i.value)) });
+			return eventsAdminPage(config, ctx, "webhook", { cursor: cursorOf(i.value) });
 		case "health_check": {
 			const r = await healthCheck({ ...monitor(), by: "staff" });
 			const message = r.problems.length ? `Checked: ${r.problems.length === 1 ? "1 problem" : `${r.problems.length} problems`}.` : "Checked: subscriptions are in place and deliveries look healthy.";
-			return connectionPage(config, ctx, "health", { hooks: await webhooksPage(monitor(), "health", { type: r.problems.length ? "info" : "success", message }) });
+			return eventsAdminPage(config, ctx, "health", {}, { type: r.problems.length ? "info" : "success", message });
 		}
 		case "monitor_save":
-			return connectionPage(config, ctx, "health", { hooks: await webhooksPage(monitor(), "health", await saveMonitor(ctx.kv, i.values)) });
+			return eventsAdminPage(config, ctx, "health", {}, await saveMonitor(ctx.kv, i.values));
 		case "events_filter":
-			return connectionPage(config, ctx, "events", { events: await eventsPage(s, { event: String(i.values?.event ?? "") || undefined, problems: i.values?.problems === true }) });
+			return eventsAdminPage(config, ctx, "app", { events: await eventsPage(s, { event: String(i.values?.event ?? "") || undefined, problems: i.values?.problems === true }) });
 		case "events_show":
-			return connectionPage(config, ctx, "events", { events: await eventsPage(s, { event: String(i.value ?? "") || undefined }) });
+			return eventsAdminPage(config, ctx, "app", { events: await eventsPage(s, { event: String(i.value ?? "") || undefined }) });
 		case "events_page":
-			return connectionPage(config, ctx, "events", { events: await eventsPage(s, parseFilter(i.block_id), cursorOf(i.value)) });
+			return eventsAdminPage(config, ctx, "app", { events: await eventsPage(s, parseFilter(i.block_id), cursorOf(i.value)) });
 		case "failed_resend": {
 			const sent = await resend(config, s, String(i.value ?? "")).catch(() => false);
-			return connectionPage(config, ctx, "events", { events: await eventsPage(s, {}, undefined, sent ? { type: "success", message: "Sent. It's off the failed list." } : { type: "error", message: "The receiver still didn't take it. It stays on the list." }) });
+			return eventsAdminPage(config, ctx, "app", {}, sent ? { type: "success", message: "Sent. It's off the failed list." } : { type: "error", message: "The receiver still didn't take it. It stays on the list." });
 		}
 		case "failed_clear":
 			await s.failedEvents.delete(String(i.value ?? ""));
-			return connectionPage(config, ctx, "events", { events: await eventsPage(s, {}, undefined, { type: "success", message: "Cleared." }) });
+			return eventsAdminPage(config, ctx, "app", {}, { type: "success", message: "Cleared." });
 		case "failed_clear_all": {
 			const { items } = await s.failedEvents.query({ limit: 100 });
 			await s.failedEvents.deleteMany(items.map((r) => r.id));
-			return connectionPage(config, ctx, "events", { events: await eventsPage(s, {}, undefined, { type: "success", message: "Failed events cleared." }) });
+			return eventsAdminPage(config, ctx, "app", {}, { type: "success", message: "Failed events cleared." });
 		}
 		case "member_export": {
 			const id = String(i.value ?? "");
@@ -790,45 +786,70 @@ function textSummary(config: RedeemIDConfig): string {
 }
 
 type ConnectionTab = (typeof CONNECTION_TABS)[number];
+type EventsTab = (typeof EVENTS_TABS)[number];
+type Toast = { type: "success" | "error" | "info"; message: string };
 
-type Built = { blocks: unknown[]; toast?: unknown };
-const withoutHeader = (b: Built) => b.blocks.filter((x, n) => !(n === 0 && (x as { type?: string }).type === "header"));
-const panelsOf = (b: Built) => ((b.blocks.find((x) => (x as { type?: string }).type === "tab") as { panels?: Array<{ blocks: unknown[] }> } | undefined)?.panels ?? []).map((p) => p.blocks);
+/** A tab name from an address or a button value, if it's one of these. */
+function tabOf<T extends string>(tabs: readonly T[], v: unknown): T | undefined {
+	return tabs.includes(v as T) ? (v as T) : undefined;
+}
+const withoutHeader = (b: { blocks: unknown[] }) => b.blocks.filter((x, n) => !(n === 0 && (x as { type?: string }).type === "header"));
 
 /**
- * Everything about the store connection on one page: the values Shopify
- * needs (Status), the setup steps, webhook deliveries and their health, and
- * the app's event log. An action passes the part it rebuilt (with its
- * toast); the other tabs load as usual. Opens on Setup until it's done.
+ * How this site talks to Shopify: Status (the values to copy into Shopify
+ * and what the site reads from its environment), then one tab per setup
+ * step, each with a check mark once done. Webhooks also holds the app's
+ * subscriptions. Opens on the first step not done, or on Status.
  */
-async function connectionPage(config: RedeemIDConfig, ctx: RouteContext, tab?: ConnectionTab, given: { hooks?: Built; events?: Built; setup?: Built } = {}) {
+async function connectionPage(config: RedeemIDConfig, ctx: RouteContext, tab?: ConnectionTab, toast?: Toast) {
 	const s = await memberStores();
-	const [hooks, events, facts, status] = await Promise.all([
-		given.hooks ?? webhooksPage(monitorEnv(config, s, ctx)),
-		given.events ?? eventsPage(s),
-		setupFacts(config, s, siteOrigin(ctx)),
-		statusPage(config, ctx.request),
-	]);
-	const setup = given.setup ?? setupPage(facts);
-	const steps = setupSteps(facts).filter((x) => x.state !== "optional" && x.key !== "storefront");
-	const ready = steps.every((x) => x.state === "done");
-	const [received = [], health = [], subscriptions = []] = panelsOf(hooks);
-	const attention = JSON.stringify(hooks.blocks).includes('"label":"Health (!)"');
-	const open = tab ?? (ready ? "status" : "setup");
-	const toast = (given.hooks ?? given.events ?? given.setup)?.toast;
+	const [facts, status, hooks] = await Promise.all([setupFacts(config, s, siteOrigin(ctx)), statusPage(config, ctx.request), webhookPanels(monitorEnv(config, s, ctx))]);
+	const panels = setupPanels(facts);
+	const next = nextStep(facts);
+	const steps = requiredSteps(setupSteps(facts));
+	const open = tab ?? (next ? (STEP_TABS[next.key] as ConnectionTab) : "status");
+	const progress = next
+		? [{ type: "banner", variant: "alert", title: `Setup: ${steps.filter((x) => x.state === "done").length} of ${steps.length} steps done`, description: `Work through the tabs. Each one checks the site as it is, so set a secret, redeploy or restart, and press Check again. Next: ${next.title}.` }]
+		: [];
+	// The Webhooks step has its own Register button while it's to do.
+	const ownButton = panels.some((p) => p.tab === "webhooks" && JSON.stringify(p.blocks).includes('"setup_register"'));
+	const subscriptions = ownButton ? hooks.subscriptions.filter((b) => !JSON.stringify(b).includes('"webhooks_register"')) : hooks.subscriptions;
 	return {
 		blocks: [
 			{ type: "header", text: "Connection" },
-			{ type: "context", text: "How this site talks to Shopify: the values to copy into Shopify, the setup steps, webhook deliveries and what RedeemID has done." },
+			{ type: "context", text: "How this site talks to Shopify: the values to copy into the store, and each setup step." },
 			{
 				type: "tab",
 				default_tab: CONNECTION_TABS.indexOf(open),
 				panels: [
-					{ label: "Status", blocks: [...withoutHeader(status), { type: "divider" }, { type: "header", text: "Webhook subscriptions" }, ...subscriptions] },
-					{ label: ready ? "Setup" : `Setup (${steps.filter((x) => x.state === "done").length}/${steps.length})`, blocks: withoutHeader(setup) },
-					{ label: "Webhooks", blocks: received },
-					{ label: attention ? "Health (!)" : "Health", blocks: health },
-					{ label: "App events", blocks: withoutHeader(events) },
+					{ label: "Status", blocks: [...progress, ...withoutHeader(status)] },
+					...panels.map((p) => (p.tab === "webhooks" ? { label: p.label, blocks: [...p.blocks, { type: "divider" }, { type: "header", text: "Subscriptions" }, ...subscriptions] } : { label: p.label, blocks: p.blocks })),
+				],
+			},
+		],
+		...(toast ? { toast } : {}),
+	};
+}
+
+/**
+ * What happened: webhook deliveries from Shopify, what RedeemID did (App),
+ * and whether deliveries are healthy. An action passes the App panel it
+ * rebuilt (a filter or a page) or a deliveries cursor.
+ */
+async function eventsAdminPage(config: RedeemIDConfig, ctx: RouteContext, tab: EventsTab = "webhook", given: { events?: { blocks: unknown[] }; cursor?: string } = {}, toast?: Toast) {
+	const s = await memberStores();
+	const [hooks, events] = await Promise.all([webhookPanels(monitorEnv(config, s, ctx), given.cursor), given.events ?? eventsPage(s)]);
+	return {
+		blocks: [
+			{ type: "header", text: "Events" },
+			{ type: "context", text: "What Shopify sent, what RedeemID did with it, and whether deliveries are healthy." },
+			{
+				type: "tab",
+				default_tab: EVENTS_TABS.indexOf(tab),
+				panels: [
+					{ label: "Webhook", blocks: hooks.received },
+					{ label: "App", blocks: events.blocks },
+					{ label: hooks.attention ? "Health (!)" : "Health", blocks: hooks.health },
 				],
 			},
 		],
@@ -848,7 +869,7 @@ async function statusPage(config: RedeemIDConfig, request: Request) {
 			{ type: "header", text: "Status" },
 			ready
 				? { type: "banner", variant: "default", title: "Sign-in is ready", description: "Members can sign in with their store customer account." }
-				: { type: "banner", variant: "alert", title: "Sign-in isn't ready", description: "Set the missing values below as environment secrets, then reload. Setup walks through each one." },
+				: { type: "banner", variant: "alert", title: "Sign-in isn't ready", description: "Set the missing values below as environment secrets, then reload. The tabs after Status walk through each one." },
 			...customDomainBlocks(config),
 			{ type: "header", text: "Shopify settings" },
 			{ type: "context", text: "Copy these into the store: the first three into the Customer Account API settings of the Headless storefront, the webhook URL into the app's webhook subscriptions." },
@@ -1045,7 +1066,7 @@ async function statusWidget(config: RedeemIDConfig, ctx: PluginContext) {
 					{ type: "link", label: "Overview", target: page("/"), appearance: "primary" },
 					{ type: "link", label: "Members", target: page("/members"), appearance: "secondary" },
 					{ type: "link", label: "Access", target: page("/access"), appearance: "secondary" },
-					{ type: "link", label: s.signIn && !s.check?.problems.length ? "Webhooks" : "Setup", target: page(s.signIn && !s.check?.problems.length ? "/connection/webhooks" : "/connection/setup"), appearance: "secondary" },
+					{ type: "link", label: s.signIn && !s.check?.problems.length ? "Events" : "Connection", target: page(s.signIn && !s.check?.problems.length ? "/events/webhook" : "/connection"), appearance: "secondary" },
 				],
 			},
 		],
@@ -1060,8 +1081,7 @@ async function overviewPage(config: RedeemIDConfig, ctx: PluginContext) {
 		setupFacts(config, st, siteOrigin(ctx)).catch(() => null),
 		st.log.query({ orderBy: { at: "desc" }, limit: 8 }).catch(() => ({ items: [] as Array<{ data: Parameters<typeof eventRow>[0] }> })),
 	]);
-	const steps = facts ? setupSteps(facts) : [];
-	const required = steps.filter((x) => x.state !== "optional");
+	const required = facts ? requiredSteps(setupSteps(facts)) : [];
 	const done = required.filter((x) => x.state === "done").length;
 	const hooks = webhookWord(s);
 	const rules = config.rules ?? [];
@@ -1090,10 +1110,10 @@ async function overviewPage(config: RedeemIDConfig, ctx: PluginContext) {
 				items: [
 					{ title: "Sign-in", value: s.signIn ? "Ready" : "Not ready", tone: s.signIn ? "ok" : "error", text: domain ? `Store: ${domain.replace(/^https?:\/\//, "")}` : "No store set", link: page("/connection/status"), label: "Status" },
 					{ title: "Members", value: String(s.members.length), text: `${s.active} with a level, ${s.signedIn} signed in here`, link: page("/members"), label: "Members" },
-					{ title: "Webhooks", value: hooks.value, tone: hooks.tone, text: s.delivery ? `Last delivery ${ago(s.delivery.receivedAt)} (${s.delivery.topic})` : "None received yet", link: page("/connection/webhooks"), label: "Webhooks" },
+					{ title: "Webhooks", value: hooks.value, tone: hooks.tone, text: s.delivery ? `Last delivery ${ago(s.delivery.receivedAt)} (${s.delivery.topic})` : "None received yet", link: page("/events/webhook"), label: "Webhooks" },
 					{ title: "Access", value: count(s.levels.length, "level"), text: [count(rules.length, "rule"), count((config.features ?? []).length, "feature"), count((config.files ?? []).length, "protected folder")].join(", "), link: page("/access"), label: "Access" },
 					{ title: "Privacy", value: s.openRequests ? `${s.openRequests} open` : "Nothing open", tone: s.openRequests ? "warn" : undefined, text: "Exports and erasures from members, staff and Shopify", link: page("/privacy"), label: "Privacy" },
-					{ title: "Setup", value: required.length ? `${done} of ${required.length}` : "Unknown", tone: required.length && done === required.length ? "ok" : "warn", text: done === required.length ? "Every step is done" : `Next: ${required.find((x) => x.state !== "done")?.title ?? ""}`, link: page("/connection/setup"), label: "Setup" },
+					{ title: "Setup", value: required.length ? `${done} of ${required.length}` : "Unknown", tone: required.length && done === required.length ? "ok" : "warn", text: done === required.length ? "Every step is done" : `Next: ${required.find((x) => x.state !== "done")?.title ?? ""}`, link: page("/connection"), label: "Setup" },
 				],
 			},
 			{ type: "header", text: "Levels" },
@@ -1129,7 +1149,7 @@ async function overviewPage(config: RedeemIDConfig, ctx: PluginContext) {
 					return { event, about, result, at };
 				}),
 			},
-			{ type: "actions", elements: [{ type: "link", label: "All app events", target: page("/connection/events"), appearance: "secondary" }, { type: "link", label: "Reports", target: page("/reports"), appearance: "secondary" }] },
+			{ type: "actions", elements: [{ type: "link", label: "All app events", target: page("/events/app"), appearance: "secondary" }, { type: "link", label: "Reports", target: page("/reports"), appearance: "secondary" }] },
 			{ type: "header", text: "Resources" },
 			{
 				type: "redeemid_cards",

package/src/setup.ts

@@ -1,19 +1,19 @@
 /**
- * Plugins → RedeemID → Setup: connecting a store, step by step, from the
- * admin alone. Each step says what to do in Shopify (with the exact values
+ * RedeemID → Connection: connecting a store, step by step, from the admin
+ * alone, one tab per step. Each step says what to do in Shopify (with the exact values
  * to paste), what to set on the site, and has a button for whatever
  * RedeemID can do itself: register the webhooks, add the first level.
  *
  * Nothing about progress is stored. Each step's state comes from the site
- * as it is (setupFacts), so opening Setup again picks up where things stand
- * and it always agrees with the Status page.
+ * as it is (setupFacts), so opening Connection again picks up where things stand
+ * and it always agrees with the Status tab.
  *
  * Secrets stay where they are today, in the site's environment: the wizard
  * checks them and gives the command to set each one, and never stores one.
  * It writes only what staff can already write (a level, through Access) and
  * never grants access: levels still come only from Shopify tags.
  *
- * setupSteps() and setupPage() are pure.
+ * setupSteps() and setupPanels() are pure.
  */
 
 import { adminConfigured, adminScopes, grantedScopes, topicName, webhookSubscriptions, WEBHOOK_TOPICS } from "./admin-api.js";
@@ -24,7 +24,7 @@ import type { Stores } from "./storage.js";
 type Toast = { message: string; type: "success" | "error" | "info" };
 export type Blocks = { blocks: unknown[]; toast?: Toast };
 
-/** Scopes the webhook app needs for staff tools and webhook registration. */
+/** Scopes the Admin API app needs for staff tools and webhook registration. */
 export const SETUP_SCOPES = ["read_customers", "write_customers"] as const;
 
 export const CALLBACK = "/_emdash/api/auth/redeemid/callback";
@@ -134,8 +134,8 @@ export function setupSteps(f: SetupFacts): Step[] {
 	return [
 		{ key: "store", title: "Connect the store", state: store ? "done" : "todo" },
 		{ key: "sign_in", title: "Create the sign-in client", state: signIn ? "done" : store ? "todo" : "waiting", waitingFor: "Connect the store first." },
-		{ key: "app", title: "Connect the webhook app", state: app ? "done" : store ? "todo" : "waiting", waitingFor: "Connect the store first." },
-		{ key: "webhooks", title: "Register the webhooks", state: hooks ? "done" : app ? "todo" : "waiting", waitingFor: "Connect the webhook app first: webhooks are registered through it." },
+		{ key: "app", title: "Connect the Admin API app", state: app ? "done" : store ? "todo" : "waiting", waitingFor: "Connect the store first." },
+		{ key: "webhooks", title: "Register the webhooks", state: hooks ? "done" : app ? "todo" : "waiting", waitingFor: "Connect the Admin API app first: webhooks are registered through it." },
 		{ key: "level", title: "Create your first level", state: level ? "done" : "todo" },
 		{ key: "try", title: "Try a sign-in", state: f.signedIn > 0 ? "done" : ready ? "todo" : "waiting", waitingFor: "Finish the steps above first." },
 		{ key: "storefront", title: "Add Storefront tokens (for plans and the shop)", state: f.storefront ? "done" : "optional" },
@@ -182,7 +182,7 @@ function stepBlocks(step: Step, f: SetupFacts): unknown[] {
 					text: "In Shopify admin, open Sales channels, then Headless (add the channel if it isn't there), and Create storefront. Name it after this site. Open its Customer Account API settings, pick a client type (Public needs no secret; Confidential gives one) and, under Application setup, add these:",
 				},
 				{
-					type: "fields",
+					type: "redeemid_copy",
 					fields: [
 						{ label: "Callback URI", value: `${f.origin}${CALLBACK}` },
 						{ label: "JavaScript origin (public clients)", value: f.origin },
@@ -200,7 +200,7 @@ function stepBlocks(step: Step, f: SetupFacts): unknown[] {
 					? `Shopify refused the app: ${f.admin} The app must be installed on this store and be in the same Shopify organization.`
 					: f.admin === "ok"
 						? `The app is connected but lacks ${missingScopes(f).join(" and ")}. Add the scopes, release a new version and let the store accept it.`
-						: "Shopify signs webhooks with an app's client secret, and RedeemID uses the same app to register webhooks and to resync members.";
+						: "RedeemID uses an Admin API app for the staff tools (resyncs, tag edits, member lookups) and to register webhooks, and Shopify signs webhooks with its client secret.";
 			return [
 				...out,
 				{ type: "section", text: why },
@@ -266,34 +266,29 @@ function stepBlocks(step: Step, f: SetupFacts): unknown[] {
 	return out;
 }
 
-/** The Setup page. Pure. */
-export function setupPage(f: SetupFacts, toast?: Toast): Blocks {
-	const steps = setupSteps(f);
-	const required = steps.filter((s) => s.state !== "optional" && s.key !== "storefront");
-	const done = required.filter((s) => s.state === "done").length;
-	return {
+/** Connection's tab address for each step (/connection/sign-in). */
+export const STEP_TABS: Record<Step["key"], string> = { store: "store", sign_in: "sign-in", app: "app", webhooks: "webhooks", level: "level", try: "try", storefront: "storefront" };
+const SHORT: Record<Step["key"], string> = { store: "Store", sign_in: "Sign-in", app: "Admin app", webhooks: "Webhooks", level: "First level", try: "Try it", storefront: "Storefront" };
+
+/** The steps that count toward "set up" (Storefront is optional). */
+export const requiredSteps = (steps: Step[]) => steps.filter((s) => s.key !== "storefront");
+
+/**
+ * One tab per step, for Connection: the step, with a Check again button
+ * until it's done. Labels carry a check mark once done. Pure.
+ */
+export function setupPanels(f: SetupFacts): Array<{ tab: string; label: string; blocks: unknown[] }> {
+	return setupSteps(f).map((step) => ({
+		tab: STEP_TABS[step.key],
+		label: step.state === "done" ? `${SHORT[step.key]} ✓` : SHORT[step.key],
 		blocks: [
-			{ type: "header", text: "Setup" },
-			done === required.length
-				? { type: "banner", variant: "default", title: "RedeemID is set up", description: "Members can sign in with their Shopify customer account. Levels, rules and the meter are under Access." }
-				: {
-						type: "banner",
-						variant: "alert",
-						title: `${done} of ${required.length} steps done`,
-						description: "Work down the steps. Each one checks the site as it is, so set a secret, redeploy or restart, and press Check again.",
-					},
-			{ type: "actions", elements: [{ type: "button", action_id: "setup_check", label: "Check again", style: "secondary" }] },
-			{
-				type: "table",
-				page_action_id: "setup_steps",
-				columns: [
-					{ key: "step", label: "Step" },
-					{ key: "state", label: "State", format: "badge" },
-				],
-				rows: steps.map((s) => ({ step: s.title, state: BADGE[s.state] })),
-			},
-			...steps.flatMap((s) => [{ type: "divider" }, ...stepBlocks(s, f)]),
+			...stepBlocks(step, f),
+			...(step.state === "done" ? [] : [{ type: "actions", elements: [{ type: "button", action_id: "setup_check", value: STEP_TABS[step.key], label: "Check again", style: "secondary" }] }]),
 		],
-		...(toast ? { toast } : {}),
-	};
+	}));
+}
+
+/** Where Connection opens: the first step not done, or null once every required one is. Pure. */
+export function nextStep(f: SetupFacts): Step | null {
+	return requiredSteps(setupSteps(f)).find((s) => s.state !== "done") ?? null;
 }

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.0.31";
+export const VERSION = "0.0.32";