Annotation Activity Console

A Next.js dashboard with a Redux Toolkit state layer. It manages real-time WebSocket updates, SSE streams for AI task summaries, and local client-side caching.

Quick Start

1. Run the Mock API Server

The backend exposes REST APIs, a WebSockets feed, and SSE streaming on port 4000.

cd mock-server
npm install
npm run mock

2. Run the Next.js Dev Server

npm install
npm run dev

Open http://localhost:3000.

3. Run Tests

npm test

Tech Stack & Architecture

• Next.js (App Router) & Redux Toolkit
• Custom Websocket Hook (useTaskFeed): Handles real-time updates and reconnection with exponential backoff.
• SSE hook (useTaskSummaryStream): Fetches chunked markdown and handles cancellation/cleanup.
• XSS Prevention: Safe markdown rendering using remark-gfm + rehype-raw + rehype-sanitize.
• IndexedDB Caching (localforage): Caches normalized task state on the client to paint the UI instantly, then revalidates in the background.