Variet
1060476113
- Add message-accumulator.js: cascades diff-based message accumulation - Add 3-second cascade polling with broadcastToAll (was undefined!) - Add /api/bridge/approve endpoint: tries accept/reject Step→Command→Terminal - Add persistent approve/reject buttons in chat header toolbar - Frontend: loadSessionMessages (trajectory + accumulated), applyNewMessages (WS push) - Status change detection: _prevStatusKey tracking prevents unnecessary re-renders - actionInProgress flag prevents DOM replacement during button fetch - Known issues: Trajectory 341 hard limit, Cascade no command-approval state
Gravity Web — Antigravity IDE 원격 제어 대시보드
Antigravity IDE(Google의 AI-powered IDE) 여러 인스턴스를 웹 브라우저에서 원격으로 연결하여 세션을 전환하며 채팅/명령을 주고받는 대시보드.
아키텍처
┌─────────────────┐ HTTP/WS ┌──────────────────┐ CDP ┌──────────────┐
│ 웹 브라우저 │ ◄──────────────► │ Gravity Web │ ◄───────► │ Antigravity │
│ (Dashboard) │ :3300 │ Server (Node.js) │ :9000 │ IDE #1 │
└─────────────────┘ │ │ :9001 │ IDE #2 │
└──────────────────┘ └──────────────┘
핵심 기술
| 레이어 | 기술 |
|---|---|
| 서버 | Node.js + Express + WebSocket (ws) |
| CDP 클라이언트 | chrome-remote-interface |
| 프론트엔드 | Vanilla HTML/CSS/JS (SPA) |
| 통신 | REST API + WebSocket (실시간) |
CDP (Chrome DevTools Protocol) 동작 원리
Antigravity는 Electron 기반 앱이므로 --remote-debugging-port 플래그로 CDP 포트를 열 수 있습니다. Gravity Web 서버가 이 CDP 포트에 연결하여:
- DOM 스크래핑: 채팅 영역의 HTML을 1초 간격으로 폴링
- 입력 포워딩:
Runtime.evaluate+Input.dispatchKeyEvent로 메시지 전송 - 스크린샷:
Page.captureScreenshot으로 미리보기
실행 방법
1. Antigravity를 디버그 모드로 실행
# 방법 1: 직접 실행 (권장)
"%LOCALAPPDATA%\Programs\Antigravity\Antigravity.exe" --remote-debugging-port=9000
# 방법 2: 배치 파일 사용
launch-antigravity-debug.bat
⚠️ 주의:
antigravity .명령은 CLI 모드(ELECTRON_RUN_AS_NODE=1)로 실행되어 CDP가 동작하지 않습니다. 반드시Antigravity.exe를 직접 실행하세요.
⚠️ 주의: 여러 Antigravity 인스턴스가 이미 실행 중이면 새 인스턴스가 기존 메인 프로세스에 합류하여 CDP 포트가 열리지 않습니다. 모든 Antigravity를 종료 후 디버그 모드로 단일 실행해야 합니다.
2. 서버 시작
cd server
cmd /c npm install # 최초 1회
cmd /c node index.js
# → http://localhost:3300
3. 대시보드 접속
- 브라우저에서
http://localhost:3300접속 -
- 버튼 → 세션 이름, 호스트(
localhost), CDP 포트(9000) 입력
- 버튼 → 세션 이름, 호스트(
- "연결" 클릭
파일 구조
gravity_web/
├── server/
│ ├── package.json # 의존성
│ ├── index.js # Express + WebSocket 서버
│ ├── cdp-client.js # CDP 연결/스크래핑/입력
│ └── session-manager.js # 다중 세션 관리
├── public/
│ ├── index.html # SPA 대시보드
│ ├── css/style.css # 다크 테마
│ └── js/
│ ├── app.js # WebSocket + 이벤트 라우팅
│ ├── session-panel.js # 세션 목록 UI
│ └── chat-panel.js # 채팅 UI
├── launch-antigravity-debug.bat
├── .gitignore
└── README.md
개발 로드맵
Phase 1: 텍스트 채팅 인터페이스 ✅ (서버/UI 구축 완료)
- Node.js 서버 + WebSocket
- CDP 클라이언트 모듈
- 세션 매니저
- 다크 테마 대시보드 UI
- CDP 실제 연결 검증 (DOM 셀렉터 조정 필요)
Phase 2: 전체 UI 미러링 (향후)
Page.screencastFrame실시간 화면 스트림- 마우스/키보드 이벤트 원격 전달
- 모바일 반응형 레이아웃
알려진 이슈
CDP 연결 조건
- Antigravity.exe를 직접
--remote-debugging-port=9000으로 실행해야 함 antigravity .CLI 래퍼는ELECTRON_RUN_AS_NODE=1을 설정하여 CDP 비활성화- 기존 Antigravity 프로세스가 있으면 새 인스턴스가 합류하여 별도 CDP 포트 열리지 않음
- Antigravity의 CDP 지원은 일부 불안정 보고 있음 (커뮤니티 참조)
참고 프로젝트
- Antigravity Phone Connect — CDP 기반 모바일 원격 제어 (참고 가능)
서비스 연동
| 서비스 | URL |
|---|---|
| Git (Gitea) | https://git.variet.net/Variet/gravity_web.git |
| Tasks (Vikunja) | https://plan.variet.net/projects/9 |
라이선스
Internal project — Variet