Fix CSV loading for production deployment and add R load instructions

- Change absolute CSV path to relative path for proper loading on GitHub Pages
- Add R code snippet in CSV info dropdown showing exact load command
- Style the code snippet with monospace font and appropriate formatting

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

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

Author: stared

src/components/FileUpload.vue

@@ -264,6 +264,10 @@ onUnmounted(() => {
               </span>
             </div>
           </div>
+          <div class="code-section">
+            <span class="code-header">Load in R:</span>
+            <code class="code-snippet">data &lt;- read.csv("/tmp/{{ props.uploadedFile.name }}")</code>
+          </div>
         </div>
       </div>
     </div>
@@ -493,6 +497,31 @@ onUnmounted(() => {
   gap: 0.5rem;
 }
 
+.code-section {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.code-header {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.code-snippet {
+  display: block;
+  background: #f3f4f6;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 0.8125rem;
+  color: #1f2937;
+  word-break: break-all;
+}
+
 .column-name {
   background: #f3f4f6;
   padding: 0.25rem 0.5rem;

src/data/examples.ts

@@ -95,7 +95,7 @@ ggplot(iris_long, aes(x = Species, y = Value, fill = Species)) +
     id: 'metal-bands-happiness',
     title: 'Metal bands vs happiness',
     description: 'Surprising correlation: more metal bands = happier countries',
-    csvUrl: '/metal_bands_happiness.csv',
+    csvUrl: './metal_bands_happiness.csv',
     code: `library(ggplot2)
 library(ggrepel)