Fix MiniEchart: move to standalone Vue component for proper template compilation

src/components/MiniEchart.vue

@@ -0,0 +1,131 @@
+<template>
+  <div ref="chartContainer" class="echart-mini"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { nextTick } from 'vue'
+
+echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
+
+export default {
+  name: 'MiniEchart',
+  props: {
+    data: { type: Array, default: () => [] },
+    color: { type: String, default: '#22c55e' }
+  },
+  data() {
+    return {
+      chart: null,
+      resizeObserver: null
+    }
+  },
+  mounted() {
+    console.log('[MiniEchart] Mounted with data:', this.data?.length || 0, 'items')
+    nextTick(() => this.initChart())
+  },
+  beforeUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  },
+  watch: {
+    data(newVal) {
+      if (this.chart && Array.isArray(newVal)) {
+        this.updateChart(newVal)
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      const el = this.$refs.chartContainer
+      console.log('[MiniEchart] initChart - el:', el)
+      
+      if (!el) {
+        console.log('[MiniEchart] No element found')
+        return
+      }
+
+      const { clientWidth: w, clientHeight: h } = el
+      console.log('[MiniEchart] Element size:', w, 'x', h)
+
+      if (!w || !h) {
+        console.log('[MiniEchart] Size is 0, will retry on next tick')
+        setTimeout(() => this.initChart(), 100)
+        return
+      }
+
+      console.log('[MiniEchart] Initializing ECharts...')
+      this.chart = echarts.init(el, null, { renderer: 'canvas' })
+      console.log('[MiniEchart] Chart initialized, rendering data:', this.data?.length || 0)
+      
+      this.renderChart(this.data)
+
+      // Listen for container resize
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      })
+      this.resizeObserver.observe(el)
+    },
+    renderChart(arr) {
+      if (!this.chart) return
+      
+      const d = Array.isArray(arr) ? arr : []
+      console.log('[MiniEchart] Rendering chart with', d.length, 'data points')
+      
+      this.chart.setOption({
+        animation: true,
+        grid: { left: 0, right: 0, top: 0, bottom: 0 },
+        xAxis: { 
+          type: 'category', 
+          show: false, 
+          boundaryGap: false, 
+          data: d.map((_, i) => i) 
+        },
+        yAxis: { 
+          type: 'value', 
+          show: false, 
+          scale: true 
+        },
+        tooltip: { show: false },
+        color: [this.color || '#22c55e'],
+        series: [{
+          type: 'line',
+          data: d,
+          showSymbol: false,
+          smooth: 0.35,
+          lineStyle: { width: 2 },
+          areaStyle: { opacity: 0.15 }
+        }]
+      })
+    },
+    updateChart(newData) {
+      if (!this.chart) return
+      
+      const d = Array.isArray(newData) ? newData : []
+      this.chart.setOption({
+        xAxis: { data: d.map((_, i) => i) },
+        series: [{ data: d }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.echart-mini {
+  width: 100%;
+  height: 100%;
+}
+</style>
+

src/views/RequestView.vue

@@ -158,96 +158,7 @@ import { getAllDecisions } from '../lib/dataCache'
 import { readAllRawDecisions } from '../lib/idb'
 import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
 import { computeBuyHoldEquity } from '../lib/perf'
-
-/* ---- ECharts (LineChart) ---- */
-import * as echarts from 'echarts/core'
-import { LineChart } from 'echarts/charts'
-import { GridComponent, TooltipComponent } from 'echarts/components'
-import { CanvasRenderer } from 'echarts/renderers'
-import { nextTick } from 'vue'
-echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
-
-/**
- * Robust ECharts mini line spark that waits for layout
- */
-const MiniEchart = {
-  name: 'MiniEchart',
-  props: {
-    data: { type: Array, default: () => [] },
-    color: { type: String, default: '#22c55e' }
-  },
-  data() {
-    return { _chart: null, _ro: null, _raf: 0 }
-  },
-  mounted() {
-    console.log('[MiniEchart] Mounted with data:', this.data?.length || 0, 'items')
-    nextTick(() => this.initChartSafely())
-  },
-  beforeUnmount() {
-    if (this._ro) { this._ro.disconnect(); this._ro = null }
-    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = 0 }
-    if (this._chart) { this._chart.dispose(); this._chart = null }
-  },
-  methods: {
-    initChartSafely() {
-      const el = this.$refs.c || this.$el
-      console.log('[MiniEchart] initChartSafely - el:', el)
-      if (!el) {
-        console.log('[MiniEchart] No element, retrying...')
-        this._raf = requestAnimationFrame(() => this.initChartSafely())
-        return
-      }
-      const { clientWidth: w, clientHeight: h } = el
-      console.log('[MiniEchart] Element size:', w, 'x', h)
-      if (!w || !h) {
-        console.log('[MiniEchart] Size is 0, retrying...')
-        this._raf = requestAnimationFrame(() => this.initChartSafely())
-        return
-      }
-      console.log('[MiniEchart] Initializing ECharts...')
-      this._chart = echarts.init(el, null, { renderer: 'canvas' })
-      console.log('[MiniEchart] Chart initialized, rendering data:', this.data?.length || 0)
-      this.render(this.data)
-
-      // Listen for container resize
-      this._ro = new ResizeObserver(() => {
-        if (this._chart) this._chart.resize()
-      })
-      this._ro.observe(el)
-    },
-    render(arr) {
-      if (!this._chart) return
-      const d = Array.isArray(arr) ? arr : []
-      this._chart.setOption({
-        animation: true,
-        grid: { left: 0, right: 0, top: 0, bottom: 0 },
-        xAxis: { type: 'category', show: false, boundaryGap: false, data: d.map((_, i) => i) },
-        yAxis: { type: 'value', show: false, scale: true },
-        tooltip: { show: false },
-        color: [this.color || '#22c55e'],
-        series: [{
-          type: 'line',
-          data: d,
-          showSymbol: false,
-          smooth: 0.35,
-          lineStyle: { width: 2 },
-          areaStyle: { opacity: 0.15 }
-        }]
-      })
-    }
-  },
-  watch: {
-    data(newVal) {
-      if (!this._chart) return
-      const d = Array.isArray(newVal) ? newVal : []
-      this._chart.setOption({
-        xAxis: { data: d.map((_, i) => i) },
-        series: [{ data: d }]
-      })
-    }
-  },
-  template: `<div ref="c" class="echart-mini"></div>`
-}
+import MiniEchart from '../components/MiniEchart.vue'
 
 export default {
   name: 'RequestView',
@@ -264,7 +175,7 @@ export default {
       agents: [
         {
           name: 'InvestorAgent',
-          github: '#',
+          github: 'https://github.com/felis33/INVESTOR-BENCH',
           arxiv: 'https://arxiv.org/abs/2412.18174',
           strategy: 'Aggressive Long Only',
           focus: 'BTC, MSFT',
@@ -447,7 +358,6 @@ export default {
 .truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
 .w-full{ width:100%; }
-.echart-mini{ width:100%; height:100%; }
 
 /* ===== Sections ===== */
 .section{ margin-top:18px; }