Onboarding tweaks to emphasize modes

webview-ui/src/components/welcome/RooHero.tsx

@@ -7,20 +7,17 @@ const RooHero = () => {
 	})
 
 	return (
-		<div className="flex flex-col items-center justify-center pb-4 forced-color-adjust-none">
-			<div
-				style={{
-					backgroundColor: "var(--vscode-foreground)",
-					WebkitMaskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
-					WebkitMaskRepeat: "no-repeat",
-					WebkitMaskSize: "contain",
-					maskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
-					maskRepeat: "no-repeat",
-					maskSize: "contain",
-				}}
-				className="mx-auto">
-				<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
-			</div>
+		<div
+			style={{
+				backgroundColor: "var(--vscode-foreground)",
+				WebkitMaskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
+				WebkitMaskRepeat: "no-repeat",
+				WebkitMaskSize: "contain",
+				maskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
+				maskRepeat: "no-repeat",
+				maskSize: "contain",
+			}}>
+			<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
 		</div>
 	)
 }

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -49,18 +49,23 @@ const WelcomeView = () => {
 
 	return (
 		<Tab>
-			<TabContent className="flex flex-col gap-5">
+			<TabContent className="flex flex-col gap-5 p-16">
 				<RooHero />
-				<h2 className="mx-auto">{t("chat:greeting")}</h2>
-
-				<div className="outline rounded p-4">
-					<Trans i18nKey="welcome:introduction" />
+				<h2 className="mt-0 mb-0">{t("welcome:greeting")}</h2>
+
+				<div className="font-bold">
+					<p>
+						<Trans i18nKey="welcome:introduction" />
+					</p>
+					<p>
+						<Trans i18nKey="welcome:chooseProvider" />
+					</p>
 				</div>
 
 				<div className="mb-4">
-					<h4 className="mt-3 mb-2 text-center">{t("welcome:startRouter")}</h4>
+					<p className="font-bold mt-0">{t("welcome:startRouter")}</p>
 
-					<div className="flex gap-4">
+					<div>
 						{/* Define the providers */}
 						{(() => {
 							// Provider card configuration
@@ -89,32 +94,33 @@ const WelcomeView = () => {
 								<a
 									key={index}
 									href={provider.authUrl}
-									className="flex-1 border border-vscode-panel-border rounded p-4 flex flex-col items-center cursor-pointer transition-all  no-underline text-inherit"
+									className="flex-1 border border-vscode-panel-border hover:bg-secondary rounded-lg py-4 px-6 mb-2 flex flex-row gap-4 cursor-pointer transition-all no-underline text-inherit"
 									target="_blank"
 									rel="noopener noreferrer">
-									<div className="font-bold">{provider.name}</div>
-									<div className="w-16 h-16 flex items-center justify-center rounded m-2 overflow-hidden relative">
+									<div className="w-10 h-10">
 										<img
 											src={`${imagesBaseUri}/${provider.slug}.png`}
 											alt={provider.name}
-											className="w-full h-full object-contain p-2"
+											className="w-full h-full object-contain"
 										/>
 									</div>
-									<div className="text-center">
-										<div className="text-xs text-vscode-descriptionForeground">
-											{provider.description}
+									<div>
+										<div className="font-bold text-vscode-foreground">{provider.name}</div>
+										<div>
+											<div className="text-xs text-vscode-descriptionForeground">
+												{provider.description}
+											</div>
+											{provider.incentive && (
+												<div className="text-xs font-bold">{provider.incentive}</div>
+											)}
 										</div>
-										{provider.incentive && (
-											<div className="text-xs font-bold">{provider.incentive}</div>
-										)}
 									</div>
 								</a>
 							))
 						})()}
 					</div>
 
-					<div className="text-center my-4 text-xl uppercase font-bold">{t("welcome:or")}</div>
-					<h4 className="mt-3 mb-2 text-center">{t("welcome:startCustom")}</h4>
+					<p className="font-bold mt-8 mb-6">{t("welcome:startCustom")}</p>
 					<ApiOptions
 						fromWelcomeView
 						apiConfiguration={apiConfiguration || {}}

webview-ui/src/i18n/locales/ca/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "Hola, sóc Roo!",
-	"introduction": "<strong>Roo Code és el principal agent de codificació autònom.</strong> Prepara't per arquitectar, codificar, depurar i augmentar la teva productivitat com mai abans. Per continuar, Roo Code necessita una clau API.",
+	"greeting": "Benvingut a Roo Code!",
+	"introduction": "Amb una gamma de Modes integrats i ampliables, Roo Code et permet planificar, arquitectar, codificar, depurar i augmentar la teva productivitat com mai abans.",
 	"notice": "Per començar, aquesta extensió necessita un proveïdor d'API.",
 	"start": "Som-hi!",
-	"chooseProvider": "Tria un proveïdor d'API per començar:",
 	"routers": {
 		"requesty": {
 			"description": "El teu router LLM optimitzat",
@@ -13,8 +12,9 @@
 			"description": "Una interfície unificada per a LLMs"
 		}
 	},
-	"startRouter": "Configuració ràpida a través d'un router",
-	"startCustom": "Utilitza la teva pròpia clau API",
+	"chooseProvider": "Per fer la seva màgia, Roo necessita una clau API.",
+	"startRouter": "Recomanem utilitzar un router LLM:",
+	"startCustom": "O pots utilitzar la teva pròpia clau API:",
 	"telemetry": {
 		"title": "Ajuda a millorar Roo Code",
 		"anonymousTelemetry": "Envia dades d'ús i errors anònims per ajudar-nos a corregir errors i millorar l'extensió. No s'envia mai cap codi, text o informació personal.",
@@ -23,6 +23,5 @@
 		"allow": "Permetre",
 		"deny": "Denegar"
 	},
-	"or": "o",
 	"importSettings": "Importar configuració"
 }

