LỖI: màn hình đen khi load

wiki.md

@@ -3062,3 +3062,82 @@
 - **SECRET_KEY:** đã ổn định (env > {STORAGE}/.secret_key persist > ephemeral) — không phải nguyên nhân.
 - **Các file ảnh hưởng:** main.py, wiki.md. (Cần build lại exe: pyinstaller engine.spec --clean --noconfirm → copy sidecar → npx tauri build.)
 - **Kill tay lúc này:** `taskkill /F /T /IM daw_engine.exe` (có /T — giết CẢ tree — PyInstaller onefile parent+child).
+
+### [2026-08-08 10:00] Task: FIX docker không nhận bản 0950 — compose prod THIẾU build:
+- **Kết quả kiểm tra container:** index.html trỏ `?v=202608080820` (image CŨ) — dù build lại.
+- **Nguyên nhân:** `docker-compose.prod.yml` services CHỈ có `image:` — KHÔNG có `build:` → `docker compose build` KHÔNG build gì → image `sonicforge-studio:latest` giữ nguyên (0820) → up dùng image cũ.
+- **FIX:** thêm `build: .` vào web/worker/beat (compose build hoạt động; image: giữ cho registry prod).
+- **Các file ảnh hưởng:** docker-compose.prod.yml, wiki.md.
+- **Chạy lại trên server:**
+  ```
+  docker compose -f docker-compose.prod.yml build --no-cache
+  docker compose -f docker-compose.prod.yml up -d --force-recreate
+  docker compose -f docker-compose.prod.yml exec web sh -c "grep -o 'precompiled.js?v=[0-9]*' app/templates/index.html"   # phải = 0950
+  ```
+
+### [2026-08-08 10:05] Task: FIX màn đen (3) — Rules of Hooks: `if (!isOpen) return null` TRƯỚC hooks ở MỌI modal
+- **Báo cáo:** 0950 load OK + CSS 200 + không lỗi console — vẫn đen trơn.
+- **NGUYÊN NHÂN GỐC (React crash → unmount → đen):** AuthModal có `if (!isOpen) return null;` TRƯỚC các hooks (useState/useEffect) — VI PHẠM Rules of Hooks — khi login MỞ lần đầu (isOpen false→true) → hook order thay đổi (0→11) → React throw "Rendered more hooks..." → App unmount → MÀN ĐEN. Trước đây không bao giờ mở login (token luôn OK) — fix 401 (09:45-09:50) mở login → LỘ BUG.
+- **FIX:** chuyển `if (!isOpen) return null;` XUỐNG SAU tất cả hooks (trước return JSX) cho **9 modal**: AuthModal, AIConfigModal, PluginManagerModal, ProfileModal, SaveProjectModal, OpenProjectModal, SaveAsModal, SystemManagerModal, AIPresetModal.
+- **Các file ảnh hưởng:** app/static/js/app.jsx, app/templates/index.html (?v=202608081005), wiki.md. Build PASS.
+- **Ghi chú/Test:** rebuild image (compose build --no-cache + up -d --force-recreate) → hard refresh → MÀN ĐĂNG NHẬP HIỆN (thay vì đen) → login admin/admin123 → vào app.
+
+### [2026-08-08 10:10] Task: FIX màn đen (4) — tự host CDN (tailwind/lucide/react) — bỏ phụ thuộc mạng ngoài
+- **Báo cáo:** 1005 vẫn đen trơn + không log thêm. Log có `(index):64 cdn.tailwindcss.com should not be used in production` — index.html dòng 9 load **cdn.tailwindcss.com (CDN JIT)** — tailwind.min.css local = **0 bytes (rỗng)** — nếu CDN bị chặn/treo (mạng VN) → **TOÀN BỘ UI không có style → modal login text đen trên nền đen → "đen trơn"** (không phải lỗi JS).
+- **FIX (index.html):** tự host tất cả CDN → `/static/js/vendor/` (đã download):
+  - `tailwindcss-cdn.js` (407KB — JIT script)
+  - `react.production.min.js` + `react-dom.production.min.js` (18.3.1 UMD — bỏ unpkg)
+  - `lucide.min.js` (bỏ unpkg)
+  - Còn font-awesome (cdnjs) — chỉ icons — không chết app (để CDN).
+- **Các file ảnh hưởng:** app/templates/index.html, app/static/js/vendor/* (4 file mới), wiki.md.
+- **Ghi chú/Test:** rebuild image → hard refresh → UI có style (tailwind local JIT) → MÀN ĐĂNG NHẬP hiển thị bình thường → login admin/admin123.
+
+### [2026-08-08 10:15] Task: Chẩn đoán màn đen — thêm log [AUTH]/[GLOBAL-ERR]/ErrorBoundary
+- **Bằng chứng user:** #root TRỐNG (React render rồi UNMOUNT — SFRoute logs có) — KHÔNG lỗi console — không profile request.
+- **Thêm chẩn đoán (app.jsx):**
+  (1) `[AUTH]` logs — checkAuthStatus (token?/profile OK?/lỗi?/isAuthErr?) + __onAuthFail.
+  (2) `window.addEventListener('error')` → `[GLOBAL-ERR]` + `unhandledrejection` → `[GLOBAL-REJECT]`.
+  (3) **ErrorBoundary** bọc App — componentDidCatch → `[BOUNDARY-ERR]` + fallback hiển thị lỗi đỏ (thay vì đen).
+- **Các file ảnh hưởng:** app/static/js/app.jsx, app/templates/index.html (?v=202608081015), wiki.md. Build PASS.
+- **Ghi chú/Test:** rebuild image → hard refresh → dán MỌI dòng console (sẽ có [AUTH].../[GLOBAL-ERR]/[BOUNDARY-ERR] hoặc fallback đỏ — xác định chính xác điểm chết).
+
+### [2026-08-08 10:20] Task: Chẩn đoán (2) — log root children sau mount
+- **Kết quả 1015:** KHÔNG lỗi (không GLOBAL-ERR/BOUNDARY) — [AUTH] token rỗng → mở login + __onAuthFail chạy — App mounted (effects) — NHƯNG root trống (1005) — App KHÔNG crash.
+- **Thêm (1020):** `[APP] mounted — root children: N | authModalOpen: ... | currentUser: ...` (mỗi render — bắt đầu useEffect không deps).
+- **Các file ảnh hưởng:** app/static/js/app.jsx, app/templates/index.html (?v=202608081020), wiki.md. Build PASS.
+- **Ghi chú/Test:** rebuild image → hard refresh → dán log `[APP] mounted` + MỌI dòng — biết root có children (render) hay 0 (App return null / chưa render).
+
+### [2026-08-08 10:30] Task: Docker build — apt-get chạy lại mỗi lần → check skip + bỏ --no-cache
+- **Yêu cầu user:** `RUN apt-get update && apt-get install` chạy lại mỗi lần build (tốn thời gian) — kiểm tra đã cài thì bỏ qua.
+- **Nguyên nhân:** các lần build gần đây dùng `--no-cache` (hướng dẫn trước để ép lấy code mới) → MỌI layer chạy lại → apt chạy lại.
+- **FIX:**
+  (1) `Dockerfile` — RUN apt: `if command -v fluidsynth && ffmpeg && Xvfb → echo skip; else apt-get update && install ...` (check trước — package đã có → bỏ qua apt).
+  (2) **QUAN TRỌNG:** build THƯỜNG không dùng `--no-cache` — `docker compose -f docker-compose.prod.yml build` — layer apt + `pip install -r requirements.txt` CACHED (chỉ chạy khi requirements/Dockerfile/base đổi); `COPY . .` (code mới — precompiled/?v=) tự cache-bust → vẫn lấy bản mới. Chỉ dùng `--no-cache` khi thật sự cần (ép apt/pip cập nhật).
+- **Các file ảnh hưởng:** Dockerfile, wiki.md.
+- **Ghi chú/Test:** build 2 lần liên tiếp (không --no-cache) → lần 2: apt layer "CACHED" (không chạy) — nhanh hơn nhiều.
+
+### [2026-08-08 10:30] Task: Chẩn đoán (3) — App render UI nhưng root children 0
+- **Kết quả 1025:** `[APP] return UI` XUẤT HIỆN (App return 26006 chạy — UI render) NHƯNG `root children: 0` mọi lần — App render nhưng DOM KHÔNG có con → nghi root.render không commit (hoặc render vào nơi khác).
+- **Thêm (1030):** log tại root.render — `[ROOT] render() vừa gọi — root children` + `[ROOT] sau 500ms — root children | html len` — xác định DOM có được commit hay không.
+- **Các file ảnh hưởng:** app/static/js/app.jsx, app/templates/index.html (?v=202608081030), wiki.md. Build PASS.
+- **Ghi chú/Test:** rebuild image (KHÔNG --no-cache — build thường) → hard refresh → dán log [ROOT].
+
+### [2026-08-08 10:35] Task: FIX màn đen (5) — chuyển sang legacy render (ReactDOM.render — đồng bộ commit)
+- **Kết quả 1030:** `[ROOT] render() vừa gọi — root children: 0` + `sau 500ms — root children: 0 | html len: 0` — **createRoot render KHÔNG commit DOM** (App render chạy — return UI logs — mounted effects chạy — nhưng DOM rỗng) — môi trường/server lạ (browser VN — có thể liên quan scheduler/postMessage bị can thiệp).
+- **FIX (app.jsx cuối):** bỏ `ReactDOM.createRoot().render()` (concurrent) → **`ReactDOM.render()` (legacy — ĐỒNG BỘ commit)** + giữ ErrorBoundary (fallback đỏ) + GLOBAL-ERR/REJECT logs.
+- **Các file ảnh hưởng:** app/static/js/app.jsx, app/templates/index.html (?v=202608081035), wiki.md. Build PASS (createRoot còn = comment).
+- **Ghi chú/Test:** rebuild image (build thường — KHÔNG --no-cache) → hard refresh → nếu root children > 0 → UI hiện (login) → đăng nhập.
+
+### [2026-08-08 11:00] Task: Màn đen — React 18.2.0 thay 18.3.1 + revert test biến
+- **Chuỗi chẩn đoán:** root children 0 dù App render chạy (return UI) + effects chạy (mounted) + không lỗi + ReactDOM commit OK (HELLO children 1) — bất khả thi về lý thuyết → nghi vấn vendor React 18.3.1 UMD (tự host từ unpkg) có vấn đề trên môi trường.
+- **Làm:** (1) revert `const _appResult` (build lỗi VarRedeclaration — loc lạ 29438) về return trực tiếp — build PASS; (2) đổi vendor → **React/react-dom 18.2.0 production** (tải từ unpkg — 10737/131882 bytes).
+- **Các file ảnh hưởng:** app/static/js/app.jsx, app/static/js/vendor/react*.production.min.js (18.2.0), app/templates/index.html (?v=202608081055), wiki.md.
+- **Ghi chú/Test:** rebuild image → hard refresh → nếu UI hiện (login) → 18.3.1 UMD là thủ phạm → giữ 18.2.0. Nếu vẫn 0 → thử: tab ẩn danh / trình duyệt khác (Edge/Firefox) → dán log.
+
+### [2026-08-08 11:05] Task: Màn đen — trace xác nhận App render từ root.render bình thường
+- **Trace (1100):** `App @ 1551 → of → Rk → Si → ... → Q.render (react-dom:266) → anonymous 1583` — App render ĐÚNG từ ReactDOM.render (root) — không render lạ.
+- Vẫn root children 0 sau commit — bất khả thi lý thuyết — cần xem DOM thực (root có gì / App có trong body không).
+- **Bước:** user chạy trong console (trang đang đen):
+  `JSON.stringify({rootHTML: document.getElementById('root').innerHTML.slice(0,200), rootChildren: document.getElementById('root').children.length, appInDOM: document.body.innerHTML.includes('SonicForge')})`
+- **Các file ảnh hưởng:** app/static/js/app.jsx (trace), app/templates/index.html (?v=202608081100), wiki.md. Build PASS.
+- **Ghi chú/Test:** dán kết quả JSON → xác định App render vào đâu (root? body? nơi khác?).