Connectors / 14 primitives + composition

Connector hub primitives

Central control surface for the Mufflermen workshop — OAuth flows for Google, Meta, Stripe, Xero and Shopify; an API key vault for Replicate, OpenAI and Payload; webhooks for Stripe payments, Shopify orders and Twilio SMS; rate limits, retry policies, mapping, schedules, quotas and a full audit trail. Visual reference only — no real backend wired.

Production answer

Connector hub primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Connector hub primitives states
Generative search brief

Connector hub primitives: Central control surface for the Mufflermen workshop — OAuth flows for Google, Meta, Stripe, Xero and Shopify; an API key vault for Replicate, OpenAI and Payload; webhooks for Stripe payments, Shopify orders and Twilio SMS; rate limits, retry policies, mapping, schedules, quotas and a full audit trail. Visual reference only — no real backend wired.

Visual reference only — no real backend wired
Primitive 01

OAuth connect card

Provider logo tile, granted scopes, status chip, token expiry and a connect / disconnect button per OAuth provider.

Stateful · toggleOpen
Primitive 02

API key vault row

Symbolic key name, masked secret preview, rotation cadence, days-until-due countdown and a reveal / copy / rotate strip.

Stateful · revealOpen
Primitive 03

Webhook config card

Endpoint URL, masked signing secret and event-filter checkboxes for inbound webhooks (Stripe, Shopify, Twilio).

Stateful · filtersOpen
Primitive 04

Rate limit gauge

Radial gauge — quota used / remaining with a reset countdown for Google, OpenAI and Replicate API caps.

StatelessOpen
Primitive 05

Retry policy card

Initial backoff, multiplier and max attempts, with a jitter toggle that fans the timeline to a min/max window.

Stateful · toggleOpen
Primitive 06

Integration health tile

Provider tile — current status, last-sync, error rate and a 10-sample error-rate sparkline.

StatelessOpen
Primitive 07

Event relay table

Inbound webhook event log — received-at, source, event code, HTTP code, outcome chip and a replay button per row.

Stateful · replayOpen
Primitive 08

Scope permission grid

Granted / requested / denied scope cells per OAuth provider — Google, Meta, Stripe, Xero, Shopify in one matrix.

StatelessOpen
Primitive 09

Provider directory card

Marketplace catalog card — provider logo, one-line description, category chip and install count.

StatelessOpen
Primitive 10

Data mapping row

Source-field → target-field row with type chips, a transform function chip and required / validation badges.

StatelessOpen
Primitive 11

Sync schedule card

Cron expression with timezone, last-run plus next-run preview and a 12-cell recent outcomes strip.

StatelessOpen
Primitive 12

Connection test result

Test-call summary — HTTP status code, latency, region and a JSON sample payload in a code block.

StatelessOpen
Primitive 13

Quota purchase card

Segmented usage meter plus three tiers — Starter, Studio, Scale — with current and recommended badges.

StatelessOpen
Primitive 14

Audit trail row

Per-action audit entry — connector, actor avatar, IP, timestamp and a free-text note line.

StatelessOpen
Composition

Full integration hub

End-to-end hub composition — directory, OAuth, secrets, webhooks, schedules, health, rate limits, event relay and audit trail.

CompositionOpen