webview-ui/src/i18n/locales/de/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "Hallo, ich bin Roo!",
-	"introduction": "<strong>Roo Code ist der führende autonome Coding-Agent.</strong> Mach dich bereit, zu architektieren, zu coden, zu debuggen und deine Produktivität wie nie zuvor zu steigern. Um fortzufahren, benötigt Roo Code einen API-Schlüssel.",
+	"greeting": "Willkommen bei Roo Code!",
+	"introduction": "Mit einer Reihe von integrierten und erweiterbaren Modi ermöglicht dir Roo Code, zu planen, zu architektieren, zu coden, zu debuggen und deine Produktivität wie nie zuvor zu steigern.",
 	"notice": "Um loszulegen, benötigt diese Erweiterung einen API-Anbieter.",
 	"start": "Los geht's!",
-	"chooseProvider": "Wähle einen API-Anbieter, um zu beginnen:",
 	"routers": {
 		"requesty": {
 			"description": "Dein optimierter LLM-Router",
@@ -13,8 +12,9 @@
 			"description": "Eine einheitliche Schnittstelle für LLMs"
 		}
 	},
-	"startRouter": "Express-Einrichtung über einen Router",
-	"startCustom": "Eigenen API-Schlüssel verwenden",
+	"chooseProvider": "Um seine Magie zu entfalten, benötigt Roo einen API-Schlüssel.",
+	"startRouter": "Wir empfehlen die Verwendung eines LLM-Routers:",
+	"startCustom": "Oder du kannst deinen eigenen API-Schlüssel verwenden:",
 	"telemetry": {
 		"title": "Hilf, Roo Code zu verbessern",
 		"anonymousTelemetry": "Sende anonyme Fehler- und Nutzungsdaten, um uns bei der Fehlerbehebung und Verbesserung der Erweiterung zu helfen. Es werden niemals Code, Texte oder persönliche Informationen gesendet.",
@@ -23,6 +23,5 @@
 		"allow": "Erlauben",
 		"deny": "Ablehnen"
 	},
-	"or": "oder",
 	"importSettings": "Einstellungen importieren"
 }

webview-ui/src/i18n/locales/en/chat.json

