Improve console output with proper R message handling and warning styling (v0.1.4)

🤖 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.3",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -60,6 +60,10 @@ const hasErrors = computed(() => {
   return textMessages.value.some(msg => msg.type === 'error' || msg.type === 'stderr')
 })
 
+const hasWarnings = computed(() => {
+  return textMessages.value.some(msg => msg.type === 'warning')
+})
+
 const runCode = async () => {
   if (code.value.trim()) {
     clearMessages() // Clear console and charts before running
@@ -295,9 +299,8 @@ onMounted(async () => {
         </div>
         <div class="bottom-bar-right">
           <button 
-            v-if="textMessages.length > 0"
             class="console-toggle"
-            :class="{ 'has-errors': hasErrors }"
+            :class="{ 'has-errors': hasErrors, 'has-warnings': hasWarnings && !hasErrors }"
             @click="showConsole = !showConsole"
           >
             Console ({{ textMessages.length }})
@@ -582,6 +585,10 @@ onMounted(async () => {
   color: #2563eb;
 }
 
+.console-message.warning .message-label {
+  color: #d97706;
+}
+
 .message-text {
   flex: 1;
   margin: 0;
@@ -651,6 +658,12 @@ onMounted(async () => {
   color: #dc2626;
 }
 
+.console-toggle.has-warnings {
+  background: #fefbf2;
+  border-color: #fed7aa;
+  color: #d97706;
+}
+
 .toggle-arrow {
   font-size: 0.75rem;
   transition: transform 0.3s ease;

src/composables/useWebR.ts

@@ -1,5 +1,60 @@
 import { ref, reactive } from 'vue'
-import type { WebRMessage, CsvData } from '@/types'
+import type { WebRMessage, CsvData, WebROutputItem, WebRCharacterObject, WebRListObject, WebRProxy, WebRExecutionResult } from '@/types'
+
+// WebR output type mapping - immutable and reusable
+const WEBR_TYPE_MAP = {
+  stdout: 'stdout',
+  stderr: 'stderr', 
+  message: 'info',
+  warning: 'warning',
+  error: 'error'
+} as const satisfies Record<string, WebRMessage['type']>
+
+// Type guards for WebR objects
+const isWebRCharacterObject = (obj: unknown): obj is WebRCharacterObject => {
+  return typeof obj === 'object' && obj !== null && 
+         'type' in obj && obj.type === 'character' &&
+         'values' in obj && Array.isArray(obj.values)
+}
+
+const isWebRListObject = (obj: unknown): obj is WebRListObject => {
+  return typeof obj === 'object' && obj !== null && 
+         'type' in obj && obj.type === 'list' &&
+         'values' in obj && Array.isArray(obj.values)
+}
+
+// Extract content from WebR output with proper type checking
+const extractContentFromWebROutput = async (output: WebROutputItem): Promise<string> => {
+  if (typeof output.data === 'string') {
+    return output.data
+  }
+
+  // Convert WebR proxy to JavaScript object
+  const proxy = output.data as WebRProxy
+  const jsResult = await proxy.toJs()
+  
+  if (isWebRCharacterObject(jsResult)) {
+    return jsResult.values.join('\n')
+  }
+  
+  if (isWebRListObject(jsResult)) {
+    // Validate assumption: we expect only 1 message in the list
+    if (jsResult.values.length > 1) {
+      console.error(`ASSUMPTION VIOLATION: List has ${jsResult.values.length} values, expected 1:`, jsResult)
+    }
+    
+    const messageObject = jsResult.values[0]
+    if (isWebRCharacterObject(messageObject) && messageObject.values.length > 0) {
+      return messageObject.values.join('\n')
+    }
+    
+    console.error('Unexpected list structure:', jsResult)
+    return '[Unable to extract message from list]'
+  }
+  
+  console.error('Unknown WebR object type:', jsResult)
+  return `[Unknown WebR type: ${(jsResult as any)?.type || 'unknown'}]`
+}
 
 export const useWebR = () => {
   const isReady = ref(false)
@@ -88,19 +143,25 @@ export const useWebR = () => {
       const result = await shelter.captureR(code, {
         withAutoprint: true,
         captureStreams: true,
-        captureConditions: false,
+        captureConditions: true,
         captureGraphics: true,
         env: webR.objs.globalEnv,
       })
 
-      // Process stdout
-      if (result.output && result.output.length > 0) {
-        for (const output of result.output) {
-          if (output.type === 'stdout' && output.data) {
-            addMessage('stdout', output.data)
-          } else if (output.type === 'stderr' && output.data) {
-            addMessage('stderr', output.data)
+      // Process all output (streams and conditions)
+      const typedResult = result as WebRExecutionResult
+      if (typedResult.output && typedResult.output.length > 0) {
+        for (const output of typedResult.output) {
+          const content = await extractContentFromWebROutput(output)
+          const messageType = WEBR_TYPE_MAP[output.type as keyof typeof WEBR_TYPE_MAP]
+          
+          if (!messageType) {
+            console.error(`Unknown WebR output type: ${output.type}`)
+            addMessage('error', `Unknown output type: ${output.type}`)
+            continue
           }
+          
+          addMessage(messageType, content)
         }
       }
 

src/types/index.ts

@@ -7,7 +7,7 @@ export interface RExample {
 }
 
 export interface WebRMessage {
-  type: 'stdout' | 'stderr' | 'error' | 'success' | 'info' | 'plot'
+  type: 'stdout' | 'stderr' | 'error' | 'success' | 'info' | 'warning' | 'plot'
   content: string
 }
 
@@ -17,4 +17,32 @@ export interface CsvData {
   rows: number
   columns: number
   columnNames: string[]
+}
+
+// WebR output types
+export interface WebRCharacterObject {
+  type: 'character'
+  names: string[] | null
+  values: string[]
+}
+
+export interface WebRListObject {
+  type: 'list'
+  names: string[]
+  values: WebRCharacterObject[]
+}
+
+export interface WebRProxy {
+  toJs(): Promise<WebRCharacterObject | WebRListObject>
+}
+
+export interface WebROutputItem {
+  type: 'stdout' | 'stderr' | 'message' | 'warning' | 'error'
+  data: string | WebRProxy
+}
+
+export interface WebRExecutionResult {
+  output?: WebROutputItem[]
+  images?: HTMLImageElement[]
+  result?: unknown
 }