# 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를 디버그 모드로 실행

```powershell
# 방법 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. 서버 시작

```powershell
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 구축 완료)
- [x] Node.js 서버 + WebSocket
- [x] CDP 클라이언트 모듈
- [x] 세션 매니저
- [x] 다크 테마 대시보드 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](https://github.com/krishnakanthb13/antigravity_phone_chat) — CDP 기반 모바일 원격 제어 (참고 가능)

## 서비스 연동

| 서비스 | URL |
|--------|-----|
| Git (Gitea) | https://git.variet.net/Variet/gravity_web.git |
| Tasks (Vikunja) | https://plan.variet.net/projects/9 |

## 라이선스

Internal project — Variet