@@ -1,5 +1,5 @@
 {
-	"greeting": "Welcome to Roo Code",
+	"greeting": "Welcome to Roo Code!",
 	"task": {
 		"title": "Task",
 		"seeMore": "See more",

webview-ui/src/i18n/locales/en/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "Hi, I'm Roo!",
-	"introduction": "<strong>Roo Code is the premiere autonomous coding agent.</strong> Get ready to architect, code, debug, and boost your productivity like you've never seen before. To continue, Roo Code requires an API key.",
+	"greeting": "Welcome to Roo Code!",
+	"introduction": "With a range of built-in and extensible Modes, Roo Code lets you plan, architect, code, debug and boost your productivity like never before.",
 	"notice": "To get started, this extension needs an API provider.",
 	"start": "Let's go!",
-	"chooseProvider": "Choose an API provider to get started:",
 	"routers": {
 		"requesty": {
 			"description": "Your optimized LLM router",
@@ -13,8 +12,9 @@
 			"description": "A unified interface for LLMs"
 		}
 	},
-	"startRouter": "Express Setup Through a Router",
-	"startCustom": "Bring Your Own API Key",
+	"chooseProvider": "To do its magic, Roo needs an API key.",
+	"startRouter": "We recommend using an LLM Router:",
+	"startCustom": "Or you can bring your provider API key:",
 	"telemetry": {
 		"title": "Help Improve Roo Code",
 		"anonymousTelemetry": "Send anonymous error and usage data to help us fix bugs and improve the extension. No code, prompts, or personal information is ever sent.",
@@ -23,6 +23,5 @@
 		"allow": "Allow",
 		"deny": "Deny"
 	},
-	"or": "or",
 	"importSettings": "Import Settings"
 }

webview-ui/src/i18n/locales/es/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "¡Hola, soy Roo!",
-	"introduction": "<strong>Roo Code es el principal agente de codificación autónomo.</strong> Prepárate para arquitectar, codificar, depurar y aumentar tu productividad como nunca antes. Para continuar, Roo Code requiere una clave API.",
+	"greeting": "¡Bienvenido a Roo Code!",
+	"introduction": "Con una variedad de Modos integrados y extensibles, Roo Code te permite planificar, arquitectar, codificar, depurar y aumentar tu productividad como nunca antes.",
 	"notice": "Para comenzar, esta extensión necesita un proveedor de API.",
 	"start": "¡Vamos!",
-	"chooseProvider": "Elige un proveedor de API para comenzar:",
 	"routers": {
 		"requesty": {
 			"description": "Tu router LLM optimizado",
@@ -13,8 +12,9 @@
 			"description": "Una interfaz unificada para LLMs"
 		}
 	},
-	"startRouter": "Configuración rápida a través de un router",
-	"startCustom": "Usa tu propia clave API",
+	"chooseProvider": "Para hacer su magia, Roo necesita una clave API.",
+	"startRouter": "Recomendamos usar un router LLM:",
+	"startCustom": "O puedes traer tu propia clave API:",
 	"telemetry": {
 		"title": "Ayuda a mejorar Roo Code",
 		"anonymousTelemetry": "Envía datos de uso y errores anónimos para ayudarnos a corregir errores y mejorar la extensión. Nunca se envía código, texto o información personal.",
@@ -23,6 +23,5 @@
 		"allow": "Permitir",
 		"deny": "Denegar"
 	},
-	"or": "o",
 	"importSettings": "Importar configuración"
 }

webview-ui/src/i18n/locales/fr/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "Salut, je suis Roo !",
-	"introduction": "<strong>Roo Code est l'agent de codage autonome de premier plan.</strong> Prépare-toi à architecturer, coder, déboguer et à augmenter ta productivité comme jamais auparavant. Pour continuer, Roo Code nécessite une clé API.",
+	"greeting": "Bienvenue sur Roo Code !",
+	"introduction": "Avec une gamme de Modes intégrés et extensibles, Roo Code te permet de planifier, architecturer, coder, déboguer et augmenter ta productivité comme jamais auparavant.",
 	"notice": "Pour commencer, cette extension a besoin d'un fournisseur d'API.",
 	"start": "C'est parti !",
-	"chooseProvider": "Choisis un fournisseur d'API pour commencer :",
 	"routers": {
 		"requesty": {
 			"description": "Ton routeur LLM optimisé",
@@ -13,8 +12,9 @@
 			"description": "Une interface unifiée pour les LLMs"
 		}
 	},
-	"startRouter": "Configuration rapide via un routeur",
-	"startCustom": "Utiliser ta propre clé API",
+	"chooseProvider": "Pour faire sa magie, Roo a besoin d'une clé API.",
+	"startRouter": "Nous recommandons d'utiliser un routeur LLM :",
+	"startCustom": "Ou tu peux apporter ta propre clé API :",
 	"telemetry": {
 		"title": "Aide à améliorer Roo Code",
 		"anonymousTelemetry": "Envoie des données d'utilisation et d'erreurs anonymes pour nous aider à corriger les bugs et améliorer l'extension. Aucun code, texte ou information personnelle n'est jamais envoyé.",
@@ -23,6 +23,5 @@
 		"allow": "Autoriser",
 		"deny": "Refuser"
 	},
