mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 01:53:30 +01:00
Added new github integration tasks
This commit is contained in:
Richard Osborne
@@ -1,6 +1,6 @@
|
||||
# Phase 3: Editor UX Overhaul - Progress Tracker
|
||||
|
||||
**Last Updated:** 2026-01-14
|
||||
**Last Updated:** 2026-01-18
|
||||
**Overall Status:** 🟡 In Progress
|
||||
|
||||
---
|
||||
@@ -9,27 +9,28 @@
|
||||
|
||||
| Metric | Value |
|
||||
| ------------ | ------- |
|
||||
| Total Tasks | 9 |
|
||||
| Total Tasks | 10 |
|
||||
| Completed | 3 |
|
||||
| In Progress | 1 |
|
||||
| In Progress | 2 |
|
||||
| Not Started | 5 |
|
||||
| **Progress** | **33%** |
|
||||
| **Progress** | **30%** |
|
||||
|
||||
---
|
||||
|
||||
## Task Status
|
||||
|
||||
| Task | Name | Status | Notes |
|
||||
| --------- | ----------------------- | -------------- | --------------------------------------------- |
|
||||
| TASK-001 | Dashboard UX Foundation | 🟢 Complete | Tabbed navigation done |
|
||||
| TASK-001B | Launcher Fixes | 🟢 Complete | All 4 subtasks implemented |
|
||||
| TASK-002 | GitHub Integration | 🟢 Complete | OAuth + basic features done |
|
||||
| TASK-002B | GitHub Advanced | 🟡 In Progress | GIT-004A complete, 5 subtasks remaining |
|
||||
| TASK-003 | Shared Component System | 🔴 Not Started | Prefab system refactor |
|
||||
| TASK-004 | AI Project Creation | 🔴 Not Started | AI scaffolding feature |
|
||||
| TASK-005 | Deployment Automation | 🔴 Not Started | Planning docs only, no implementation |
|
||||
| TASK-006 | Expressions Overhaul | 🔴 Not Started | Enhanced expression nodes |
|
||||
| TASK-007 | App Config | 🟡 In Progress | Runtime ✅, UI mostly done (Monaco debugging) |
|
||||
| Task | Name | Status | Notes |
|
||||
| --------- | --------------------------- | -------------- | --------------------------------------------------------- |
|
||||
| TASK-001 | Dashboard UX Foundation | 🟢 Complete | Tabbed navigation done |
|
||||
| TASK-001B | Launcher Fixes | 🟢 Complete | All 4 subtasks implemented |
|
||||
| TASK-002 | GitHub Integration | 🟢 Complete | OAuth + basic features done |
|
||||
| TASK-002B | GitHub Advanced Integration | 🟡 In Progress | Part 1: GIT-004A-C done. Part 2: GIT-005-011 docs created |
|
||||
| TASK-002C | GitHub Clone & Connect | 🟡 In Progress | Clone from launcher flow |
|
||||
| TASK-003 | Shared Component System | 🔴 Not Started | Prefab system refactor |
|
||||
| TASK-004 | AI Project Creation | 🔴 Not Started | AI scaffolding feature |
|
||||
| TASK-005 | Deployment Automation | 🔴 Not Started | Planning docs only, no implementation |
|
||||
| TASK-006 | Expressions Overhaul | 🔴 Not Started | Enhanced expression nodes |
|
||||
| TASK-007 | App Config | 🟡 In Progress | Runtime ✅, UI mostly done (Monaco debugging) |
|
||||
|
||||
---
|
||||
|
||||
@@ -43,13 +44,15 @@
|
||||
|
||||
## Recent Updates
|
||||
|
||||
| Date | Update |
|
||||
| ---------- | ------------------------------------------------------ |
|
||||
| 2026-01-14 | TASK-002B GIT-004A complete (GitHub Client Foundation) |
|
||||
| 2026-01-07 | Audit completed: corrected TASK-001B, TASK-005 status |
|
||||
| 2026-01-07 | Added TASK-006 and TASK-007 to tracking |
|
||||
| 2026-01-07 | TASK-008 moved to Phase 6 (UBA) |
|
||||
| 2026-01-07 | TASK-000 moved to Phase 9 (Styles) |
|
||||
| Date | Update |
|
||||
| ---------- | ------------------------------------------------------------------------------- |
|
||||
| 2026-01-18 | TASK-002B: Created GIT-005-011 task docs (Live Collaboration & Multi-Community) |
|
||||
| 2026-01-18 | TASK-002B scope expanded to 501-662 hours total |
|
||||
| 2026-01-14 | TASK-002B GIT-004A complete (GitHub Client Foundation) |
|
||||
| 2026-01-07 | Audit completed: corrected TASK-001B, TASK-005 status |
|
||||
| 2026-01-07 | Added TASK-006 and TASK-007 to tracking |
|
||||
| 2026-01-07 | TASK-008 moved to Phase 6 (UBA) |
|
||||
| 2026-01-07 | TASK-000 moved to Phase 9 (Styles) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -329,6 +329,176 @@ Built complete GitHub Pull Requests panel following the same patterns as Issues
|
||||
|
||||
---
|
||||
|
||||
## [2026-01-16] - OAuth Flow Bug Fixes - Complete ✅
|
||||
|
||||
### Summary
|
||||
|
||||
Fixed critical bugs preventing GitHub OAuth from working. The OAuth flow was broken due to two separate OAuth implementations that weren't communicating properly.
|
||||
|
||||
### Root Causes Identified
|
||||
|
||||
1. **Git Path Null Error**: `git.openRepository()` didn't handle when `open()` returns null (not a git repo)
|
||||
2. **Disconnected OAuth Flows**: Two separate OAuth implementations existed:
|
||||
- `GitHubOAuthService.ts` (renderer) - Generated PKCE state, opened browser
|
||||
- `github-oauth-handler.js` (main) - Had separate state, handled callback
|
||||
- These didn't communicate - OAuth callback went to main process, but renderer never received it
|
||||
|
||||
### Files Modified
|
||||
|
||||
**Bug Fix 1 - Git Null Path:**
|
||||
|
||||
- `packages/noodl-git/src/git.ts` - Added null check in `openRepository()` to throw clear error instead of crashing
|
||||
|
||||
**Bug Fix 2 - OAuth Flow:**
|
||||
|
||||
- `packages/noodl-editor/src/editor/src/services/GitHubOAuthService.ts` - Complete rewrite to:
|
||||
- Use IPC to get auth URL from main process (reuses main's state)
|
||||
- Listen for `github-oauth-complete` and `github-oauth-error` IPC events
|
||||
- Properly receive and store tokens after OAuth callback
|
||||
|
||||
**Bug Fix 3 - Error Handling:**
|
||||
|
||||
- `packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/hooks/useGitHubRepository.ts` - Added try/catch around `git.openRepository()` to gracefully handle non-git projects
|
||||
|
||||
**Bug Fix 4 - Initialization:**
|
||||
|
||||
- `packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/GitHubPanel.tsx` - Added:
|
||||
- `GitHubOAuthService.initialize()` call on mount to restore saved tokens
|
||||
- `useEventListener` to react to auth state changes
|
||||
- Loading state while initializing
|
||||
|
||||
### Technical Notes
|
||||
|
||||
**OAuth Flow Now:**
|
||||
|
||||
1. User clicks "Connect GitHub Account"
|
||||
2. GitHubOAuthService calls `ipcRenderer.invoke('github-oauth-start')` - main generates state
|
||||
3. Main returns auth URL, renderer opens in browser
|
||||
4. User authorizes, GitHub redirects to `noodl://github-callback`
|
||||
5. Main process receives callback, validates state (its own), exchanges code for token
|
||||
6. Main sends `github-oauth-complete` IPC event with token + user
|
||||
7. GitHubOAuthService receives event, stores token, updates state
|
||||
8. GitHubPanel re-renders as connected
|
||||
|
||||
**Token Storage:**
|
||||
|
||||
- Main process uses `jsonstorage` + Electron `safeStorage` for encryption
|
||||
- Token persisted across sessions
|
||||
- `initialize()` loads saved token on app start
|
||||
|
||||
### Existing Infrastructure Verified
|
||||
|
||||
The following was already correctly implemented in main.js:
|
||||
|
||||
- `initializeGitHubOAuthHandlers(app)` - Protocol handler registered
|
||||
- `github-save-token` / `github-load-token` / `github-clear-token` IPC handlers
|
||||
- Token encryption using Electron's safeStorage
|
||||
|
||||
### Error Messages Improved
|
||||
|
||||
- "Not a git repository: /path" instead of cryptic "path must be string, received null"
|
||||
- Console logging for OAuth flow stages for debugging
|
||||
|
||||
### Testing Required
|
||||
|
||||
- [ ] Click "Connect GitHub Account" and complete OAuth flow
|
||||
- [ ] Verify token is stored and user info displayed
|
||||
- [ ] Close and reopen app, verify session is restored
|
||||
- [ ] Test with non-git project (should show graceful error)
|
||||
- [ ] Test with GitHub repo (should detect owner/repo)
|
||||
|
||||
---
|
||||
|
||||
## [2026-01-16] - Session 2: Critical Bug Fixes & Unification - Complete ✅
|
||||
|
||||
### Summary
|
||||
|
||||
Second bug-fix session addressing infinite loops, jsonstorage errors, IPC targeting issues, and unifying OAuth across launcher and editor.
|
||||
|
||||
### Bugs Fixed
|
||||
|
||||
**Bug 1: `jsonstorage.getSync` doesn't exist**
|
||||
|
||||
- **File:** `packages/noodl-editor/src/main/main.js` (line ~672)
|
||||
- **Fix:** The jsonstorage module only has async `get(key, callback)`. Changed to Promise wrapper.
|
||||
|
||||
```javascript
|
||||
const stored = await new Promise((resolve) => {
|
||||
jsonstorage.get('github.token', (data) => resolve(data));
|
||||
});
|
||||
```
|
||||
|
||||
**Bug 2: IPC event not reaching renderer**
|
||||
|
||||
- **File:** `packages/noodl-editor/src/main/github-oauth-handler.js`
|
||||
- **Fix:** Was sending to `windows[0]` which might be viewer/floating window, not editor. Now broadcasts to ALL windows.
|
||||
|
||||
```javascript
|
||||
windows.forEach((win, index) => {
|
||||
win.webContents.send('github-oauth-complete', result);
|
||||
});
|
||||
```
|
||||
|
||||
**Bug 3: Infinite loop in useIssues hook**
|
||||
|
||||
- **File:** `packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/hooks/useIssues.ts`
|
||||
- **Root Cause:** `filters` object in useEffect deps creates new reference on every render
|
||||
- **Fix:** Use `useRef` for filters and `JSON.stringify(filters)` for dependency comparison
|
||||
|
||||
```javascript
|
||||
const filtersRef = useRef(filters);
|
||||
filtersRef.current = filters;
|
||||
const filtersKey = JSON.stringify(filters);
|
||||
useEffect(() => { ... }, [owner, repo, filtersKey, enabled, refetch]);
|
||||
```
|
||||
|
||||
**Bug 4: Infinite loop in usePullRequests hook**
|
||||
|
||||
- **File:** `packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/hooks/usePullRequests.ts`
|
||||
- **Fix:** Same pattern as useIssues - ref for filters, JSON serialization for deps
|
||||
|
||||
### New Features
|
||||
|
||||
**Launcher OAuth Integration**
|
||||
|
||||
- **File:** `packages/noodl-editor/src/editor/src/pages/ProjectsPage/ProjectsPage.tsx`
|
||||
- Added state: `githubIsAuthenticated`, `githubIsConnecting`, `githubUser`
|
||||
- Added handlers: `handleGitHubConnect`, `handleGitHubDisconnect`
|
||||
- Listens for auth state changes via `useEventListener`
|
||||
- Launcher button now initiates real OAuth flow
|
||||
|
||||
**CredentialsSection OAuth Migration**
|
||||
|
||||
- **File:** `packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/GitProviderPopout/sections/CredentialsSection.tsx`
|
||||
- Migrated from old `GitHubAuth` service to unified `GitHubOAuthService`
|
||||
- Now shares token storage with GitHubPanel and Launcher
|
||||
|
||||
### Testing Results
|
||||
|
||||
| Test | Result |
|
||||
| ----------------------------------- | ---------------------------- |
|
||||
| OAuth from GitHubPanel in project | ✅ Works |
|
||||
| OAuth from Launcher header button | ✅ Works |
|
||||
| OAuth from CredentialsSection | ✅ Works (migrated) |
|
||||
| Token persistence across restart | ✅ Works (without clean:all) |
|
||||
| Issues/PRs single request (no loop) | ✅ Works |
|
||||
| 404 error handling (no loop) | ✅ Works |
|
||||
|
||||
### Technical Notes
|
||||
|
||||
- All three OAuth entry points now use `GitHubOAuthService.instance`
|
||||
- Token stored via IPC (`github-save-token`) in main process using Electron's safeStorage
|
||||
- `clean:all` will wipe tokens (expected - wipes electron-store data)
|
||||
|
||||
### Future Task Created
|
||||
|
||||
Created `TASK-002C-github-clone-and-connect/README.md` documenting two new features:
|
||||
|
||||
- Subtask A: Clone Noodl projects from GitHub (launcher view)
|
||||
- Subtask B: Connect unconnected project to GitHub (create/link repo)
|
||||
|
||||
---
|
||||
|
||||
## Progress Summary
|
||||
|
||||
| Sub-Task | Status | Started | Completed |
|
||||
@@ -336,6 +506,7 @@ Built complete GitHub Pull Requests panel following the same patterns as Issues
|
||||
| GIT-004A: OAuth & Client | ✅ Complete | 2026-01-14 | 2026-01-14 |
|
||||
| GIT-004B: Issues Read | ✅ Complete | 2026-01-14 | 2026-01-14 |
|
||||
| GIT-004C: PRs Read | ✅ Complete | 2026-01-15 | 2026-01-15 |
|
||||
| OAuth Bug Fixes | ✅ Complete | 2026-01-16 | 2026-01-16 |
|
||||
| GIT-004D: Issues CRUD | Not Started | - | - |
|
||||
| GIT-004E: Component Linking | Not Started | - | - |
|
||||
| GIT-004F: Dashboard | Not Started | - | - |
|
||||
@@ -381,3 +552,94 @@ _Track user feedback during development/testing_
|
||||
| Date | Feedback | Source | Action |
|
||||
| ---- | -------- | ------ | ------ |
|
||||
| - | - | - | - |
|
||||
|
||||
---
|
||||
|
||||
## [2026-01-18] - VersionControlPanel Discovery + GIT-005-011 Documentation ✅
|
||||
|
||||
### Summary
|
||||
|
||||
Major documentation effort creating GIT-005 through GIT-011 task specs (Live Collaboration & Multi-Community System), plus critical discovery that the existing VersionControlPanel is already 100% React with full visual diff support.
|
||||
|
||||
### Key Discovery: VersionControlPanel is React! 🎉
|
||||
|
||||
**Not jQuery** - The entire VersionControlPanel is modern React:
|
||||
|
||||
- React functional components with hooks (useState, useEffect, useRef)
|
||||
- Context API (VersionControlContext)
|
||||
- TypeScript throughout
|
||||
- Uses @noodl-core-ui design system
|
||||
|
||||
**Visual diff system already works**:
|
||||
|
||||
- Click any commit in History tab
|
||||
- See green nodes (additions), red nodes (deletions)
|
||||
- Component-level diff visualization
|
||||
- `DiffList.tsx`, `CommitChangesDiff.tsx` already implement this
|
||||
|
||||
### Integration Strategy Created
|
||||
|
||||
**Approach**: Extend VersionControlPanel with GitHub tabs instead of maintaining separate GitHubPanel.
|
||||
|
||||
**Benefits**:
|
||||
|
||||
- Single unified panel for all version control
|
||||
- Existing visual diffs work unchanged
|
||||
- No rewrite needed - just add tabs
|
||||
- Estimated 11-16 hours vs 70-90 for separate panel
|
||||
|
||||
**Documentation**: `GIT-INTEGRATION-STRATEGY.md`
|
||||
|
||||
### Task Documentation Created (GIT-005-011)
|
||||
|
||||
**Part 2: Live Collaboration & Multi-Community System**
|
||||
|
||||
| Task | Name | Hours | Files Created |
|
||||
| ------- | ------------------------ | ------- | -------------------------------------------- |
|
||||
| GIT-005 | Community Infrastructure | 60-80 | `GIT-005-community-infrastructure/README.md` |
|
||||
| GIT-006 | Server Infrastructure | 80-100 | `GIT-006-server-infrastructure/README.md` |
|
||||
| GIT-007 | WebRTC Collaboration | 100-130 | `GIT-007-webrtc-collaboration/README.md` |
|
||||
| GIT-008 | Notification System | 50-70 | `GIT-008-notification-system/README.md` |
|
||||
| GIT-009 | Community Tab UI | 80-100 | `GIT-009-community-ui/README.md` |
|
||||
| GIT-010 | Session Discovery | 50-70 | `GIT-010-session-discovery/README.md` |
|
||||
| GIT-011 | Integration & Polish | 61-82 | `GIT-011-integration-polish/README.md` |
|
||||
|
||||
**Total Part 2 Effort**: 431-572 hours
|
||||
|
||||
### Files Created
|
||||
|
||||
- `GIT-005-community-infrastructure/README.md`
|
||||
- `GIT-006-server-infrastructure/README.md`
|
||||
- `GIT-007-webrtc-collaboration/README.md`
|
||||
- `GIT-008-notification-system/README.md`
|
||||
- `GIT-009-community-ui/README.md`
|
||||
- `GIT-010-session-discovery/README.md`
|
||||
- `GIT-011-integration-polish/README.md`
|
||||
- `GIT-INTEGRATION-STRATEGY.md`
|
||||
|
||||
### Files Modified
|
||||
|
||||
- `README.md` - Added Part 2 section, integration strategy reference
|
||||
- `CHECKLIST.md` - Added GIT-005-011 checklists
|
||||
- `PROGRESS.md` (Phase 3) - Updated task list and recent updates
|
||||
|
||||
### VersionControlPanel Components Verified
|
||||
|
||||
All these are modern React:
|
||||
|
||||
- `LocalChanges.tsx` - Uncommitted changes
|
||||
- `History.tsx` - Commit history
|
||||
- `HistoryCommitDiff.tsx` - Visual commit diff
|
||||
- `CommitChangesDiff.tsx` - Diff logic
|
||||
- `DiffList.tsx` - Green/red node renderer
|
||||
- `BranchList.tsx` - Branch management
|
||||
- `BranchMerge.tsx` - Merge operations
|
||||
- `MergeConflicts.tsx` - Conflict resolution
|
||||
- `Stashes.tsx` - Git stash
|
||||
|
||||
### Next Steps
|
||||
|
||||
1. **Immediate**: Integrate Issues/PRs as tabs in VersionControlPanel
|
||||
2. **Short-term**: Enhance GitProviderPopout with OAuth
|
||||
3. **Medium-term**: Begin GIT-005 Community Infrastructure
|
||||
4. **Long-term**: GIT-006-011 server and collaboration features
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
# GIT-004: Implementation Checklist
|
||||
|
||||
> **⚠️ IMPORTANT: Integration Strategy Update (Jan 18, 2026)**
|
||||
>
|
||||
> GIT-004A-C were implemented with a separate `GitHubPanel`. However, we discovered that the existing `VersionControlPanel` is already 100% React with full visual diff support.
|
||||
>
|
||||
> **Going forward (GIT-004D-F):** We will integrate GitHub features into the existing VersionControlPanel as new tabs, rather than maintaining a separate panel.
|
||||
>
|
||||
> See **[GIT-INTEGRATION-STRATEGY.md](./GIT-INTEGRATION-STRATEGY.md)** for the full plan.
|
||||
>
|
||||
> **What this means for the checklist:**
|
||||
>
|
||||
> - GIT-004A-C: ✅ Complete (GitHubPanel code exists and works)
|
||||
> - GIT-004D-F: Will move components from GitHubPanel → VersionControlPanel tabs
|
||||
|
||||
---
|
||||
|
||||
## Pre-Implementation
|
||||
|
||||
- [ ] Review existing `packages/noodl-git/` code
|
||||
- [ ] Review `VersionControlPanel/` patterns
|
||||
- [x] Review existing `packages/noodl-git/` code
|
||||
- [x] Review `VersionControlPanel/` patterns
|
||||
- [ ] Set up GitHub App in GitHub Developer Settings (for testing)
|
||||
- [ ] Document GitHub App creation steps for users
|
||||
|
||||
@@ -381,17 +396,152 @@
|
||||
|
||||
---
|
||||
|
||||
## Progress Summary
|
||||
## Progress Summary - Part 1: GitHub Project Management
|
||||
|
||||
| Sub-Task | Status | Started | Completed | Hours |
|
||||
|----------|--------|---------|-----------|-------|
|
||||
| GIT-004A: OAuth & Client | Not Started | - | - | - |
|
||||
| GIT-004B: Issues Read | Not Started | - | - | - |
|
||||
| GIT-004C: PRs Read | Not Started | - | - | - |
|
||||
| GIT-004D: Issues CRUD | Not Started | - | - | - |
|
||||
| GIT-004E: Component Linking | Not Started | - | - | - |
|
||||
| GIT-004F: Dashboard | Not Started | - | - | - |
|
||||
| Integration & Polish | Not Started | - | - | - |
|
||||
| Sub-Task | Status | Started | Completed | Hours |
|
||||
| --------------------------- | ----------- | ------- | --------- | ----- |
|
||||
| GIT-004A: OAuth & Client | ✅ Complete | - | - | - |
|
||||
| GIT-004B: Issues Read | ✅ Complete | - | - | - |
|
||||
| GIT-004C: PRs Read | ✅ Complete | - | - | - |
|
||||
| GIT-004D: Issues CRUD | Not Started | - | - | - |
|
||||
| GIT-004E: Component Linking | Not Started | - | - | - |
|
||||
| GIT-004F: Dashboard | Not Started | - | - | - |
|
||||
| Integration & Polish | Not Started | - | - | - |
|
||||
|
||||
**Total Estimated:** 70-90 hours
|
||||
**Part 1 Estimated:** 70-90 hours
|
||||
**Part 1 Actual:** - hours
|
||||
|
||||
---
|
||||
|
||||
## Part 2: Live Collaboration & Multi-Community (GIT-005-011)
|
||||
|
||||
### GIT-005: Community Infrastructure (60-80 hours)
|
||||
|
||||
- [ ] Create `opennoodl-community` template repository
|
||||
- [ ] Implement `community.json` schema and validation
|
||||
- [ ] Create GitHub Actions workflows for validation
|
||||
- [ ] Implement `CommunityManager` service
|
||||
- [ ] Create community settings UI panel
|
||||
- [ ] Add "Add Community" flow
|
||||
- [ ] Add "Create Community" flow (fork template)
|
||||
- [ ] Implement background sync
|
||||
- [ ] Add server health monitoring
|
||||
- [ ] Create community switcher UI
|
||||
|
||||
### GIT-006: Server Infrastructure (80-100 hours)
|
||||
|
||||
**Signaling Server:**
|
||||
|
||||
- [ ] Create repository
|
||||
- [ ] Implement WebSocket room management
|
||||
- [ ] Implement signal relay
|
||||
- [ ] Add health check/metrics
|
||||
- [ ] Create Dockerfile
|
||||
- [ ] Deploy to production
|
||||
|
||||
**Sync Server:**
|
||||
|
||||
- [ ] Create repository
|
||||
- [ ] Implement Yjs WebSocket provider
|
||||
- [ ] Add optional LevelDB persistence
|
||||
- [ ] Create Dockerfile
|
||||
- [ ] Deploy to production
|
||||
|
||||
**Notification Server:**
|
||||
|
||||
- [ ] Create repository
|
||||
- [ ] Implement WebSocket authentication
|
||||
- [ ] Implement notification storage
|
||||
- [ ] Implement TTL cleanup
|
||||
- [ ] Create Dockerfile
|
||||
- [ ] Deploy to production
|
||||
|
||||
### GIT-007: WebRTC Collaboration Client (100-130 hours)
|
||||
|
||||
- [ ] Create `CollaborationManager` service
|
||||
- [ ] Implement session creation (host)
|
||||
- [ ] Implement session joining (guest)
|
||||
- [ ] Implement signaling server communication
|
||||
- [ ] Implement WebRTC peer connections
|
||||
- [ ] Set up Yjs document structure
|
||||
- [ ] Implement WebRTC provider (y-webrtc)
|
||||
- [ ] Implement WebSocket fallback (y-websocket)
|
||||
- [ ] Sync project to Yjs
|
||||
- [ ] Implement cursor broadcasting
|
||||
- [ ] Implement selection broadcasting
|
||||
- [ ] Implement local audio/video capture
|
||||
- [ ] Display remote media streams
|
||||
- [ ] Create collaboration toolbar UI
|
||||
- [ ] Create participant list panel
|
||||
|
||||
### GIT-008: Notification System (50-70 hours)
|
||||
|
||||
- [ ] Create `NotificationManager` service
|
||||
- [ ] Implement WebSocket connection
|
||||
- [ ] Implement notification fetching/parsing
|
||||
- [ ] Create `NotificationToast` component
|
||||
- [ ] Create toast queue system
|
||||
- [ ] Create `NotificationCenter` panel
|
||||
- [ ] Add notification badge
|
||||
- [ ] Implement Electron desktop notifications
|
||||
- [ ] Add notification settings
|
||||
|
||||
### GIT-009: Community Tab UI (80-100 hours)
|
||||
|
||||
- [ ] Create `CommunityPanel` component
|
||||
- [ ] Create tab navigation
|
||||
- [ ] Implement Home view
|
||||
- [ ] Implement Sessions view
|
||||
- [ ] Implement Components view
|
||||
- [ ] Implement Learn view
|
||||
- [ ] Implement Discuss view (GitHub Discussions)
|
||||
- [ ] Implement Jobs view
|
||||
- [ ] Add loading states and skeletons
|
||||
- [ ] Add error handling
|
||||
|
||||
### GIT-010: Session Discovery (50-70 hours)
|
||||
|
||||
- [ ] Create `DeepLinkHandler` service
|
||||
- [ ] Register `opennoodl://` protocol in Electron
|
||||
- [ ] Create `SessionPreview` dialog
|
||||
- [ ] Create `QuickJoinWidget` component
|
||||
- [ ] Create `SessionHistoryManager` service
|
||||
- [ ] Implement favorites
|
||||
- [ ] Add "Copy Link" to active sessions
|
||||
- [ ] Test cross-platform deep links
|
||||
|
||||
### GIT-011: Integration & Polish (61-82 hours)
|
||||
|
||||
- [ ] Create comprehensive test plan
|
||||
- [ ] End-to-end testing of all flows
|
||||
- [ ] Performance profiling and optimization
|
||||
- [ ] Write user documentation
|
||||
- [ ] Write community setup guide
|
||||
- [ ] Create demo video
|
||||
- [ ] Deploy servers to production
|
||||
- [ ] Set up monitoring
|
||||
- [ ] Complete launch checklist
|
||||
|
||||
---
|
||||
|
||||
## Progress Summary - Part 2: Live Collaboration
|
||||
|
||||
| Sub-Task | Name | Status | Hours |
|
||||
| -------- | ------------------------ | ----------- | ----- |
|
||||
| GIT-005 | Community Infrastructure | Not Started | - |
|
||||
| GIT-006 | Server Infrastructure | Not Started | - |
|
||||
| GIT-007 | WebRTC Collaboration | Not Started | - |
|
||||
| GIT-008 | Notification System | Not Started | - |
|
||||
| GIT-009 | Community Tab UI | Not Started | - |
|
||||
| GIT-010 | Session Discovery | Not Started | - |
|
||||
| GIT-011 | Integration & Polish | Not Started | - |
|
||||
|
||||
**Part 2 Estimated:** 431-572 hours
|
||||
**Part 2 Actual:** - hours
|
||||
|
||||
---
|
||||
|
||||
## Overall Progress
|
||||
|
||||
**Total Estimated:** 501-662 hours
|
||||
**Total Actual:** - hours
|
||||
|
||||
@@ -0,0 +1,279 @@
|
||||
# GIT-005: Community Infrastructure & Template Repository
|
||||
|
||||
## Overview
|
||||
|
||||
**Priority:** High
|
||||
**Estimated Hours:** 60-80
|
||||
**Dependencies:** GIT-004A (GitHub OAuth)
|
||||
**Status:** 🔴 Not Started
|
||||
|
||||
Create the foundational community infrastructure that enables users to fork and operate their own OpenNoodl communities. This includes the community template repository structure, server deployment templates, and community management system.
|
||||
|
||||
---
|
||||
|
||||
## Strategic Context
|
||||
|
||||
This task is part of the **Live Collaboration & Multi-Community System** (GIT-5 through GIT-11), which transforms OpenNoodl into a collaborative platform with:
|
||||
|
||||
- Multi-community management (join multiple communities simultaneously)
|
||||
- Live collaboration sessions with audio/video chat
|
||||
- Component library discovery across communities
|
||||
- Community template repository (forkable)
|
||||
- Self-hosted infrastructure options
|
||||
|
||||
---
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### 1. Community Template Repository
|
||||
|
||||
Create a new repository: `opennoodl-community` that serves as the template for all communities.
|
||||
|
||||
**Repository Structure:**
|
||||
|
||||
```
|
||||
opennoodl-community/
|
||||
├── .github/
|
||||
│ ├── workflows/
|
||||
│ │ ├── validate-community.yml # Validates community.json schema
|
||||
│ │ ├── sync-discussions.yml # Syncs discussion metadata
|
||||
│ │ ├── update-feeds.yml # Updates tutorial/showcase feeds
|
||||
│ │ └── publish-sessions.yml # Updates public session list
|
||||
│ └── ISSUE_TEMPLATE/
|
||||
│ ├── component-submission.yml
|
||||
│ ├── tutorial-submission.yml
|
||||
│ └── session-request.yml
|
||||
│
|
||||
├── community.json # Community metadata (CRITICAL)
|
||||
├── README.md # Community home page
|
||||
├── CODE_OF_CONDUCT.md # Community guidelines
|
||||
├── CONTRIBUTING.md # How to contribute
|
||||
│
|
||||
├── components/
|
||||
│ ├── README.md # Component library guide
|
||||
│ ├── featured.json # Curated components
|
||||
│ └── registry.json # All registered components
|
||||
│
|
||||
├── tutorials/
|
||||
│ ├── README.md # Learning resources hub
|
||||
│ ├── beginner/
|
||||
│ │ └── index.json # Beginner tutorials metadata
|
||||
│ ├── intermediate/
|
||||
│ │ └── index.json
|
||||
│ └── advanced/
|
||||
│ └── index.json
|
||||
│
|
||||
├── showcase/
|
||||
│ ├── README.md # Featured projects
|
||||
│ ├── projects.json # Project submissions
|
||||
│ └── templates/
|
||||
│ └── project-template.json
|
||||
│
|
||||
├── jobs/
|
||||
│ ├── README.md # Job board guide
|
||||
│ └── listings.json # Current listings (PRs to add)
|
||||
│
|
||||
├── collaboration/
|
||||
│ ├── README.md # Collaboration guide
|
||||
│ ├── public-sessions.json # Active public sessions
|
||||
│ └── session-template.json # Template for session metadata
|
||||
│
|
||||
└── config/
|
||||
├── servers.json # Server endpoints
|
||||
├── features.json # Feature flags
|
||||
└── notifications.json # Notification settings
|
||||
```
|
||||
|
||||
### 2. Community Metadata Schema
|
||||
|
||||
**File: `community.json`**
|
||||
|
||||
This file is the single source of truth for community configuration.
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "https://opennoodl.org/schemas/community.v1.json",
|
||||
"version": "1.0.0",
|
||||
"community": {
|
||||
"id": "opennoodl-official",
|
||||
"name": "OpenNoodl Official Community",
|
||||
"description": "The official OpenNoodl visual programming community",
|
||||
"type": "public",
|
||||
"owner": {
|
||||
"github": "The-Low-Code-Foundation",
|
||||
"name": "Low Code Foundation",
|
||||
"website": "https://opennoodl.org",
|
||||
"contact": "community@opennoodl.org"
|
||||
},
|
||||
"repository": "https://github.com/The-Low-Code-Foundation/opennoodl-community",
|
||||
"createdAt": "2026-01-18T00:00:00Z",
|
||||
"updatedAt": "2026-01-18T00:00:00Z"
|
||||
},
|
||||
"servers": {
|
||||
"signaling": {
|
||||
"url": "wss://signal.opennoodl.org",
|
||||
"healthCheck": "https://signal.opennoodl.org/health"
|
||||
},
|
||||
"sync": {
|
||||
"url": "wss://sync.opennoodl.org",
|
||||
"healthCheck": "https://sync.opennoodl.org/health"
|
||||
},
|
||||
"turn": {
|
||||
"urls": ["turn:relay.opennoodl.org:3478"],
|
||||
"username": "opennoodl",
|
||||
"credentialType": "password"
|
||||
},
|
||||
"notifications": {
|
||||
"url": "wss://notify.opennoodl.org",
|
||||
"healthCheck": "https://notify.opennoodl.org/health"
|
||||
}
|
||||
},
|
||||
"features": {
|
||||
"discussions": true,
|
||||
"components": true,
|
||||
"tutorials": true,
|
||||
"showcase": true,
|
||||
"jobs": true,
|
||||
"collaboration": {
|
||||
"enabled": true,
|
||||
"publicSessions": true,
|
||||
"privateSessions": true,
|
||||
"maxSessionSize": 10,
|
||||
"audioEnabled": true,
|
||||
"videoEnabled": false,
|
||||
"screenShareEnabled": true,
|
||||
"requireAuth": true
|
||||
},
|
||||
"notifications": {
|
||||
"enabled": true,
|
||||
"channels": ["discussions", "sessions", "components", "invites"],
|
||||
"persistDays": 30
|
||||
}
|
||||
},
|
||||
"branding": {
|
||||
"primaryColor": "#FF6B6B",
|
||||
"secondaryColor": "#4ECDC4",
|
||||
"logo": "https://opennoodl.org/community-logo.png",
|
||||
"favicon": "https://opennoodl.org/favicon.ico",
|
||||
"customCSS": null
|
||||
},
|
||||
"moderation": {
|
||||
"moderators": ["community-admin"],
|
||||
"requireApproval": {
|
||||
"components": false,
|
||||
"tutorials": true,
|
||||
"showcaseProjects": true,
|
||||
"jobs": false
|
||||
},
|
||||
"autoModerationEnabled": true,
|
||||
"bannedUsers": []
|
||||
},
|
||||
"integrations": {
|
||||
"github": {
|
||||
"org": "The-Low-Code-Foundation",
|
||||
"discussionsRepo": "The-Low-Code-Foundation/opennoodl-community",
|
||||
"issuesRepo": "The-Low-Code-Foundation/OpenNoodl"
|
||||
},
|
||||
"discord": {
|
||||
"enabled": false,
|
||||
"webhookUrl": null,
|
||||
"serverId": null
|
||||
},
|
||||
"slack": {
|
||||
"enabled": false,
|
||||
"webhookUrl": null
|
||||
}
|
||||
},
|
||||
"limits": {
|
||||
"maxComponentsPerUser": 50,
|
||||
"maxSessionsPerUser": 5,
|
||||
"maxInvitesPerSession": 20,
|
||||
"rateLimit": {
|
||||
"sessionsPerHour": 10,
|
||||
"invitesPerHour": 50
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. GitHub Actions Workflows
|
||||
|
||||
See `GIT-5-to-GIT-11-Live-Collaboration-Community-System.md` for complete workflow implementations.
|
||||
|
||||
### 4. Editor Integration - CommunityManager Service
|
||||
|
||||
**File: `packages/noodl-editor/src/editor/src/services/CommunityManager.ts`**
|
||||
|
||||
Key responsibilities:
|
||||
|
||||
- Load and validate community configurations from GitHub repos
|
||||
- Manage multiple community memberships
|
||||
- Background sync of community configs
|
||||
- Server health monitoring
|
||||
- Community switching
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
- [ ] Create `opennoodl-community` template repository with full structure
|
||||
- [ ] Implement `community.json` schema and JSON Schema validation
|
||||
- [ ] Create GitHub Actions workflows for validation and sync
|
||||
- [ ] Implement `CommunityManager` service in editor
|
||||
- [ ] Create community settings UI panel
|
||||
- [ ] Add "Add Community" flow (paste GitHub URL)
|
||||
- [ ] Add "Create Community" flow (fork template)
|
||||
- [ ] Implement background sync for community configs
|
||||
- [ ] Add server health monitoring
|
||||
- [ ] Create community switcher UI component
|
||||
|
||||
---
|
||||
|
||||
## Verification Steps
|
||||
|
||||
- [ ] Can fork `opennoodl-community` template and customize `community.json`
|
||||
- [ ] GitHub Actions validate configuration on push
|
||||
- [ ] Editor can add community by pasting GitHub URL
|
||||
- [ ] Editor validates community config and checks server health
|
||||
- [ ] Can switch between multiple communities
|
||||
- [ ] Background sync updates community configs
|
||||
- [ ] Invalid communities show error states
|
||||
- [ ] Can remove communities (except official)
|
||||
|
||||
---
|
||||
|
||||
## Files to Create
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/services/
|
||||
├── CommunityManager.ts # Community management service
|
||||
├── CommunityTypes.ts # TypeScript interfaces
|
||||
└── CommunityValidation.ts # Schema validation
|
||||
|
||||
packages/noodl-editor/src/editor/src/views/panels/CommunityPanel/
|
||||
├── CommunitySettings.tsx # Settings UI
|
||||
├── CommunitySettings.module.scss
|
||||
├── components/
|
||||
│ ├── CommunitySwitcher.tsx # Dropdown to switch communities
|
||||
│ ├── AddCommunityDialog.tsx # Add by URL dialog
|
||||
│ └── CommunityHealthIndicator.tsx # Server health display
|
||||
└── hooks/
|
||||
└── useCommunityManager.ts # React hook for manager
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Official OpenNoodl community cannot be removed (hardcoded)
|
||||
- Community configs are cached locally for offline access
|
||||
- Server health checks run every sync cycle (15 minutes)
|
||||
- Failed health checks show warning but don't remove community
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **GIT-006**: Server Infrastructure (signaling, sync, notifications servers)
|
||||
- **GIT-007**: WebRTC Collaboration Client
|
||||
- **GIT-009**: Community Tab UI/UX
|
||||
@@ -0,0 +1,330 @@
|
||||
# GIT-006: Server Infrastructure (Signaling, Sync, Notifications)
|
||||
|
||||
## Overview
|
||||
|
||||
**Priority:** Critical
|
||||
**Estimated Hours:** 80-100
|
||||
**Dependencies:** GIT-005 (Community Infrastructure)
|
||||
**Status:** 🔴 Not Started
|
||||
|
||||
Build the three core server components required for live collaboration and notifications:
|
||||
|
||||
1. **Signaling Server** - WebRTC peer discovery
|
||||
2. **Sync Server** - WebSocket fallback for CRDT sync
|
||||
3. **Notification Server** - Persistent cross-session notifications
|
||||
|
||||
---
|
||||
|
||||
## Strategic Context
|
||||
|
||||
These servers are the backbone of the collaboration system. They're designed to be:
|
||||
|
||||
- **Stateless** - Horizontally scalable
|
||||
- **Self-hostable** - Community operators can run their own
|
||||
- **Lightweight** - Minimal dependencies, easy to deploy
|
||||
- **Observable** - Health checks, metrics, logging
|
||||
|
||||
---
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### 1. Signaling Server (WebRTC Peer Discovery)
|
||||
|
||||
Minimal WebSocket server that helps peers find each other for WebRTC connections. **No project data passes through this server.**
|
||||
|
||||
**Repository:** `opennoodl-signaling-server`
|
||||
|
||||
**Key Features:**
|
||||
|
||||
- Room-based peer management
|
||||
- WebRTC signal relay (SDP, ICE candidates)
|
||||
- Heartbeat for dead connection detection
|
||||
- Invite forwarding for online users
|
||||
- Prometheus-compatible metrics
|
||||
|
||||
**Protocol Messages:**
|
||||
|
||||
| Message Type | Direction | Description |
|
||||
| ------------- | ---------------- | --------------------------- |
|
||||
| `join` | Client → Server | Join a collaboration room |
|
||||
| `joined` | Server → Client | Confirmation with peer list |
|
||||
| `peer-joined` | Server → Clients | New peer joined room |
|
||||
| `peer-left` | Server → Clients | Peer left room |
|
||||
| `signal` | Bidirectional | WebRTC signaling data |
|
||||
| `invite` | Client → Server | Invite user to session |
|
||||
| `error` | Server → Client | Error notification |
|
||||
|
||||
**Environment Variables:**
|
||||
|
||||
| Variable | Default | Description |
|
||||
| -------------------- | ------- | ----------------------- |
|
||||
| `PORT` | 4444 | Server port |
|
||||
| `MAX_ROOM_SIZE` | 20 | Maximum peers per room |
|
||||
| `HEARTBEAT_INTERVAL` | 30000 | Heartbeat interval (ms) |
|
||||
|
||||
**Endpoints:**
|
||||
|
||||
| Endpoint | Method | Description |
|
||||
| ---------- | --------- | --------------------------- |
|
||||
| `/health` | GET | Health check (returns JSON) |
|
||||
| `/metrics` | GET | Prometheus metrics |
|
||||
| `/` | WebSocket | Signaling connection |
|
||||
|
||||
---
|
||||
|
||||
### 2. Sync Server (WebSocket Fallback)
|
||||
|
||||
Traditional WebSocket server using Yjs for CRDT synchronization. Used when WebRTC peer-to-peer fails.
|
||||
|
||||
**Repository:** `opennoodl-sync-server`
|
||||
|
||||
**Key Features:**
|
||||
|
||||
- Yjs WebSocket provider compatibility
|
||||
- Optional LevelDB persistence
|
||||
- Automatic garbage collection
|
||||
- Document isolation by room
|
||||
|
||||
**Environment Variables:**
|
||||
|
||||
| Variable | Default | Description |
|
||||
| -------------------- | -------- | -------------------------- |
|
||||
| `PORT` | 4445 | Server port |
|
||||
| `PERSIST_DIR` | `./data` | Persistence directory |
|
||||
| `ENABLE_PERSISTENCE` | `true` | Enable LevelDB persistence |
|
||||
|
||||
**Dependencies:**
|
||||
|
||||
- `yjs` - CRDT library
|
||||
- `y-websocket` - WebSocket provider
|
||||
- `y-leveldb` - Optional persistence
|
||||
|
||||
---
|
||||
|
||||
### 3. Notification Server (Persistent Notifications)
|
||||
|
||||
Server for managing cross-session notifications (invites, community events, mentions).
|
||||
|
||||
**Repository:** `opennoodl-notification-server`
|
||||
|
||||
**Key Features:**
|
||||
|
||||
- WebSocket-based real-time delivery
|
||||
- Persistent storage (survives server restart)
|
||||
- Automatic TTL-based cleanup
|
||||
- Multi-device support (same user on multiple devices)
|
||||
- Notification types: invite, mention, thread, session, component, system
|
||||
|
||||
**Protocol Messages:**
|
||||
|
||||
| Message Type | Direction | Description |
|
||||
| --------------------- | --------------- | ------------------------- |
|
||||
| `authenticate` | Client → Server | Authenticate with user ID |
|
||||
| `authenticated` | Server → Client | Auth confirmation |
|
||||
| `get-notifications` | Client → Server | Request notification list |
|
||||
| `notifications` | Server → Client | List of notifications |
|
||||
| `notification` | Server → Client | New notification |
|
||||
| `mark-read` | Client → Server | Mark notification as read |
|
||||
| `delete-notification` | Client → Server | Delete a notification |
|
||||
| `send-notification` | Client → Server | Send to another user |
|
||||
|
||||
**Environment Variables:**
|
||||
|
||||
| Variable | Default | Description |
|
||||
| ---------- | ---------------------- | -------------------------- |
|
||||
| `PORT` | 4446 | Server port |
|
||||
| `DB_FILE` | `./notifications.json` | Database file path |
|
||||
| `TTL_DAYS` | 30 | Notification expiry (days) |
|
||||
|
||||
---
|
||||
|
||||
## Deployment Options
|
||||
|
||||
### Docker Compose (Recommended for Self-Hosting)
|
||||
|
||||
```yaml
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
signaling:
|
||||
build: ./opennoodl-signaling-server
|
||||
ports:
|
||||
- '4444:4444'
|
||||
environment:
|
||||
- PORT=4444
|
||||
- MAX_ROOM_SIZE=20
|
||||
restart: unless-stopped
|
||||
healthcheck:
|
||||
test: ['CMD', 'wget', '--quiet', '--tries=1', '--spider', 'http://localhost:4444/health']
|
||||
interval: 30s
|
||||
timeout: 10s
|
||||
retries: 3
|
||||
|
||||
sync:
|
||||
build: ./opennoodl-sync-server
|
||||
ports:
|
||||
- '4445:4445'
|
||||
environment:
|
||||
- PORT=4445
|
||||
- ENABLE_PERSISTENCE=true
|
||||
- PERSIST_DIR=/data
|
||||
volumes:
|
||||
- sync-data:/data
|
||||
restart: unless-stopped
|
||||
|
||||
notifications:
|
||||
build: ./opennoodl-notification-server
|
||||
ports:
|
||||
- '4446:4446'
|
||||
environment:
|
||||
- PORT=4446
|
||||
- DB_FILE=/data/notifications.json
|
||||
- TTL_DAYS=30
|
||||
volumes:
|
||||
- notification-data:/data
|
||||
restart: unless-stopped
|
||||
|
||||
volumes:
|
||||
sync-data:
|
||||
notification-data:
|
||||
```
|
||||
|
||||
### One-Click Deploy Options
|
||||
|
||||
Each server includes configuration for:
|
||||
|
||||
- **Railway** (`railway.json`)
|
||||
- **Render** (`render.yaml`)
|
||||
- **Fly.io** (`fly.toml`)
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
### Signaling Server
|
||||
|
||||
- [ ] Create `opennoodl-signaling-server` repository
|
||||
- [ ] Implement WebSocket server with room management
|
||||
- [ ] Implement peer join/leave handling
|
||||
- [ ] Implement signal relay
|
||||
- [ ] Implement invite forwarding
|
||||
- [ ] Add heartbeat for dead connection detection
|
||||
- [ ] Add health check endpoint
|
||||
- [ ] Add Prometheus metrics endpoint
|
||||
- [ ] Create Dockerfile
|
||||
- [ ] Create one-click deploy configs
|
||||
- [ ] Write deployment documentation
|
||||
|
||||
### Sync Server
|
||||
|
||||
- [ ] Create `opennoodl-sync-server` repository
|
||||
- [ ] Implement Yjs WebSocket provider integration
|
||||
- [ ] Add optional LevelDB persistence
|
||||
- [ ] Add health check endpoint
|
||||
- [ ] Create Dockerfile
|
||||
- [ ] Create one-click deploy configs
|
||||
|
||||
### Notification Server
|
||||
|
||||
- [ ] Create `opennoodl-notification-server` repository
|
||||
- [ ] Implement WebSocket authentication
|
||||
- [ ] Implement notification storage (LowDB initially)
|
||||
- [ ] Implement notification delivery
|
||||
- [ ] Implement mark-read/delete operations
|
||||
- [ ] Implement TTL-based cleanup
|
||||
- [ ] Add multi-device support
|
||||
- [ ] Add health check endpoint
|
||||
- [ ] Create Dockerfile
|
||||
- [ ] Create one-click deploy configs
|
||||
|
||||
### Deployment
|
||||
|
||||
- [ ] Deploy official signaling server
|
||||
- [ ] Deploy official sync server
|
||||
- [ ] Deploy official notification server
|
||||
- [ ] Configure SSL certificates
|
||||
- [ ] Set up monitoring (Grafana/Prometheus)
|
||||
- [ ] Set up alerting
|
||||
- [ ] Load testing
|
||||
|
||||
---
|
||||
|
||||
## Verification Steps
|
||||
|
||||
- [ ] Signaling server helps peers find each other
|
||||
- [ ] Sync server synchronizes Yjs documents
|
||||
- [ ] Notification server stores and delivers notifications
|
||||
- [ ] Health endpoints return 200 OK
|
||||
- [ ] Metrics endpoints expose data
|
||||
- [ ] Docker Compose brings up all services
|
||||
- [ ] One-click deploy works on Railway/Render
|
||||
- [ ] Servers handle connection failures gracefully
|
||||
- [ ] Old notifications are cleaned up automatically
|
||||
- [ ] Servers restart automatically after crash
|
||||
|
||||
---
|
||||
|
||||
## Security Considerations
|
||||
|
||||
1. **No sensitive data in signaling** - Only relay WebRTC signals, no content
|
||||
2. **Rate limiting** - Prevent abuse of all servers
|
||||
3. **Authentication** - Notification server requires user auth
|
||||
4. **CORS** - Properly configured for cross-origin requests
|
||||
5. **WSS only** - Require secure WebSocket connections in production
|
||||
|
||||
---
|
||||
|
||||
## Scaling Notes
|
||||
|
||||
| Server | Bottleneck | Scaling Strategy |
|
||||
| ------------- | --------------------- | ----------------------------------- |
|
||||
| Signaling | Memory (room state) | Horizontal with sticky sessions |
|
||||
| Sync | Storage (persistence) | Shard by room prefix |
|
||||
| Notifications | Storage | Replace LowDB with Redis/PostgreSQL |
|
||||
|
||||
---
|
||||
|
||||
## Files to Create
|
||||
|
||||
```
|
||||
External repositories (separate from OpenNoodl):
|
||||
|
||||
opennoodl-signaling-server/
|
||||
├── index.js
|
||||
├── package.json
|
||||
├── Dockerfile
|
||||
├── railway.json
|
||||
├── render.yaml
|
||||
├── fly.toml
|
||||
└── README.md
|
||||
|
||||
opennoodl-sync-server/
|
||||
├── index.js
|
||||
├── package.json
|
||||
├── Dockerfile
|
||||
└── README.md
|
||||
|
||||
opennoodl-notification-server/
|
||||
├── index.js
|
||||
├── package.json
|
||||
├── Dockerfile
|
||||
└── README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- All servers designed to be stateless (horizontally scalable)
|
||||
- Sync server can optionally persist data with LevelDB
|
||||
- Notification server uses LowDB initially (can upgrade to Redis/PostgreSQL for scale)
|
||||
- All servers include CORS headers for cross-origin requests
|
||||
- WebSocket connections include heartbeat/ping-pong for dead connection detection
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **GIT-005**: Community Infrastructure (defines server URLs in community.json)
|
||||
- **GIT-007**: WebRTC Collaboration Client (consumes these servers)
|
||||
- **GIT-008**: Notification System (client for notification server)
|
||||
@@ -0,0 +1,342 @@
|
||||
# GIT-007: WebRTC Collaboration Client
|
||||
|
||||
## Overview
|
||||
|
||||
**Priority:** Critical
|
||||
**Estimated Hours:** 100-130
|
||||
**Dependencies:** GIT-005, GIT-006
|
||||
**Status:** 🔴 Not Started
|
||||
|
||||
Implement the client-side WebRTC collaboration system that enables real-time multi-user editing, cursor sharing, audio/video chat, and seamless fallback to WebSocket sync.
|
||||
|
||||
This is the **core collaboration feature** - enabling "Google Docs for visual programming."
|
||||
|
||||
---
|
||||
|
||||
## Strategic Context
|
||||
|
||||
This task delivers the most visible and impactful feature of the collaboration system:
|
||||
|
||||
- **Real-time multi-user editing** - See changes as they happen
|
||||
- **Presence awareness** - Cursors, selections, viewports of all participants
|
||||
- **Audio/video chat** - Built-in communication (no need for separate apps)
|
||||
- **Peer-to-peer** - Low latency, no server relay for data
|
||||
- **Automatic fallback** - Falls back to WebSocket when P2P fails
|
||||
|
||||
---
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### 1. CollaborationManager Service
|
||||
|
||||
**File:** `packages/noodl-editor/src/editor/src/services/CollaborationManager.ts`
|
||||
|
||||
Central service managing all collaboration functionality:
|
||||
|
||||
```typescript
|
||||
interface CollaborationSession {
|
||||
id: string;
|
||||
roomId: string;
|
||||
projectId: string;
|
||||
isHost: boolean;
|
||||
isPublic: boolean;
|
||||
title: string;
|
||||
description?: string;
|
||||
maxParticipants: number;
|
||||
participants: Map<string, Participant>;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
interface Participant {
|
||||
peerId: string;
|
||||
userId: string;
|
||||
name: string;
|
||||
avatar?: string;
|
||||
color: string;
|
||||
cursor?: { x: number; y: number };
|
||||
selection?: { nodeId: string };
|
||||
viewport?: { x: number; y: number; zoom: number };
|
||||
audio: { enabled: boolean; stream?: MediaStream };
|
||||
video: { enabled: boolean; stream?: MediaStream };
|
||||
isHost: boolean;
|
||||
joinedAt: Date;
|
||||
}
|
||||
```
|
||||
|
||||
**Key Methods:**
|
||||
|
||||
| Method | Description |
|
||||
| ---------------------------- | ---------------------------------------- |
|
||||
| `startSession(options)` | Start a new collaboration session (host) |
|
||||
| `joinSession(roomId)` | Join an existing session |
|
||||
| `leaveSession()` | Leave current session |
|
||||
| `inviteUser(userId)` | Invite a user to current session |
|
||||
| `updateCursor(x, y)` | Broadcast cursor position |
|
||||
| `updateSelection(nodeId)` | Broadcast node selection |
|
||||
| `updateViewport(x, y, zoom)` | Broadcast viewport state |
|
||||
| `toggleAudio(enabled?)` | Toggle local audio |
|
||||
| `toggleVideo(enabled?)` | Toggle local video |
|
||||
|
||||
### 2. WebRTC Connection Flow
|
||||
|
||||
```
|
||||
┌──────────────┐ ┌──────────────────┐ ┌──────────────┐
|
||||
│ Peer A │ │ Signaling Server │ │ Peer B │
|
||||
└──────┬───────┘ └────────┬─────────┘ └──────┬───────┘
|
||||
│ │ │
|
||||
│ 1. join(room) │ │
|
||||
│─────────────────────>│ │
|
||||
│ │ │
|
||||
│ 2. joined(peers) │ │
|
||||
│<─────────────────────│ │
|
||||
│ │ │
|
||||
│ │ 3. join(room) │
|
||||
│ │<─────────────────────│
|
||||
│ │ │
|
||||
│ │ 4. peer-joined │
|
||||
│<─────────────────────│─────────────────────>│
|
||||
│ │ │
|
||||
│ 5. signal(offer) │ │
|
||||
│─────────────────────>│─────────────────────>│
|
||||
│ │ │
|
||||
│ │ 6. signal(answer) │
|
||||
│<─────────────────────│<─────────────────────│
|
||||
│ │ │
|
||||
│ 7. P2P Connection Established │
|
||||
│<═══════════════════════════════════════════>│
|
||||
```
|
||||
|
||||
### 3. Yjs Integration (CRDT Sync)
|
||||
|
||||
Use Yjs for conflict-free replicated data types:
|
||||
|
||||
```typescript
|
||||
// Document structure
|
||||
const doc = new Y.Doc();
|
||||
const yNodes = doc.getArray('nodes');
|
||||
const yConnections = doc.getArray('connections');
|
||||
const yProperties = doc.getMap('properties');
|
||||
|
||||
// Awareness (cursors, selections - not persisted)
|
||||
const awareness = provider.awareness;
|
||||
awareness.setLocalState({
|
||||
user: { name, color, avatar },
|
||||
cursor: { x, y },
|
||||
selection: { nodeId }
|
||||
});
|
||||
```
|
||||
|
||||
### 4. Connection Fallback Strategy
|
||||
|
||||
```
|
||||
1. Try WebRTC P2P (y-webrtc)
|
||||
↓ (if fails after 5 seconds)
|
||||
2. Try WebSocket via Sync Server (y-websocket)
|
||||
↓ (if fails)
|
||||
3. Show error, allow retry
|
||||
```
|
||||
|
||||
### 5. Media Handling (Audio/Video)
|
||||
|
||||
```typescript
|
||||
// Initialize local media
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: { echoCancellation: true, noiseSuppression: true },
|
||||
video: { width: 1280, height: 720 }
|
||||
});
|
||||
|
||||
// Attach to peer connection
|
||||
peer.addStream(stream);
|
||||
|
||||
// Handle remote streams
|
||||
peer.on('stream', (remoteStream) => {
|
||||
// Display in participant's video element
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## User Flows
|
||||
|
||||
### Starting a Session (Host)
|
||||
|
||||
1. Click "Start Collaboration" in editor toolbar
|
||||
2. Fill in session details (title, description, public/private)
|
||||
3. Configure options (audio, video, max participants)
|
||||
4. Session starts, room ID generated
|
||||
5. Copy link or invite users directly
|
||||
|
||||
### Joining a Session (Guest)
|
||||
|
||||
1. Receive invitation notification OR click session link
|
||||
2. Preview session details
|
||||
3. Configure join options (audio, video)
|
||||
4. Click "Join"
|
||||
5. WebRTC connection established
|
||||
6. Project state synced
|
||||
|
||||
### During Session
|
||||
|
||||
- See other participants' cursors (colored)
|
||||
- See other participants' selections (highlighted)
|
||||
- See avatar thumbnails of participants
|
||||
- Optionally see video feeds
|
||||
- Changes to nodes sync in real-time
|
||||
- Can toggle audio/video anytime
|
||||
|
||||
### Leaving a Session
|
||||
|
||||
1. Click "Leave Session"
|
||||
2. Confirm if host (session continues or ends)
|
||||
3. Cleanup: stop media, close connections
|
||||
4. Return to solo editing mode
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
### Phase 1: Core Service (20-25 hours)
|
||||
|
||||
- [ ] Create `CollaborationManager.ts` service
|
||||
- [ ] Implement session creation (host)
|
||||
- [ ] Implement session joining (guest)
|
||||
- [ ] Implement signaling server communication
|
||||
- [ ] Implement WebRTC peer connections
|
||||
- [ ] Implement graceful disconnection
|
||||
|
||||
### Phase 2: Yjs Integration (20-25 hours)
|
||||
|
||||
- [ ] Set up Yjs document structure
|
||||
- [ ] Implement WebRTC provider (y-webrtc)
|
||||
- [ ] Implement WebSocket fallback (y-websocket)
|
||||
- [ ] Sync project nodes to Yjs
|
||||
- [ ] Sync project connections to Yjs
|
||||
- [ ] Handle remote changes in ProjectModel
|
||||
- [ ] Implement conflict resolution UI
|
||||
|
||||
### Phase 3: Awareness (15-20 hours)
|
||||
|
||||
- [ ] Implement cursor position broadcasting
|
||||
- [ ] Implement selection broadcasting
|
||||
- [ ] Implement viewport broadcasting
|
||||
- [ ] Create remote cursor renderer
|
||||
- [ ] Create remote selection highlighter
|
||||
- [ ] Add participant list UI
|
||||
|
||||
### Phase 4: Media (20-25 hours)
|
||||
|
||||
- [ ] Implement local audio capture
|
||||
- [ ] Implement local video capture
|
||||
- [ ] Implement audio/video toggle
|
||||
- [ ] Display remote audio (spatial if possible)
|
||||
- [ ] Display remote video feeds
|
||||
- [ ] Handle media permission errors
|
||||
|
||||
### Phase 5: UI Components (15-20 hours)
|
||||
|
||||
- [ ] Create collaboration toolbar
|
||||
- [ ] Create start session dialog
|
||||
- [ ] Create join session dialog
|
||||
- [ ] Create participant list panel
|
||||
- [ ] Create video grid component
|
||||
- [ ] Create session info panel
|
||||
|
||||
### Phase 6: Integration (10-15 hours)
|
||||
|
||||
- [ ] Integrate with existing editor
|
||||
- [ ] Add collaboration indicators to canvas
|
||||
- [ ] Handle undo/redo in collaboration mode
|
||||
- [ ] Test with multiple participants
|
||||
- [ ] Performance optimization
|
||||
|
||||
---
|
||||
|
||||
## Verification Steps
|
||||
|
||||
- [ ] Can start a collaboration session
|
||||
- [ ] Can join a session via room ID
|
||||
- [ ] WebRTC peers connect automatically
|
||||
- [ ] Cursor positions sync in real-time
|
||||
- [ ] Node changes sync across all peers
|
||||
- [ ] Selections visible to all participants
|
||||
- [ ] Audio chat works between peers
|
||||
- [ ] Video feeds display correctly
|
||||
- [ ] Falls back to WebSocket when WebRTC fails
|
||||
- [ ] Can toggle audio/video during session
|
||||
- [ ] Disconnections handled gracefully
|
||||
- [ ] Session persists if host leaves temporarily
|
||||
- [ ] Can invite users to session
|
||||
|
||||
---
|
||||
|
||||
## Files to Create
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/services/
|
||||
├── CollaborationManager.ts # Main collaboration service
|
||||
├── CollaborationTypes.ts # TypeScript interfaces
|
||||
├── CollaborationYjsAdapter.ts # Yjs <-> ProjectModel adapter
|
||||
└── CollaborationMediaManager.ts # Audio/video handling
|
||||
|
||||
packages/noodl-editor/src/editor/src/views/
|
||||
├── CollaborationToolbar/
|
||||
│ ├── CollaborationToolbar.tsx
|
||||
│ ├── CollaborationToolbar.module.scss
|
||||
│ ├── StartSessionDialog.tsx
|
||||
│ ├── JoinSessionDialog.tsx
|
||||
│ └── SessionInfoPanel.tsx
|
||||
├── CollaborationOverlay/
|
||||
│ ├── RemoteCursors.tsx # Render remote cursors on canvas
|
||||
│ ├── RemoteSelections.tsx # Render remote selections
|
||||
│ └── ParticipantAvatars.tsx # Show participant list
|
||||
└── CollaborationVideo/
|
||||
├── VideoGrid.tsx # Video feed layout
|
||||
└── LocalVideo.tsx # Self-view
|
||||
|
||||
packages/noodl-editor/src/editor/src/hooks/
|
||||
├── useCollaboration.ts # Hook for collaboration state
|
||||
├── useRemoteCursors.ts # Hook for cursor rendering
|
||||
└── useMediaStream.ts # Hook for audio/video
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dependencies to Add
|
||||
|
||||
```json
|
||||
{
|
||||
"yjs": "^13.6.0",
|
||||
"y-webrtc": "^10.2.0",
|
||||
"y-websocket": "^1.5.0",
|
||||
"simple-peer": "^9.11.0",
|
||||
"lib0": "^0.2.85"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
1. **Cursor throttling** - Don't broadcast every mouse move (throttle to 50ms)
|
||||
2. **Viewport culling** - Don't render cursors outside visible area
|
||||
3. **Yjs updates** - Batch updates where possible
|
||||
4. **Media quality** - Adaptive bitrate based on network conditions
|
||||
5. **Connection limits** - Max 10-20 participants for performance
|
||||
|
||||
---
|
||||
|
||||
## Security Notes
|
||||
|
||||
1. **Room IDs** - Use UUIDs, hard to guess
|
||||
2. **Signaling** - Only relay WebRTC signals, no content
|
||||
3. **Media** - Encrypted via SRTP (built into WebRTC)
|
||||
4. **Project data** - Synced P2P, not through server (except fallback)
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **GIT-005**: Community Infrastructure (provides server URLs)
|
||||
- **GIT-006**: Server Infrastructure (signaling, sync, notifications)
|
||||
- **GIT-008**: Notification System (for session invites)
|
||||
- **GIT-010**: Session Discovery (for finding public sessions)
|
||||
@@ -0,0 +1,326 @@
|
||||
# GIT-008: Notification System
|
||||
|
||||
## Overview
|
||||
|
||||
**Priority:** High
|
||||
**Estimated Hours:** 50-70
|
||||
**Dependencies:** GIT-006 (Notification Server)
|
||||
**Status:** 🔴 Not Started
|
||||
|
||||
Implement persistent cross-session notification system for collaboration invites, community events, mentions, and updates.
|
||||
|
||||
---
|
||||
|
||||
## Strategic Context
|
||||
|
||||
Notifications bridge sessions - they ensure users don't miss:
|
||||
|
||||
- **Collaboration invites** - Someone wants to work with you
|
||||
- **Mentions** - Someone referenced you in a discussion
|
||||
- **Session updates** - Public session started by someone you follow
|
||||
- **Component updates** - New component published in your community
|
||||
- **System messages** - Important announcements
|
||||
|
||||
---
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### 1. NotificationManager Service
|
||||
|
||||
**File:** `packages/noodl-editor/src/editor/src/services/NotificationManager.ts`
|
||||
|
||||
```typescript
|
||||
interface Notification {
|
||||
id: string;
|
||||
userId: string;
|
||||
fromUserId?: string;
|
||||
type: 'invite' | 'mention' | 'thread' | 'session' | 'component' | 'system';
|
||||
title: string;
|
||||
message: string;
|
||||
data?: Record<string, unknown>;
|
||||
read: boolean;
|
||||
createdAt: Date;
|
||||
expiresAt: Date;
|
||||
readAt?: Date;
|
||||
actions?: NotificationAction[];
|
||||
}
|
||||
|
||||
interface NotificationAction {
|
||||
label: string;
|
||||
action: string;
|
||||
primary?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
**Key Methods:**
|
||||
|
||||
| Method | Description |
|
||||
| -------------------------------------- | ------------------------------ |
|
||||
| `initialize(userId)` | Connect to notification server |
|
||||
| `getNotifications()` | Get all notifications |
|
||||
| `getUnreadCount()` | Get unread count |
|
||||
| `markAsRead(id)` | Mark notification as read |
|
||||
| `deleteNotification(id)` | Delete a notification |
|
||||
| `sendNotification(userId, type, data)` | Send to another user |
|
||||
| `destroy()` | Disconnect and cleanup |
|
||||
|
||||
### 2. Notification Types
|
||||
|
||||
| Type | Trigger | Actions |
|
||||
| ----------- | ---------------------------------- | -------------- |
|
||||
| `invite` | Someone invites you to collaborate | Join, Decline |
|
||||
| `mention` | Someone mentions you in discussion | View Thread |
|
||||
| `thread` | New reply in discussion you follow | View Thread |
|
||||
| `session` | Public session started | Join Session |
|
||||
| `component` | New component in your community | View Component |
|
||||
| `system` | System announcement | Dismiss |
|
||||
|
||||
### 3. Toast Notifications
|
||||
|
||||
Real-time toasts for new notifications:
|
||||
|
||||
```typescript
|
||||
// Toast component structure
|
||||
interface ToastProps {
|
||||
notification: Notification;
|
||||
onAction: (action: string) => void;
|
||||
onDismiss: () => void;
|
||||
}
|
||||
|
||||
// Toast behavior
|
||||
- Appears bottom-right of editor
|
||||
- Auto-dismisses after 10 seconds
|
||||
- Can be clicked for quick action
|
||||
- Can be swiped to dismiss
|
||||
- Queue system for multiple notifications
|
||||
```
|
||||
|
||||
### 4. Notification Center
|
||||
|
||||
Panel/popover for viewing all notifications:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ Notifications ✕ │
|
||||
├─────────────────────────────────┤
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ 👥 Collaboration Invite │ │
|
||||
│ │ Alice invited you to │ │
|
||||
│ │ "Building a Dashboard" │ │
|
||||
│ │ [Join] [Decline] 2m ago│ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ 📦 New Component │ │
|
||||
│ │ Bob published "DataGrid" │ │
|
||||
│ │ [View] 1h ago│ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ 💬 Discussion Reply │ │
|
||||
│ │ Charlie replied to your │ │
|
||||
│ │ question about routing │ │
|
||||
│ │ [View Thread] 3h ago│ │
|
||||
│ └─────────────────────────────┘ │
|
||||
├─────────────────────────────────┤
|
||||
│ [Mark All Read] [Clear All] │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5. Desktop Notifications
|
||||
|
||||
Leverage Electron's native notification API:
|
||||
|
||||
```typescript
|
||||
// Show native notification
|
||||
new Notification('Collaboration Invite', {
|
||||
body: 'Alice invited you to collaborate',
|
||||
icon: '/path/to/icon.png',
|
||||
tag: notification.id, // Prevents duplicates
|
||||
requireInteraction: notification.type === 'invite' // Stay until clicked
|
||||
});
|
||||
|
||||
notification.onclick = () => {
|
||||
// Focus app and handle action
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## User Flows
|
||||
|
||||
### Receiving Notification (Online)
|
||||
|
||||
1. Notification arrives via WebSocket
|
||||
2. Toast appears in editor
|
||||
3. Badge updates on notification bell
|
||||
4. Desktop notification shows (if enabled)
|
||||
5. User can act on toast or dismiss
|
||||
|
||||
### Receiving Notification (Offline)
|
||||
|
||||
1. Notification stored on server
|
||||
2. User opens app
|
||||
3. Notifications fetched on connect
|
||||
4. Multiple notifications batch-displayed
|
||||
5. Badge shows unread count
|
||||
|
||||
### Handling Notification Actions
|
||||
|
||||
**Invite:**
|
||||
|
||||
1. Click "Join" on invite notification
|
||||
2. Session preview dialog opens
|
||||
3. Confirm join options
|
||||
4. Connect to collaboration session
|
||||
|
||||
**Mention/Thread:**
|
||||
|
||||
1. Click "View Thread"
|
||||
2. Opens discussion in browser (GitHub Discussions)
|
||||
|
||||
**Component:**
|
||||
|
||||
1. Click "View Component"
|
||||
2. Opens component in community panel
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
### Phase 1: Core Service (15-20 hours)
|
||||
|
||||
- [ ] Create `NotificationManager.ts` service
|
||||
- [ ] Implement WebSocket connection to notification server
|
||||
- [ ] Implement authentication flow
|
||||
- [ ] Implement notification fetching
|
||||
- [ ] Implement notification parsing/typing
|
||||
- [ ] Implement mark as read
|
||||
- [ ] Implement delete notification
|
||||
- [ ] Implement send notification
|
||||
- [ ] Add reconnection logic
|
||||
- [ ] Add offline support (local storage cache)
|
||||
|
||||
### Phase 2: Toast UI (10-15 hours)
|
||||
|
||||
- [ ] Create `NotificationToast.tsx` component
|
||||
- [ ] Create toast container/queue
|
||||
- [ ] Implement auto-dismiss
|
||||
- [ ] Implement action buttons
|
||||
- [ ] Implement swipe-to-dismiss
|
||||
- [ ] Add animations
|
||||
- [ ] Style according to notification type
|
||||
|
||||
### Phase 3: Notification Center (15-20 hours)
|
||||
|
||||
- [ ] Create `NotificationCenter.tsx` component
|
||||
- [ ] Create `NotificationItem.tsx` component
|
||||
- [ ] Implement notification list with grouping
|
||||
- [ ] Implement "Mark All Read"
|
||||
- [ ] Implement "Clear All"
|
||||
- [ ] Add notification badge to header
|
||||
- [ ] Implement search/filter (optional)
|
||||
|
||||
### Phase 4: Desktop Notifications (5-10 hours)
|
||||
|
||||
- [ ] Implement Electron notification API
|
||||
- [ ] Add notification settings (enable/disable)
|
||||
- [ ] Handle notification click → focus app
|
||||
- [ ] Add notification sound (optional)
|
||||
- [ ] Test on Windows, Mac, Linux
|
||||
|
||||
### Phase 5: Integration (5-10 hours)
|
||||
|
||||
- [ ] Connect to existing authentication
|
||||
- [ ] Integrate with collaboration system
|
||||
- [ ] Add to editor layout
|
||||
- [ ] Test end-to-end flows
|
||||
- [ ] Performance optimization
|
||||
|
||||
---
|
||||
|
||||
## Verification Steps
|
||||
|
||||
- [ ] Notifications persist across sessions
|
||||
- [ ] Toast appears when notification received
|
||||
- [ ] Can mark notifications as read
|
||||
- [ ] Can delete notifications
|
||||
- [ ] Unread count displays correctly
|
||||
- [ ] Actions trigger correct behavior
|
||||
- [ ] Desktop notifications work (Electron)
|
||||
- [ ] Reconnects after connection loss
|
||||
- [ ] Offline notifications cached and shown on reconnect
|
||||
- [ ] Expired notifications cleaned up
|
||||
|
||||
---
|
||||
|
||||
## Files to Create
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/services/
|
||||
├── NotificationManager.ts # Main notification service
|
||||
├── NotificationTypes.ts # TypeScript interfaces
|
||||
|
||||
packages/noodl-editor/src/editor/src/views/
|
||||
├── NotificationCenter/
|
||||
│ ├── NotificationCenter.tsx # Main panel/popover
|
||||
│ ├── NotificationCenter.module.scss
|
||||
│ ├── NotificationItem.tsx # Individual notification
|
||||
│ ├── NotificationBadge.tsx # Unread count badge
|
||||
│ └── NotificationEmpty.tsx # Empty state
|
||||
├── NotificationToast/
|
||||
│ ├── NotificationToast.tsx # Toast component
|
||||
│ ├── NotificationToast.module.scss
|
||||
│ └── ToastContainer.tsx # Toast queue manager
|
||||
|
||||
packages/noodl-editor/src/editor/src/hooks/
|
||||
├── useNotifications.ts # Hook for notification state
|
||||
└── useNotificationActions.ts # Hook for notification actions
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Notification Message Format
|
||||
|
||||
```typescript
|
||||
// Incoming notification from server
|
||||
interface ServerNotification {
|
||||
id: string;
|
||||
userId: string;
|
||||
fromUserId?: string;
|
||||
type: 'invite' | 'mention' | 'thread' | 'session' | 'component' | 'system';
|
||||
data: {
|
||||
// Type-specific data
|
||||
sessionId?: string;
|
||||
sessionTitle?: string;
|
||||
threadUrl?: string;
|
||||
componentId?: string;
|
||||
componentName?: string;
|
||||
message?: string;
|
||||
[key: string]: unknown;
|
||||
};
|
||||
read: boolean;
|
||||
createdAt: string; // ISO date
|
||||
expiresAt: string; // ISO date
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Settings
|
||||
|
||||
| Setting | Default | Description |
|
||||
| -------------------------- | ------- | ---------------------------- |
|
||||
| `notifications.enabled` | `true` | Enable notifications |
|
||||
| `notifications.desktop` | `true` | Enable desktop notifications |
|
||||
| `notifications.sound` | `true` | Play sound on notification |
|
||||
| `notifications.invites` | `true` | Show collaboration invites |
|
||||
| `notifications.mentions` | `true` | Show mentions |
|
||||
| `notifications.sessions` | `true` | Show public sessions |
|
||||
| `notifications.components` | `true` | Show component updates |
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **GIT-006**: Server Infrastructure (notification server)
|
||||
- **GIT-007**: WebRTC Collaboration Client (sends invites)
|
||||
- **GIT-009**: Community Tab UI (displays community notifications)
|
||||
@@ -0,0 +1,303 @@
|
||||
# GIT-009: Community Tab UI/UX
|
||||
|
||||
## Overview
|
||||
|
||||
**Priority:** High
|
||||
**Estimated Hours:** 80-100
|
||||
**Dependencies:** GIT-005, GIT-007, GIT-008
|
||||
**Status:** 🔴 Not Started
|
||||
|
||||
Create the Community tab UI that serves as the central hub for all community features: browsing communities, discovering sessions, exploring components, viewing tutorials, and accessing discussions.
|
||||
|
||||
---
|
||||
|
||||
## Strategic Context
|
||||
|
||||
The Community tab is the social layer of OpenNoodl. It surfaces:
|
||||
|
||||
- **Live collaboration sessions** - Join others in real-time
|
||||
- **Shared components** - Discover and install components
|
||||
- **Learning resources** - Tutorials organized by skill level
|
||||
- **Discussions** - Community Q&A via GitHub Discussions
|
||||
- **Job board** - Opportunities in the ecosystem
|
||||
|
||||
---
|
||||
|
||||
## UI Layout
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Community Switcher: [OpenNoodl Official ▾] [+ Add] │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────────────────────────┐│
|
||||
│ │ 🏠 Home │ 👥 Sessions │ 📦 Components │ 🎓 Learn │ 💬 Discuss │ 💼 Jobs │ │
|
||||
│ └─────────────────────────────────────────────────────────┘│
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐│
|
||||
│ │ [Tab Content] ││
|
||||
│ │ ││
|
||||
│ │ ││
|
||||
│ │ ││
|
||||
│ │ ││
|
||||
│ │ ││
|
||||
│ │ ││
|
||||
│ └─────────────────────────────────────────────────────────┘│
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tab Views
|
||||
|
||||
### 1. Home View
|
||||
|
||||
Featured content dashboard with quick actions:
|
||||
|
||||
- **Live Now** - Active public sessions
|
||||
- **Featured This Week** - Curated components
|
||||
- **New Tutorials** - Recently published
|
||||
- **Hot Discussions** - Trending threads
|
||||
- **Quick Actions** - Start session, share component, ask question
|
||||
|
||||
### 2. Sessions View
|
||||
|
||||
Browse and join collaboration sessions:
|
||||
|
||||
- **Filters**: Live now, scheduled, all
|
||||
- **Session cards** with:
|
||||
- Host avatar and name
|
||||
- Session title and description
|
||||
- Participant count / max
|
||||
- Audio/video indicators
|
||||
- Duration
|
||||
- **Create Session** button
|
||||
- **Join via Link** button
|
||||
|
||||
### 3. Components View
|
||||
|
||||
Browse shared component library:
|
||||
|
||||
- **Search bar** with filters
|
||||
- **Category filter** dropdown
|
||||
- **Sort by**: Popular, recent, name
|
||||
- **Component cards** with:
|
||||
- Preview image or icon
|
||||
- Name and description
|
||||
- Author
|
||||
- Stars and downloads
|
||||
- Tags
|
||||
- "Add to Library" button
|
||||
|
||||
### 4. Learn View
|
||||
|
||||
Tutorial browser organized by skill level:
|
||||
|
||||
- **Learning paths** - Curated sequences
|
||||
- **Level filter**: Beginner, intermediate, advanced
|
||||
- **Format filter**: Video, article, interactive
|
||||
- **Tutorial cards** with:
|
||||
- Thumbnail
|
||||
- Title and description
|
||||
- Author
|
||||
- Duration
|
||||
- Level badge
|
||||
|
||||
### 5. Discuss View
|
||||
|
||||
GitHub Discussions integration:
|
||||
|
||||
- **Category tabs**: All, Q&A, Show and Tell, Ideas, General
|
||||
- **Sort**: Recent, top, unanswered
|
||||
- **Discussion items** with:
|
||||
- Title and preview
|
||||
- Author
|
||||
- Category
|
||||
- Comment and reaction counts
|
||||
- Time ago
|
||||
- **Start Discussion** button (opens GitHub)
|
||||
|
||||
### 6. Jobs View
|
||||
|
||||
Community job board:
|
||||
|
||||
- **Filters**: Type (full-time, contract, freelance), remote, experience
|
||||
- **Job cards** with:
|
||||
- Company logo
|
||||
- Job title and company
|
||||
- Description
|
||||
- Tags (type, location, experience)
|
||||
- Salary (if provided)
|
||||
- Posted date
|
||||
- "Apply" button
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
### Phase 1: Panel Structure (15-20 hours)
|
||||
|
||||
- [ ] Create `CommunityPanel/CommunityPanel.tsx`
|
||||
- [ ] Create tab navigation component
|
||||
- [ ] Create community switcher component
|
||||
- [ ] Integrate with CommunityManager
|
||||
- [ ] Add to editor sidebar
|
||||
- [ ] Create panel layout and styles
|
||||
|
||||
### Phase 2: Home View (15-20 hours)
|
||||
|
||||
- [ ] Create `HomeView.tsx`
|
||||
- [ ] Implement welcome banner with community branding
|
||||
- [ ] Implement "Live Now" section
|
||||
- [ ] Implement "Featured" section
|
||||
- [ ] Implement "New Tutorials" section
|
||||
- [ ] Implement "Hot Discussions" section
|
||||
- [ ] Create quick action buttons
|
||||
- [ ] Fetch featured content from community repo
|
||||
|
||||
### Phase 3: Sessions View (15-20 hours)
|
||||
|
||||
- [ ] Create `SessionsView.tsx`
|
||||
- [ ] Implement session list with cards
|
||||
- [ ] Implement session filters
|
||||
- [ ] Create "Create Session" dialog
|
||||
- [ ] Create "Join via Link" dialog
|
||||
- [ ] Integrate with CollaborationManager
|
||||
- [ ] Implement real-time session count updates
|
||||
|
||||
### Phase 4: Components View (15-20 hours)
|
||||
|
||||
- [ ] Create `ComponentsView.tsx`
|
||||
- [ ] Implement search with debounce
|
||||
- [ ] Implement category filter
|
||||
- [ ] Implement sort options
|
||||
- [ ] Create component cards
|
||||
- [ ] Implement "Add to Library" action
|
||||
- [ ] Create component preview modal
|
||||
- [ ] Fetch from community components registry
|
||||
|
||||
### Phase 5: Learn View (10-15 hours)
|
||||
|
||||
- [ ] Create `LearnView.tsx`
|
||||
- [ ] Implement learning paths section
|
||||
- [ ] Implement level filter
|
||||
- [ ] Implement format filter
|
||||
- [ ] Create tutorial cards
|
||||
- [ ] Fetch from community tutorials directory
|
||||
|
||||
### Phase 6: Discuss View (8-12 hours)
|
||||
|
||||
- [ ] Create `DiscussView.tsx`
|
||||
- [ ] Implement category tabs
|
||||
- [ ] Implement sort options
|
||||
- [ ] Create discussion item component
|
||||
- [ ] Integrate GitHub Discussions API via Octokit
|
||||
- [ ] Implement "Start Discussion" action
|
||||
|
||||
### Phase 7: Jobs View (8-12 hours)
|
||||
|
||||
- [ ] Create `JobsView.tsx`
|
||||
- [ ] Implement job filters
|
||||
- [ ] Create job cards
|
||||
- [ ] Implement "Apply" action
|
||||
- [ ] Fetch from community jobs listings
|
||||
|
||||
### Phase 8: Polish (10-15 hours)
|
||||
|
||||
- [ ] Add loading states and skeletons
|
||||
- [ ] Add error handling and retry
|
||||
- [ ] Implement infinite scroll
|
||||
- [ ] Add keyboard navigation
|
||||
- [ ] Add animations and transitions
|
||||
- [ ] Responsive layout adjustments
|
||||
|
||||
---
|
||||
|
||||
## Verification Steps
|
||||
|
||||
- [ ] Community tab loads without errors
|
||||
- [ ] Can switch between communities
|
||||
- [ ] Home view shows featured content
|
||||
- [ ] Can browse and join sessions
|
||||
- [ ] Can search and install components
|
||||
- [ ] Tutorials load and display correctly
|
||||
- [ ] Discussions integrate with GitHub
|
||||
- [ ] Job board displays listings
|
||||
- [ ] All filters work correctly
|
||||
- [ ] UI is responsive and performant
|
||||
- [ ] Offline/error states handled gracefully
|
||||
|
||||
---
|
||||
|
||||
## Files to Create
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/panels/CommunityPanel/
|
||||
├── CommunityPanel.tsx
|
||||
├── CommunityPanel.module.scss
|
||||
├── components/
|
||||
│ ├── CommunityHeader.tsx
|
||||
│ ├── CommunitySwitcher.tsx
|
||||
│ ├── TabNavigation.tsx
|
||||
│ ├── EmptyState.tsx
|
||||
│ ├── SessionCard.tsx
|
||||
│ ├── ComponentCard.tsx
|
||||
│ ├── TutorialCard.tsx
|
||||
│ ├── DiscussionItem.tsx
|
||||
│ ├── JobCard.tsx
|
||||
│ └── LoadingSkeletons.tsx
|
||||
├── views/
|
||||
│ ├── HomeView.tsx
|
||||
│ ├── SessionsView.tsx
|
||||
│ ├── ComponentsView.tsx
|
||||
│ ├── LearnView.tsx
|
||||
│ ├── DiscussView.tsx
|
||||
│ └── JobsView.tsx
|
||||
├── dialogs/
|
||||
│ ├── CreateSessionDialog.tsx
|
||||
│ ├── JoinSessionDialog.tsx
|
||||
│ ├── ComponentPreviewModal.tsx
|
||||
│ └── ShareComponentDialog.tsx
|
||||
└── hooks/
|
||||
├── useCommunityContent.ts
|
||||
├── useSessions.ts
|
||||
├── useComponents.ts
|
||||
├── useTutorials.ts
|
||||
├── useDiscussions.ts
|
||||
└── useJobs.ts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Data Fetching
|
||||
|
||||
All content is fetched from the community's GitHub repository:
|
||||
|
||||
| Content | Source |
|
||||
| ----------- | ------------------------------------ |
|
||||
| Featured | `featured.json` |
|
||||
| Sessions | `collaboration/public-sessions.json` |
|
||||
| Components | `components/registry.json` |
|
||||
| Tutorials | `tutorials/{level}/index.json` |
|
||||
| Discussions | GitHub Discussions API |
|
||||
| Jobs | `jobs/listings.json` |
|
||||
|
||||
---
|
||||
|
||||
## Styling Notes
|
||||
|
||||
- Use CSS variables from theme for colors
|
||||
- Follow Panel UI Style Guide
|
||||
- Dark theme first
|
||||
- Consistent card styling across views
|
||||
- Smooth animations for transitions
|
||||
- Loading skeletons match card dimensions
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **GIT-005**: Community Infrastructure (provides data sources)
|
||||
- **GIT-007**: WebRTC Collaboration (sessions integration)
|
||||
- **GIT-008**: Notification System (community notifications)
|
||||
- **GIT-010**: Session Discovery (extends sessions view)
|
||||
@@ -0,0 +1,357 @@
|
||||
# GIT-010: Session Discovery & Joining
|
||||
|
||||
## Overview
|
||||
|
||||
**Priority:** High
|
||||
**Estimated Hours:** 50-70
|
||||
**Dependencies:** GIT-007, GIT-009
|
||||
**Status:** 🔴 Not Started
|
||||
|
||||
Streamline the session discovery and joining experience with deep linking, quick join flows, session previews, and favorites.
|
||||
|
||||
---
|
||||
|
||||
## Strategic Context
|
||||
|
||||
This task focuses on reducing friction for joining collaboration sessions:
|
||||
|
||||
- **Deep links** - Share `opennoodl://` links that open directly in the app
|
||||
- **Quick join** - One-click joining from invites
|
||||
- **Session preview** - See what you're joining before committing
|
||||
- **History** - Remember past sessions for easy rejoin
|
||||
- **Favorites** - Bookmark sessions you join frequently
|
||||
|
||||
---
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### 1. Deep Link Protocol
|
||||
|
||||
Register `opennoodl://` protocol handler for session joining:
|
||||
|
||||
```
|
||||
Examples:
|
||||
opennoodl://session/abc123
|
||||
opennoodl://session/abc123?audio=true&video=false
|
||||
opennoodl://community/add?repo=user/my-community
|
||||
opennoodl://component/install?repo=user/repo&component=DataGrid
|
||||
```
|
||||
|
||||
**Protocol Handlers:**
|
||||
|
||||
| Path | Description |
|
||||
| ------------------- | --------------------------- |
|
||||
| `session/{roomId}` | Join collaboration session |
|
||||
| `community/add` | Add community by repo URL |
|
||||
| `component/install` | Install component from repo |
|
||||
|
||||
### 2. DeepLinkHandler Service
|
||||
|
||||
**File:** `packages/noodl-editor/src/editor/src/utils/DeepLinkHandler.ts`
|
||||
|
||||
```typescript
|
||||
class DeepLinkHandler {
|
||||
// Register handlers for different paths
|
||||
register(path: string, handler: (params: any) => void): void;
|
||||
|
||||
// Parse and handle incoming URL
|
||||
handleUrl(url: string): void;
|
||||
|
||||
// Generate shareable link
|
||||
generateLink(path: string, params?: Record<string, string>): string;
|
||||
}
|
||||
```
|
||||
|
||||
**Electron Integration:**
|
||||
|
||||
- Register protocol on app startup
|
||||
- Handle `app.on('open-url')` for links when app is running
|
||||
- Handle `process.argv` for links that launch the app
|
||||
|
||||
### 3. Session Preview
|
||||
|
||||
Before joining, show session details:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Join Collaboration Session ✕ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [Avatar] Alice is hosting │
|
||||
│ │
|
||||
│ 📌 Building a User Dashboard │
|
||||
│ Working on the main dashboard layout │
|
||||
│ and navigation components. │
|
||||
│ │
|
||||
│ ┌─────────┬─────────┬─────────┐ │
|
||||
│ │ 👥 4/10 │ 📁 Proj │ 🕐 45m │ │
|
||||
│ └─────────┴─────────┴─────────┘ │
|
||||
│ │
|
||||
│ Features: │
|
||||
│ 🎤 Audio Chat 🖥️ Screen Share │
|
||||
│ │
|
||||
│ Participants: │
|
||||
│ [A] [B] [C] [D] │
|
||||
│ │
|
||||
│ ┌────────────────────────────────┐ │
|
||||
│ │ ☑ Join with audio enabled │ │
|
||||
│ │ ☐ Join with video enabled │ │
|
||||
│ └────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [Cancel] [Join Session] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 4. Quick Join Widget
|
||||
|
||||
Floating widget for incoming invites:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 👥 Collaboration Invite [−] [✕]│
|
||||
├─────────────────────────────────────┤
|
||||
│ [Avatar] Alice invited you │
|
||||
│ │
|
||||
│ "Building a User Dashboard" │
|
||||
│ │
|
||||
│ 👥 4 participants 🎤 Audio │
|
||||
│ │
|
||||
│ [Decline] [Join Now] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5. Session History Manager
|
||||
|
||||
**File:** `packages/noodl-editor/src/editor/src/services/SessionHistoryManager.ts`
|
||||
|
||||
```typescript
|
||||
interface SessionHistoryEntry {
|
||||
sessionId: string;
|
||||
roomId: string;
|
||||
title: string;
|
||||
host: {
|
||||
userId: string;
|
||||
name: string;
|
||||
avatar?: string;
|
||||
};
|
||||
joinedAt: Date;
|
||||
leftAt?: Date;
|
||||
duration: number;
|
||||
isFavorite: boolean;
|
||||
}
|
||||
|
||||
class SessionHistoryManager {
|
||||
// Add entry when joining session
|
||||
addEntry(session: any): void;
|
||||
|
||||
// Update entry when leaving
|
||||
updateEntry(sessionId: string, updates: Partial<SessionHistoryEntry>): void;
|
||||
|
||||
// Toggle favorite
|
||||
toggleFavorite(sessionId: string): void;
|
||||
|
||||
// Get all history
|
||||
getHistory(): SessionHistoryEntry[];
|
||||
|
||||
// Get favorites only
|
||||
getFavorites(): SessionHistoryEntry[];
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## User Flows
|
||||
|
||||
### Joining via Deep Link
|
||||
|
||||
1. User clicks `opennoodl://session/abc123` link
|
||||
2. App opens (or focuses if already open)
|
||||
3. Session preview dialog appears
|
||||
4. User configures join options
|
||||
5. Click "Join Session"
|
||||
6. WebRTC connection established
|
||||
|
||||
### Joining via Invitation
|
||||
|
||||
1. Notification appears (toast + notification center)
|
||||
2. Click "Join Now" on toast OR
|
||||
3. Open notification center, click invitation
|
||||
4. Session preview dialog appears
|
||||
5. Configure and join
|
||||
|
||||
### Joining from History
|
||||
|
||||
1. Open "Recent Sessions" panel
|
||||
2. See list of past sessions
|
||||
3. Click session to preview
|
||||
4. If session still active, join option shown
|
||||
5. Join or view details
|
||||
|
||||
### Managing Favorites
|
||||
|
||||
1. During/after session, click star icon
|
||||
2. Session added to favorites
|
||||
3. Favorites show in dedicated section
|
||||
4. Quick access for frequently joined sessions
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
### Phase 1: Deep Link Handler (10-15 hours)
|
||||
|
||||
- [ ] Create `DeepLinkHandler.ts` service
|
||||
- [ ] Implement protocol registration in Electron
|
||||
- [ ] Handle `open-url` event
|
||||
- [ ] Handle startup with URL argument
|
||||
- [ ] Implement session handler
|
||||
- [ ] Implement community handler
|
||||
- [ ] Implement component handler
|
||||
- [ ] Generate shareable links
|
||||
|
||||
### Phase 2: Session Preview (10-15 hours)
|
||||
|
||||
- [ ] Create `SessionPreview.tsx` dialog
|
||||
- [ ] Fetch session info from signaling server
|
||||
- [ ] Display host, participants, features
|
||||
- [ ] Implement join options checkboxes
|
||||
- [ ] Handle session not found
|
||||
- [ ] Handle session full
|
||||
- [ ] Implement "Join" action
|
||||
|
||||
### Phase 3: Quick Join Widget (8-12 hours)
|
||||
|
||||
- [ ] Create `QuickJoinWidget.tsx` component
|
||||
- [ ] Implement minimize/close functionality
|
||||
- [ ] Connect to notification manager
|
||||
- [ ] Implement "Join Now" action
|
||||
- [ ] Implement "Decline" action
|
||||
- [ ] Add animations
|
||||
|
||||
### Phase 4: Session History (12-16 hours)
|
||||
|
||||
- [ ] Create `SessionHistoryManager.ts` service
|
||||
- [ ] Implement local storage persistence
|
||||
- [ ] Create `SessionHistory.tsx` panel
|
||||
- [ ] Display recent sessions list
|
||||
- [ ] Implement favorites toggle
|
||||
- [ ] Create `SessionHistoryItem.tsx` component
|
||||
- [ ] Implement rejoin from history
|
||||
- [ ] Add "Clear History" option
|
||||
|
||||
### Phase 5: Integration (10-12 hours)
|
||||
|
||||
- [ ] Add session info API to signaling server
|
||||
- [ ] Add "Copy Link" button to active sessions
|
||||
- [ ] Add session history to Community panel
|
||||
- [ ] Add favorites section
|
||||
- [ ] Test cross-platform deep links
|
||||
- [ ] Test with various link scenarios
|
||||
|
||||
---
|
||||
|
||||
## Verification Steps
|
||||
|
||||
- [ ] `opennoodl://` links open the app
|
||||
- [ ] Session preview loads correctly
|
||||
- [ ] Can join session from deep link
|
||||
- [ ] Quick join widget appears for invites
|
||||
- [ ] Can minimize/dismiss widget
|
||||
- [ ] Session history saves correctly
|
||||
- [ ] Can favorite sessions
|
||||
- [ ] Can rejoin from history
|
||||
- [ ] Copy link generates correct URL
|
||||
- [ ] Works on Windows, Mac, Linux
|
||||
|
||||
---
|
||||
|
||||
## Files to Create
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/utils/
|
||||
├── DeepLinkHandler.ts # Protocol handler
|
||||
|
||||
packages/noodl-editor/src/editor/src/services/
|
||||
├── SessionHistoryManager.ts # History persistence
|
||||
|
||||
packages/noodl-editor/src/editor/src/views/
|
||||
├── SessionPreview/
|
||||
│ ├── SessionPreview.tsx # Preview dialog
|
||||
│ └── SessionPreview.module.scss
|
||||
├── QuickJoinWidget/
|
||||
│ ├── QuickJoinWidget.tsx # Floating invite widget
|
||||
│ └── QuickJoinWidget.module.scss
|
||||
├── SessionHistory/
|
||||
│ ├── SessionHistory.tsx # History panel
|
||||
│ ├── SessionHistory.module.scss
|
||||
│ └── SessionHistoryItem.tsx
|
||||
|
||||
packages/noodl-editor/src/main/
|
||||
├── protocol-handler.js # Electron protocol registration
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Signaling Server API Extension
|
||||
|
||||
Add endpoint for session info (without joining):
|
||||
|
||||
```
|
||||
GET /session/{roomId}/info
|
||||
|
||||
Response:
|
||||
{
|
||||
"roomId": "abc123",
|
||||
"title": "Building a User Dashboard",
|
||||
"description": "Working on dashboard layout",
|
||||
"host": {
|
||||
"userId": "alice",
|
||||
"name": "Alice Smith",
|
||||
"avatar": "https://..."
|
||||
},
|
||||
"participants": [
|
||||
{ "userId": "bob", "name": "Bob", "avatar": "..." },
|
||||
...
|
||||
],
|
||||
"participantCount": 4,
|
||||
"maxParticipants": 10,
|
||||
"features": {
|
||||
"audioEnabled": true,
|
||||
"videoEnabled": false,
|
||||
"screenShareEnabled": true
|
||||
},
|
||||
"duration": 2700, // seconds
|
||||
"createdAt": "2026-01-18T10:00:00Z"
|
||||
}
|
||||
|
||||
404 if session not found
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Platform-Specific Notes
|
||||
|
||||
### macOS
|
||||
|
||||
- Protocol registered via `app.setAsDefaultProtocolClient()`
|
||||
- Already running app receives `open-url` event
|
||||
|
||||
### Windows
|
||||
|
||||
- Protocol registered in registry via `app.setAsDefaultProtocolClient()`
|
||||
- Deep links passed via `process.argv`
|
||||
- May require admin for first registration
|
||||
|
||||
### Linux
|
||||
|
||||
- Desktop file registration
|
||||
- Varies by distribution
|
||||
- Consider XDG protocol handler
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **GIT-007**: WebRTC Collaboration (provides joining mechanics)
|
||||
- **GIT-008**: Notification System (delivers invites)
|
||||
- **GIT-009**: Community UI (displays sessions)
|
||||
@@ -0,0 +1,344 @@
|
||||
# GIT-011: Integration & Polish
|
||||
|
||||
## Overview
|
||||
|
||||
**Priority:** High
|
||||
**Estimated Hours:** 61-82
|
||||
**Dependencies:** All previous tasks (GIT-005 through GIT-010)
|
||||
**Status:** 🔴 Not Started
|
||||
|
||||
Final integration, testing, documentation, and marketing preparation for the live collaboration and multi-community system.
|
||||
|
||||
---
|
||||
|
||||
## Strategic Context
|
||||
|
||||
This is the "putting it all together" phase. Before launch:
|
||||
|
||||
- **Everything must work end-to-end** - No broken flows
|
||||
- **Performance must be acceptable** - <3s connection, smooth sync
|
||||
- **Documentation must be complete** - Users need to know how to use it
|
||||
- **Servers must be deployed** - Infrastructure ready for production
|
||||
- **Marketing must be ready** - Demo videos, blog posts, press kit
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
### 1. End-to-End Testing (20-25 hours)
|
||||
|
||||
#### Test Plan Creation
|
||||
|
||||
- [ ] Document all user flows
|
||||
- [ ] Create test scenarios for each flow
|
||||
- [ ] Define success criteria
|
||||
- [ ] Set up test environment
|
||||
|
||||
#### Collaboration Testing
|
||||
|
||||
- [ ] Test session creation (host)
|
||||
- [ ] Test session joining (guest)
|
||||
- [ ] Test WebRTC connection establishment
|
||||
- [ ] Test WebSocket fallback scenarios
|
||||
- [ ] Test with 2, 5, 10+ participants
|
||||
- [ ] Test audio/video functionality
|
||||
- [ ] Test screen share (if enabled)
|
||||
|
||||
#### Sync Testing
|
||||
|
||||
- [ ] Test cursor position sync
|
||||
- [ ] Test selection sync
|
||||
- [ ] Test viewport sync
|
||||
- [ ] Test node creation sync
|
||||
- [ ] Test node deletion sync
|
||||
- [ ] Test connection creation sync
|
||||
- [ ] Test property editing sync
|
||||
- [ ] Test undo/redo in collaboration
|
||||
|
||||
#### Edge Cases
|
||||
|
||||
- [ ] Test disconnection and reconnection
|
||||
- [ ] Test host leaving (does session persist?)
|
||||
- [ ] Test network quality degradation
|
||||
- [ ] Test firewall scenarios
|
||||
- [ ] Test notification delivery
|
||||
- [ ] Test deep link handling
|
||||
|
||||
#### Community Testing
|
||||
|
||||
- [ ] Test adding custom community
|
||||
- [ ] Test community switching
|
||||
- [ ] Test component installation
|
||||
- [ ] Test GitHub Discussions integration
|
||||
|
||||
### 2. Performance Optimization (15-20 hours)
|
||||
|
||||
#### Profiling
|
||||
|
||||
- [ ] Profile WebRTC data channel usage
|
||||
- [ ] Profile Yjs document size
|
||||
- [ ] Profile render performance during sync
|
||||
- [ ] Profile memory usage over time
|
||||
|
||||
#### Optimizations
|
||||
|
||||
- [ ] Implement cursor position throttling (50ms)
|
||||
- [ ] Add viewport culling for remote cursors
|
||||
- [ ] Batch Yjs updates where possible
|
||||
- [ ] Implement lazy loading for community content
|
||||
- [ ] Add virtual scrolling for long lists
|
||||
- [ ] Optimize GitHub API calls (caching)
|
||||
|
||||
#### Benchmarks
|
||||
|
||||
- [ ] Measure time to establish connection (target: <3s)
|
||||
- [ ] Measure time for sync to stabilize (target: <5s)
|
||||
- [ ] Measure cursor latency (target: <100ms)
|
||||
- [ ] Measure CPU usage during collaboration
|
||||
|
||||
### 3. Documentation (12-15 hours)
|
||||
|
||||
#### User Documentation
|
||||
|
||||
- [ ] Write "Getting Started with Collaboration" guide
|
||||
- [ ] Document session creation and joining
|
||||
- [ ] Document audio/video controls
|
||||
- [ ] Write troubleshooting guide
|
||||
- [ ] Create FAQ section
|
||||
|
||||
#### Community Documentation
|
||||
|
||||
- [ ] Write "Creating Your Own Community" guide
|
||||
- [ ] Document community.json schema
|
||||
- [ ] Document server deployment
|
||||
- [ ] Create self-hosting guide
|
||||
|
||||
#### Developer Documentation
|
||||
|
||||
- [ ] Document CollaborationManager API
|
||||
- [ ] Document NotificationManager API
|
||||
- [ ] Document CommunityManager API
|
||||
- [ ] Write architecture overview
|
||||
|
||||
#### Video Tutorials
|
||||
|
||||
- [ ] Record "Starting a Collaboration Session" (2-3 min)
|
||||
- [ ] Record "Joining a Session" (1-2 min)
|
||||
- [ ] Record "Setting Up Your Community" (5-7 min)
|
||||
|
||||
### 4. Server Deployment (6-10 hours)
|
||||
|
||||
#### Official Servers
|
||||
|
||||
- [ ] Deploy signaling server to production
|
||||
- [ ] Deploy sync server to production
|
||||
- [ ] Deploy notification server to production
|
||||
- [ ] Configure TURN server (Coturn or service)
|
||||
- [ ] Configure SSL certificates
|
||||
- [ ] Set up domain names
|
||||
|
||||
#### Monitoring & Observability
|
||||
|
||||
- [ ] Set up Prometheus metrics collection
|
||||
- [ ] Configure Grafana dashboards
|
||||
- [ ] Set up alerting (PagerDuty/Discord/email)
|
||||
- [ ] Configure log aggregation
|
||||
- [ ] Set up uptime monitoring
|
||||
|
||||
#### Operations
|
||||
|
||||
- [ ] Create deployment runbooks
|
||||
- [ ] Document scaling procedures
|
||||
- [ ] Set up backup systems (for notification server)
|
||||
- [ ] Perform load testing
|
||||
- [ ] Document incident response
|
||||
|
||||
### 5. Marketing Preparation (8-12 hours)
|
||||
|
||||
#### Demo Materials
|
||||
|
||||
- [ ] Create 3-5 minute demo video
|
||||
- [ ] Create GIF demonstrations
|
||||
- [ ] Prepare live demo environment
|
||||
|
||||
#### Content
|
||||
|
||||
- [ ] Write announcement blog post
|
||||
- [ ] Write technical deep-dive blog post
|
||||
- [ ] Create social media graphics
|
||||
- [ ] Write Twitter/X thread
|
||||
- [ ] Prepare Product Hunt submission
|
||||
|
||||
#### Press Kit
|
||||
|
||||
- [ ] Create feature comparison matrix
|
||||
- [ ] Compile screenshots
|
||||
- [ ] Write press release
|
||||
- [ ] Prepare case studies
|
||||
|
||||
---
|
||||
|
||||
## Verification Steps
|
||||
|
||||
### Functional Verification
|
||||
|
||||
- [ ] All automated tests pass
|
||||
- [ ] All manual test scenarios complete
|
||||
- [ ] No critical bugs remaining
|
||||
- [ ] Performance benchmarks met
|
||||
|
||||
### Documentation Verification
|
||||
|
||||
- [ ] Documentation is complete
|
||||
- [ ] Documentation is accurate
|
||||
- [ ] All links work
|
||||
- [ ] Code examples run
|
||||
|
||||
### Infrastructure Verification
|
||||
|
||||
- [ ] Servers deployed and healthy
|
||||
- [ ] Monitoring active
|
||||
- [ ] Alerts configured
|
||||
- [ ] Backup systems tested
|
||||
|
||||
### Security Verification
|
||||
|
||||
- [ ] Security audit passed
|
||||
- [ ] Privacy compliance verified
|
||||
- [ ] Rate limiting configured
|
||||
- [ ] Authentication working
|
||||
|
||||
---
|
||||
|
||||
## Launch Checklist
|
||||
|
||||
### Pre-Launch (T-7 days)
|
||||
|
||||
- [ ] Feature freeze
|
||||
- [ ] Final testing round
|
||||
- [ ] Documentation review
|
||||
- [ ] Marketing materials approved
|
||||
|
||||
### Launch Day (T-0)
|
||||
|
||||
- [ ] Feature flag enabled (if using)
|
||||
- [ ] Blog post published
|
||||
- [ ] Social media posts scheduled
|
||||
- [ ] Team available for support
|
||||
|
||||
### Post-Launch (T+1 to T+7)
|
||||
|
||||
- [ ] Monitor server health
|
||||
- [ ] Track error rates
|
||||
- [ ] Respond to user feedback
|
||||
- [ ] Fix critical issues immediately
|
||||
- [ ] Document lessons learned
|
||||
|
||||
---
|
||||
|
||||
## Success Metrics
|
||||
|
||||
### Adoption Metrics
|
||||
|
||||
| Metric | Target | Measurement |
|
||||
| ------------------------------ | ----------- | ----------- |
|
||||
| Communities created | 10+ | First month |
|
||||
| Collaboration sessions started | 100+ | First month |
|
||||
| Average session duration | 15+ minutes | - |
|
||||
| Components shared | 50+ | First month |
|
||||
|
||||
### Technical Metrics
|
||||
|
||||
| Metric | Target |
|
||||
| ------------------------------ | ---------- |
|
||||
| WebRTC connection success rate | >95% |
|
||||
| Average connection time | <3 seconds |
|
||||
| WebSocket fallback rate | <10% |
|
||||
| Notification delivery rate | >99% |
|
||||
| Server uptime | 99.9% |
|
||||
|
||||
### User Satisfaction
|
||||
|
||||
| Metric | Target |
|
||||
| ------------------------------------- | ------- |
|
||||
| Session completion rate | >80% |
|
||||
| Feature usage (audio, cursor sharing) | Tracked |
|
||||
| Net Promoter Score | >50 |
|
||||
|
||||
---
|
||||
|
||||
## Risk Mitigation
|
||||
|
||||
### Technical Risks
|
||||
|
||||
| Risk | Mitigation |
|
||||
| ---------------------------------- | ----------------------------------------- |
|
||||
| WebRTC fails in corporate networks | Automatic WebSocket fallback, TURN server |
|
||||
| Server overload at launch | Load testing, auto-scaling, rate limiting |
|
||||
| Data loss during sync | Yjs CRDT guarantees, periodic snapshots |
|
||||
| Security vulnerabilities | Security audit, penetration testing |
|
||||
|
||||
### Business Risks
|
||||
|
||||
| Risk | Mitigation |
|
||||
| ----------------------- | ------------------------------------------- |
|
||||
| Low adoption | Marketing push, tutorial content |
|
||||
| Community fragmentation | Make official community compelling |
|
||||
| Server costs | P2P-first architecture, self-hosting option |
|
||||
| Support overwhelm | Good documentation, FAQ, community forums |
|
||||
|
||||
---
|
||||
|
||||
## Files to Create/Update
|
||||
|
||||
```
|
||||
Documentation:
|
||||
docs/
|
||||
├── collaboration/
|
||||
│ ├── getting-started.md
|
||||
│ ├── sessions.md
|
||||
│ ├── troubleshooting.md
|
||||
│ └── faq.md
|
||||
├── community/
|
||||
│ ├── creating-community.md
|
||||
│ ├── community-json-schema.md
|
||||
│ └── self-hosting.md
|
||||
└── api/
|
||||
├── collaboration-manager.md
|
||||
├── notification-manager.md
|
||||
└── community-manager.md
|
||||
|
||||
Marketing:
|
||||
marketing/
|
||||
├── demo-video-script.md
|
||||
├── blog-post-announcement.md
|
||||
├── blog-post-technical.md
|
||||
├── social-media-kit/
|
||||
│ ├── twitter-thread.md
|
||||
│ └── graphics/
|
||||
└── press-kit/
|
||||
├── press-release.md
|
||||
├── screenshots/
|
||||
└── feature-comparison.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Definition of Done
|
||||
|
||||
This task (and the entire GIT-5 through GIT-11 series) is complete when:
|
||||
|
||||
1. ✅ All features implemented and tested
|
||||
2. ✅ Performance benchmarks met
|
||||
3. ✅ Documentation complete
|
||||
4. ✅ Servers deployed and monitored
|
||||
5. ✅ Marketing materials ready
|
||||
6. ✅ Launch checklist complete
|
||||
7. ✅ No critical bugs outstanding
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **GIT-005 through GIT-010**: All prior tasks in this series
|
||||
- **Future**: Advanced features (screen sharing, session recording, AI integration)
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,292 @@
|
||||
# VersionControlPanel + GitHub Integration Strategy
|
||||
|
||||
## Overview
|
||||
|
||||
This document outlines the strategy for integrating the new GitHub features (Issues, PRs, OAuth) with the existing VersionControlPanel. The goal is to **unify** rather than duplicate, leveraging the excellent existing git functionality.
|
||||
|
||||
---
|
||||
|
||||
## Key Finding: VersionControlPanel is Already React ✅
|
||||
|
||||
The existing VersionControlPanel is **100% React** with modern patterns:
|
||||
|
||||
- React functional components with hooks
|
||||
- Context API (`VersionControlContext`)
|
||||
- TypeScript throughout
|
||||
- Uses `@noodl-core-ui` design system
|
||||
- No jQuery (except PopupLayer which is a separate system)
|
||||
|
||||
**This means integration is straightforward - no rewrite needed!**
|
||||
|
||||
---
|
||||
|
||||
## What Already Exists
|
||||
|
||||
### VersionControlPanel (`packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/`)
|
||||
|
||||
| Component | Description | Status |
|
||||
| ----------------------- | -------------------------------------- | ---------- |
|
||||
| `LocalChanges.tsx` | View uncommitted changes | ✅ Working |
|
||||
| `History.tsx` | Browse commits | ✅ Working |
|
||||
| `HistoryCommitDiff.tsx` | Click commit → see visual diff | ✅ Working |
|
||||
| `CommitChangesDiff.tsx` | Diff logic for commits | ✅ Working |
|
||||
| `DiffList.tsx` | Visual diff renderer (green/red nodes) | ✅ Working |
|
||||
| `BranchList.tsx` | Manage branches | ✅ Working |
|
||||
| `BranchMerge.tsx` | Merge branches | ✅ Working |
|
||||
| `MergeConflicts.tsx` | Resolve conflicts | ✅ Working |
|
||||
| `Stashes.tsx` | Git stash support | ✅ Working |
|
||||
| `GitProviderPopout.tsx` | GitHub/Git credentials | ✅ Working |
|
||||
| `GitStatusButton.tsx` | Push/pull status | ✅ Working |
|
||||
|
||||
### VersionControlContext
|
||||
|
||||
Provides git state to all components:
|
||||
|
||||
```typescript
|
||||
const {
|
||||
git, // Git client instance
|
||||
activeTabId, // Current tab
|
||||
setActiveTabId, // Tab switcher
|
||||
localChangesCount, // Number of uncommitted changes
|
||||
branchStatus, // Current branch state
|
||||
fetch, // Fetch operations
|
||||
updateLocalDiff // Refresh diff
|
||||
} = useVersionControlContext();
|
||||
```
|
||||
|
||||
### GitHubPanel (New - from GIT-004 work)
|
||||
|
||||
| Component | Description | Status |
|
||||
| -------------------- | ---------------------- | ---------- |
|
||||
| `GitHubPanel.tsx` | Container panel | ✅ Working |
|
||||
| `useIssues.ts` | Fetch GitHub issues | ✅ Working |
|
||||
| `usePullRequests.ts` | Fetch GitHub PRs | ✅ Working |
|
||||
| `ConnectToGitHub/` | GitHub connection flow | ✅ Working |
|
||||
| `SyncToolbar.tsx` | Push/pull/sync status | ✅ Working |
|
||||
| `GitHubClient.ts` | GitHub API wrapper | ✅ Working |
|
||||
|
||||
---
|
||||
|
||||
## Integration Strategy
|
||||
|
||||
### Option A: Extend VersionControlPanel (Recommended) ✅
|
||||
|
||||
Add GitHub-specific tabs to the existing panel:
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────┐
|
||||
│ Version Control [⚙️] [🔗] │
|
||||
├──────────────────────────────────────────────────┤
|
||||
│ [GitStatusButton - push/pull status] │
|
||||
│ [BranchStatusButton - current branch] │
|
||||
├──────────────────────────────────────────────────┤
|
||||
│ [Changes] [History] [Issues] [PRs] ← NEW TABS │
|
||||
├──────────────────────────────────────────────────┤
|
||||
│ (Tab content - all existing components work) │
|
||||
└──────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
|
||||
- Leverages ALL existing functionality
|
||||
- Single unified panel
|
||||
- Visual diff system already works
|
||||
- Less code to maintain
|
||||
- Familiar UX for existing users
|
||||
|
||||
---
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### Phase 1: Add GitHub Context (2-3 hours)
|
||||
|
||||
Create a GitHub-specific context that can be used alongside VersionControlContext:
|
||||
|
||||
```typescript
|
||||
// New: GitHubContext.tsx in VersionControlPanel/context/
|
||||
interface GitHubContextValue {
|
||||
isGitHubConnected: boolean;
|
||||
issues: Issue[];
|
||||
pullRequests: PullRequest[];
|
||||
issuesLoading: boolean;
|
||||
prsLoading: boolean;
|
||||
refreshIssues: () => void;
|
||||
refreshPRs: () => void;
|
||||
}
|
||||
|
||||
export function GitHubProvider({ children, git }) {
|
||||
// Use existing hooks from GitHubPanel
|
||||
const { issues, loading: issuesLoading, refetch: refreshIssues } = useIssues(repoOwner, repoName);
|
||||
const { pullRequests, loading: prsLoading, refetch: refreshPRs } = usePullRequests(repoOwner, repoName);
|
||||
|
||||
return (
|
||||
<GitHubContext.Provider value={{...}}>
|
||||
{children}
|
||||
</GitHubContext.Provider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 2: Add Issues Tab (3-4 hours)
|
||||
|
||||
Move/refactor components from GitHubPanel:
|
||||
|
||||
```
|
||||
VersionControlPanel/
|
||||
├── components/
|
||||
│ ├── IssuesTab/ ← NEW (from GitHubPanel)
|
||||
│ │ ├── IssuesList.tsx
|
||||
│ │ ├── IssueItem.tsx
|
||||
│ │ └── IssueDetail.tsx
|
||||
```
|
||||
|
||||
Wire into tabs:
|
||||
|
||||
```typescript
|
||||
// In VersionControlPanel.tsx
|
||||
<Tabs
|
||||
tabs={[
|
||||
{ id: 'changes', label: 'Local Changes', content: <LocalChanges /> },
|
||||
{ id: 'history', label: 'History', content: <History /> },
|
||||
// NEW:
|
||||
{ id: 'issues', label: `Issues (${issues.length})`, content: <IssuesTab />, disabled: !isGitHubConnected },
|
||||
{ id: 'prs', label: `PRs (${prs.length})`, content: <PullRequestsTab />, disabled: !isGitHubConnected }
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
### Phase 3: Add PRs Tab (3-4 hours)
|
||||
|
||||
Similar to Issues tab:
|
||||
|
||||
```
|
||||
VersionControlPanel/
|
||||
├── components/
|
||||
│ ├── PullRequestsTab/ ← NEW (from GitHubPanel)
|
||||
│ │ ├── PRsList.tsx
|
||||
│ │ ├── PRItem.tsx
|
||||
│ │ └── PRDetail.tsx
|
||||
```
|
||||
|
||||
### Phase 4: Enhance GitProviderPopout (2-3 hours)
|
||||
|
||||
Upgrade existing popout with OAuth flow:
|
||||
|
||||
```typescript
|
||||
// GitProviderPopout.tsx - enhance with OAuth
|
||||
import { GitHubOAuthService } from '@noodl-services/GitHubOAuthService';
|
||||
|
||||
// Add "Connect with GitHub" button that triggers OAuth
|
||||
// Show connected status
|
||||
// Show authenticated user info
|
||||
```
|
||||
|
||||
### Phase 5: Deprecate Separate GitHubPanel (1-2 hours)
|
||||
|
||||
- Remove GitHubPanel from sidebar registration
|
||||
- Keep components for reuse in VersionControlPanel
|
||||
- Update any references
|
||||
|
||||
---
|
||||
|
||||
## Files to Modify
|
||||
|
||||
### VersionControlPanel (Main Changes)
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/
|
||||
├── VersionControlPanel.tsx # Add new tabs
|
||||
├── context/
|
||||
│ ├── index.tsx # Add GitHubProvider
|
||||
│ └── GitHubContext.tsx # NEW
|
||||
├── components/
|
||||
│ ├── IssuesTab/ # NEW (move from GitHubPanel)
|
||||
│ ├── PullRequestsTab/ # NEW (move from GitHubPanel)
|
||||
│ └── GitProviderPopout/
|
||||
│ └── GitProviderPopout.tsx # Enhance with OAuth
|
||||
```
|
||||
|
||||
### Move from GitHubPanel
|
||||
|
||||
```
|
||||
FROM: packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
components/IssuesTab/ → VersionControlPanel/components/IssuesTab/
|
||||
components/PullRequestsTab/ → VersionControlPanel/components/PullRequestsTab/
|
||||
hooks/useIssues.ts → VersionControlPanel/hooks/useIssues.ts
|
||||
hooks/usePullRequests.ts → VersionControlPanel/hooks/usePullRequests.ts
|
||||
```
|
||||
|
||||
### Services (Keep as-is)
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/services/github/
|
||||
├── GitHubClient.ts # Keep - used by hooks
|
||||
├── GitHubTypes.ts # Keep - type definitions
|
||||
├── GitHubOAuthService.ts # Keep - OAuth flow
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## What Stays Separate
|
||||
|
||||
### GitHubPanel Features That Don't Move
|
||||
|
||||
Some features make more sense in their current location:
|
||||
|
||||
- **Launcher "Clone from GitHub"** → Stay in Launcher (TASK-002C)
|
||||
- **Connect/Create Repo flows** → Can be triggered from VersionControlPanel but may open modals
|
||||
|
||||
---
|
||||
|
||||
## Visual Diff System - Already Working!
|
||||
|
||||
The visual diff magic you mentioned already works perfectly. When clicking a commit in History:
|
||||
|
||||
1. `History.tsx` renders list of commits
|
||||
2. Click → `HistoryCommitDiff.tsx` renders
|
||||
3. `CommitChangesDiff.tsx` fetches the project.json diff
|
||||
4. `DiffList.tsx` renders:
|
||||
- "Changed Components" section (click to see visual diff)
|
||||
- "Changed Files" section
|
||||
- "Changed Settings" section
|
||||
- "Changed Styles" section
|
||||
5. `useShowComponentDiffDocument` opens the visual node graph diff
|
||||
|
||||
**This all continues to work unchanged!**
|
||||
|
||||
---
|
||||
|
||||
## Benefits of This Approach
|
||||
|
||||
1. **Single panel** for all version control + GitHub
|
||||
2. **Existing visual diffs** work unchanged
|
||||
3. **No rewrite** - just adding tabs
|
||||
4. **Shared context** between git and GitHub features
|
||||
5. **Familiar UX** - users already know VersionControlPanel
|
||||
6. **Less code** to maintain than two separate panels
|
||||
|
||||
---
|
||||
|
||||
## Estimated Effort
|
||||
|
||||
| Phase | Task | Hours |
|
||||
| --------- | ------------------------- | --------------- |
|
||||
| 1 | Add GitHub Context | 2-3 |
|
||||
| 2 | Add Issues Tab | 3-4 |
|
||||
| 3 | Add PRs Tab | 3-4 |
|
||||
| 4 | Enhance GitProviderPopout | 2-3 |
|
||||
| 5 | Cleanup & Deprecate | 1-2 |
|
||||
| **Total** | | **11-16 hours** |
|
||||
|
||||
This is significantly less than maintaining two separate panels!
|
||||
|
||||
---
|
||||
|
||||
## Future: Community Tab
|
||||
|
||||
For the GIT-005-011 collaboration features, we might add a third panel:
|
||||
|
||||
- **VersionControlPanel** → Git + GitHub (Issues, PRs)
|
||||
- **CommunityPanel** → Communities, Sessions, Components, Notifications
|
||||
|
||||
Or integrate Community features as more tabs if it makes sense UX-wise.
|
||||
@@ -1,15 +1,39 @@
|
||||
# GIT-004: GitHub Project Management Integration
|
||||
# TASK-002B: GitHub Advanced Integration
|
||||
|
||||
## Overview
|
||||
|
||||
Transform Nodegex from a "coding tool with Git" into a **collaborative development hub** where teams can manage their entire project workflow without leaving the editor. This feature enables viewing, creating, and managing GitHub Issues, Pull Requests, and Discussions directly from both the Nodegex Editor and Dashboard.
|
||||
This task encompasses **two major feature sets**:
|
||||
|
||||
### Part 1: GitHub Project Management (GIT-004A-F)
|
||||
|
||||
Transform OpenNoodl from a "coding tool with Git" into a **collaborative development hub** where teams can manage their entire project workflow without leaving the editor.
|
||||
|
||||
**The killer feature**: Link GitHub issues directly to visual components, enabling unprecedented traceability between project management and implementation.
|
||||
|
||||
**Effort:** 70-90 hours across 6 sub-tasks
|
||||
|
||||
### Part 2: Live Collaboration & Multi-Community (GIT-005-011)
|
||||
|
||||
Transform OpenNoodl into a **collaborative platform** with real-time multi-user editing (Google Docs for visual programming), multi-community support, and persistent notifications.
|
||||
|
||||
**Effort:** 431-572 hours across 7 sub-tasks
|
||||
|
||||
---
|
||||
|
||||
**Phase:** 3 (Dashboard UX & Collaboration)
|
||||
**Priority:** HIGH (key differentiator)
|
||||
**Total Effort:** 70-90 hours across 6 sub-tasks
|
||||
**Risk:** Medium (OAuth complexity, GitHub API rate limits)
|
||||
**Total Effort:** 501-662 hours across 13 sub-tasks
|
||||
**Risk:** Medium-High (OAuth complexity, WebRTC, server infrastructure)
|
||||
|
||||
---
|
||||
|
||||
## Integration Strategy
|
||||
|
||||
**Important:** We're extending the existing `VersionControlPanel` rather than creating a separate panel. The existing panel is already 100% React with full visual diff support (showing green nodes for additions, red for deletions).
|
||||
|
||||
See **[GIT-INTEGRATION-STRATEGY.md](./GIT-INTEGRATION-STRATEGY.md)** for details.
|
||||
|
||||
**Key insight:** The visual commit diff system already works perfectly - we just need to add GitHub-specific tabs (Issues, PRs) to the existing panel.
|
||||
|
||||
---
|
||||
|
||||
@@ -19,13 +43,13 @@ Transform Nodegex from a "coding tool with Git" into a **collaborative developme
|
||||
|
||||
No major low-code platform offers this level of GitHub integration:
|
||||
|
||||
| Platform | Git Support | Issues/PRs | Component Linking |
|
||||
|----------|-------------|------------|-------------------|
|
||||
| Retool | ❌ | ❌ | ❌ |
|
||||
| Bubble | ❌ | ❌ | ❌ |
|
||||
| Webflow | Basic | ❌ | ❌ |
|
||||
| FlutterFlow | Basic | ❌ | ❌ |
|
||||
| **Nodegex** | ✅ Full | ✅ Full | ✅ **Unique** |
|
||||
| Platform | Git Support | Issues/PRs | Component Linking |
|
||||
| ----------- | ----------- | ---------- | ----------------- |
|
||||
| Retool | ❌ | ❌ | ❌ |
|
||||
| Bubble | ❌ | ❌ | ❌ |
|
||||
| Webflow | Basic | ❌ | ❌ |
|
||||
| FlutterFlow | Basic | ❌ | ❌ |
|
||||
| **Nodegex** | ✅ Full | ✅ Full | ✅ **Unique** |
|
||||
|
||||
### Target Users
|
||||
|
||||
@@ -101,6 +125,7 @@ Overview widgets for project health and team awareness.
|
||||
Upgrade from PAT-based authentication to full GitHub App OAuth flow, and create a reusable GitHub API client.
|
||||
|
||||
**Scope:**
|
||||
|
||||
- GitHub App registration guidance/documentation
|
||||
- OAuth authorization flow in Electron
|
||||
- Secure token storage (upgrade from current GitStore pattern)
|
||||
@@ -108,6 +133,7 @@ Upgrade from PAT-based authentication to full GitHub App OAuth flow, and create
|
||||
- Token refresh handling
|
||||
|
||||
**Files to Create:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/services/github/
|
||||
├── GitHubAuth.ts # OAuth flow handler
|
||||
@@ -118,6 +144,7 @@ packages/noodl-editor/src/editor/src/services/github/
|
||||
```
|
||||
|
||||
**Files to Modify:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/
|
||||
components/GitProviderPopout/GitProviderPopout.tsx
|
||||
@@ -129,6 +156,7 @@ packages/noodl-git/src/git.ts
|
||||
```
|
||||
|
||||
**Success Criteria:**
|
||||
|
||||
- [ ] User can authenticate via GitHub OAuth from editor
|
||||
- [ ] Token stored securely and persists across sessions
|
||||
- [ ] Token refresh works automatically
|
||||
@@ -142,6 +170,7 @@ packages/noodl-git/src/git.ts
|
||||
View GitHub issues for the connected repository.
|
||||
|
||||
**Scope:**
|
||||
|
||||
- New sidebar panel: GitHubPanel with tabbed interface
|
||||
- Issues list with filtering (open/closed, labels, assignees)
|
||||
- Issue detail view (body, comments, labels, assignees)
|
||||
@@ -150,6 +179,7 @@ View GitHub issues for the connected repository.
|
||||
- Pagination for large issue lists
|
||||
|
||||
**Files to Create:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
├── GitHubPanel.tsx
|
||||
@@ -169,6 +199,7 @@ packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
```
|
||||
|
||||
**Files to Modify:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/router.setup.ts
|
||||
- Register GitHubPanel with SidebarModel
|
||||
@@ -178,10 +209,12 @@ packages/noodl-editor/src/editor/src/models/sidebar/sidebarmodel.tsx
|
||||
```
|
||||
|
||||
**Dependencies:**
|
||||
|
||||
- `react-markdown` for rendering issue bodies
|
||||
- `@octokit/rest` (from GIT-004A)
|
||||
|
||||
**Success Criteria:**
|
||||
|
||||
- [ ] GitHub panel appears in sidebar when repo is connected
|
||||
- [ ] Issues list loads and displays correctly
|
||||
- [ ] Filters work (open/closed, labels, assignees, search)
|
||||
@@ -197,6 +230,7 @@ packages/noodl-editor/src/editor/src/models/sidebar/sidebarmodel.tsx
|
||||
View GitHub pull requests for the connected repository.
|
||||
|
||||
**Scope:**
|
||||
|
||||
- PRs tab in GitHubPanel
|
||||
- PR list with status indicators (draft, review requested, approved, changes requested)
|
||||
- PR detail view (description, commits, checks status)
|
||||
@@ -205,6 +239,7 @@ View GitHub pull requests for the connected repository.
|
||||
- Merge conflict indicators
|
||||
|
||||
**Files to Create:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
├── components/
|
||||
@@ -220,6 +255,7 @@ packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
```
|
||||
|
||||
**Success Criteria:**
|
||||
|
||||
- [ ] PRs tab displays all open PRs
|
||||
- [ ] Status badges show draft/review/approved/changes requested
|
||||
- [ ] PR detail shows description, commits list, checks status
|
||||
@@ -234,6 +270,7 @@ packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
Full CRUD operations for GitHub issues from within Nodegex.
|
||||
|
||||
**Scope:**
|
||||
|
||||
- Create Issue dialog with title, body (markdown editor), labels, assignees
|
||||
- Edit existing issues (title, body, status)
|
||||
- Add comments to issues
|
||||
@@ -242,6 +279,7 @@ Full CRUD operations for GitHub issues from within Nodegex.
|
||||
- Issue templates support (load from repo's .github/ISSUE_TEMPLATE/)
|
||||
|
||||
**Files to Create:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
├── components/
|
||||
@@ -256,12 +294,14 @@ packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
```
|
||||
|
||||
**Files to Modify:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/nodegrapheditor/
|
||||
- Add context menu items for component-linked issue creation
|
||||
```
|
||||
|
||||
**Success Criteria:**
|
||||
|
||||
- [ ] Create Issue dialog opens from panel header
|
||||
- [ ] Can set title, body, labels, assignees
|
||||
- [ ] Markdown preview works in body editor
|
||||
@@ -279,6 +319,7 @@ packages/noodl-editor/src/editor/src/views/nodegrapheditor/
|
||||
**THE KILLER FEATURE**: Link GitHub issues to visual components for unprecedented traceability.
|
||||
|
||||
**Scope:**
|
||||
|
||||
- Component metadata extension for issue links
|
||||
- "Link Issue" dialog from component context menu
|
||||
- "Create Issue from Component" with auto-populated context
|
||||
@@ -295,21 +336,22 @@ interface ComponentMetadata {
|
||||
name: string;
|
||||
// ... existing fields
|
||||
github?: {
|
||||
linkedIssues: number[]; // Issue numbers
|
||||
linkedPRs: number[]; // PR numbers
|
||||
lastModifiedBy?: string; // GitHub username
|
||||
linkedIssues: number[]; // Issue numbers
|
||||
linkedPRs: number[]; // PR numbers
|
||||
lastModifiedBy?: string; // GitHub username
|
||||
};
|
||||
}
|
||||
|
||||
// Issue display shows linked components
|
||||
interface LinkedComponent {
|
||||
componentName: string;
|
||||
componentPath: string; // For navigation
|
||||
componentPath: string; // For navigation
|
||||
linkType: 'mentioned' | 'implements' | 'fixes';
|
||||
}
|
||||
```
|
||||
|
||||
**Files to Create:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/services/github/
|
||||
├── ComponentLinking.ts # Link management logic
|
||||
@@ -323,6 +365,7 @@ packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
```
|
||||
|
||||
**Files to Modify:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/models/projectmodel.ts
|
||||
- Add methods for component GitHub metadata
|
||||
@@ -338,17 +381,20 @@ packages/noodl-editor/src/editor/src/views/panels/PropertyPanel/
|
||||
**User Flows:**
|
||||
|
||||
1. **Link Existing Issue to Component:**
|
||||
|
||||
- Right-click component → "Link to Issue"
|
||||
- Search/select from open issues
|
||||
- Choose link type (mentions, implements, fixes)
|
||||
- Component shows badge, issue shows component link
|
||||
|
||||
2. **Create Issue from Component:**
|
||||
|
||||
- Right-click component → "Create Issue"
|
||||
- Dialog pre-fills: component name, path, screenshot option
|
||||
- Creates issue and links automatically
|
||||
|
||||
3. **Navigate from Issue to Component:**
|
||||
|
||||
- In issue detail, "Linked Components" section
|
||||
- Click component name → navigates to component in editor
|
||||
|
||||
@@ -358,6 +404,7 @@ packages/noodl-editor/src/editor/src/views/panels/PropertyPanel/
|
||||
- Auto-labels as "bug"
|
||||
|
||||
**Success Criteria:**
|
||||
|
||||
- [ ] Can link issues to components via context menu
|
||||
- [ ] Can create issue from component with pre-filled context
|
||||
- [ ] Components show visual indicator when issues linked
|
||||
@@ -374,6 +421,7 @@ packages/noodl-editor/src/editor/src/views/panels/PropertyPanel/
|
||||
Project health overview and activity feed in the Dashboard.
|
||||
|
||||
**Scope:**
|
||||
|
||||
- Project card enhancements: issue/PR counts, health indicators
|
||||
- Activity feed widget: recent issue/PR activity across projects
|
||||
- Notification badges for items needing attention
|
||||
@@ -381,6 +429,7 @@ Project health overview and activity feed in the Dashboard.
|
||||
- Click-through to editor with correct panel open
|
||||
|
||||
**Files to Create:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/Dashboard/
|
||||
├── components/
|
||||
@@ -393,6 +442,7 @@ packages/noodl-editor/src/editor/src/views/Dashboard/
|
||||
```
|
||||
|
||||
**Files to Modify:**
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/Dashboard/ProjectCard/
|
||||
- Add GitHub stats display
|
||||
@@ -405,6 +455,7 @@ packages/noodl-editor/src/editor/src/views/Dashboard/Dashboard.tsx
|
||||
**Dashboard Features:**
|
||||
|
||||
1. **Project Card Stats:**
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ My Project │
|
||||
@@ -418,6 +469,7 @@ packages/noodl-editor/src/editor/src/views/Dashboard/Dashboard.tsx
|
||||
```
|
||||
|
||||
2. **Activity Feed:**
|
||||
|
||||
- Shows recent activity across all connected projects
|
||||
- Filterable by type (issues, PRs, discussions)
|
||||
- "Assigned to me" filter
|
||||
@@ -428,6 +480,7 @@ packages/noodl-editor/src/editor/src/views/Dashboard/Dashboard.tsx
|
||||
- Attention triggers: assigned issues, review requests, mentions
|
||||
|
||||
**Success Criteria:**
|
||||
|
||||
- [ ] Project cards show GitHub stats when connected
|
||||
- [ ] Activity feed displays recent cross-project activity
|
||||
- [ ] Notification badges appear for items needing attention
|
||||
@@ -462,16 +515,17 @@ function useIssues(repoOwner: string, repoName: string) {
|
||||
const [issues, setIssues] = useState<GitHubIssue[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
|
||||
const client = useGitHubClient();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
client.issues.list({ owner: repoOwner, repo: repoName })
|
||||
client.issues
|
||||
.list({ owner: repoOwner, repo: repoName })
|
||||
.then(setIssues)
|
||||
.catch(setError)
|
||||
.finally(() => setLoading(false));
|
||||
}, [repoOwner, repoName]);
|
||||
|
||||
|
||||
return { issues, loading, error, refetch };
|
||||
}
|
||||
```
|
||||
@@ -507,10 +561,10 @@ GitHub API has limits (5000 requests/hour for authenticated users). Strategy:
|
||||
|
||||
```json
|
||||
{
|
||||
"@octokit/rest": "^20.0.0", // GitHub API client
|
||||
"@octokit/rest": "^20.0.0", // GitHub API client
|
||||
"@octokit/auth-oauth-app": "^7.0.0", // OAuth flow
|
||||
"react-markdown": "^9.0.0", // Markdown rendering
|
||||
"remark-gfm": "^4.0.0" // GitHub Flavored Markdown
|
||||
"react-markdown": "^9.0.0", // Markdown rendering
|
||||
"remark-gfm": "^4.0.0" // GitHub Flavored Markdown
|
||||
}
|
||||
```
|
||||
|
||||
@@ -543,6 +597,7 @@ GIT-004A: OAuth & Client Foundation
|
||||
```
|
||||
|
||||
**Recommended sequence:**
|
||||
|
||||
1. **GIT-004A** (Foundation) - Required first
|
||||
2. **GIT-004B** (Issues Read) - Core value, quick win
|
||||
3. **GIT-004D** (Issues Write) - Enables productivity
|
||||
@@ -581,13 +636,13 @@ GIT-004A: OAuth & Client Foundation
|
||||
|
||||
## Risks & Mitigations
|
||||
|
||||
| Risk | Impact | Probability | Mitigation |
|
||||
|------|--------|-------------|------------|
|
||||
| GitHub API rate limits | Medium | Medium | Caching, conditional requests, user feedback |
|
||||
| OAuth complexity in Electron | High | Medium | Follow GitHub Desktop patterns, thorough testing |
|
||||
| Token security concerns | High | Low | Use OS keychain via electron-store encryption |
|
||||
| Large repos performance | Medium | Medium | Pagination, virtual lists, lazy loading |
|
||||
| GitHub API changes | Low | Low | Pin @octokit version, integration tests |
|
||||
| Risk | Impact | Probability | Mitigation |
|
||||
| ---------------------------- | ------ | ----------- | ------------------------------------------------ |
|
||||
| GitHub API rate limits | Medium | Medium | Caching, conditional requests, user feedback |
|
||||
| OAuth complexity in Electron | High | Medium | Follow GitHub Desktop patterns, thorough testing |
|
||||
| Token security concerns | High | Low | Use OS keychain via electron-store encryption |
|
||||
| Large repos performance | Medium | Medium | Pagination, virtual lists, lazy loading |
|
||||
| GitHub API changes | Low | Low | Pin @octokit version, integration tests |
|
||||
|
||||
---
|
||||
|
||||
@@ -619,3 +674,124 @@ GIT-004A: OAuth & Client Foundation
|
||||
- [GitHub App Permissions](https://docs.github.com/en/rest/overview/permissions-required-for-github-apps)
|
||||
- Existing: `packages/noodl-git/` - Current Git integration
|
||||
- Existing: `VersionControlPanel/` - Current VCS UI patterns
|
||||
|
||||
---
|
||||
|
||||
# Part 2: Live Collaboration & Multi-Community System (GIT-005-011)
|
||||
|
||||
## Overview
|
||||
|
||||
This series transforms OpenNoodl into a collaborative platform with multi-community support, live real-time collaboration (Google Docs for visual programming), and persistent notification system.
|
||||
|
||||
**Total Estimated Hours:** 431-572 hours
|
||||
|
||||
---
|
||||
|
||||
## Task Summary
|
||||
|
||||
| Task | Name | Estimated Hours | Status |
|
||||
| ------- | --------------------------- | --------------- | -------------- |
|
||||
| GIT-005 | Community Infrastructure | 60-80 | 🔴 Not Started |
|
||||
| GIT-006 | Server Infrastructure | 80-100 | 🔴 Not Started |
|
||||
| GIT-007 | WebRTC Collaboration Client | 100-130 | 🔴 Not Started |
|
||||
| GIT-008 | Notification System | 50-70 | 🔴 Not Started |
|
||||
| GIT-009 | Community Tab UI/UX | 80-100 | 🔴 Not Started |
|
||||
| GIT-010 | Session Discovery & Joining | 50-70 | 🔴 Not Started |
|
||||
| GIT-011 | Integration & Polish | 61-82 | 🔴 Not Started |
|
||||
|
||||
---
|
||||
|
||||
## Key Features
|
||||
|
||||
### Multi-Community System
|
||||
|
||||
- Join multiple communities simultaneously
|
||||
- Fork and operate your own communities
|
||||
- Self-hosted infrastructure option (BYOB philosophy)
|
||||
- Community template repository for forking
|
||||
|
||||
### Live Collaboration
|
||||
|
||||
- Real-time multi-user editing via WebRTC
|
||||
- Cursor and selection sharing
|
||||
- Audio/video chat built-in
|
||||
- Automatic WebSocket fallback when P2P fails
|
||||
|
||||
### Persistent Notifications
|
||||
|
||||
- Cross-session notification system
|
||||
- Collaboration invites
|
||||
- Community events and mentions
|
||||
- Desktop notification support
|
||||
|
||||
### Community Features
|
||||
|
||||
- Component library discovery
|
||||
- Tutorial and showcase feeds
|
||||
- GitHub Discussions integration
|
||||
- Job board
|
||||
|
||||
---
|
||||
|
||||
## Task Details
|
||||
|
||||
Each task has a detailed README in its subdirectory:
|
||||
|
||||
- **[GIT-005: Community Infrastructure](./GIT-005-community-infrastructure/README.md)** - Template repository, community.json schema, CommunityManager service
|
||||
- **[GIT-006: Server Infrastructure](./GIT-006-server-infrastructure/README.md)** - Signaling, Sync, and Notification servers
|
||||
- **[GIT-007: WebRTC Collaboration](./GIT-007-webrtc-collaboration/README.md)** - P2P connections, Yjs CRDT sync, media handling
|
||||
- **[GIT-008: Notification System](./GIT-008-notification-system/README.md)** - NotificationManager, toasts, notification center
|
||||
- **[GIT-009: Community UI](./GIT-009-community-ui/README.md)** - Community tab with sessions, components, tutorials
|
||||
- **[GIT-010: Session Discovery](./GIT-010-session-discovery/README.md)** - Deep links, quick join, session history
|
||||
- **[GIT-011: Integration & Polish](./GIT-011-integration-polish/README.md)** - Testing, documentation, deployment
|
||||
|
||||
---
|
||||
|
||||
## Implementation Order
|
||||
|
||||
```
|
||||
GIT-005: Community Infrastructure
|
||||
│
|
||||
└──► GIT-006: Server Infrastructure
|
||||
│
|
||||
├──► GIT-007: WebRTC Collaboration Client
|
||||
│ │
|
||||
│ └──► GIT-010: Session Discovery
|
||||
│
|
||||
└──► GIT-008: Notification System
|
||||
│
|
||||
└──► GIT-009: Community Tab UI
|
||||
│
|
||||
└──► GIT-011: Integration & Polish
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dependencies
|
||||
|
||||
### NPM Packages
|
||||
|
||||
```json
|
||||
{
|
||||
"yjs": "^13.6.0",
|
||||
"y-webrtc": "^10.2.0",
|
||||
"y-websocket": "^1.5.0",
|
||||
"simple-peer": "^9.11.0"
|
||||
}
|
||||
```
|
||||
|
||||
### External Infrastructure
|
||||
|
||||
- Signaling server (WebSocket)
|
||||
- Sync server (Yjs WebSocket)
|
||||
- Notification server (WebSocket + persistence)
|
||||
- TURN server (for WebRTC fallback)
|
||||
|
||||
---
|
||||
|
||||
## Source Documentation
|
||||
|
||||
Full detailed specifications are in:
|
||||
|
||||
- `GIT-5-to-GIT-11-Live-Collaboration-Community-System.md`
|
||||
- `GIT-5-to-GIT-11-Part-2-Community-UI-Integration.md`
|
||||
|
||||
@@ -0,0 +1,246 @@
|
||||
# TASK-002C: GitHub Clone & Connect - Changelog
|
||||
|
||||
## 2025-01-17 - Subtask A: Clone from GitHub ✅ COMPLETE
|
||||
|
||||
### Implemented Features
|
||||
|
||||
#### 1. GitHub Tab in Launcher
|
||||
|
||||
- New "GitHub" tab added to the launcher navigation
|
||||
- Shows user's GitHub avatar when connected
|
||||
- Only available when authenticated
|
||||
|
||||
#### 2. Noodl Project Detection
|
||||
|
||||
- Scans all repos for `project.json` at root
|
||||
- Shows scanning progress: "Scanning X repositories for project.json..."
|
||||
- Only displays repos that are confirmed Noodl projects
|
||||
- Caches detection results for 1 minute
|
||||
|
||||
#### 3. Repository Organization
|
||||
|
||||
- Groups repos by source: Personal vs Organization
|
||||
- Collapsible organization sections with project counts
|
||||
- Shows repo details: name, privacy status, description, last updated
|
||||
|
||||
#### 4. Clone Functionality
|
||||
|
||||
- Clone button on each Noodl project card
|
||||
- User selects destination folder via native dialog
|
||||
- Progress indicator during clone
|
||||
- **Legacy project detection**: After cloning, detects React 17 projects and shows:
|
||||
- **Migrate** - Opens migration wizard
|
||||
- **Read-Only** - Opens in read-only mode
|
||||
- **Cancel** - Adds to projects list without opening
|
||||
|
||||
#### 5. OAuth Improvements
|
||||
|
||||
- Fixed cache bug: null values now properly handled (undefined vs null)
|
||||
- Fixed scope: Token now has proper permissions for private repo access
|
||||
- Connection status persists across sessions
|
||||
|
||||
### Files Modified
|
||||
|
||||
**Editor (noodl-editor):**
|
||||
|
||||
- `src/editor/src/pages/ProjectsPage/ProjectsPage.tsx` - Added handleCloneRepo with legacy detection
|
||||
- `src/editor/src/services/github/GitHubClient.ts` - Fixed cache, simplified isNoodlProject
|
||||
- `src/editor/src/services/GitHubOAuthService.ts` - Fixed token persistence
|
||||
|
||||
**Core UI (noodl-core-ui):**
|
||||
|
||||
- `src/preview/launcher/Launcher/views/GitHubRepos.tsx` - New GitHub repos view
|
||||
- `src/preview/launcher/Launcher/hooks/useGitHubRepos.ts` - Hook for fetching/detecting repos
|
||||
- `src/preview/launcher/Launcher/Launcher.tsx` - Added GitHub tab
|
||||
- `src/preview/launcher/Launcher/LauncherContext.tsx` - Added GitHub context props
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Fixed cache returning stale null values (404 results)
|
||||
- Removed premature `nodegx.project.json` check
|
||||
- Fixed OAuth flow to properly complete on macOS
|
||||
|
||||
### Known Limitations
|
||||
|
||||
- Only checks default branch for project.json
|
||||
- API rate limit: ~5000 requests/hour (sufficient for most users)
|
||||
- Large organizations may take time to scan all repos
|
||||
|
||||
---
|
||||
|
||||
## 2025-01-17 - Subtask B: Connect Project to GitHub ✅ COMPLETE
|
||||
|
||||
### Implemented Features
|
||||
|
||||
#### 1. Enhanced Git State Detection
|
||||
|
||||
- Extended `useGitHubRepository` hook to return detailed git state:
|
||||
- `no-git` - No .git folder, project not under version control
|
||||
- `git-no-remote` - Has .git but no remote configured
|
||||
- `remote-not-github` - Has remote but not github.com
|
||||
- `github-connected` - Connected to GitHub
|
||||
|
||||
#### 2. Connect to GitHub Flow
|
||||
|
||||
- **ConnectToGitHubView** - Main view showing state-appropriate options
|
||||
- State-specific messaging:
|
||||
- No git: "Initialize Git Repository"
|
||||
- No remote: "Connect to GitHub"
|
||||
- Not GitHub: Shows current remote URL with explanation
|
||||
|
||||
#### 3. Create New Repository
|
||||
|
||||
- **CreateRepoModal** - Full modal for creating new GitHub repos
|
||||
- Features:
|
||||
- Repository name with validation (GitHub naming rules)
|
||||
- Optional description
|
||||
- Visibility toggle (Private/Public, defaults to Private)
|
||||
- Organization picker (lists user's organizations)
|
||||
- After creation:
|
||||
- Initializes git if needed
|
||||
- Adds remote origin
|
||||
- Creates initial commit
|
||||
- Pushes to remote
|
||||
|
||||
#### 4. Connect to Existing Repository
|
||||
|
||||
- **SelectRepoModal** - Browse and select from user's repos
|
||||
- Features:
|
||||
- Lists all user repos + organization repos
|
||||
- Search/filter by name or description
|
||||
- Grouped by owner (Personal vs Organization)
|
||||
- Shows privacy status and last updated
|
||||
- After connecting:
|
||||
- Initializes git if needed
|
||||
- Sets remote URL
|
||||
- Fetches from remote if repo has commits
|
||||
- Attempts to merge remote changes
|
||||
|
||||
### Files Added
|
||||
|
||||
**ConnectToGitHub Components:**
|
||||
|
||||
- `components/ConnectToGitHub/ConnectToGitHubView.tsx` - Main view component
|
||||
- `components/ConnectToGitHub/CreateRepoModal.tsx` - Create repo modal
|
||||
- `components/ConnectToGitHub/SelectRepoModal.tsx` - Select existing repo modal
|
||||
- `components/ConnectToGitHub/ConnectToGitHub.module.scss` - Styles
|
||||
- `components/ConnectToGitHub/index.ts` - Exports
|
||||
|
||||
### Files Modified
|
||||
|
||||
- `hooks/useGitHubRepository.ts` - Enhanced with `ProjectGitState` type and `refetch` function
|
||||
- `services/github/GitHubTypes.ts` - Added `CreateRepositoryOptions` interface
|
||||
- `services/github/GitHubClient.ts` - Added `createRepository` method
|
||||
- `GitHubPanel.tsx` - Integrated ConnectToGitHubView for unconnected states
|
||||
|
||||
---
|
||||
|
||||
## 2025-01-17 - Subtask C: Push/Pull from GitHub Panel ✅ COMPLETE
|
||||
|
||||
### Implemented Features
|
||||
|
||||
#### 1. Git Sync Status Hook
|
||||
|
||||
- **useGitSyncStatus** - Monitors git sync status in real-time
|
||||
- Tracks:
|
||||
- `ahead` - Number of commits ahead of remote
|
||||
- `behind` - Number of commits behind remote
|
||||
- `hasUncommittedChanges` - Whether there are local changes
|
||||
- Provides:
|
||||
- `push()` - Push to remote (auto-commits if uncommitted changes)
|
||||
- `pull()` - Pull from remote (stashes changes, merges, pops stash)
|
||||
- `refresh()` - Manually refresh sync status
|
||||
- Auto-refreshes on project save and remote changes
|
||||
|
||||
#### 2. Sync Toolbar
|
||||
|
||||
- **SyncToolbar** - Toolbar displayed at top of GitHubPanel when connected
|
||||
- Shows:
|
||||
- Repository name (owner/repo)
|
||||
- Sync status (uncommitted changes, up to date)
|
||||
- Buttons:
|
||||
- **Pull** - Pull from remote, shows badge with behind count
|
||||
- **Push** - Push to remote, shows badge with ahead count or "!" for uncommitted
|
||||
- **Refresh** - Manually refresh sync status (spinning animation while loading)
|
||||
- Visual feedback:
|
||||
- Highlighted buttons when there are changes to push/pull
|
||||
- Error bar for operation failures
|
||||
|
||||
#### 3. Push Operation
|
||||
|
||||
- Checks for uncommitted changes
|
||||
- Auto-commits with "Auto-commit before push" message
|
||||
- Pushes to remote
|
||||
- Refreshes sync status
|
||||
|
||||
#### 4. Pull Operation
|
||||
|
||||
- Stashes local changes if present
|
||||
- Fetches from remote
|
||||
- Merges remote branch into current branch
|
||||
- Pops stash to restore local changes
|
||||
- Notifies project to refresh
|
||||
|
||||
### Files Added
|
||||
|
||||
**SyncToolbar Component:**
|
||||
|
||||
- `components/SyncToolbar/SyncToolbar.tsx` - Toolbar with push/pull buttons
|
||||
- `components/SyncToolbar/SyncToolbar.module.scss` - Styles
|
||||
- `components/SyncToolbar/index.ts` - Exports
|
||||
|
||||
**Hooks:**
|
||||
|
||||
- `hooks/useGitSyncStatus.ts` - Git sync status monitoring
|
||||
|
||||
### Files Modified
|
||||
|
||||
- `GitHubPanel.tsx` - Added SyncToolbar to connected state view
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
### All Subtasks Complete ✅
|
||||
|
||||
| Subtask | Status | Description |
|
||||
| ------------------------------ | -------- | ----------------------------------------------- |
|
||||
| A: Clone from GitHub | Complete | Clone Noodl projects from GitHub in launcher |
|
||||
| B: Connect Project to GitHub | Complete | Initialize git, create/connect repo from editor |
|
||||
| C: Push/Pull from GitHub Panel | Complete | Push/pull with sync status in GitHubPanel |
|
||||
|
||||
### Files Created (New)
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
|
||||
├── components/
|
||||
│ ├── ConnectToGitHub/
|
||||
│ │ ├── ConnectToGitHub.module.scss
|
||||
│ │ ├── ConnectToGitHubView.tsx
|
||||
│ │ ├── CreateRepoModal.tsx
|
||||
│ │ ├── SelectRepoModal.tsx
|
||||
│ │ └── index.ts
|
||||
│ └── SyncToolbar/
|
||||
│ ├── SyncToolbar.module.scss
|
||||
│ ├── SyncToolbar.tsx
|
||||
│ └── index.ts
|
||||
└── hooks/
|
||||
└── useGitSyncStatus.ts
|
||||
```
|
||||
|
||||
### Files Modified
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/
|
||||
├── services/github/
|
||||
│ ├── GitHubClient.ts (added createRepository)
|
||||
│ └── GitHubTypes.ts (added CreateRepositoryOptions)
|
||||
└── views/panels/GitHubPanel/
|
||||
├── GitHubPanel.tsx (integrated new components)
|
||||
└── hooks/
|
||||
└── useGitHubRepository.ts (enhanced state detection)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
_Completed: January 2025_
|
||||
@@ -0,0 +1,197 @@
|
||||
# TASK-002C: GitHub Clone & Connect UX
|
||||
|
||||
## Overview
|
||||
|
||||
Add two critical GitHub UX flows that are currently missing:
|
||||
|
||||
1. **Clone Noodl Projects from GitHub** - Browse and clone existing Noodl projects from user's orgs/repos
|
||||
2. **Connect Project to GitHub** - Initialize git and create/connect remote for unconnected projects
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- [x] GitHub OAuth working (TASK-002B)
|
||||
- [x] Token persistence working
|
||||
- [x] GitHubOAuthService unified across launcher/editor
|
||||
|
||||
## Subtask A: Clone from GitHub (Launcher)
|
||||
|
||||
### User Story
|
||||
|
||||
> As a user, I want to browse my GitHub orgs/repos in the Launcher and clone existing Noodl projects with one click.
|
||||
|
||||
### Requirements
|
||||
|
||||
1. **UI: GitHub Repositories Tab/Section in Launcher**
|
||||
|
||||
- Show when authenticated with GitHub
|
||||
- List user's organizations (from OAuth app installations)
|
||||
- List user's personal repositories
|
||||
- Search/filter by name
|
||||
- Visual indicator for Noodl projects (detected via `project.json`)
|
||||
|
||||
2. **Noodl Project Detection**
|
||||
|
||||
- Query GitHub API for `project.json` in repo root
|
||||
- Only show repos that contain `project.json` (optional: user toggle to show all)
|
||||
- Show warning badge for repos without `project.json`
|
||||
|
||||
3. **Clone Flow**
|
||||
- User clicks "Clone" on a repo
|
||||
- Select local destination folder
|
||||
- Clone with progress indicator
|
||||
- Automatically add to projects list
|
||||
- Option to open immediately after clone
|
||||
|
||||
### API Requirements
|
||||
|
||||
```typescript
|
||||
// GitHubClient additions needed:
|
||||
listUserRepositories(): Promise<GitHubRepository[]>
|
||||
listOrganizationRepositories(org: string): Promise<GitHubRepository[]>
|
||||
getFileContent(owner: string, repo: string, path: string): Promise<string | null>
|
||||
```
|
||||
|
||||
### Files to Create/Modify
|
||||
|
||||
- `packages/noodl-core-ui/src/preview/launcher/Launcher/views/GitHubRepos/` (new)
|
||||
- `GitHubReposView.tsx`
|
||||
- `GitHubReposList.tsx`
|
||||
- `GitHubRepoCard.tsx`
|
||||
- `hooks/useGitHubRepos.ts`
|
||||
- `packages/noodl-editor/src/editor/src/services/github/GitHubClient.ts` (extend)
|
||||
- `packages/noodl-editor/src/editor/src/pages/ProjectsPage/ProjectsPage.tsx` (add clone handler)
|
||||
|
||||
---
|
||||
|
||||
## Subtask B: Connect Project to GitHub (In-Editor)
|
||||
|
||||
### User Story
|
||||
|
||||
> As a user, when my project isn't connected to GitHub, I want to either create a new repo or connect to an existing one.
|
||||
|
||||
### Requirements
|
||||
|
||||
1. **Detection State**
|
||||
|
||||
- Project has no `.git` folder → "Initialize Git"
|
||||
- Project has `.git` but no remote → "Add Remote"
|
||||
- Project has remote but not GitHub → "Not a GitHub repo" (read-only info)
|
||||
- Project connected to GitHub → Show Issues/PRs as normal
|
||||
|
||||
2. **UI: "Not Connected" State in GitHubPanel**
|
||||
|
||||
- Replace 404 errors with friendly message
|
||||
- Show two primary actions:
|
||||
- **"Create New Repository"** → Creates on GitHub, adds as remote, pushes
|
||||
- **"Connect Existing Repository"** → Browse user's repos, set as remote
|
||||
|
||||
3. **Create New Repo Flow**
|
||||
|
||||
- Modal: Enter repo name, description, visibility (public/private)
|
||||
- Select organization (from OAuth installations) or personal
|
||||
- Create via GitHub API
|
||||
- Initialize git if needed
|
||||
- Add remote origin
|
||||
- Initial commit & push
|
||||
|
||||
4. **Connect Existing Repo Flow**
|
||||
- Browse user's orgs/repos (reuse from Subtask A)
|
||||
- Select repo
|
||||
- Add as remote origin
|
||||
- Offer to fetch/pull if repo has commits
|
||||
|
||||
### API Requirements
|
||||
|
||||
```typescript
|
||||
// GitHubClient additions needed:
|
||||
createRepository(options: {
|
||||
name: string;
|
||||
description?: string;
|
||||
private?: boolean;
|
||||
org?: string; // If creating in org
|
||||
}): Promise<GitHubRepository>
|
||||
```
|
||||
|
||||
### Files to Create/Modify
|
||||
|
||||
- `packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/GitHubPanel.tsx` (modify)
|
||||
- `packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/components/ConnectToGitHub/` (new)
|
||||
- `ConnectToGitHubView.tsx`
|
||||
- `CreateRepoModal.tsx`
|
||||
- `SelectRepoModal.tsx`
|
||||
- `packages/noodl-editor/src/editor/src/services/github/GitHubClient.ts` (extend)
|
||||
|
||||
---
|
||||
|
||||
## Design Considerations
|
||||
|
||||
### Noodl Project Detection
|
||||
|
||||
Option 1: **Check for `project.json` via API**
|
||||
|
||||
```typescript
|
||||
async isNoodlProject(owner: string, repo: string): Promise<boolean> {
|
||||
const content = await this.getFileContent(owner, repo, 'project.json');
|
||||
return content !== null;
|
||||
}
|
||||
```
|
||||
|
||||
Option 2: **Topics/Labels** (future)
|
||||
|
||||
- Allow users to add `noodl-project` topic to repos
|
||||
- Search by topic
|
||||
|
||||
### Error Handling
|
||||
|
||||
- Rate limit warnings (GitHub API limits)
|
||||
- Private repo access errors (missing OAuth scope)
|
||||
- Clone failures (disk space, permissions)
|
||||
- Push failures (authentication, branch protection)
|
||||
|
||||
### Performance
|
||||
|
||||
- Cache repo lists with short TTL (30 seconds)
|
||||
- Lazy load Noodl detection (don't check all repos immediately)
|
||||
- Pagination for orgs with many repos
|
||||
|
||||
---
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### Subtask A: Clone
|
||||
|
||||
- [ ] Authenticated user can see "GitHub Repos" section in launcher
|
||||
- [ ] Can browse personal repos and org repos
|
||||
- [ ] Noodl projects are visually distinguished
|
||||
- [ ] Can clone repo to selected location
|
||||
- [ ] Cloned project appears in projects list
|
||||
- [ ] Progress indicator during clone
|
||||
|
||||
### Subtask B: Connect
|
||||
|
||||
- [ ] Non-git project shows "Initialize & Connect" option
|
||||
- [ ] Git project without remote shows "Connect" option
|
||||
- [ ] Can create new repo (personal or org)
|
||||
- [ ] Can connect to existing repo
|
||||
- [ ] After connecting, Issues/PRs tabs work
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- TASK-002B: GitHub OAuth Integration (prerequisite - DONE)
|
||||
- TASK-002D: GitHub Sync Status (future - show sync status in project cards)
|
||||
|
||||
---
|
||||
|
||||
## Estimated Effort
|
||||
|
||||
| Subtask | Effort | Priority |
|
||||
| -------------------- | --------- | -------- |
|
||||
| A: Clone from GitHub | 4-6 hours | High |
|
||||
| B: Connect to GitHub | 3-4 hours | High |
|
||||
|
||||
---
|
||||
|
||||
_Created: January 2026_
|
||||
_Status: DRAFT_
|
||||
Reference in New Issue
Block a user