Add files using upload-large-folder tool

src/app/layout.tsx

@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

src/app/page.tsx

@@ -0,0 +1,16 @@
+"use client"
+import { Chart } from '../components/Chart'
+
+export default function Home() {
+    const handleRoboClick = () => {
+        console.log('Robo clicked - AI analysis triggered')
+    }
+
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-between p-24">
+            <div className="w-full max-w-5xl">
+                <Chart onRoboClick={handleRoboClick} />
+            </div>
+        </main>
+    )
+}

src/components/Chart.tsx

@@ -0,0 +1,55 @@
+"use client"
+import { useEffect, useRef } from 'react'
+import * as LightweightCharts from 'lightweight-charts'
+
+interface ChartProps {
+    onRoboClick: () => void
+}
+
+export const Chart: React.FC<ChartProps> = ({ onRoboClick }) => {
+    const chartContainerRef = useRef<HTMLDivElement>(null)
+    const chartRef = useRef<any>(null)
+
+    useEffect(() => {
+        if (!chartContainerRef.current) return
+
+        chartRef.current = LightweightCharts.createChart(chartContainerRef.current, {
+            width: chartContainerRef.current.clientWidth,
+            height: 500,
+            layout: {
+                background: { color: '#1A1A1A' },
+                textColor: '#d1d4dc',
+            }
+        })
+
+        const series = chartRef.current.addCandlestickSeries()
+
+        const fetchData = async () => {
+            const response = await fetch('http://localhost:5000/fetch_candles')
+            const data = await response.json()
+            series.setData(data)
+        }
+
+        fetchData()
+
+        const roboIcon = document.createElement('div')
+        roboIcon.innerHTML = '🤖'
+        roboIcon.style.position = 'absolute'
+        roboIcon.style.top = '10px'
+        roboIcon.style.left = '10px'
+        roboIcon.style.fontSize = '24px'
+        roboIcon.style.cursor = 'pointer'
+        roboIcon.onclick = onRoboClick
+        chartContainerRef.current.appendChild(roboIcon)
+
+        return () => {
+            if (chartRef.current) {
+                chartRef.current.remove()
+            }
+        }
+    }, [onRoboClick])
+
+    return (
+        <div ref={chartContainerRef} className="w-full h-[500px] relative" />
+    )
+}

src/types/lightweight-charts.d.ts

@@ -0,0 +1,32 @@
+declare module 'lightweight-charts' {
+    export type Time = number | string;
+    export type LineStyle = number;
+
+    export interface ChartOptions {
+        width: number;
+        height: number;
+        layout?: {
+            background?: { color?: string };
+            textColor?: string;
+        };
+    }
+
+    export interface CandlestickData {
+        time: Time;
+        open: number;
+        high: number;
+        low: number;
+        close: number;
+    }
+
+    export interface ISeriesApi<T> {
+        setData(data: CandlestickData[]): void;
+    }
+
+    export interface IChartApi {
+        addCandlestickSeries(): ISeriesApi<'Candlestick'>;
+        remove(): void;
+    }
+
+    export function createChart(container: HTMLElement, options: ChartOptions): IChartApi;
+}