gravity_web/README.md

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 포트에 연결하여:

1. DOM 스크래핑: 채팅 영역의 HTML을 1초 간격으로 폴링
2. 입력 포워딩: Runtime.evaluate + Input.dispatchKeyEvent로 메시지 전송
3. 스크린샷: Page.captureScreenshot으로 미리보기

실행 방법

1. Antigravity를 디버그 모드로 실행

# 방법 1: 직접 실행 (권장)
"C:\Users\Certes\AppData\Local\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. 대시보드 접속

1. 브라우저에서 http://localhost:3300 접속
2. • 버튼 → 세션 이름, 호스트(localhost), CDP 포트(9000) 입력
3. "연결" 클릭

파일 구조

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