Show the github url

Author: akirk

packages/playground/website/src/components/github-private-repo-auth-modal/index.tsx

@@ -1,14 +1,40 @@
 import { Modal } from '../modal';
-import { useAppDispatch } from '../../lib/state/redux/store';
+import { useAppDispatch, useAppSelector } from '../../lib/state/redux/store';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { Icon } from '@wordpress/components';
 import { GitHubIcon } from '../../github/github';
 import css from '../../github/github-oauth-guard/style.module.css';
 
 const OAUTH_FLOW_URL = 'oauth.php?redirect=1';
 
+function extractRepoName(url: string): string {
+	try {
+		// Handle CORS-proxied URLs - extract the actual GitHub URL
+		const corsProxyPrefixes = [
+			'https://wordpress-playground-cors-proxy.net/?',
+			'http://127.0.0.1:5263/cors-proxy.php?',
+		];
+		let githubUrl = url;
+		for (const prefix of corsProxyPrefixes) {
+			if (url.startsWith(prefix)) {
+				githubUrl = url.substring(prefix.length);
+				break;
+			}
+		}
+
+		// Extract owner/repo from GitHub URL
+		const match = githubUrl.match(/github\.com\/([^\/]+\/[^\/]+)/);
+		return match ? match[1] : url;
+	} catch {
+		return url;
+	}
+}
+
 export function GitHubPrivateRepoAuthModal() {
 	const dispatch = useAppDispatch();
+	const repoUrl = useAppSelector((state) => state.ui.githubAuthRepoUrl);
+
+	const displayRepoName = repoUrl ? extractRepoName(repoUrl) : '';
 
 	// Remove the modal parameter from the redirect URI
 	// so it doesn't persist after OAuth completes
@@ -27,11 +53,16 @@ export function GitHubPrivateRepoAuthModal() {
 			<div>
 				<p>
 					This blueprint requires access to a private GitHub
-					repository.
+					repository:
+				</p>
+				<p>
+					<strong>
+						<code>github.com/{displayRepoName}</code>
+					</strong>
 				</p>
 				<p>
-					To continue, please connect your GitHub account with
-					WordPress Playground.
+					If you have a GitHub account with access to this repository,
+					you can connect it to continue.
 				</p>
 
 				<p>

packages/playground/website/src/lib/state/redux/boot-site-client.ts

@@ -17,7 +17,11 @@ import { setupPostMessageRelay } from '@php-wasm/web';
 import { startPlaygroundWeb } from '@wp-playground/client';
 import type { PlaygroundClient } from '@wp-playground/remote';
 import { getRemoteUrl } from '../../config';
-import { setActiveModal, setActiveSiteError } from './slice-ui';
+import {
+	setActiveModal,
+	setActiveSiteError,
+	setGitHubAuthRepoUrl,
+} from './slice-ui';
 import type { PlaygroundDispatch, PlaygroundReduxState } from './store';
 import { selectSiteBySlug } from './slice-sites';
 // @ts-ignore
@@ -204,6 +208,14 @@ export function bootSiteClient(
 					'GitHubAuthenticationError' ||
 				(e as any).cause?.name === 'GitHubAuthenticationError'
 			) {
+				// Extract repo URL from the error
+				const repoUrl =
+					(e as any).repoUrl ||
+					(e as any).cause?.repoUrl ||
+					undefined;
+				if (repoUrl) {
+					dispatch(setGitHubAuthRepoUrl(repoUrl));
+				}
 				dispatch(setActiveModal(modalSlugs.GITHUB_PRIVATE_REPO_AUTH));
 			} else {
 				dispatch(setActiveSiteError('site-boot-failed'));

packages/playground/website/src/lib/state/redux/slice-ui.ts

@@ -17,6 +17,7 @@ export interface UIState {
 		error?: SiteError;
 	};
 	activeModal: string | null;
+	githubAuthRepoUrl?: string;
 	offline: boolean;
 	siteManagerIsOpen: boolean;
 	siteManagerSection: SiteManagerSection;
@@ -88,6 +89,12 @@ const uiSlice = createSlice({
 
 			state.activeModal = action.payload;
 		},
+		setGitHubAuthRepoUrl: (
+			state,
+			action: PayloadAction<string | undefined>
+		) => {
+			state.githubAuthRepoUrl = action.payload;
+		},
 		setOffline: (state, action: PayloadAction<boolean>) => {
 			state.offline = action.payload;
 		},
@@ -139,6 +146,7 @@ export const listenToOnlineOfflineEventsMiddleware: Middleware =
 export const {
 	setActiveModal,
 	setActiveSiteError,
+	setGitHubAuthRepoUrl,
 	setOffline,
 	setSiteManagerOpen,
 	setSiteManagerSection,