feat: TradingView Dashboard with Data Source Management (Vibe Kanban)

.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/src/generated/prisma

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

docs/plans/2026-02-04-tradingview-dashboard.md

@@ -0,0 +1,283 @@
+# TradingView Dashboard Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Build a TradingView-based dashboard with a robust Data Source Management System supporting local DB, external URLs, and API subscriptions.
+
+**Architecture:** Next.js (App Router) + Tailwind CSS frontend. SQLite + Prisma for data management. Lightweight Charts for visualization. Modular data adapter pattern for unified data access.
+
+**Tech Stack:** Next.js 14, React, Tailwind CSS, Prisma, SQLite, tradingview/lightweight-charts, shadcn/ui (for admin interface).
+
+---
+
+## Phase 1: Foundation & Infrastructure
+
+### Task 1: Project Initialization
+
+**Files:**
+- Create: `package.json`
+- Create: `tsconfig.json`
+- Create: `tailwind.config.ts`
+- Create: `app/page.tsx`
+
+**Step 1: Initialize Next.js Project**
+
+Run: `npx create-next-app@latest . --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*"`
+
+**Step 2: Install Additional Dependencies**
+
+Run: `npm install lightweight-charts prisma @prisma/client clsx tailwind-merge lucide-react`
+Run: `npm install -D @types/node @types/react @types/react-dom`
+
+**Step 3: Initialize Prisma**
+
+Run: `npx prisma init --datasource-provider sqlite`
+
+**Step 4: Verify Setup**
+
+Run: `npm run build`
+Expected: Build success
+
+**Step 5: Commit**
+
+```bash
+git add .
+git commit -m "chore: initialize project with nextjs, tailwind and prisma"
+```
+
+---
+
+## Phase 2: Data Architecture
+
+### Task 2: Database Schema Design
+
+**Files:**
+- Modify: `prisma/schema.prisma`
+
+**Step 1: Define Schema**
+
+Add models for `DataSource` and `MarketData`.
+
+```prisma
+// prisma/schema.prisma
+
+model DataSource {
+  id          String   @id @default(uuid())
+  name        String
+  type        String   // "LOCAL_DB", "EXTERNAL_URL", "API_SUBSCRIPTION"
+  config      String   // JSON string storing URL, API keys, etc.
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  isActive    Boolean  @default(true)
+}
+
+// For "LOCAL_DB" type sources
+model MarketData {
+  id          Int      @id @default(autoincrement())
+  symbol      String
+  timestamp   Int      // Unix timestamp
+  open        Float
+  high        Float
+  low         Float
+  close       Float
+  volume      Float?
+  sourceId    String? // Optional link to source
+
+  @@index([symbol, timestamp])
+}
+```
+
+**Step 2: Generate Migration**
+
+Run: `npx prisma migrate dev --name init_schema`
+
+**Step 3: Commit**
+
+```bash
+git add prisma/schema.prisma prisma/migrations
+git commit -m "feat: define database schema for data sources"
+```
+
+### Task 3: Data Source Management API
+
+**Files:**
+- Create: `app/api/sources/route.ts`
+- Create: `lib/db.ts`
+
+**Step 1: Create Prisma Client Singleton**
+
+Create `lib/db.ts` to prevent multiple Prisma instances in dev.
+
+**Step 2: Create CRUD Endpoints**
+
+Implement GET (list sources) and POST (create source) in `app/api/sources/route.ts`.
+
+**Step 3: Test API**
+
+(Manual test via curl or script, or unit test if environment permits)
+
+**Step 4: Commit**
+
+```bash
+git add app/api/sources/route.ts lib/db.ts
+git commit -m "feat: implement data source management api"
+```
+
+---
+
+## Phase 3: Data Source Adapters
+
+### Task 4: Unified Data Adapter Interface
+
+**Files:**
+- Create: `lib/adapters/types.ts`
+- Create: `lib/adapters/index.ts`
+
+**Step 1: Define Interface**
+
+```typescript
+// lib/adapters/types.ts
+export interface Candle {
+  time: number; // lightweight-charts expects unified time
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume?: number;
+}
+
+export interface DataAdapter {
+  fetchData(config: any, symbol: string): Promise<Candle[]>;
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add lib/adapters
+git commit -m "feat: define data adapter interfaces"
+```
+
+### Task 5: Implement Concrete Adapters
+
+**Files:**
+- Create: `lib/adapters/local-db.ts`
+- Create: `lib/adapters/external-url.ts`
+
+**Step 1: Implement Local DB Adapter**
+
+Query `MarketData` table via Prisma.
+
+**Step 2: Implement External URL Adapter**
+
+Fetch JSON from configured URL and map to `Candle` format.
+
+**Step 3: Commit**
+
+```bash
+git add lib/adapters
+git commit -m "feat: implement local and external data adapters"
+```
+
+### Task 6: Data Proxy API
+
+**Files:**
+- Create: `app/api/data/route.ts`
+
+**Step 1: Implement Proxy Endpoint**
+
+Accept `sourceId` and `symbol`.
+Load Source config -> Select Adapter -> Fetch Data -> Return standard JSON.
+
+**Step 2: Commit**
+
+```bash
+git add app/api/data/route.ts
+git commit -m "feat: implement unified data proxy api"
+```
+
+---
+
+## Phase 4: Frontend Implementation
+
+### Task 7: Chart Component
+
+**Files:**
+- Create: `components/Chart.tsx`
+
+**Step 1: Implement Lightweight Charts**
+
+Create a React component wrapping `createChart`.
+Accept `data` prop.
+Handle resize observer.
+
+**Step 2: Commit**
+
+```bash
+git add components/Chart.tsx
+git commit -m "feat: implement lightweight charts component"
+```
+
+### Task 8: Data Source Management UI
+
+**Files:**
+- Create: `components/SourceManager.tsx`
+- Create: `components/SourceForm.tsx`
+
+**Step 1: List View**
+
+Fetch and display sources from `/api/sources`.
+
+**Step 2: Add/Edit Form**
+
+Form to input Name, Type, and Config (JSON).
+
+**Step 3: Commit**
+
+```bash
+git add components/SourceManager.tsx components/SourceForm.tsx
+git commit -m "feat: implement data source management ui"
+```
+
+### Task 9: Dashboard Integration
+
+**Files:**
+- Modify: `app/page.tsx`
+
+**Step 1: Layout**
+
+Sidebar: Source Manager & Symbol Selector.
+Main: Chart area.
+
+**Step 2: State Management**
+
+Selected Source -> Selected Symbol -> Fetch Data -> Update Chart.
+
+**Step 3: Commit**
+
+```bash
+git add app/page.tsx
+git commit -m "feat: integrate dashboard with chart and manager"
+```
+
+---
+
+## Phase 5: Polish & Documentation
+
+### Task 10: Error Handling & Loading States
+
+**Files:**
+- Modify: `components/Chart.tsx`
+- Modify: `app/page.tsx`
+
+**Step 1: Add Loading Spinners**
+
+**Step 2: Add Error Toasts**
+
+**Step 3: Commit**
+
+```bash
+git add .
+git commit -m "feat: add error handling and loading states"
+```
+

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  serverExternalPackages: ["@prisma/client"],
+};
+
+export default nextConfig;