Fix loading states and improve WebR version detection

- Fix "Executing R Code" message to only show during actual code execution (not WebR initialization)
- Add separate isExecuting state to distinguish code execution from WebR initialization
- Fix WebR version display in Ready message by properly getting version from WebR instance
- Add coding principle to CLAUDE.md about avoiding defensive code with multiple fallbacks
- Increment version to 0.2.4

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

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

Author: stared

CLAUDE.md

@@ -8,6 +8,7 @@
 
 - NEVER fail silently - always log errors and make failures visible to users when appropriate.
 - If a composable is used within only one Vue component, keep it in that component file - do NOT create a separate composable file.
+- AVOID defensive code with multiple fallbacks - choose ONE approach, implement it properly, and fail hard with clear errors if it doesn't work. Multiple fallbacks hide real problems and make debugging harder.
 
 ## WebR Documentation References
 

package.json

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

src/App.vue

@@ -26,6 +26,7 @@ const {
   isReady,
   isLoading,
   isInitializing,
+  isExecuting,
   loadingStatus,
   installedLibraries,
   messages,
@@ -181,6 +182,7 @@ onMounted(async () => {
           <OutputDisplay
             :messages="messages"
             :is-loading="isLoading"
+            :is-executing="isExecuting"
           />
           <ConsoleOutput 
             ref="consoleRef"

src/components/OutputDisplay.vue

@@ -5,6 +5,7 @@ import type { WebRMessage } from '@/types'
 interface Props {
   messages: WebRMessage[]
   isLoading: boolean
+  isExecuting: boolean
   showConsoleBelow?: boolean
 }
 
@@ -71,9 +72,9 @@ watch(
         >
       </div>
 
-      <!-- Loading overlay -->
+      <!-- Loading overlay - only show during actual code execution -->
       <div
-        v-if="isLoading"
+        v-if="isExecuting"
         class="loading-overlay"
       >
         <div class="loading-content">

src/composables/useWebR.ts

@@ -15,6 +15,7 @@ interface UseWebRReturn {
   isReady: Readonly<Ref<boolean>>
   isLoading: Readonly<Ref<boolean>>
   isInitializing: Readonly<Ref<boolean>>
+  isExecuting: Readonly<Ref<boolean>>
   loadingStatus: Readonly<Ref<string>>
   webrVersion: ComputedRef<string>
   rVersion: ComputedRef<string>
@@ -243,6 +244,7 @@ export function useWebR(): UseWebRReturn {
     isReady: readonly(isReady),
     isLoading: readonly(isLoading),
     isInitializing: readonly(isInitializing),
+    isExecuting: readonly(isExecuting),
     loadingStatus: readonly(status),
     webrVersion: computed(() => versions.value.webr),
     rVersion: computed(() => versions.value.r),

src/webr/core/webr-instance.ts

@@ -84,8 +84,12 @@ export class WebRInstance {
       // Simplify version string: "R version 4.3.1 ..." -> "R 4.3.1"
       const rVersion = fullVersion.replace(/^R version /, 'R ')
 
-      // WebR version detection would go here if available in future
-      return { r: rVersion, webr: '' }
+      // Get WebR version from the instance
+      const webrVersion = webR.version
+      if (!webrVersion) {
+        throw new WebRError('WebR instance does not provide version information')
+      }
+      return { r: rVersion, webr: webrVersion }
     } catch {
       return { r: 'Unknown', webr: '' }
     }