Complete implementation of the production line incident response system (生產線異常即時反應系統) including: Backend (FastAPI): - User authentication with AD integration and session management - Chat room management (create, list, update, members, roles) - Real-time messaging via WebSocket (typing indicators, reactions) - File storage with MinIO (upload, download, image preview) Frontend (React + Vite): - Authentication flow with token management - Room list with filtering, search, and pagination - Real-time chat interface with WebSocket - File upload with drag-and-drop and image preview - Member management and room settings - Breadcrumb navigation - 53 unit tests (Vitest) Specifications: - authentication: AD auth, sessions, JWT tokens - chat-room: rooms, members, templates - realtime-messaging: WebSocket, messages, reactions - file-storage: MinIO integration, file management - frontend-core: React SPA structure 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
32 lines
1.4 KiB
Markdown
32 lines
1.4 KiB
Markdown
# Change: Add React Frontend Application
|
|
|
|
## Why
|
|
The Task Reporter system currently has a complete backend API but no user interface. Users cannot interact with the incident response system without a frontend application. A React-based SPA will enable production line operators, supervisors, and engineers to create incident rooms, collaborate in real-time, upload evidence files, and manage incident resolution.
|
|
|
|
## What Changes
|
|
- **NEW**: React 18 + Vite frontend application
|
|
- **NEW**: Authentication flow (login/logout with token management)
|
|
- **NEW**: Incident room management UI (create, list, view, update)
|
|
- **NEW**: Real-time chat interface with WebSocket integration
|
|
- **NEW**: File upload/download interface with image preview
|
|
- **NEW**: Member management UI (add, remove, change roles)
|
|
- **NEW**: Responsive layout for desktop and tablet use
|
|
|
|
## Impact
|
|
- Affected specs: Creates new `frontend-core` specification
|
|
- Affected code:
|
|
- New `frontend/` directory with React application
|
|
- Backend CORS configuration update (app/main.py)
|
|
- Static file serving configuration
|
|
|
|
## Dependencies
|
|
- Backend API must be running (localhost:8000)
|
|
- MinIO must be running for file uploads (localhost:9000)
|
|
|
|
## Success Criteria
|
|
1. Users can login with AD credentials
|
|
2. Users can create and join incident rooms
|
|
3. Users can send/receive messages in real-time
|
|
4. Users can upload and view files (images, PDFs, logs)
|
|
5. Room owners can manage members and room status
|