app parsing name

index.html

@@ -31,15 +31,17 @@
 			<div class="template-info">
 				<div class="info-box">
 					<h3>🎨 Template Purpose</h3>
-					<p>This is an example landing page for Reachy Mini apps. Feel free to duplicate this template
-						and customize it for your own applications!</p>
+					<p>This is an example landing page for Reachy Mini apps. Feel free to duplicate this template and
+						customize it for your own applications!</p>
 				</div>
 				<div class="info-box">
 					<h3>🚀 Getting Started</h3>
-					<p>Use this template to showcase your Reachy Mini app with a landing page. Simply
-						modify the content, add your app's repository URL, and deploy!</p>
+					<p>Use this template to showcase your Reachy Mini app with a landing page. Simply modify the
+						content, add your app's repository URL, and deploy!</p>
 				</div>
 			</div>
+
+
 			<div class="how-to-use">
 				<h3>How to Use This Template</h3>
 				<div class="steps">
@@ -87,14 +89,6 @@
 
 			<div id="installStatus" class="install-status"></div>
 
-			<div class="manual-option">
-				<h3>Manual Installation</h3>
-				<p>Or copy this repository URL for manual installation:</p>
-				<div class="manual-install">
-					<code id="repoUrl">https://github.com/your-username/your-reachy-app.git</code>
-					<button onclick="copyToClipboard()" class="copy-btn">📋 Copy</button>
-				</div>
-			</div>
 		</div>
 	</div>
 
@@ -112,19 +106,66 @@
 		// 🔧 CUSTOMIZE THIS VALUE FOR YOUR APP:
 		const APP_REPO_URL = "https://github.com/your-username/your-reachy-app.git";
 
-		// Auto-extract app name from repository URL
-		function getAppNameFromUrl(url) {
+		// Parse TOML content to extract project name
+		function parseTomlProjectName(tomlContent) {
+			try {
+				const lines = tomlContent.split('\n');
+				let inProjectSection = false;
+
+				for (const line of lines) {
+					const trimmedLine = line.trim();
+
+					// Check if we're entering the [project] section
+					if (trimmedLine === '[project]') {
+						inProjectSection = true;
+						continue;
+					}
+
+					// Check if we're entering a different section
+					if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
+						inProjectSection = false;
+						continue;
+					}
+
+					// If we're in the project section, look for the name field
+					if (inProjectSection && trimmedLine.startsWith('name')) {
+						const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
+						if (match) {
+							// Convert to lowercase and replace invalid characters for app naming
+							return match[1].toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+						}
+					}
+				}
+
+				throw new Error('Project name not found in pyproject.toml');
+			} catch (error) {
+				console.error('Error parsing pyproject.toml:', error);
+				return 'unknown-app';
+			}
+		}
+
+		// Fetch and parse pyproject.toml from the repository
+		async function getAppNameFromRepo(repoUrl) {
 			try {
-				// Remove .git extension if present
-				let cleanUrl = url.replace(/\.git$/, '');
+				// Convert GitHub repo URL to raw content URL for pyproject.toml
+				let rawUrl = repoUrl.replace(/\.git$/, '');
+				if (rawUrl.includes('github.com')) {
+					rawUrl = rawUrl.replace('github.com', 'raw.githubusercontent.com');
+					rawUrl += '/main/pyproject.toml';
+				} else {
+					throw new Error('Only GitHub repositories are supported for automatic name detection');
+				}
 
-				// Extract the last part of the URL (repository name)
-				const parts = cleanUrl.split('/');
-				const repoName = parts[parts.length - 1];
+				const response = await fetch(rawUrl);
+				if (!response.ok) {
+					throw new Error(`Failed to fetch pyproject.toml: ${response.status}`);
+				}
 
-				// Convert to lowercase and replace invalid characters
-				return repoName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+				const tomlContent = await response.text();
+				return parseTomlProjectName(tomlContent);
 			} catch (error) {
+				console.error('Error fetching app name from repository:', error);
+				// Fallback to a default name if parsing fails
 				return 'app-from-repo';
 			}
 		}
@@ -154,10 +195,12 @@
 					throw new Error('Cannot connect to dashboard. Make sure the URL is correct and the dashboard is running.');
 				}
 
-				showStatus('loading', 'Starting installation...');
+				showStatus('loading', 'Reading app configuration from repository...');
 
-				// Auto-generate app name from repository URL
-				const appName = getAppNameFromUrl(APP_REPO_URL);
+				// Get app name from pyproject.toml
+				const appName = await getAppNameFromRepo(APP_REPO_URL);
+
+				showStatus('loading', `Starting installation of "${appName}"...`);
 
 				// Start installation
 				const installResponse = await fetch(`${dashboardUrl}/api/install`, {
@@ -188,7 +231,7 @@
 				showStatus('error', `❌ ${error.message}`);
 			} finally {
 				installBtn.disabled = false;
-				installBtn.innerHTML = '<span class="btn-icon">📥</span>Install Example App to Reachy';
+				installBtn.innerHTML = '<span class="btn-icon">📥</span>Install App to Reachy';
 			}
 		}
 
@@ -216,8 +259,11 @@
 				document.getElementById('dashboardUrl').value = 'http://localhost:8000';
 			}
 
-			// Update the repository URL display
-			document.getElementById('repoUrl').textContent = APP_REPO_URL;
+			// Update the repository URL display if element exists
+			const repoUrlElement = document.getElementById('repoUrl');
+			if (repoUrlElement) {
+				repoUrlElement.textContent = APP_REPO_URL;
+			}
 		});
 
 		// Event listeners