# Architecture — Gravity Web

> AI 에이전트는 구현 전 이 문서를 반드시 확인합니다.

## 프로젝트 개요

Antigravity IDE(Google의 AI-powered IDE) 여러 인스턴스를 웹 브라우저에서 원격으로 연결하여 세션을 전환하며 채팅/명령을 주고받는 대시보드.

## 아키텍처

```
┌─────────────────┐     HTTP/WS      ┌──────────────────┐    CDP     ┌──────────────┐
│  웹 브라우저     │ ◄──────────────► │ Gravity Web      │ ◄───────► │ Antigravity  │
│  (Dashboard)    │   :3300          │ Server (Node.js) │  :9000    │ IDE #1       │
└─────────────────┘                  │                  │  :9001    │ IDE #2       │
                                     └──────────────────┘           └──────────────┘
```

## 디렉토리 구조

```
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
├── extension/                 # Extension Bridge (승인/거절 기능)
├── .agents/                   # AI 에이전트 설정
└── docs/                      # 문서
```

## 핵심 모듈

| 모듈 | 파일 | 역할 |
|------|------|------|
| Express 서버 | `server/index.js` | HTTP + WebSocket 서버 (port 3300) |
| CDP 클라이언트 | `server/cdp-client.js` | Chrome DevTools Protocol로 Antigravity 연결 |
| 세션 매니저 | `server/session-manager.js` | 다중 Antigravity 인스턴스 관리 |
| 앱 컨트롤러 | `public/js/app.js` | WebSocket + 이벤트 라우팅 |
| 세션 패널 | `public/js/session-panel.js` | 세션 목록 UI |
| 채팅 패널 | `public/js/chat-panel.js` | 채팅 인터페이스 |

## CDP (Chrome DevTools Protocol) 동작 원리

1. Antigravity.exe를 `--remote-debugging-port=9000`으로 실행
2. 서버가 CDP 포트에 연결
3. DOM 스크래핑 (1초 간격 폴링)
4. `Runtime.evaluate` + `Input.dispatchKeyEvent`로 메시지 전송
5. `Page.captureScreenshot`으로 미리보기