feat(components): Add GitHub connection primitives (button, status, import/connect wizard)

[leecalcote]

Summary

Net-new Sistent components, grounded in the existing Meshery Cloud GitHub connection implementation — do not redesign from scratch.

If Cloud’s flow can be enhanced, enhance it; Sistent primitives should be extracted / generalized from that current UI, then published so Kanvas and Cloud both consume @sistent/sistent instead of forking the experience.

Today Sistent still has no GitHub-connection component (only GithubIcon, a github color token, and a generic ConnectionChip). The product UI to start from lives in Meshery Cloud.

Start from Meshery Cloud (source of truth for behavior/UX)

Repo: layer5io/meshery-cloud

Area	Location
Route / page	ui/pages/connect/[...connection].tsx → /connect/github/...
Wizard shell	ui/components/connect/index.tsx
Stepper	ui/components/connect/stepper/ (index.tsx, stepper.tsx, stepper-content.tsx, constants.tsx, info-panel.tsx)
GitHub App step	ui/components/connect/stepper/github.tsx (+ getGithubInstallationId)
Step labels (today)	Connect GitHub App → Select Repositories → Import Designs → Enable Snapshots (…) → Finish (constants.tsx steps)
Verify	ui/components/connect/verify/
API client	ui/api/github.ts
Redux	ui/store/slices/connection.ts
Integrations cards	ui/components/workspaces/integrations/ (connection-card.tsx, connectionsTable.tsx, metadata.tsx)
E2E reference	ui/e2e/github-connection-wizard.spec.ts

Guidance: Lift presentational patterns (stepper chrome, CONNECT CTA states, empty/error, repo/file pick lists, finish) into Sistent; leave Cloud-specific data fetching, GitHub App URLs, and persistence in Cloud. Enhance Cloud where needed, then mirror the same primitives in Kanvas.

Goal

Create new Sistent primitives for GitHub connections, derived from the Cloud wizard above, and publish via @sistent/sistent.

Proposed new primitives (from Cloud, not greenfield fantasy)

• GitHubConnectButton — from Cloud CONNECT CTA / ConnectApp patterns
• GitHubConnectionStatus — connected / error / reconnect (may compose ConnectionChip + GithubIcon)
• GitHubImportConnectWizard (composable stepper) — align with Cloud steps in constants.tsx; apps supply data/callbacks
• Empty / error / popup-blocked / same-tab fallback presentation
• Storybook demos + package exports
• Document: “extract from Cloud → publish → Cloud & Kanvas consume”

Out of scope: MeshKit Trees crawl (meshery/meshkit#1119).

Related product issues (consume these primitives; start from Cloud UX)

Issue	Repo	Role
https://github.com/layer5io/meshery-cloud/issues/6116	Cloud	Silent CONNECT dead-end
https://github.com/layer5labs/meshery-extensions/issues/4367	Kanvas	Shared React wizard for Kanvas
https://github.com/layer5io/meshery-cloud/issues/6117	Cloud	Shorten Kanvas-first onboarding
https://github.com/layer5io/meshery-cloud/issues/6118	Cloud	Import inventory / refresh / idempotent import
https://github.com/layer5io/meshery-cloud/issues/6119	Cloud	Remap + commit-SHA pin

Acceptance criteria

• Primitives clearly mapped to Cloud files listed above (no from-scratch redesign)
• Cloud can swap to Sistent exports without losing current wizard capabilities
• Kanvas consumes the same exports
• Related issues state dependency on this issue + “start from Cloud implementation”

Research context

layer5labs/meshery-extensions#4366 · layer5io/meshery-cloud#6115 · meshery/meshkit#1118

---

Contributor Guide · https://layer5.io/projects/sistent