Improve UI layout and chart-focused design

- Redesign layout with code editor on left, output on right (50/50 split)
- Move run button to intuitive position next to code editor
- Compact file upload and example selector in horizontal toolbar
- Combine all text output into single foldable "Console Output" bar below charts
- Charts now display prominently with full width, text output collapsible
- Restore colored message styling (SUCCESS green, ERROR red, STDERR orange)
- Fix example names and ensure all examples generate charts
- Remove redundant UI elements (clear button, output header)
- Update initial code to generate immediate chart visualization

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

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

Author: stared

env.d.ts

@@ -1 +1,10 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
+
+declare global {
+  interface Window {
+    MonacoEnvironment?: {
+      getWorkerUrl?: () => string
+      getWorker?: () => Worker
+    }
+  }
+}

src/App.vue

@@ -7,16 +7,16 @@ import OutputDisplay from './components/OutputDisplay.vue'
 import { useWebR } from './composables/useWebR'
 import type { RExample, CsvData } from './types'
 
-const code = ref(`# Welcome to WebR ggplot2 & dplyr Demo!
-# Select an example from the dropdown or write your own R code
+const code = ref(`# WebR ggplot2 & dplyr Demo
+# Select an example or write your own code
 
 library(ggplot2)
 library(dplyr)
 
-# Basic example with built-in data
-mtcars %>%
-  head(10) %>%
-  print()`)
+# Create your first visualization
+ggplot(mtcars, aes(x = wt, y = mpg)) +
+  geom_point() +
+  theme_minimal()`)
 
 const {
   isReady,
@@ -60,32 +60,26 @@ onMounted(() => {
     </header>
 
     <main class="main">
+      <div class="toolbar">
+        <FileUpload @file-uploaded="handleFileUpload" @file-removed="handleFileRemoved" />
+        <ExampleSelector @example-selected="handleExampleSelect" />
+      </div>
+
       <div class="container">
-        <div class="sidebar">
-          <div class="controls">
-            <FileUpload @file-uploaded="handleFileUpload" @file-removed="handleFileRemoved" />
-            <ExampleSelector @example-selected="handleExampleSelect" />
+        <div class="editor-section">
+          <CodeEditor v-model="code" />
+          <div class="editor-controls">
             <button @click="runCode" :disabled="!isReady || isLoading" class="run-button">
               {{ isLoading ? 'Running...' : 'Run Code' }}
             </button>
           </div>
         </div>
 
-        <div class="content">
-          <div class="editor-section">
-            <div class="section-header">
-              <h2 class="section-title">R Code Editor</h2>
-            </div>
-            <CodeEditor v-model="code" />
-          </div>
-
-          <div class="output-section">
-            <OutputDisplay
-              :messages="messages"
-              :is-loading="isLoading"
-              @clear="clearMessages"
-            />
-          </div>
+        <div class="output-section">
+          <OutputDisplay
+            :messages="messages"
+            :is-loading="isLoading"
+          />
         </div>
       </div>
     </main>
@@ -102,14 +96,14 @@ onMounted(() => {
 .header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
-  padding: 2rem 0;
+  padding: 1.5rem 0;
   text-align: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .title {
   margin: 0;
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
 }
@@ -121,41 +115,36 @@ onMounted(() => {
   font-weight: 300;
 }
 
+
 .main {
   flex: 1;
 }
 
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 2rem;
-  align-items: start;
-}
-
-.sidebar {
+.toolbar {
   background: white;
-  border-radius: 8px;
-  padding: 1.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  border: 1px solid #e5e7eb;
-}
-
-.controls {
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1rem 2rem;
   display: flex;
-  flex-direction: column;
   gap: 1.5rem;
+  align-items: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  height: calc(100vh - 140px);
+}
+
+
 .run-button {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border: none;
   padding: 0.75rem 1.5rem;
   border-radius: 6px;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -173,44 +162,43 @@ onMounted(() => {
   transform: none;
 }
 
-.content {
+
+.editor-section {
+  background: white;
+  border-right: 1px solid #e5e7eb;
+  padding: 1.5rem;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
 }
 
-.editor-section,
+.editor-controls {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .output-section {
   background: white;
-  border-radius: 8px;
   padding: 1.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  border: 1px solid #e5e7eb;
+  overflow: hidden;
 }
 
-.section-header {
-  margin-bottom: 1rem;
-}
-
-.section-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #374151;
-}
 
 @media (max-width: 768px) {
+  .toolbar {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  
   .container {
     grid-template-columns: 1fr;
-    padding: 1rem;
+    height: auto;
   }
   
   .title {
-    font-size: 2rem;
-  }
-  
-  .subtitle {
-    font-size: 1rem;
+    font-size: 1.75rem;
   }
 }
 </style>

src/components/CodeEditor.vue

@@ -33,6 +33,20 @@ onMounted(() => {
     scrollBeyondLastLine: false,
     wordWrap: 'on',
     automaticLayout: true,
+    // Disable features that require workers
+    links: false,
+    colorDecorators: false,
+    codeLens: false,
+    folding: false,
+    foldingStrategy: 'indentation',
+    showFoldingControls: 'never',
+    matchBrackets: 'never',
+    glyphMargin: false,
+    // Disable language features that need workers
+    suggest: { showWords: false },
+    quickSuggestions: false,
+    parameterHints: { enabled: false },
+    hover: { enabled: false },
   })
 
   editor.onDidChangeModelContent(() => {

src/components/ExampleSelector.vue

@@ -22,65 +22,45 @@ const handleExampleChange = () => {
 
 <template>
   <div class="example-selector">
-    <label for="example-select" class="label">Examples:</label>
     <select
       id="example-select"
       v-model="selectedExample"
       @change="handleExampleChange"
       class="select"
     >
-      <option value="">Select an example...</option>
+      <option value="">Examples ▼</option>
       <option v-for="example in examples" :key="example.id" :value="example.id">
         {{ example.title }}
       </option>
     </select>
-    <div v-if="currentExample" class="example-info">
-      <p class="description">{{ currentExample.description }}</p>
-    </div>
   </div>
 </template>
 
 <style scoped>
 .example-selector {
-  margin-bottom: 1rem;
-}
-
-.label {
-  display: block;
-  font-weight: 500;
-  color: #374151;
-  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
 }
 
 .select {
-  width: 100%;
-  padding: 0.5rem;
+  background: #f3f4f6;
   border: 1px solid #d1d5db;
-  border-radius: 4px;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
-  background-color: white;
   cursor: pointer;
-  transition: border-color 0.3s ease;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.select:hover {
+  background: #e5e7eb;
+  border-color: #9ca3af;
 }
 
 .select:focus {
   outline: none;
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
-
-.example-info {
-  margin-top: 0.5rem;
-  padding: 0.75rem;
-  background-color: #f8fafc;
-  border-radius: 4px;
-  border-left: 4px solid #3b82f6;
-}
-
-.description {
-  margin: 0;
-  color: #64748b;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
 </style>