Reorganize version display for better logical grouping (v0.1.6)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: stared

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webr-ggplot2-demo",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -235,6 +235,7 @@ onMounted(async () => {
             :is-ready="isReady" 
             :is-loading="isInitializing" 
             :loading-status="loadingStatus"
+            :webr-version="webrVersion"
           />
           <LibrarySelector 
             :installed-libraries="installedLibraries" 
@@ -293,10 +294,8 @@ onMounted(async () => {
           >
             {{ !isReady ? 'Waiting for WebR...' : isLoading ? 'Running...' : 'Run Code' }}
           </button>
-          <div v-if="isReady && (webrVersion || rVersion)" class="runtime-versions">
-            <span v-if="webrVersion">WebR {{ webrVersion }}</span>
-            <span v-if="webrVersion && rVersion"> | </span>
-            <span v-if="rVersion">{{ rVersion }}</span>
+          <div v-if="isReady && rVersion" class="runtime-versions">
+            <span>{{ rVersion }}</span>
           </div>
         </div>
         <div class="bottom-bar-right">

src/components/WebRStatus.vue

@@ -3,6 +3,7 @@ interface Props {
   isReady: boolean
   isLoading: boolean
   loadingStatus: string
+  webrVersion?: string
 }
 
 defineProps<Props>()
@@ -22,7 +23,9 @@ defineProps<Props>()
       <span v-else-if="isReady" class="status-icon">✓</span>
       <span v-else-if="loadingStatus.includes('Failed')" class="status-icon">✗</span>
       <span v-else class="status-icon">⚙️</span>
-      <span class="status-text">{{ loadingStatus || 'WebR' }}</span>
+      <span class="status-text">
+        {{ isReady && webrVersion ? `WebR ${webrVersion} Ready` : loadingStatus || 'WebR' }}
+      </span>
     </div>
   </div>
 </template>