# Triển Khai Chrome Extension MeetAI Share Viewer

## Summary
Tạo extension MV3 React riêng tại `chrome-extension/`. Người dùng bấm icon extension, nhập tên và share link, extension gửi request join, chờ chủ phòng accept, sau đó inject một dock panel vào tab hiện tại để xem transcript realtime, đoạn quan trọng, tóm tắt và participants. Panel hỗ trợ dock trái/phải/trên/dưới, resize, collapse, và layout ưu tiên nội dung.

## Key Changes
- Tạo package `chrome-extension` dùng Vite + React + TypeScript:
  - `manifest.json` MV3, popup, options page, background service worker, content script, iframe panel.
  - Permissions: `storage`, `scripting`, `activeTab`; `host_permissions` và content script match `<all_urls>`.
- Popup:
  - Form nhập `displayName` và `shareLink`.
  - Parse token từ full URL `/recordings/share/{token}` hoặc raw token.
  - Gửi message tới content script để mở panel trong tab hiện tại.
- Options:
  - `apiBaseUrl`, mặc định `http://localhost:8000`.
  - `wsBaseUrl`, mặc định `ws://localhost:8002`.
  - Lưu bằng `chrome.storage.local`.
- Panel:
  - Inject bằng iframe fixed overlay để không đụng CSS/DOM của website.
  - Default dock bên phải, mode mặc định `Transcript focus`.
  - Cho đổi dock `left/right/top/bottom`, resize, collapse, close.
  - Layout có split resizable giữa vùng chính và vùng phụ; nhớ tỷ lệ kéo theo từng share token.
  - Layout presets trong panel: `Transcript focus`, `Summary focus`, `Split`, `Compact`; kéo chia vùng là hành vi chính.
- Storage theo token:
  - `displayName`, `guestKey`, important marks, dock position, panel size, layout mode, split ratio.
  - Không ghi important marks vào backend.
- Share flow tái dùng API hiện tại:
  - Join: `POST /api/v1/recordings/share/{token}/join`
  - Poll trạng thái: `GET /api/v1/recordings/share/{token}?guest_key=...`
  - Transcript/participants fallback: REST endpoints hiện có.
  - Realtime: `WS /api/v1/ws/share/{token}?guest_key=...`
  - Presence: `PATCH /api/v1/recordings/share/{token}/presence?guest_key=...`
- UI states:
  - Not joined, pending, accepted, rejected, ended, backend offline, WS disconnected.
  - Accepted state hiển thị transcript realtime, important, summary Markdown compact, participants.
  - Nếu WS lỗi, tiếp tục polling REST để không mất hoàn toàn viewer.

## Test Plan
- Build/typecheck extension bằng `npm run build` trong `chrome-extension`.
- Manual test với unpacked extension:
  - Nhập full share URL và raw token đều mở đúng panel.
  - Host thấy guest pending và accept được từ UI hiện tại.
  - Sau accept, panel nhận `ready`, `partial_segment`, `segment`, `done` qua WS.
  - Kéo split transcript/tóm tắt, đổi dock, resize, reload tab: state theo token được giữ.
  - Mark important, reload tab: important marks vẫn còn và không ảnh hưởng DB.
  - Test rejected, invalid link, meeting ended, backend offline, WS lỗi.
- Regression:
  - Trang share web `/recordings/share/[token]` không đổi hành vi.
  - Host accept/reject participants vẫn hoạt động.

## Assumptions
- Extension chạy trên desktop Chrome/Chromium.
- Có thể inject trên mọi website bình thường, nhưng không hỗ trợ Chrome internal pages/Web Store do giới hạn trình duyệt.
- Extension chỉ hiển thị dữ liệu MeetAI, không đọc nội dung Google Meet và không record audio.
- Backend API/WS hiện tại đủ cho v1; chỉ cần document cấu hình URL/CORS nếu môi trường production yêu cầu.
