gravity_web/.agents/references/architecture.md

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으로 미리보기