-	"or": "ou",
 	"importSettings": "Importer les paramètres"
 }

webview-ui/src/i18n/locales/hi/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "नमस्ते, मैं रू हूँ!",
-	"introduction": "<strong>Roo Code प्रमुख स्वायत्त कोडिंग एजेंट है।</strong> आर्किटेक्ट, कोड, डीबग करने और अपनी उत्पादकता को पहले कभी न देखे गए तरीके से बढ़ाने के लिए तैयार हो जाइए। जारी रखने के लिए, Roo Code को एक API कुंजी की आवश्यकता है।",
+	"greeting": "Roo Code में आपका स्वागत है!",
+	"introduction": "अंतर्निहित और विस्तारित मोड्स की एक श्रृंखला के साथ, Roo Code आपको पहले कभी न देखे गए तरीके से योजना बनाने, आर्किटेक्ट करने, कोड करने, डीबग करने और अपनी उत्पादकता बढ़ाने की अनुमति देता है।",
 	"notice": "शुरू करने के लिए, इस एक्सटेंशन को एक API प्रदाता की आवश्यकता है।",
 	"start": "चलो शुरू करें!",
-	"chooseProvider": "शुरू करने के लिए एक API प्रदाता चुनें:",
 	"routers": {
 		"requesty": {
 			"description": "आपका अनुकूलित LLM राउटर",
@@ -13,8 +12,9 @@
 			"description": "LLMs के लिए एक एकीकृत इंटरफेस"
 		}
 	},
-	"startRouter": "राउटर के माध्यम से तेज़ सेटअप",
-	"startCustom": "अपनी खुद की API कुंजी का उपयोग करें",
+	"chooseProvider": "अपना जादू दिखाने के लिए, Roo को एक API कुंजी की आवश्यकता है।",
+	"startRouter": "हम एक LLM राउटर का उपयोग करने की सलाह देते हैं:",
+	"startCustom": "या आप अपनी खुद की API कुंजी ला सकते हैं:",
 	"telemetry": {
 		"title": "Roo Code को बेहतर बनाने में मदद करें",
 		"anonymousTelemetry": "बग ठीक करने और एक्सटेंशन को बेहतर बनाने में हमारी मदद करने के लिए गुमनाम त्रुटि और उपयोग डेटा भेजें। कोड, संकेत या व्यक्तिगत जानकारी कभी नहीं भेजी जाती है।",
@@ -23,6 +23,5 @@
 		"allow": "अनुमति दें",
 		"deny": "अस्वीकार करें"
 	},
-	"or": "या",
 	"importSettings": "सेटिंग्स आयात करें"
 }

webview-ui/src/i18n/locales/id/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "Hai, saya Roo Code!",
-	"introduction": "<strong>Roo Code adalah agen coding otonom terdepan.</strong> Bersiaplah untuk merancang, coding, debug, dan meningkatkan produktivitas seperti yang belum pernah Anda lihat sebelumnya. Untuk melanjutkan, Roo Code memerlukan API key.",
+	"greeting": "Selamat datang di Roo Code!",
+	"introduction": "Dengan berbagai Mode bawaan dan dapat diperluas, Roo Code memungkinkan Anda merencanakan, merancang, coding, debug, dan meningkatkan produktivitas seperti yang belum pernah terjadi sebelumnya.",
 	"notice": "Untuk memulai, ekstensi ini memerlukan provider API.",
 	"start": "Ayo mulai!",
-	"chooseProvider": "Pilih provider API untuk memulai:",
 	"routers": {
 		"requesty": {
 			"description": "Router LLM yang dioptimalkan",
@@ -13,8 +12,9 @@
 			"description": "Interface terpadu untuk LLM"
 		}
 	},
