Chart v2 WIP

.github/agents/build-and-test.agent.md.bak

@@ -0,0 +1,33 @@
+---
+description: Builds, test, lint the project.
+name: Build and Test
+tools: ['execute/getTerminalOutput', 'execute/runInTerminal', 'read/readFile']
+model: GPT-5 mini (copilot)
+---
+
+You're an agent that builds, test, and lints the project. Your job is to run commands to build, test, lint the project and return the results to the user. Do NOT edit any code, only run the commands according to the following instructions and return the outputs requested by the user.
+
+Use these commands EXACTLY, character by character, as they will be auto approved and saves valuable time! For non-conventional tasks, you can use your own commands but explain why and get user approval so use it sparingly.
+
+For requests that requires multiple commands, run commands until all tasks requested are done.
+
+You should ALWAYS run a lint FIRST before the build and test to ensure code style is correct. Return the results of this if it fails and explain it is a lint failure.
+
+## Commands
+
+If the user requests for the backend to be built, tested, and/or linted, pick from one of these commands depending on the tasks given:
+
+- Build the backend binary with the frontend: `make prod`
+- Lint the backend code: `make backend-lint`
+- Run all backend tests: `make backend-test`
+- Run all the backend tests with coverage: `make backend-test COVERAGE=1`
+- If the user wants to run a subset of the tests: `go test -run <TestNameRegexp> ./...` (not auto approved but may be useful).
+
+If the user requests for the frontend to be built, tested, and/or linted, pick from one of these commands depending on the tasks given. Make sure to first `cd frontend` before running these commands. It is possible that the terminal is already in the `frontend` directory, so check with `pwd` first:
+
+- Build the frontend code: `npm run build`
+- Type Check and lint the frontend code and apply any fixes: `npm run lint:write`
+- Run all frontend tests: `npm run test`
+- Run all frontend tests with coverage: `npm run test:coverage`
+- Run the frontend benchmarks: `npm run benchmark`
+- Run a specific frontend test: `npm run test -- <filename> -t <pattern>` (not auto approved but may be useful).

AGENTS.md

@@ -14,24 +14,25 @@ Read these if not sure about data flow or architecture.
 
 ## Build and test instructions
 
-Try to ALWAYS use these exact commands as they are auto approved.
+VERY VERY IMPORTANT TO FOLLOW THE FOLLOWING: Use these EXACT commands CHARACTER BY CHARACTER as they will be auto approved and do not use other commands as they will need approval and will be slower. If you do not use one of the commands below, ALWAYS explain why you need the deviation before running it.
 
-### Backend
+Backend instructions
 
-- Building the binary: `make prod` (see Makefile if necessary) which creates `build/wesplot`.
-- Lint the code with `make lint`
-- Run all tests: `make test`
-- Run all tests and check for code coverage: `make test COVERAGE=1`
-- Run these commands separately (not with && or ;) so they can be auto approved as auto approval relies on exact matches.
+- Build the backend binary with the frontend: `make prod`
+- Lint the backend code: `make backend-lint`
+- Run all backend tests: `make backend-test`
+- Run all the backend tests with coverage: `make backend-test COVERAGE=1`
+- If the user wants to run a subset of the tests: `go test -run <TestNameRegexp> ./...` (not auto approved but may be useful).
 
-### Frontend
+Frontend instructions (need to `cd frontend` first, which might already been done in the open terminal).
 
-First run `cd frontend` to get into the frontend directory (the terminal might already be in there, check with `pwd`). Run this as it is auto approved.
-
-- Run test: `npm run test`
-- Run benchmark: `npm run benchmark`
-- Run test with coverage: `npm run test:coverage`
-- Run lint: `npm run lint:write`
+- Build the frontend code: `npm run build`
+- Type Check and lint the frontend code and apply any fixes: `npm run lint:write`
+- Run all frontend tests: `npm run test`
+  - DO NOT PASS `--silent` to this command as its output has already been minimized.
+- Run all frontend tests with coverage: `npm run test:coverage`
+- Run the frontend benchmarks: `npm run benchmark`
+- Run a specific frontend test: `npm run test -- <filename> -t <pattern>` (not auto approved but may be useful).
 
 ## Coding rules
 
@@ -44,9 +45,10 @@ All rules below applies unless told otherwise by user prompts.
 ### Test policy
 
 - Add sufficient test coverage for code changes. Think of all the possible edge cases and comment inline in the tests on why these cases matter.
-- Code coverage should be 100% (but some error paths might be near-impossible to test, so they can be skipped). Check with `make test COVERAGE=1`.
-- Unit tests should be in `<file>_test.go` as per normal Go convention.
+- Code coverage should be 100% (but some error paths might be near-impossible to test, so they can be skipped).
+- Unit tests should be in `<file>_test.go` as per normal Go convention, `<file>.test.ts` for frontend, and `<file>.bench.ts` for frontend benchmarks.
 - Test failures should be accompanied with good error messages for debugging.
+- Follow test commands exactly as stated above where possible.
 
 ### Completion policy
 

