commit 7d2fc42b73aad2d7b2fee55f790644c3dff7e718 Author: Marko Djordjevic Date: Thu Feb 12 09:42:55 2026 +0100 starting planning diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5eec986 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.claude diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..c88f256 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,15 @@ +say "hi marko" at the begining + +Keep important deployment steps in DEPLOYMENT.md +keep project overview updates and important techical changes in README.md + +for next.js, tailwind csss, shadcn-ui, next-auth, fastapi +use context7, lightweight charts + +Always use Context7 MCP when I need library/API documentation, code generation, setup or configuration steps without me having to explicitly ask. + +commit after every task. +pause after every section. + + +CLAUDE_DESCRIPTION.md is used for LLMs to understand the project faster. Keep it up to date with the latest changes and updates. diff --git a/PLAN.md b/PLAN.md new file mode 100644 index 0000000..85d05ab --- /dev/null +++ b/PLAN.md @@ -0,0 +1,92 @@ +This is a great project. Combining financial charting with manual labeling is the first step toward building a custom machine-learning model for trading. + +To give you the best "TradingView" feel, we will use **Next.js** for the framework and **Lightweight Charts** (by TradingView) for the engine. For the drawing and labeling layer, we’ll implement a custom "Overlay" system to handle clicks and coordinate mapping. + +--- + +## 🛠 Technical Architecture + +### 1. The Stack + +* **Framework:** Next.js (App Router) for a full-stack React experience. +* **Charting Engine:** `lightweight-charts` (the library behind TradingView's lightweight version). +* **Database:** SQLite using **Drizzle ORM** (lightweight, fast, and type-safe). +* **State Management:** React `useState` and `useRef` to track the "Active Labeling Mode." +* **Data Ingestion:** `papaparse` for fast CSV parsing. + +### 2. Data Schema + +We need two main tables in SQLite: + +* **`candles`**: Stores the OHLC data (Open, High, Low, Close, Time). +* **`annotations`**: Stores the labels. +* `id`: Primary key. +* `timestamp`: The exact candle time the label belongs to. +* `label_type`: "break_up", "trend_down", etc. +* `geometry`: JSON string (to store line coordinates if drawing lines). + + + +### 3. The "Annotation Overlay" Logic + +Lightweight Charts is optimized for performance, not "drawing" by default. To make it feel interactive: + +1. **Coordinate Mapping:** We use the `chart.timeScale().coordinateToTime()` and `series.priceToCoordinate()` methods to convert a user's mouse click on the screen into a specific price and time in the database. +2. **Visual Markers:** We use the built-in `setMarkers` API to show icons (up/down arrows) for specific patterns like "Break Up." +3. **Drawing Lines:** For lines, we will use "Price Lines" or a transparent **SVG Overlay** that sits on top of the chart and scales as the user zooms. + +--- + +## 📝 Coding Instructions for LLM + +**Copy and paste the following prompt into your coding LLM (e.g., Claude 3.5 Sonnet or GPT-4o):** + +--- + +### **Prompt for AI Developer** + +**Objective:** Build a Next.js web application for EUR/USD candle annotation. +**Tech Stack:** Next.js (App Router), TypeScript, Tailwind CSS, `lightweight-charts`, `lucide-react`, `papaparse`, and SQLite (using Drizzle ORM). + +**Core Features to Implement:** + +**1. Data Ingestion:** + +* Create a file upload component that accepts a CSV. +* CSV Format: `time, open, high, low, close`. +* Parse the CSV and store the records in a local SQLite database. + +**2. The Chart Canvas:** + +* Use `lightweight-charts` to render a candlestick chart. +* Implement a "Toolbox" sidebar with buttons: "Label: Break Up", "Label: Break Down", "Draw Line", "Delete". +* When a user clicks "Label: Break Up" and then clicks a candle on the chart, save that timestamp and label to the `annotations` table. + +**3. Interaction Logic:** + +* **Markers:** If an annotation exists at a timestamp, display it on the chart using the `series.setMarkers()` API (e.g., a green 'aboveBar' arrow for Break Up). +* **Line Drawing:** Implement a basic "two-click" line tool. Click 1 sets start point (Price/Time); Click 2 sets end point. Save coordinates as JSON in SQLite. + +**4. Backend API:** + +* `POST /api/upload`: Parse CSV and populate DB. +* `GET /api/annotations`: Fetch all saved labels for the current chart. +* `POST /api/annotations`: Save a new label or drawing. + +**5. UI Requirements:** + +* Dark mode theme (Slate-900). +* Sidebar for tool selection. +* Main area for the chart (responsive height). +* Simple "Export" button to download the `annotations` table as a new CSV (Timestamp, Label, Price). + +**Please provide the code in a modular structure: `/components`, `/lib/db`, and `/app/api`.** + +--- + +## 🚀 Next Steps + +1. **Prepare your CSV:** Ensure your EUR/USD data has headers named `time` (in 'YYYY-MM-DD' or Unix format), `open`, `high`, `low`, and `close`. +2. **Initialize the project:** If you are running this locally, you will need to run `npx create-next-app@latest` first. + +**Would you like me to generate the database schema file (Drizzle/SQLite) for you to get started?** \ No newline at end of file diff --git a/openspec/changes/candle-annotator-app/.openspec.yaml b/openspec/changes/candle-annotator-app/.openspec.yaml new file mode 100644 index 0000000..95d284a --- /dev/null +++ b/openspec/changes/candle-annotator-app/.openspec.yaml @@ -0,0 +1,2 @@ +schema: spec-driven +created: 2026-02-12 diff --git a/openspec/changes/candle-annotator-app/proposal.md b/openspec/changes/candle-annotator-app/proposal.md new file mode 100644 index 0000000..02dd968 --- /dev/null +++ b/openspec/changes/candle-annotator-app/proposal.md @@ -0,0 +1,34 @@ +## Why + +Building a custom machine-learning model for trading requires labeled training data. Currently there is no tool to manually annotate EUR/USD candlestick charts with pattern labels (break up, break down, trend lines) and export those annotations as structured data. This app provides a TradingView-like charting interface with an interactive labeling layer, enabling a trader to visually mark patterns on historical candle data and export the results for ML pipelines. + +## What Changes + +- New full-stack Next.js application (App Router, TypeScript, Tailwind CSS) +- CSV upload for OHLC candle data (time, open, high, low, close) with parsing and SQLite persistence +- Interactive candlestick chart powered by `lightweight-charts` +- Annotation toolbox: point labels (Break Up, Break Down) and two-click line drawing +- Visual markers on chart for existing annotations (arrows, lines) +- Backend API for data ingestion, annotation CRUD, and CSV export +- Dark mode UI with sidebar toolbox and responsive chart area + +## Capabilities + +### New Capabilities + +- `data-ingestion`: CSV file upload, parsing with papaparse, and storage of OHLC candle records in SQLite via Drizzle ORM +- `chart-canvas`: Candlestick chart rendering using lightweight-charts with responsive layout and dark theme +- `annotation-tools`: Interactive labeling (Break Up, Break Down markers) and two-click line drawing with coordinate mapping between screen and price/time +- `backend-api`: REST endpoints for CSV upload (POST /api/upload), annotation read/write (GET/POST /api/annotations), and annotation export as CSV +- `ui-shell`: Dark mode layout with sidebar toolbox, main chart area, and export button + +### Modified Capabilities + +(none — greenfield project) + +## Impact + +- **New dependencies**: next, react, typescript, tailwindcss, lightweight-charts, lucide-react, papaparse, drizzle-orm, better-sqlite3, shadcn-ui +- **New database**: Local SQLite file with `candles` and `annotations` tables +- **New API surface**: Three REST endpoints under /api/ +- **File structure**: /components, /lib/db, /app/api modular layout diff --git a/openspec/config.yaml b/openspec/config.yaml new file mode 100644 index 0000000..392946c --- /dev/null +++ b/openspec/config.yaml @@ -0,0 +1,20 @@ +schema: spec-driven + +# Project context (optional) +# This is shown to AI when creating artifacts. +# Add your tech stack, conventions, style guides, domain knowledge, etc. +# Example: +# context: | +# Tech stack: TypeScript, React, Node.js +# We use conventional commits +# Domain: e-commerce platform + +# Per-artifact rules (optional) +# Add custom rules for specific artifacts. +# Example: +# rules: +# proposal: +# - Keep proposals under 500 words +# - Always include a "Non-goals" section +# tasks: +# - Break tasks into chunks of max 2 hours