-	"startRouter": "Setup Ekspres Melalui Router",
-	"startCustom": "Bawa API Key Anda Sendiri",
+	"chooseProvider": "Untuk melakukan keajaibannya, Roo membutuhkan API key.",
+	"startRouter": "Kami merekomendasikan menggunakan Router LLM:",
+	"startCustom": "Atau Anda dapat menggunakan API key Anda sendiri:",
 	"telemetry": {
 		"title": "Bantu Tingkatkan Roo Code",
 		"anonymousTelemetry": "Kirim data error dan penggunaan anonim untuk membantu kami memperbaiki bug dan meningkatkan ekstensi. Tidak ada kode, prompt, atau informasi pribadi yang pernah dikirim.",
@@ -23,6 +23,5 @@
 		"allow": "Izinkan",
 		"deny": "Tolak"
 	},
-	"or": "atau",
 	"importSettings": "Impor Pengaturan"
 }

webview-ui/src/i18n/locales/it/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "Ciao, sono Roo!",
-	"introduction": "<strong>Roo Code è il principale agente di codifica autonomo.</strong> Preparati ad architettare, codificare, debuggare e aumentare la tua produttività come mai prima d'ora. Per continuare, Roo Code richiede una chiave API.",
+	"greeting": "Benvenuto in Roo Code!",
+	"introduction": "Con una gamma di Modalità integrate ed estensibili, Roo Code ti permette di pianificare, architettare, codificare, debuggare e aumentare la tua produttività come mai prima d'ora.",
 	"notice": "Per iniziare, questa estensione necessita di un fornitore di API.",
 	"start": "Andiamo!",
-	"chooseProvider": "Scegli un fornitore di API per iniziare:",
 	"routers": {
 		"requesty": {
 			"description": "Il tuo router LLM ottimizzato",
@@ -13,8 +12,9 @@
 			"description": "Un'interfaccia unificata per LLMs"
 		}
 	},
-	"startRouter": "Configurazione rapida tramite router",
-	"startCustom": "Usa la tua chiave API",
+	"chooseProvider": "Per fare la sua magia, Roo ha bisogno di una chiave API.",
+	"startRouter": "Consigliamo di utilizzare un router LLM:",
+	"startCustom": "Oppure puoi utilizzare la tua chiave API:",
 	"telemetry": {
 		"title": "Aiuta a migliorare Roo Code",
 		"anonymousTelemetry": "Invia dati di utilizzo ed errori anonimi per aiutarci a correggere bug e migliorare l'estensione. Non viene mai inviato codice, testo o informazioni personali.",
@@ -23,6 +23,5 @@
 		"allow": "Consenti",
 		"deny": "Nega"
 	},
-	"or": "o",
 	"importSettings": "Importa impostazioni"
 }

webview-ui/src/i18n/locales/ja/welcome.json

@@ -1,9 +1,8 @@
 {
-	"greeting": "こんにちは、Rooです！",
-	"introduction": "<strong>Roo Codeは最高の自律型コーディングエージェントです。</strong>アーキテクチャの設計、コーディング、デバッグ、そして今までにない生産性向上を体験する準備をしてください。続行するには、Roo CodeにはAPIキーが必要です。",
+	"greeting": "Roo Codeへようこそ！",
+	"introduction": "組み込みおよび拡張可能なモードを備えたRoo Codeは、計画、アーキテクチャ設計、コーディング、デバッグ、そして今までにない生産性向上を可能にします。",
 	"notice": "開始するには、この拡張機能にはAPIプロバイダーが必要です。",
 	"start": "さあ、始めましょう！",
-	"chooseProvider": "開始するにはAPIプロバイダーを選択してください：",
 	"routers": {
 		"requesty": {
 			"description": "最適化されたLLMルーター",
@@ -13,8 +12,9 @@
 			"description": "LLMsのための統一インターフェース"
 		}
 	},
-	"startRouter": "ルーター経由の簡単セットアップ",
-	"startCustom": "自分のAPIキーを使用",
+	"chooseProvider": "Rooが機能するには、APIキーが必要です。",
+	"startRouter": "LLMルーターの使用をお勧めします：",
+	"startCustom": "または、あなた自身のAPIキーを使用できます：",
 	"telemetry": {
 		"title": "Roo Codeの改善にご協力ください",
 		"anonymousTelemetry": "バグの修正と拡張機能の改善のため、匿名のエラーと使用データを送信してください。コード、プロンプト、個人情報は一切送信されません。",
@@ -23,6 +23,5 @@
 		"allow": "許可",
 		"deny": "拒否"
 	},
-	"or": "または",
 	"importSettings": "設定をインポート"
 }