second-brain/monorepo-migration-prompt.md

720 lines
15 KiB
Markdown
Raw Normal View History

# MASTER PROMPT: Monorepo Migration, Fix, Test & Deploy
**Role**: Senior DevOps & Full-Stack Architect with QA Automation
## Current State
- Backend: `/root/second-brain-backend`
- Frontend: `/root/client`
- Target Monorepo: `/root/second-brain`
- Remote: `https://forgejo.dffm.it/giuseppe/second-brain.git`
- Production URL: `https://ai.dffm.it`
## Objective
Consolidate into monorepo, inject frontend logic, test via remote browser on ai.dffm.it, fix issues, push to Forgejo.
---
## PHASE 1: FILE SYSTEM MIGRATION
```bash
# Create monorepo structure
mkdir -p /root/second-brain/{server,client}
# Copy backend (preserve hidden files, exclude heavy dirs)
rsync -av --exclude 'node_modules' --exclude '.git' \
/root/second-brain-backend/ /root/second-brain/server/
# Copy frontend (preserve hidden files, exclude heavy dirs)
rsync -av --exclude 'node_modules' --exclude '.git' --exclude 'dist' \
/root/client/ /root/second-brain/client/
# Verify structure
tree -L 2 /root/second-brain
```
---
## PHASE 2: FRONTEND LOGIC INJECTION
### 2.1 MainLayout.tsx (client/src/components/layout/MainLayout.tsx)
```typescript
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
return (
<>
<Header
onMenuToggle={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
/>
<Sidebar
isOpen={isMobileMenuOpen}
onClose={() => setIsMobileMenuOpen(false)}
/>
</>
);
```
### 2.2 Header.tsx
**Requirements:**
- Fetch GET /api/me on mount, display user avatar/name
- Add Hamburger button (visible md:hidden) → triggers onMenuToggle
- Avatar dropdown with "Sign out" → POST /auth/logout → redirect to /login
```typescript
const handleLogout = async () => {
await fetch('/auth/logout', { method: 'POST', credentials: 'include' });
window.location.href = '/login';
};
```
### 2.3 Sidebar.tsx
**Requirements:**
- Mobile drawer: Fixed position with transform -translate-x-full when closed
- Overlay backdrop: fixed inset-0 bg-black/50 z-40 (visible only when isOpen)
- Close on backdrop click and on ESC key
- "+ New Note" button → POST /api/ingest with current workspaceId
---
## PHASE 3: BACKEND CONFIGURATION
**File:** `server/src/server.ts` (or `app.ts`)
```typescript
// Serve frontend static files in production
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, '../../client/dist')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../../client/dist/index.html'));
});
}
```
**Ensure:** CORS is configured to allow frontend origin:
```typescript
app.use(cors({ origin: 'https://ai.dffm.it', credentials: true }));
```
---
## PHASE 4: INSTALL DEPENDENCIES & BUILD
```bash
# Install server dependencies
cd /root/second-brain/server
npm install
# Install client dependencies
cd /root/second-brain/client
npm install
# Build client for production
npm run build
```
---
## PHASE 5: REMOTE BROWSER TESTING & AUTO-FIX
**Objective:** Deploy to production, test via https://ai.dffm.it, identify issues, fix autonomously.
### 5.1 Deploy to Production Server
```bash
# Build frontend for production
cd /root/second-brain/client
npm run build
# Start backend (serving frontend static files)
cd /root/second-brain/server
NODE_ENV=production npm start
# Or use PM2 for persistent process:
# pm2 restart second-brain || pm2 start npm --name "second-brain" -- start
```
**Verify** the app is accessible at https://ai.dffm.it before proceeding.
### 5.2 Browser Testing Protocol (Remote via Chrome)
Use Antigravity's browser automation/preview to navigate to https://ai.dffm.it.
**Chrome Configuration:** Already authenticated with Giuseppe's Google account.
**Test Sequence**
#### 1. Authentication & Session Verification
- Navigate to https://ai.dffm.it
- Check if already logged in (session cookie valid)
- If redirected to /login:
- Verify Google SSO button is present
- Click "Sign in with Google"
- Verify redirect to Google (should auto-authenticate)
- Verify redirect back to https://ai.dffm.it/dashboard
- Verify GET /api/me returns correct user data
- Check Header displays: Avatar + "Giuseppe" (or your name)
#### 2. Desktop Layout Testing (viewport: 1920x1080)
**Header:**
- ✅ Logo visible
- ✅ Navigation links present
- ✅ Avatar dropdown opens on click
- ✅ "Sign out" option visible in dropdown
**Sidebar:**
- ✅ Always visible (not hidden on desktop)
- ✅ Navigation items clickable
- ✅ "+ New Note" button visible
**Main Content:**
- ✅ Dashboard loads without errors
- ✅ No layout overflow or broken grids
#### 3. Mobile Layout Testing (viewport: 375x667)
Resize browser to mobile viewport or use DevTools device emulation
**Header:**
- ✅ Hamburger icon visible (replaces full nav)
- ✅ Click hamburger → Sidebar slides in from left
- ✅ Overlay backdrop appears (semi-transparent black)
**Sidebar behavior:**
- ✅ Sidebar has transform -translate-x-full when closed
- ✅ Sidebar slides to transform-none when open
- ✅ Click overlay → Sidebar closes
- ✅ Press ESC key → Sidebar closes
- ✅ Navigation links work on mobile
**Mobile navigation:**
- ✅ No horizontal scroll
- ✅ Touch targets >= 44px (mobile-friendly)
#### 4. Responsive Breakpoints (test at each):
- 640px (sm) - Mobile landscape
- 768px (md) - Tablet portrait (hamburger should disappear, sidebar always visible)
- 1024px (lg) - Tablet landscape
- 1280px (xl) - Desktop
**Verify at each breakpoint:**
- No layout breaks
- No content overflow
- Smooth transitions
- Sidebar visibility toggles correctly at md breakpoint
#### 5. Functional Testing
**5a. "+ New Note" Upload**
- Click "+ New Note" button
- File picker should open
- Select a test file (e.g., .txt, .md, .pdf)
- Verify upload via DevTools Network tab:
- Request: POST /api/ingest
- Body includes workspaceId (current workspace)
- Response: 200 OK or appropriate success code
- Verify success feedback (toast/notification)
- Verify new note appears in notes list
**5b. Sign Out Flow**
- Open avatar dropdown
- Click "Sign out"
- Verify:
- Request: POST /auth/logout
- Response: Clears session cookie
- Redirect to /login
- Verify session is cleared (no auto-login on page reload)
#### 6. Console & Network Monitoring
Open Chrome DevTools and monitor:
**Console:** No errors (red messages)
**Network:**
- All API calls return 200/201/204 (no 4xx/5xx)
- No failed asset loads (CSS, JS, images)
**Performance:**
- Initial load < 3s
- No memory leaks during navigation
- Lighthouse score > 80 (optional but recommended)
### 5.3 Issue Detection & Auto-Fix Loop
For each issue discovered:
**Capture Evidence:**
- Screenshot of the issue
- Browser console errors (copy full stack trace)
- Network tab errors (request/response details)
- Exact steps to reproduce
**Diagnose Root Cause:**
- Identify which component/file is responsible
- Check if it's frontend (client code) or backend (API) issue
- Review recent changes that might have introduced it
**Propose Fix:**
- Determine exact code change needed
- Consider side effects of the fix
- Prefer minimal changes (surgical fixes)
**Apply Fix:**
- Edit the relevant file in /root/second-brain/
- If frontend change: rebuild with `cd /root/second-brain/client && npm run build`
- If backend change: restart server with `pm2 restart second-brain`
**Re-Test:**
- Navigate back to https://ai.dffm.it
- Reproduce the exact steps
- Verify issue is resolved
- Check no new issues introduced
**Document Fix:**
- Add entry to TESTING_REPORT.md (format below)
**Iteration Limit:** Max 3 attempts per issue. If unresolved after 3 attempts, document as "Needs Human Review" and proceed.
### 5.4 Common Issues & Solutions
**Issue:** Mobile menu doesn't close on backdrop click
- **Fix:** Add `onClick={() => onClose()}` to overlay div
- **File:** `client/src/components/layout/Sidebar.tsx`
**Issue:** API calls fail with CORS error
- **Fix:** Add CORS middleware in backend:
```typescript
app.use(cors({ origin: 'https://ai.dffm.it', credentials: true }));
```
- **File:** `server/src/server.ts`
**Issue:** Avatar dropdown doesn't show user name
- **Fix:** Verify GET /api/me is called and state is updated
- **File:** `client/src/components/layout/Header.tsx`
**Issue:** Sidebar overlaps content on tablet
- **Fix:** Check Tailwind breakpoint classes (should be `md:translate-x-0`)
- **File:** `client/src/components/layout/Sidebar.tsx`
**Issue:** Sign out doesn't clear session
- **Fix:** Verify `/auth/logout` clears cookies with correct domain
- **File:** `server/src/routes/auth.ts`
### 5.5 Testing Report Generation
Create `/root/second-brain/TESTING_REPORT.md`:
```markdown
# Testing Report - Second Brain (ai.dffm.it)
**Test Date**: [Current timestamp]
**Tested URL**: https://ai.dffm.it
**Browser**: Chrome (authenticated with giuseppe@dffm.it)
**Tester**: Antigravity Agent
---
## Test Environment
- Backend: Node.js v[X] on Ubuntu
- Frontend: Vite + React + Tailwind CSS
- Server: ai.dffm.it (production)
---
## Issues Found & Fixed
### Issue 1: [Title]
- **Severity**: 🔴 Critical / 🟡 High / 🟢 Medium / ⚪ Low
- **Component**: `client/src/components/...`
- **Description**: [What was wrong]
- **Steps to Reproduce**:
1. [Step 1]
2. [Step 2]
- **Root Cause**: [Why it happened]
- **Fix Applied**:
```typescript
// Before
[old code]
// After
[new code]
```
- **Files Modified:**
- `client/src/components/layout/Header.tsx`
- **Status**: ✅ Resolved / ⏳ In Progress / ❌ Needs Review
[Repeat for each issue]
---
## Test Results Summary
### Authentication ✅
- ✅ Google SSO login works
- ✅ Session persists on refresh
- ✅ User data loads in Header
- ✅ Sign out clears session
### Desktop Layout (1920x1080) ✅
- ✅ Header displays correctly
- ✅ Sidebar always visible
- ✅ Navigation works
- ✅ Avatar dropdown functional
### Mobile Layout (375x667) ✅
- ✅ Hamburger menu visible
- ✅ Sidebar slides in/out
- ✅ Overlay backdrop works
- ✅ ESC key closes menu
- ✅ No horizontal scroll
### Responsive Breakpoints ✅
- ✅ 640px (sm)
- ✅ 768px (md) - Sidebar transition
- ✅ 1024px (lg)
- ✅ 1280px (xl)
### Functional Features ✅
- ✅ New note upload works
- ✅ Workspace selection
- ✅ Sign out flow
### Console & Network ✅
- ✅ No console errors
- ✅ All API calls succeed
- ✅ No failed asset loads
---
## Performance Metrics
- Initial Load: [X]ms
- Time to Interactive: [X]ms
- Bundle Size: [X]KB
- Lighthouse Score: [X]/100
---
## Browser Compatibility
- ✅ Chrome 120+ (primary)
- ⚠️ Firefox (not tested)
- ⚠️ Safari (not tested)
---
## Recommendations
- [Any improvements or optimizations suggested]
- [Security considerations]
- [Performance optimizations]
---
## Sign-off
All critical and high-priority issues resolved. App is production-ready on https://ai.dffm.it.
**Ready for Git Push:** ✅ Yes / ❌ No (reason: ...)
```
---
### 5.6 Execution Checklist
- [ ] App deployed to `https://ai.dffm.it`
- [ ] Chrome browser opened (authenticated session)
- [ ] Authentication flow tested
- [ ] Desktop layout verified (all breakpoints)
- [ ] Mobile layout verified (all interactions)
- [ ] Responsive transitions tested
- [ ] New note upload functional
- [ ] Sign out flow works
- [ ] Console clean (no errors)
- [ ] Network clean (no failed requests)
- [ ] All issues documented and fixed
- [ ] `TESTING_REPORT.md` created
- [ ] Ready for git commit
**Only proceed to PHASE 6 when this checklist is 100% complete.**
---
## PHASE 6: GIT COMMIT & PUSH
### 6.1 Root .gitignore (`/root/second-brain/.gitignore`)
```
node_modules/
dist/
.env
.env.local
*.log
.DS_Store
coverage/
.vscode/
.idea/
```
### 6.2 Git Commands
```bash
cd /root/second-brain
# Initialize repo
git init
# Add all files
git add .
# Commit with testing report reference
git commit -m "refactor: monorepo migration with frontend v2 logic + browser testing fixes
- Migrated backend and frontend into monorepo structure
- Implemented mobile menu with slide-in drawer
- Added user authentication with Google SSO
- Fixed responsive breakpoints and layout issues
- All browser tests passed on ai.dffm.it
- See TESTING_REPORT.md for details"
# Set main branch
git branch -M main
# Add remote (with token)
git remote add origin https://giuseppe:ef6966ed330def9b412f584f80a5e8a6c471ed5a@forgejo.dffm.it/giuseppe/second-brain.git
# Force push (overwrites remote)
git push -u origin main --force
```
---
## VALIDATION CHECKLIST
After execution:
- ✅ Monorepo structure created (server/, client/)
- ✅ Frontend logic injected (mobile menu, auth, etc.)
- ✅ Dependencies installed for both projects
- ✅ Production build successful
- ✅ App accessible at https://ai.dffm.it
- ✅ All browser tests pass
- ✅ All identified issues fixed and documented
- ✅ TESTING_REPORT.md created with all green checkmarks
- ✅ Code committed to git
- ✅ Code pushed to Forgejo successfully
- ✅ Remote repo accessible at https://forgejo.dffm.it/giuseppe/second-brain
---
## EXECUTION INSTRUCTIONS FOR ANTIGRAVITY
1. Execute PHASE 1-4 sequentially without pausing
2. In PHASE 5:
- Use your browser automation to navigate to https://ai.dffm.it
- Chrome is already authenticated → leverage for testing auth flows
- Take screenshots at each test step for documentation
- Use Chrome DevTools to capture console/network issues
- For each fix:
- Rebuild frontend: `cd /root/second-brain/client && npm run build`
- Restart backend: `pm2 restart second-brain`
- Wait 5s for server restart
- Clear browser cache (Ctrl+Shift+R) before re-testing
- Document everything in TESTING_REPORT.md as you go
- If a fix breaks something else → rollback and try alternative
- Only proceed to PHASE 6 when TESTING_REPORT.md shows all checkmarks green
### Success Criteria:
- Zero console errors
- All features work on desktop + mobile
- TESTING_REPORT.md complete with all tests passing
- "Ready for Git Push: ✅ Yes" in testing report
### Fail-safe Rules:
- Maximum 3 fix iterations per issue before escalating
- If critical blocker found → stop and request human review
- If any PHASE fails → stop and report the failure state
- Never proceed to git push if testing report shows failures
### Final Deliverables:
- Working monorepo at `/root/second-brain/`
- Fully tested app at https://ai.dffm.it
- Complete TESTING_REPORT.md with all issues documented
- Git repo pushed to Forgejo with all changes
---
## POST-EXECUTION NOTES
After successful push:
1. **Verify remote repo:** Visit https://forgejo.dffm.it/giuseppe/second-brain and confirm files are there
2. **Monitor production:** Check https://ai.dffm.it still works after push
3. **Update documentation:** Add setup instructions to README.md
4. **Security review:** Remove token from git remote URL (switch to SSH keys)
5. **Backup:** Create backup of /root/second-brain/ before cleanup
6. **Cleanup (optional):**
```bash
# After confirming everything works
rm -rf /root/second-brain-backend
rm -rf /root/client
```
---
**END OF PROMPT**