CURRENT_TASK.md

@@ -87,35 +87,40 @@ This is a **major frontend rewrite** to support multi-series with independent X
   - [x] Update documentation to match implementation (buffers created on-demand)
   - [x] Implement a test application in `src/v2/main.ts` and `v2.html` that shows the streamer working and streams the data into a table.
 
- - [ ] **Step 5:** Implement Chart component
-  - [ ] Consider approaches for testing visual elements for AI agents
-  - [ ] Create `src/v2/chart.ts`
-  - [ ] Define Chart API (constructor options: series IDs, display config)
-  - [ ] Integrate with Chart.js for rendering
-  - [ ] Handle data updates from Streamer callbacks
-  - [ ] Support multiple series with independent X values
-  - [ ] Implement efficient data appending (no full re-renders)
-  - [ ] Add basic configuration (colors, labels, etc.)
+ - [x] **Step 5:** Implement Chart component
+  - [x] Create `src/v2/chart.ts`
+  - [x] Define Chart API (constructor options: series IDs, display config)
+  - [x] Integrate with Chart.js for rendering
+  - [x] Handle data updates from Streamer callbacks
+  - [x] Support multiple series with independent X values
+  - [x] Implement efficient data appending (no full re-renders)
+  - [x] Add basic configuration (colors, labels, etc.)
 
 - [ ] **Step 6:** Create v2 main application
-  - [ ] Create `src/v2/main.ts`
-  - [ ] Initialize Streamer and connect to `/ws2`
-  - [ ] Create one or more Chart instances
-  - [ ] Register chart update callbacks with Streamer
-  - [ ] Handle connection lifecycle (connect, stream end, errors)
-
-- [ ] **Step 7:** Add comprehensive tests for v2 components
+  - [x] Create `src/v2/main.ts`
+  - [x] Initialize Streamer and connect to `/ws2`
+  - [x] Create one Chart instances
+  - [x] Register chart update callbacks with Streamer
+  - [ ] Handle connection lifecycle (connect, stream end, errors) on the application side with a tool bar at the bottom
+
+- [ ] **Step 7**: Allow v2 application to be interactive
+  - [ ] Implement ability to pause the stream
+  - [ ] Implement ability to configure the chart options
+  - [ ] Implement ability to add a second chart via a split
+  - [ ] Add ways to remove a series from the ChartJS plot if it is removed.
+
+- [ ] **Step 8:** Add comprehensive tests for v2 components
   - [ ] Integration tests for v2 app (end-to-end streaming)
   - [ ] Performance tests (memory usage, frame rates)
   - [ ] Ensure 100% coverage where possible
 
-- [ ] **Step 8:** Update build and deployment
+- [ ] **Step 9:** Update build and deployment
   - [ ] Update Makefile to build v2 frontend
   - [ ] Ensure v2.html is served by backend
   - [ ] Test v2 with live data streaming
   - [ ] Verify no regressions in original frontend
 
-- [ ] **Step 9:** Final validation and documentation
+- [ ] **Step 10:** Final validation and documentation
   - [ ] Run all tests (backend and frontend)
   - [ ] Update user documentation for v2 features
   - [ ] Mark Phase 2 complete

docs/development/frontend-architecture.md

@@ -141,10 +141,11 @@ interface ChartConfig {
   container: HTMLElement;           // DOM element to render chart into
   seriesIds: number[];              // Which series to display (series identifiers)
   metadata: Metadata;               // Stream metadata (from onMetadata)
-  windowSize?: number;              // Max points to display (rolling window)
   colors?: string[];                // Series colors
 }
 
+**Note:** The rolling window is enforced by the Streamer via per-series CircularBuffers; charts should use the supplied segments as-is.
+
 class Chart {
   constructor(container: HTMLElement, config: ChartConfig);
 
@@ -161,9 +162,6 @@ class Chart {
   // incoming message.
   render(): void;
 
-  // Handle stream end
-  handleStreamEnd(error: boolean, message: string): void;
-
   // Update chart options (title, labels, etc.)
   updateOptions(options: Partial<WesplotOptions>): void;
 
@@ -197,7 +195,6 @@ class Chart {
 5. **Lifecycle:**
   - `update()`: Called by Streamer (via callback) to attach the latest buffer segments to the chart and increment a generation counter (cheap, allocation-free).
   - `render()`: Called on `requestAnimationFrame`; checks the generation counter and only performs Chart.js data conversion and drawing when the generation changed since the last render.
-  - `handleStreamEnd()`: Called when stream ends (clean termination or error)
   - `destroy()`: Clean up Chart.js instance and buffers
 
 **Data Flow:**
@@ -249,15 +246,13 @@ function main() {
     },
 
     onStreamEnd: (error, message) => {
-      // 5. Handle stream termination
-      if (chart) {
-        chart.handleStreamEnd(error, message);
-      }
+      // 5. Handle stream termination at the application level
       if (error) {
         console.error('Stream error:', message);
       }
     },
 
+
     onError: (error) => {
       console.error('Streamer error:', error);
     }