Implement chart-focused design and auto-execution

Major UI improvements:
- Chart displays prominently at top-left aligned, single latest chart only
- Console output minimized to small collapsible section at bottom
- Auto-execute code when WebR loads and when examples are selected
- Remove hardcoded initial code, move to "Getting started" example
- Example dropdown always shows active example name (no placeholder text)
- All examples properly organized in examples.ts file

Technical changes:
- Fix missing examples import in App.vue
- Update OutputDisplay to show only latest plot with clean styling
- Add auto-execution logic to useWebR composable
- Set default selected example to 'getting-started'
- Remove unnecessary chart containers and frames

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

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

Author: stared

src/App.vue

@@ -5,18 +5,11 @@ import FileUpload from './components/FileUpload.vue'
 import ExampleSelector from './components/ExampleSelector.vue'
 import OutputDisplay from './components/OutputDisplay.vue'
 import { useWebR } from './composables/useWebR'
+import { examples } from './data/examples'
 import type { RExample, CsvData } from './types'
 
-const code = ref(`# WebR ggplot2 & dplyr Demo
-# Select an example or write your own code
-
-library(ggplot2)
-library(dplyr)
-
-# Create your first visualization
-ggplot(mtcars, aes(x = wt, y = mpg)) +
-  geom_point() +
-  theme_minimal()`)
+// Start with the first example (getting-started)
+const code = ref(examples[0].code)
 
 const {
   isReady,
@@ -43,12 +36,16 @@ const handleFileRemoved = () => {
   executeCode('if (exists("data")) rm(data)')
 }
 
-const handleExampleSelect = (example: RExample) => {
+const handleExampleSelect = async (example: RExample) => {
   code.value = example.code
+  // Auto-execute the selected example
+  if (isReady.value && example.code.trim()) {
+    await executeCode(example.code)
+  }
 }
 
 onMounted(() => {
-  initializeWebR()
+  initializeWebR(code.value)
 })
 </script>
 

src/components/ExampleSelector.vue

@@ -7,7 +7,7 @@ const emit = defineEmits<{
   exampleSelected: [example: RExample]
 }>()
 
-const selectedExample = ref<string>('')
+const selectedExample = ref<string>('getting-started')
 
 const currentExample = computed(() => {
   return examples.find((ex) => ex.id === selectedExample.value) || null
@@ -28,7 +28,6 @@ const handleExampleChange = () => {
       @change="handleExampleChange"
       class="select"
     >
-      <option value="">Examples ▼</option>
       <option v-for="example in examples" :key="example.id" :value="example.id">
         {{ example.title }}
       </option>

src/components/OutputDisplay.vue

@@ -36,8 +36,9 @@ const handlePlotError = (event: Event) => {
   console.error('Plot load error:', event)
 }
 
-const plotMessages = computed(() => {
-  return props.messages.filter(message => message.type === 'plot')
+const latestPlot = computed(() => {
+  const plots = props.messages.filter(message => message.type === 'plot')
+  return plots.length > 0 ? plots[plots.length - 1] : null
 })
 
 const textMessages = computed(() => {
@@ -65,27 +66,28 @@ watch(
         <p>Run some R code to see the output here</p>
       </div>
 
-      <!-- Display all plots first -->
-      <div v-for="(message, index) in plotMessages" :key="'plot-' + index" class="message">
-        <div class="plot-container">
-          <img 
-            :src="message.content" 
-            alt="R plot" 
-            class="plot-image"
-            @load="handlePlotLoad"
-            @error="handlePlotError"
-          />
-        </div>
+      <!-- Display latest chart prominently -->
+      <div v-if="latestPlot" class="chart-display">
+        <img 
+          :src="latestPlot.content" 
+          alt="R plot" 
+          class="chart-image"
+          @load="handlePlotLoad"
+          @error="handlePlotError"
+        />
       </div>
 
-      <!-- Single foldable bar for all text output -->
-      <details v-if="textMessages.length > 0" class="text-output" open>
-        <summary class="output-summary">Console Output ({{ textMessages.length }})</summary>
-        <div class="output-text">
-          <div v-for="(message, index) in textMessages" :key="'text-' + index" class="text-message" :class="message.type">
-            <div class="message-type">{{ message.type.toUpperCase() }}:</div>
-            <pre v-if="message.type === 'stdout' || message.type === 'stderr'" class="message-content">{{ message.content }}</pre>
-            <div v-else class="message-content">{{ message.content }}</div>
+      <!-- Minimized console output at bottom -->
+      <details v-if="textMessages.length > 0" class="console-output">
+        <summary class="console-summary">
+          <span class="console-icon">📜</span>
+          Console ({{ textMessages.length }})
+        </summary>
+        <div class="console-content">
+          <div v-for="(message, index) in textMessages" :key="'text-' + index" class="console-message" :class="message.type">
+            <span class="message-label">{{ message.type.toUpperCase() }}:</span>
+            <pre v-if="message.type === 'stdout' || message.type === 'stderr'" class="message-text">{{ message.content }}</pre>
+            <span v-else class="message-text">{{ message.content }}</span>
           </div>
         </div>
       </details>
@@ -103,8 +105,10 @@ watch(
 
 .output-content {
   flex: 1;
-  padding: 1rem;
+  padding: 0;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .loading {
@@ -142,133 +146,96 @@ watch(
   overflow: hidden;
 }
 
-.text-output {
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
+.chart-display {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1rem;
+  background: #fff;
+}
+
+.chart-image {
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.console-output {
+  border-top: 1px solid #e5e7eb;
   background-color: #f9fafb;
+  margin-top: auto;
 }
 
-.output-summary {
-  padding: 0.75rem;
+.console-summary {
+  padding: 0.5rem 1rem;
   cursor: pointer;
-  font-weight: 600;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   color: #6b7280;
   background-color: #f3f4f6;
-  border-bottom: 1px solid #e5e7eb;
   user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.output-summary:hover {
+.console-summary:hover {
   background-color: #e5e7eb;
 }
 
-.output-text {
-  margin: 0;
-  padding: 1rem;
-  font-family: 'Courier New', monospace;
+.console-icon {
   font-size: 0.875rem;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  color: #374151;
-  background-color: #fff;
-}
-
-.message-other {
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  background-color: #f9fafb;
-}
-
-.message-other.success {
-  border-left: 4px solid #22c55e;
-  background-color: #f0fdf4;
 }
 
-.message-other.error {
-  border-left: 4px solid #ef4444;
-  background-color: #fef2f2;
-}
-
-.message-other.warning {
-  border-left: 4px solid #f59e0b;
-  background-color: #fffbeb;
-}
-
-.message-type {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  padding: 0.5rem 0.75rem;
-  background-color: #f3f4f6;
-  color: #6b7280;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.plot-container {
-  text-align: center;
-  padding: 1rem;
-  background-color: white;
-  border-radius: 4px;
-  margin: 0.5rem 0;
-}
-
-.plot-image {
-  max-width: 100%;
-  height: auto;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  background-color: white;
-  display: block;
-  margin: 0 auto;
+.console-content {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 0.75rem;
+  background-color: #fff;
+  border-top: 1px solid #e5e7eb;
 }
 
-.text-message {
+.console-message {
   display: flex;
   gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid #f3f4f6;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
 }
 
-.text-message:last-child {
-  border-bottom: none;
+.console-message:last-child {
   margin-bottom: 0;
-  padding-bottom: 0;
 }
 
-.text-message .message-type {
-  font-size: 0.75rem;
+.message-label {
   font-weight: 600;
   text-transform: uppercase;
   color: #6b7280;
-  min-width: 4rem;
+  min-width: 3rem;
   flex-shrink: 0;
 }
 
-.text-message.success .message-type {
+.console-message.success .message-label {
   color: #059669;
 }
 
-.text-message.error .message-type {
+.console-message.error .message-label {
   color: #dc2626;
 }
 
-.text-message.warning .message-type {
+.console-message.stderr .message-label {
   color: #d97706;
 }
 
-.text-message.stderr .message-type {
-  color: #d97706;
-}
-
-.text-message .message-content {
+.message-text {
   flex: 1;
   margin: 0;
   font-family: 'Courier New', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  white-space: pre-wrap;
   color: #374151;
+  white-space: pre-wrap;
 }
+
+
 </style>

src/composables/useWebR.ts

@@ -9,7 +9,7 @@ export const useWebR = () => {
   let webR: any = null
   let shelter: any = null
 
-  const initializeWebR = async () => {
+  const initializeWebR = async (initialCode?: string) => {
     try {
       isLoading.value = true
 
@@ -38,6 +38,11 @@ export const useWebR = () => {
 
       isReady.value = true
       addMessage('success', 'WebR initialized successfully with ggplot2, dplyr, and ggrepel')
+      
+      // Auto-execute initial code if provided
+      if (initialCode && initialCode.trim()) {
+        await executeCode(initialCode)
+      }
     } catch (error) {
       console.error('WebR initialization failed:', error)
       addMessage('error', `Failed to initialize WebR: ${error}`)

src/data/examples.ts

@@ -1,6 +1,21 @@
 import type { RExample } from '@/types'
 
 export const examples: RExample[] = [
+  {
+    id: 'getting-started',
+    title: 'Getting started',
+    description: 'Simple scatter plot to get you started with ggplot2',
+    code: `# WebR ggplot2 & dplyr Demo
+# Select an example or write your own code
+
+library(ggplot2)
+library(dplyr)
+
+# Create your first visualization
+ggplot(mtcars, aes(x = wt, y = mpg)) +
+  geom_point() +
+  theme_minimal()`,
+  },
   {
     id: 'basic-plot',
     title: 'Basic example',