feat: Gravity Web Phase 1 - CDP remote control dashboard

This commit is contained in:
2026-03-07 18:53:41 +09:00
commit 8020a5b072
13 changed files with 2930 additions and 0 deletions

5
.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
node_modules/
.agents/
server/scan-ports.js
*.log
.env

118
README.md Normal file
View File

@@ -0,0 +1,118 @@
# 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

View File

@@ -0,0 +1,5 @@
@echo off
echo Starting Antigravity with CDP on port 9000...
start "" "C:\Users\Certes\AppData\Local\Programs\Antigravity\Antigravity.exe" --remote-debugging-port=9000
echo Done. Antigravity should be starting.
pause

612
public/css/style.css Normal file
View File

@@ -0,0 +1,612 @@
/* ═══════════════════════════════════════════════════════
Gravity Web — Design System & Layout
═══════════════════════════════════════════════════════ */
:root {
/* Color Palette — Deep space dark theme */
--bg-primary: #0a0e1a;
--bg-secondary: #111827;
--bg-tertiary: #1a2236;
--bg-elevated: #1e293b;
--bg-hover: #243047;
--bg-active: #2d3c56;
--border-subtle: rgba(99, 102, 241, 0.12);
--border-medium: rgba(99, 102, 241, 0.25);
--border-strong: rgba(99, 102, 241, 0.5);
--accent-primary: #6366f1;
--accent-secondary: #818cf8;
--accent-glow: rgba(99, 102, 241, 0.25);
--accent-surface: rgba(99, 102, 241, 0.08);
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--text-accent: #a5b4fc;
--success: #34d399;
--warning: #fbbf24;
--error: #f87171;
--info: #60a5fa;
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
/* Spacing */
--sidebar-width: 280px;
--header-height: 56px;
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
}
/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-primary);
background: var(--bg-primary);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
/* ─── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--bg-active);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* ─── Header ─────────────────────────────────────────── */
.header {
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
}
.logo-accent {
background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header-right { display: flex; align-items: center; gap: 16px; }
.connection-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
transition: background var(--transition-normal);
}
.status-dot.connected { background: var(--success); box-shadow: 0 0 6px var(--success); }
.status-dot.error { background: var(--error); }
/* ─── Main Layout ────────────────────────────────────── */
.main-layout {
display: flex;
height: calc(100vh - var(--header-height));
}
/* ─── Sidebar ────────────────────────────────────────── */
.sidebar {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
background: var(--bg-secondary);
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 12px;
}
.sidebar-header h2 {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.session-list {
flex: 1;
overflow-y: auto;
padding: 0 8px 8px;
}
/* Session Card */
.session-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
margin-bottom: 4px;
border-radius: 8px;
cursor: pointer;
transition: all var(--transition-fast);
border: 1px solid transparent;
}
.session-card:hover {
background: var(--bg-hover);
}
.session-card.active {
background: var(--accent-surface);
border-color: var(--border-medium);
}
.session-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.session-indicator.connected { background: var(--success); box-shadow: 0 0 4px rgba(52, 211, 153, 0.4); }
.session-indicator.connecting { background: var(--warning); animation: pulse 1.5s infinite; }
.session-indicator.disconnected { background: var(--text-muted); }
.session-indicator.error { background: var(--error); }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.session-info {
flex: 1;
min-width: 0;
}
.session-name {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.session-detail {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.session-remove {
opacity: 0;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: all var(--transition-fast);
font-size: 14px;
}
.session-card:hover .session-remove { opacity: 1; }
.session-remove:hover { color: var(--error); background: rgba(248, 113, 113, 0.1); }
/* ─── Chat Area ──────────────────────────────────────── */
.chat-area {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
/* Empty State */
.empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--text-muted);
}
.empty-state h3 {
font-size: 16px;
font-weight: 500;
color: var(--text-secondary);
}
.empty-state p {
font-size: 13px;
max-width: 300px;
text-align: center;
line-height: 1.5;
}
/* Chat Container */
.chat-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
}
.chat-session-info {
display: flex;
align-items: center;
gap: 10px;
}
.chat-session-name {
font-weight: 600;
font-size: 14px;
}
.chat-session-status {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
background: var(--accent-surface);
color: var(--text-accent);
}
.chat-actions {
display: flex;
gap: 6px;
}
/* Chat Messages */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background: var(--bg-primary);
}
.chat-welcome {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-muted);
font-size: 13px;
}
/* Antigravity 에서 가져온 HTML을 표시하는 컨테이너 */
.chat-messages .ag-content {
font-family: var(--font-sans);
line-height: 1.6;
color: var(--text-primary);
}
.chat-messages .ag-content pre,
.chat-messages .ag-content code {
font-family: var(--font-mono);
font-size: 13px;
}
.chat-messages .ag-content pre {
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 14px;
overflow-x: auto;
margin: 10px 0;
}
.chat-messages .ag-content code {
background: var(--bg-tertiary);
padding: 2px 6px;
border-radius: 4px;
}
/* Chat Input */
.chat-input-area {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 14px 20px;
background: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
}
.chat-input-area textarea {
flex: 1;
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 10px 14px;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
resize: none;
outline: none;
max-height: 120px;
line-height: 1.5;
transition: border-color var(--transition-fast);
}
.chat-input-area textarea::placeholder { color: var(--text-muted); }
.chat-input-area textarea:focus { border-color: var(--accent-primary); }
/* ─── Buttons ────────────────────────────────────────── */
.btn-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: var(--bg-tertiary);
color: var(--text-secondary);
border-radius: 8px;
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-icon:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.btn-sm {
padding: 4px 8px;
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 6px;
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
transition: all var(--transition-fast);
}
.btn-sm:hover {
background: var(--bg-hover);
border-color: var(--border-medium);
}
.btn-send {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-primary);
border: none;
border-radius: 10px;
color: white;
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.btn-send:hover {
background: var(--accent-secondary);
transform: scale(1.05);
}
.btn-send:active { transform: scale(0.95); }
.btn {
padding: 8px 16px;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: none;
transition: all var(--transition-fast);
}
.btn-primary {
background: var(--accent-primary);
color: white;
}
.btn-primary:hover { background: var(--accent-secondary); }
.btn-secondary {
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
}
.btn-secondary:hover { background: var(--bg-hover); }
/* ─── Modal ──────────────────────────────────────────── */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--bg-elevated);
border: 1px solid var(--border-medium);
border-radius: 14px;
width: 400px;
max-width: 90vw;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: slideUp 0.2s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 0;
}
.modal-header h3 {
font-size: 16px;
font-weight: 600;
}
.modal-body {
padding: 20px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 0 20px 18px;
}
.form-group {
margin-bottom: 14px;
}
.form-group label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 6px;
}
.form-group input {
width: 100%;
padding: 8px 12px;
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
outline: none;
transition: border-color var(--transition-fast);
}
.form-group input:focus { border-color: var(--accent-primary); }
.form-hint {
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
margin-top: 4px;
}
.form-hint code {
font-family: var(--font-mono);
font-size: 11px;
background: var(--bg-tertiary);
padding: 1px 5px;
border-radius: 4px;
color: var(--text-accent);
}
/* ─── Screenshot Overlay ─────────────────────────────── */
.screenshot-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 150;
}
.screenshot-content {
max-width: 90%;
max-height: 90%;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-medium);
}
.screenshot-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--bg-elevated);
font-size: 13px;
color: var(--text-secondary);
}
.screenshot-content img {
display: block;
max-width: 100%;
max-height: calc(90vh - 50px);
object-fit: contain;
}
/* ─── Notification Toast ─────────────────────────────── */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 12px 18px;
background: var(--bg-elevated);
border: 1px solid var(--border-medium);
border-radius: 10px;
color: var(--text-primary);
font-size: 13px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
z-index: 300;
animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s;
animation-fill-mode: forwards;
}
@keyframes slideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(10px); } }
.toast.error { border-color: var(--error); }
.toast.success { border-color: var(--success); }

150
public/index.html Normal file
View File

@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gravity Web — Antigravity Remote Control</title>
<meta name="description" content="Antigravity IDE 원격 제어 대시보드">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<!-- Header -->
<header class="header">
<div class="header-left">
<div class="logo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="url(#grad)" stroke-width="2"/>
<circle cx="12" cy="12" r="4" fill="url(#grad)"/>
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="24" y2="24">
<stop offset="0%" stop-color="#818cf8"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
</defs>
</svg>
<span class="logo-text">Gravity<span class="logo-accent">Web</span></span>
</div>
</div>
<div class="header-right">
<div class="connection-status" id="connectionStatus">
<span class="status-dot"></span>
<span class="status-text">연결 중...</span>
</div>
</div>
</header>
<!-- Main Layout -->
<main class="main-layout">
<!-- Sidebar: Session List -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>세션</h2>
<button class="btn-icon" id="addSessionBtn" title="세션 추가">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</div>
<div class="session-list" id="sessionList">
<!-- sessions rendered here -->
</div>
</aside>
<!-- Chat Area -->
<section class="chat-area">
<!-- No session selected state -->
<div class="empty-state" id="emptyState">
<div class="empty-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
</div>
<h3>세션을 선택하세요</h3>
<p>좌측에서 세션을 선택하거나 + 버튼으로 새 세션을 추가하세요</p>
</div>
<!-- Active chat -->
<div class="chat-container" id="chatContainer" style="display:none;">
<div class="chat-header" id="chatHeader">
<div class="chat-session-info">
<span class="chat-session-name" id="chatSessionName"></span>
<span class="chat-session-status" id="chatSessionStatus"></span>
</div>
<div class="chat-actions">
<button class="btn-sm" id="screenshotBtn" title="스크린샷">📷</button>
<button class="btn-sm" id="reconnectBtn" title="재연결">🔄</button>
</div>
</div>
<div class="chat-messages" id="chatMessages">
<div class="chat-welcome">
<p>대화를 불러오는 중...</p>
</div>
</div>
<div class="chat-input-area">
<textarea
id="chatInput"
placeholder="Antigravity에 보낼 메시지를 입력하세요..."
rows="1"
></textarea>
<button class="btn-send" id="sendBtn" title="전송">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
</svg>
</button>
</div>
</div>
<!-- Screenshot overlay -->
<div class="screenshot-overlay" id="screenshotOverlay" style="display:none;">
<div class="screenshot-content">
<div class="screenshot-header">
<span>스크린샷 미리보기</span>
<button class="btn-icon" id="closeScreenshot"></button>
</div>
<img id="screenshotImage" alt="Antigravity Screenshot"/>
</div>
</div>
</section>
</main>
<!-- Add Session Modal -->
<div class="modal-backdrop" id="addSessionModal" style="display:none;">
<div class="modal">
<div class="modal-header">
<h3>세션 추가</h3>
<button class="btn-icon" id="closeModal"></button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="sessionName">세션 이름</label>
<input type="text" id="sessionName" placeholder="예: 프로젝트-A" autofocus>
</div>
<div class="form-group">
<label for="sessionHost">호스트</label>
<input type="text" id="sessionHost" value="localhost">
</div>
<div class="form-group">
<label for="sessionPort">CDP 포트</label>
<input type="number" id="sessionPort" value="9000" min="1024" max="65535">
</div>
<p class="form-hint">
Antigravity를 <code>antigravity . --remote-debugging-port=9000</code> 으로 실행해야 합니다
</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancelModal">취소</button>
<button class="btn btn-primary" id="confirmAddSession">연결</button>
</div>
</div>
</div>
</div>
<script src="js/session-panel.js"></script>
<script src="js/chat-panel.js"></script>
<script src="js/app.js"></script>
</body>
</html>

252
public/js/app.js Normal file
View File

@@ -0,0 +1,252 @@
/**
* Gravity Web — App 초기화 및 WebSocket 관리
*/
(function () {
// ─── 컴포넌트 초기화 ──────────────────────────────────
const sessionPanel = new SessionPanel();
const chatPanel = new ChatPanel();
let ws = null;
let reconnectTimer = null;
const WS_URL = `ws://${location.host}/ws`;
// ─── DOM 레퍼런스 ─────────────────────────────────────
const connectionStatus = document.getElementById('connectionStatus');
const statusDot = connectionStatus.querySelector('.status-dot');
const statusText = connectionStatus.querySelector('.status-text');
const addSessionBtn = document.getElementById('addSessionBtn');
const addSessionModal = document.getElementById('addSessionModal');
const closeModal = document.getElementById('closeModal');
const cancelModal = document.getElementById('cancelModal');
const confirmAddSession = document.getElementById('confirmAddSession');
const sessionNameInput = document.getElementById('sessionName');
const sessionHostInput = document.getElementById('sessionHost');
const sessionPortInput = document.getElementById('sessionPort');
const screenshotBtn = document.getElementById('screenshotBtn');
const reconnectBtn = document.getElementById('reconnectBtn');
const screenshotOverlay = document.getElementById('screenshotOverlay');
const screenshotImage = document.getElementById('screenshotImage');
const closeScreenshot = document.getElementById('closeScreenshot');
// ─── WebSocket 연결 ───────────────────────────────────
function connectWebSocket() {
ws = new WebSocket(WS_URL);
ws.onopen = () => {
setConnectionStatus('connected', '서버 연결됨');
if (reconnectTimer) {
clearTimeout(reconnectTimer);
reconnectTimer = null;
}
};
ws.onclose = () => {
setConnectionStatus('error', '연결 끊김');
scheduleReconnect();
};
ws.onerror = () => {
setConnectionStatus('error', '연결 오류');
};
ws.onmessage = (event) => {
try {
const msg = JSON.parse(event.data);
handleMessage(msg);
} catch (e) {
console.error('WS 메시지 파싱 오류:', e);
}
};
}
function scheduleReconnect() {
if (reconnectTimer) return;
reconnectTimer = setTimeout(() => {
reconnectTimer = null;
connectWebSocket();
}, 3000);
}
function sendWs(msg) {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(msg));
}
}
// ─── 서버 메시지 핸들러 ───────────────────────────────
function handleMessage(msg) {
switch (msg.type) {
case 'sessions_list':
sessionPanel.update(msg.sessions);
break;
case 'session_switched':
sessionPanel.setActive(msg.sessionId);
chatPanel.showSession(msg.session);
break;
case 'chat_update':
if (msg.sessionId === sessionPanel.activeSessionId) {
chatPanel.updateChat(msg.html);
}
break;
case 'message_sent':
if (!msg.success) {
showToast(`전송 실패: ${msg.error}`, 'error');
}
break;
case 'screenshot':
screenshotImage.src = `data:image/jpeg;base64,${msg.data}`;
screenshotOverlay.style.display = 'flex';
break;
case 'error':
showToast(msg.message, 'error');
break;
}
}
// ─── 세션 패널 이벤트 ─────────────────────────────────
sessionPanel.onSessionSelect = (sessionId) => {
sendWs({ type: 'switch_session', sessionId });
};
sessionPanel.onSessionRemove = async (sessionId) => {
try {
const res = await fetch(`/api/sessions/${sessionId}`, { method: 'DELETE' });
if (res.ok) {
if (sessionPanel.activeSessionId === sessionId) {
chatPanel.showEmpty();
sessionPanel.setActive(null);
}
showToast('세션이 제거되었습니다', 'success');
}
} catch (e) {
showToast('세션 제거 실패', 'error');
}
};
// ─── 채팅 패널 이벤트 ─────────────────────────────────
chatPanel.onSendMessage = (text) => {
sendWs({
type: 'send_message',
sessionId: sessionPanel.activeSessionId,
text,
});
};
// ─── 모달 ─────────────────────────────────────────────
function showModal() {
addSessionModal.style.display = 'flex';
sessionNameInput.value = '';
sessionHostInput.value = 'localhost';
sessionPortInput.value = '9000';
setTimeout(() => sessionNameInput.focus(), 100);
}
function hideModal() {
addSessionModal.style.display = 'none';
}
async function addSession() {
const name = sessionNameInput.value.trim();
const host = sessionHostInput.value.trim();
const port = parseInt(sessionPortInput.value, 10);
if (!name) {
sessionNameInput.focus();
return;
}
hideModal();
try {
const res = await fetch('/api/sessions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, host, cdpPort: port }),
});
const session = await res.json();
if (session.status === 'connected') {
showToast(`${name} 연결 성공`, 'success');
} else {
showToast(`${name} 연결 실패: ${session.error || '알 수 없는 오류'}`, 'error');
}
} catch (e) {
showToast('세션 추가 실패', 'error');
}
}
addSessionBtn.addEventListener('click', showModal);
closeModal.addEventListener('click', hideModal);
cancelModal.addEventListener('click', hideModal);
confirmAddSession.addEventListener('click', addSession);
// Enter로 모달 확인
addSessionModal.addEventListener('keydown', (e) => {
if (e.key === 'Enter') addSession();
if (e.key === 'Escape') hideModal();
});
// 배경 클릭으로 모달 닫기
addSessionModal.addEventListener('click', (e) => {
if (e.target === addSessionModal) hideModal();
});
// ─── 스크린샷 ─────────────────────────────────────────
screenshotBtn.addEventListener('click', () => {
sendWs({ type: 'get_screenshot', sessionId: sessionPanel.activeSessionId });
});
closeScreenshot.addEventListener('click', () => {
screenshotOverlay.style.display = 'none';
});
screenshotOverlay.addEventListener('click', (e) => {
if (e.target === screenshotOverlay) {
screenshotOverlay.style.display = 'none';
}
});
// ─── 재연결 ───────────────────────────────────────────
reconnectBtn.addEventListener('click', async () => {
const id = sessionPanel.activeSessionId;
if (!id) return;
try {
const res = await fetch(`/api/sessions/${id}/reconnect`, { method: 'POST' });
const result = await res.json();
if (result.success) {
showToast('재연결 성공', 'success');
} else {
showToast(`재연결 실패: ${result.error}`, 'error');
}
} catch {
showToast('재연결 실패', 'error');
}
});
// ─── 유틸리티 ─────────────────────────────────────────
function setConnectionStatus(status, text) {
statusDot.className = `status-dot ${status}`;
statusText.textContent = text;
}
function showToast(message, type = '') {
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 3000);
}
// ─── 시작 ─────────────────────────────────────────────
connectWebSocket();
})();

134
public/js/chat-panel.js Normal file
View File

@@ -0,0 +1,134 @@
/**
* Chat Panel — 채팅 표시/입력 UI 관리
*/
class ChatPanel {
constructor() {
this.containerEl = document.getElementById('chatContainer');
this.emptyEl = document.getElementById('emptyState');
this.messagesEl = document.getElementById('chatMessages');
this.inputEl = document.getElementById('chatInput');
this.sendBtn = document.getElementById('sendBtn');
this.sessionNameEl = document.getElementById('chatSessionName');
this.sessionStatusEl = document.getElementById('chatSessionStatus');
this.onSendMessage = null; // callback(text)
this.activeSession = null;
this._setupInput();
}
/**
* 입력 이벤트 바인딩
*/
_setupInput() {
// 자동 높이 조절
this.inputEl.addEventListener('input', () => {
this.inputEl.style.height = 'auto';
this.inputEl.style.height = Math.min(this.inputEl.scrollHeight, 120) + 'px';
});
// Enter로 전송 (Shift+Enter는 줄바꿈)
this.inputEl.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
this._sendMessage();
}
});
this.sendBtn.addEventListener('click', () => {
this._sendMessage();
});
}
_sendMessage() {
const text = this.inputEl.value.trim();
if (!text) return;
if (this.onSendMessage) {
this.onSendMessage(text);
}
// 입력창 초기화
this.inputEl.value = '';
this.inputEl.style.height = 'auto';
}
/**
* 세션 선택 시 UI 표시
*/
showSession(session) {
this.activeSession = session;
this.emptyEl.style.display = 'none';
this.containerEl.style.display = 'flex';
this.sessionNameEl.textContent = session.name;
this.sessionStatusEl.textContent = session.status === 'connected' ? '● 연결됨' : session.status;
this.messagesEl.innerHTML = `
<div class="chat-welcome">
<p>채팅 데이터를 불러오는 중...</p>
</div>
`;
this.inputEl.focus();
}
/**
* 빈 상태 표시
*/
showEmpty() {
this.activeSession = null;
this.emptyEl.style.display = 'flex';
this.containerEl.style.display = 'none';
}
/**
* 채팅 내용 업데이트 (Antigravity DOM HTML)
*/
updateChat(html) {
if (!html || html.includes('chat container not found')) {
this.messagesEl.innerHTML = `
<div class="chat-welcome">
<p>⚠️ 채팅 컨테이너를 찾을 수 없습니다.<br>
Antigravity에서 채팅을 시작해주세요.</p>
</div>
`;
return;
}
// HTML 삽입 (Antigravity에서 가져온 DOM)
const wasAtBottom = this._isScrolledToBottom();
this.messagesEl.innerHTML = `<div class="ag-content">${html}</div>`;
// 스크롤 유지
if (wasAtBottom) {
this._scrollToBottom();
}
}
/**
* 세션 상태 업데이트
*/
updateSessionStatus(status) {
if (!this.activeSession) return;
const statusText = {
connected: '● 연결됨',
disconnected: '○ 연결 끊김',
error: '⚠ 오류',
};
this.sessionStatusEl.textContent = statusText[status] || status;
}
_isScrolledToBottom() {
const el = this.messagesEl;
return el.scrollTop + el.clientHeight >= el.scrollHeight - 50;
}
_scrollToBottom() {
this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
}
}

View File

@@ -0,0 +1,91 @@
/**
* Session Panel — 세션 목록 UI 관리
*/
class SessionPanel {
constructor() {
this.sessions = [];
this.activeSessionId = null;
this.onSessionSelect = null; // callback(sessionId)
this.onSessionRemove = null; // callback(sessionId)
this.listEl = document.getElementById('sessionList');
}
/**
* 세션 목록 업데이트
*/
update(sessions) {
this.sessions = sessions;
this.render();
}
/**
* 활성 세션 설정
*/
setActive(sessionId) {
this.activeSessionId = sessionId;
this.render();
}
/**
* 세션 목록 렌더링
*/
render() {
if (!this.listEl) return;
if (this.sessions.length === 0) {
this.listEl.innerHTML = `
<div style="padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px;">
세션이 없습니다<br>+ 버튼으로 추가하세요
</div>
`;
return;
}
this.listEl.innerHTML = this.sessions.map(s => `
<div class="session-card ${s.id === this.activeSessionId ? 'active' : ''}"
data-session-id="${s.id}">
<div class="session-indicator ${s.status}"></div>
<div class="session-info">
<div class="session-name">${this._escapeHtml(s.name)}</div>
<div class="session-detail">${s.host}:${s.cdpPort} · ${this._statusText(s.status)}</div>
</div>
<button class="session-remove" data-remove-id="${s.id}" title="세션 제거">✕</button>
</div>
`).join('');
// 이벤트 바인딩
this.listEl.querySelectorAll('.session-card').forEach(card => {
card.addEventListener('click', (e) => {
if (e.target.closest('.session-remove')) return;
const id = card.dataset.sessionId;
if (this.onSessionSelect) this.onSessionSelect(id);
});
});
this.listEl.querySelectorAll('.session-remove').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const id = btn.dataset.removeId;
if (this.onSessionRemove) this.onSessionRemove(id);
});
});
}
_statusText(status) {
const map = {
connected: '연결됨',
connecting: '연결 중...',
disconnected: '연결 끊김',
error: '오류',
};
return map[status] || status;
}
_escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
}

277
server/cdp-client.js Normal file
View File

@@ -0,0 +1,277 @@
/**
* CDP Client — Antigravity IDE와 Chrome DevTools Protocol로 통신
*
* 채팅 DOM 스크래핑, 메시지 전송, 상태 모니터링
*/
const CDP = require('chrome-remote-interface');
class CDPClient {
constructor(host = 'localhost', port = 9000) {
this.host = host;
this.port = port;
this.client = null;
this.connected = false;
this.lastChatHTML = '';
this.pollInterval = null;
this.onChatUpdate = null; // callback(html)
this.onDisconnect = null; // callback()
}
/**
* CDP 연결 수립
*/
async connect() {
try {
// CDP 타겟 목록에서 올바른 페이지 찾기
const targets = await CDP.List({ host: this.host, port: this.port });
// Antigravity 메인 윈도우 타겟 찾기 (type: 'page')
const pageTarget = targets.find(t => t.type === 'page' && !t.url.includes('devtools'));
if (!pageTarget) {
throw new Error('Antigravity 페이지 타겟을 찾을 수 없습니다');
}
this.client = await CDP({
host: this.host,
port: this.port,
target: pageTarget,
});
const { Runtime, DOM, Page } = this.client;
await Promise.all([
Runtime.enable(),
DOM.enable(),
Page.enable(),
]);
this.connected = true;
// 연결 끊김 감지
this.client.on('disconnect', () => {
this.connected = false;
this.stopPolling();
if (this.onDisconnect) this.onDisconnect();
});
console.log(`[CDP] 연결 성공: ${this.host}:${this.port}${pageTarget.title}`);
return { success: true, title: pageTarget.title };
} catch (err) {
this.connected = false;
console.error(`[CDP] 연결 실패: ${this.host}:${this.port}${err.message}`);
return { success: false, error: err.message };
}
}
/**
* 연결 해제
*/
async disconnect() {
this.stopPolling();
if (this.client) {
try {
await this.client.close();
} catch (e) { /* ignore */ }
this.client = null;
}
this.connected = false;
}
/**
* 채팅 영역의 DOM을 스크래핑
*
* Antigravity의 채팅 컨테이너를 JS로 탐색하여 HTML 반환
* DOM 셀렉터는 실제 Antigravity 버전에 따라 조정 필요
*/
async scrapeChatDOM() {
if (!this.connected || !this.client) return null;
try {
const { result } = await this.client.Runtime.evaluate({
expression: `
(function() {
// Antigravity 채팅 컨테이너 셀렉터들 (우선순위 순)
const selectors = [
'.chat-messages-container',
'[class*="chat"][class*="container"]',
'[class*="conversation"]',
'[class*="messages"]',
'.monaco-workbench .part.panel .content',
];
for (const sel of selectors) {
const el = document.querySelector(sel);
if (el) {
return el.innerHTML;
}
}
// 폴백: body 전체(디버깅용)
return '<!-- chat container not found -->';
})()
`,
returnByValue: true,
});
return result.value || null;
} catch (err) {
console.error('[CDP] 채팅 스크래핑 오류:', err.message);
return null;
}
}
/**
* Antigravity 채팅 입력창에 메시지를 전송
*/
async sendMessage(text) {
if (!this.connected || !this.client) {
return { success: false, error: 'CDP 연결 없음' };
}
try {
// 1) 입력창 찾기 및 포커스
const { result: focusResult } = await this.client.Runtime.evaluate({
expression: `
(function() {
const selectors = [
'textarea[class*="chat"]',
'[class*="chat"] textarea',
'[class*="input"] textarea',
'textarea[placeholder]',
'.chat-input textarea',
'[contenteditable="true"]',
];
for (const sel of selectors) {
const el = document.querySelector(sel);
if (el) {
el.focus();
return { found: true, tag: el.tagName, sel: sel };
}
}
return { found: false };
})()
`,
returnByValue: true,
});
if (!focusResult.value?.found) {
return { success: false, error: '채팅 입력창을 찾을 수 없습니다' };
}
// 2) 텍스트 입력 (clipboardData 방식 - 가장 범용적)
await this.client.Runtime.evaluate({
expression: `
(function() {
const el = document.querySelector('${focusResult.value.sel}');
if (!el) return;
// contenteditable인 경우
if (el.contentEditable === 'true') {
el.textContent = ${JSON.stringify(text)};
el.dispatchEvent(new Event('input', { bubbles: true }));
} else {
// textarea인 경우 — React setState 호환
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLTextAreaElement.prototype, 'value'
).set;
nativeInputValueSetter.call(el, ${JSON.stringify(text)});
el.dispatchEvent(new Event('input', { bubbles: true }));
}
})()
`,
returnByValue: true,
});
// 3) Enter 키 전송
await this.client.Input.dispatchKeyEvent({
type: 'keyDown',
key: 'Enter',
code: 'Enter',
nativeVirtualKeyCode: 13,
windowsVirtualKeyCode: 13,
});
await this.client.Input.dispatchKeyEvent({
type: 'keyUp',
key: 'Enter',
code: 'Enter',
nativeVirtualKeyCode: 13,
windowsVirtualKeyCode: 13,
});
console.log(`[CDP] 메시지 전송: "${text.substring(0, 50)}..."`);
return { success: true };
} catch (err) {
console.error('[CDP] 메시지 전송 오류:', err.message);
return { success: false, error: err.message };
}
}
/**
* 채팅 폴링 시작 (1초 간격)
*/
startPolling(intervalMs = 1000) {
this.stopPolling();
this.pollInterval = setInterval(async () => {
if (!this.connected) {
this.stopPolling();
return;
}
const html = await this.scrapeChatDOM();
if (html && html !== this.lastChatHTML) {
this.lastChatHTML = html;
if (this.onChatUpdate) {
this.onChatUpdate(html);
}
}
}, intervalMs);
console.log(`[CDP] 폴링 시작 (${intervalMs}ms 간격)`);
}
/**
* 채팅 폴링 중지
*/
stopPolling() {
if (this.pollInterval) {
clearInterval(this.pollInterval);
this.pollInterval = null;
}
}
/**
* 현재 페이지 타이틀 가져오기
*/
async getTitle() {
if (!this.connected || !this.client) return null;
try {
const { result } = await this.client.Runtime.evaluate({
expression: 'document.title',
returnByValue: true,
});
return result.value;
} catch {
return null;
}
}
/**
* 스크린샷 (Phase 2 미리보기용)
*/
async captureScreenshot() {
if (!this.connected || !this.client) return null;
try {
const { data } = await this.client.Page.captureScreenshot({ format: 'jpeg', quality: 60 });
return data; // base64
} catch (err) {
console.error('[CDP] 스크린샷 오류:', err.message);
return null;
}
}
}
module.exports = CDPClient;

262
server/index.js Normal file
View File

@@ -0,0 +1,262 @@
/**
* Gravity Web Server — Express REST API + WebSocket
*
* Antigravity IDE 여러 인스턴스를 CDP로 연결하고
* 웹 브라우저에서 세션을 전환하며 채팅할 수 있게 합니다.
*/
const express = require('express');
const http = require('http');
const path = require('path');
const { WebSocketServer, WebSocket } = require('ws');
const SessionManager = require('./session-manager');
const PORT = process.env.PORT || 3300;
const app = express();
const server = http.createServer(app);
app.use(express.json());
app.use(express.static(path.join(__dirname, '..', 'public')));
const sessionManager = new SessionManager();
// ─── WebSocket Setup ────────────────────────────────────
const wss = new WebSocketServer({ server, path: '/ws' });
/** @type {Map<WebSocket, {activeSessionId: string|null}>} */
const wsClients = new Map();
wss.on('connection', (ws) => {
console.log('[WS] 클라이언트 연결');
wsClients.set(ws, { activeSessionId: null });
ws.on('message', async (raw) => {
try {
const msg = JSON.parse(raw.toString());
await handleWsMessage(ws, msg);
} catch (err) {
ws.send(JSON.stringify({ type: 'error', message: err.message }));
}
});
ws.on('close', () => {
const state = wsClients.get(ws);
if (state?.activeSessionId) {
stopSessionPolling(state.activeSessionId);
}
wsClients.delete(ws);
console.log('[WS] 클라이언트 연결 해제');
});
// 초기 세션 목록 전송
ws.send(JSON.stringify({
type: 'sessions_list',
sessions: sessionManager.listSessions(),
}));
});
/**
* WebSocket 메시지 핸들러
*/
async function handleWsMessage(ws, msg) {
const state = wsClients.get(ws);
switch (msg.type) {
case 'switch_session': {
// 기존 세션 폴링 중지
if (state.activeSessionId) {
stopSessionPolling(state.activeSessionId);
}
const session = sessionManager.getSession(msg.sessionId);
if (!session) {
ws.send(JSON.stringify({ type: 'error', message: '세션을 찾을 수 없습니다' }));
return;
}
state.activeSessionId = msg.sessionId;
// 이 세션의 CDP 폴링 시작
startSessionPolling(session, ws);
ws.send(JSON.stringify({
type: 'session_switched',
sessionId: msg.sessionId,
session: {
id: session.id,
name: session.name,
status: session.status,
title: session.title,
},
}));
break;
}
case 'send_message': {
const session = sessionManager.getSession(msg.sessionId || state.activeSessionId);
if (!session) {
ws.send(JSON.stringify({ type: 'error', message: '활성 세션 없음' }));
return;
}
const result = await session.client.sendMessage(msg.text);
ws.send(JSON.stringify({
type: 'message_sent',
sessionId: session.id,
...result,
}));
break;
}
case 'get_screenshot': {
const session = sessionManager.getSession(msg.sessionId || state.activeSessionId);
if (!session) {
ws.send(JSON.stringify({ type: 'error', message: '활성 세션 없음' }));
return;
}
const data = await session.client.captureScreenshot();
if (data) {
ws.send(JSON.stringify({
type: 'screenshot',
sessionId: session.id,
data: data,
}));
}
break;
}
default:
ws.send(JSON.stringify({ type: 'error', message: `알 수 없는 메시지 타입: ${msg.type}` }));
}
}
/**
* 특정 세션의 CDP 채팅 폴링을 시작하고 결과를 ws 클라이언트에 전송
*/
function startSessionPolling(session, ws) {
session.client.onChatUpdate = (html) => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({
type: 'chat_update',
sessionId: session.id,
html: html,
timestamp: Date.now(),
}));
}
};
session.client.startPolling(1000);
}
/**
* 세션 폴링 중지
*/
function stopSessionPolling(sessionId) {
const session = sessionManager.getSession(sessionId);
if (session) {
session.client.stopPolling();
session.client.onChatUpdate = null;
}
}
/**
* 세션 목록 변경을 모든 WS 클라이언트에 브로드캐스트
*/
function broadcastSessions() {
const payload = JSON.stringify({
type: 'sessions_list',
sessions: sessionManager.listSessions(),
});
for (const [ws] of wsClients) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(payload);
}
}
}
// ─── REST API ───────────────────────────────────────────
app.get('/api/sessions', (req, res) => {
res.json(sessionManager.listSessions());
});
app.post('/api/sessions', async (req, res) => {
const { name, host = 'localhost', cdpPort = 9000 } = req.body;
if (!name) {
return res.status(400).json({ error: 'name is required' });
}
const session = await sessionManager.addSession(name, host, cdpPort);
broadcastSessions();
res.status(201).json({
id: session.id,
name: session.name,
host: session.host,
cdpPort: session.cdpPort,
status: session.status,
title: session.title,
error: session.error || null,
});
});
app.delete('/api/sessions/:id', async (req, res) => {
const removed = await sessionManager.removeSession(req.params.id);
if (!removed) {
return res.status(404).json({ error: 'Session not found' });
}
broadcastSessions();
res.json({ success: true });
});
app.post('/api/sessions/:id/reconnect', async (req, res) => {
const result = await sessionManager.reconnectSession(req.params.id);
broadcastSessions();
res.json(result);
});
app.get('/api/sessions/:id/status', (req, res) => {
const session = sessionManager.getSession(req.params.id);
if (!session) {
return res.status(404).json({ error: 'Session not found' });
}
res.json({
id: session.id,
status: session.status,
title: session.title,
});
});
// Health
app.get('/api/health', (req, res) => {
res.json({
status: 'ok',
uptime: process.uptime(),
sessions: sessionManager.listSessions().length,
});
});
// SPA 폴백
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'public', 'index.html'));
});
// ─── Startup ────────────────────────────────────────────
server.listen(PORT, () => {
console.log('═'.repeat(50));
console.log(` Gravity Web 서버 시작`);
console.log(` http://localhost:${PORT}`);
console.log('═'.repeat(50));
});
// Graceful shutdown
process.on('SIGINT', async () => {
console.log('\n[Server] 종료 중...');
await sessionManager.cleanup();
server.close(() => {
console.log('[Server] 종료 완료');
process.exit(0);
});
});

890
server/package-lock.json generated Normal file
View File

@@ -0,0 +1,890 @@
{
"name": "gravity-web",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "gravity-web",
"version": "1.0.0",
"dependencies": {
"chrome-remote-interface": "^0.33.2",
"express": "^4.21.0",
"ws": "^8.18.0"
}
},
"node_modules/accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
"license": "MIT",
"dependencies": {
"mime-types": "~2.1.34",
"negotiator": "0.6.3"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/array-flatten": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
"license": "MIT"
},
"node_modules/body-parser": {
"version": "1.20.4",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
"integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
"license": "MIT",
"dependencies": {
"bytes": "~3.1.2",
"content-type": "~1.0.5",
"debug": "2.6.9",
"depd": "2.0.0",
"destroy": "~1.2.0",
"http-errors": "~2.0.1",
"iconv-lite": "~0.4.24",
"on-finished": "~2.4.1",
"qs": "~6.14.0",
"raw-body": "~2.5.3",
"type-is": "~1.6.18",
"unpipe": "~1.0.0"
},
"engines": {
"node": ">= 0.8",
"npm": "1.2.8000 || >= 1.4.16"
}
},
"node_modules/bytes": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
"license": "MIT",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/call-bind-apply-helpers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/call-bound": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
"get-intrinsic": "^1.3.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/chrome-remote-interface": {
"version": "0.33.3",
"resolved": "https://registry.npmjs.org/chrome-remote-interface/-/chrome-remote-interface-0.33.3.tgz",
"integrity": "sha512-zNnn0prUL86Teru6UCAZ1yU1XeXljHl3gj7OrfPcarEfU62OUU4IujDPdTDW3dAWwRqN3ZMG/Chhkh2gPL/wiw==",
"license": "MIT",
"dependencies": {
"commander": "2.11.x",
"ws": "^7.2.0"
},
"bin": {
"chrome-remote-interface": "bin/client.js"
}
},
"node_modules/chrome-remote-interface/node_modules/ws": {
"version": "7.5.10",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
"license": "MIT",
"engines": {
"node": ">=8.3.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": "^5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
}
},
"node_modules/commander": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
"license": "MIT"
},
"node_modules/content-disposition": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
"license": "MIT",
"dependencies": {
"safe-buffer": "5.2.1"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/content-type": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/cookie": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/cookie-signature": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
"integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
"license": "MIT"
},
"node_modules/debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"license": "MIT",
"dependencies": {
"ms": "2.0.0"
}
},
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
"license": "MIT",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/destroy": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
"license": "MIT",
"engines": {
"node": ">= 0.8",
"npm": "1.2.8000 || >= 1.4.16"
}
},
"node_modules/dunder-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.1",
"es-errors": "^1.3.0",
"gopd": "^1.2.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
"license": "MIT"
},
"node_modules/encodeurl": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
"license": "MIT",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/es-define-property": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-errors": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-object-atoms": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
"license": "MIT"
},
"node_modules/etag": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/express": {
"version": "4.22.1",
"resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
"integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
"license": "MIT",
"dependencies": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
"body-parser": "~1.20.3",
"content-disposition": "~0.5.4",
"content-type": "~1.0.4",
"cookie": "~0.7.1",
"cookie-signature": "~1.0.6",
"debug": "2.6.9",
"depd": "2.0.0",
"encodeurl": "~2.0.0",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"finalhandler": "~1.3.1",
"fresh": "~0.5.2",
"http-errors": "~2.0.0",
"merge-descriptors": "1.0.3",
"methods": "~1.1.2",
"on-finished": "~2.4.1",
"parseurl": "~1.3.3",
"path-to-regexp": "~0.1.12",
"proxy-addr": "~2.0.7",
"qs": "~6.14.0",
"range-parser": "~1.2.1",
"safe-buffer": "5.2.1",
"send": "~0.19.0",
"serve-static": "~1.16.2",
"setprototypeof": "1.2.0",
"statuses": "~2.0.1",
"type-is": "~1.6.18",
"utils-merge": "1.0.1",
"vary": "~1.1.2"
},
"engines": {
"node": ">= 0.10.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/express"
}
},
"node_modules/finalhandler": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
"integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
"license": "MIT",
"dependencies": {
"debug": "2.6.9",
"encodeurl": "~2.0.0",
"escape-html": "~1.0.3",
"on-finished": "~2.4.1",
"parseurl": "~1.3.3",
"statuses": "~2.0.2",
"unpipe": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/fresh": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-intrinsic": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
"es-define-property": "^1.0.1",
"es-errors": "^1.3.0",
"es-object-atoms": "^1.1.1",
"function-bind": "^1.1.2",
"get-proto": "^1.0.1",
"gopd": "^1.2.0",
"has-symbols": "^1.1.0",
"hasown": "^2.0.2",
"math-intrinsics": "^1.1.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
"license": "MIT",
"dependencies": {
"dunder-proto": "^1.0.1",
"es-object-atoms": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/gopd": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-symbols": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/hasown": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/http-errors": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
"license": "MIT",
"dependencies": {
"depd": "~2.0.0",
"inherits": "~2.0.4",
"setprototypeof": "~1.2.0",
"statuses": "~2.0.2",
"toidentifier": "~1.0.1"
},
"engines": {
"node": ">= 0.8"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/express"
}
},
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"license": "MIT",
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"license": "ISC"
},
"node_modules/ipaddr.js": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
"license": "MIT",
"engines": {
"node": ">= 0.10"
}
},
"node_modules/math-intrinsics": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/merge-descriptors": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
"integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/methods": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
"integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"license": "MIT",
"bin": {
"mime": "cli.js"
},
"engines": {
"node": ">=4"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"license": "MIT"
},
"node_modules/negotiator": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/object-inspect": {
"version": "1.13.4",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/on-finished": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
"license": "MIT",
"dependencies": {
"ee-first": "1.1.1"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
"license": "MIT",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/path-to-regexp": {
"version": "0.1.12",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
"integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
"license": "MIT"
},
"node_modules/proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
"license": "MIT",
"dependencies": {
"forwarded": "0.2.0",
"ipaddr.js": "1.9.1"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/qs": {
"version": "6.14.2",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
"integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
"license": "BSD-3-Clause",
"dependencies": {
"side-channel": "^1.1.0"
},
"engines": {
"node": ">=0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/range-parser": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/raw-body": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
"integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
"license": "MIT",
"dependencies": {
"bytes": "~3.1.2",
"http-errors": "~2.0.1",
"iconv-lite": "~0.4.24",
"unpipe": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"license": "MIT"
},
"node_modules/safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"license": "MIT"
},
"node_modules/send": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
"integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
"license": "MIT",
"dependencies": {
"debug": "2.6.9",
"depd": "2.0.0",
"destroy": "1.2.0",
"encodeurl": "~2.0.0",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"fresh": "~0.5.2",
"http-errors": "~2.0.1",
"mime": "1.6.0",
"ms": "2.1.3",
"on-finished": "~2.4.1",
"range-parser": "~1.2.1",
"statuses": "~2.0.2"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/send/node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
"license": "MIT"
},
"node_modules/serve-static": {
"version": "1.16.3",
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
"integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
"license": "MIT",
"dependencies": {
"encodeurl": "~2.0.0",
"escape-html": "~1.0.3",
"parseurl": "~1.3.3",
"send": "~0.19.1"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
"license": "ISC"
},
"node_modules/side-channel": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"object-inspect": "^1.13.3",
"side-channel-list": "^1.0.0",
"side-channel-map": "^1.0.1",
"side-channel-weakmap": "^1.0.2"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/side-channel-list": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
"integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"object-inspect": "^1.13.3"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/side-channel-map": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
"license": "MIT",
"dependencies": {
"call-bound": "^1.0.2",
"es-errors": "^1.3.0",
"get-intrinsic": "^1.2.5",
"object-inspect": "^1.13.3"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/side-channel-weakmap": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
"license": "MIT",
"dependencies": {
"call-bound": "^1.0.2",
"es-errors": "^1.3.0",
"get-intrinsic": "^1.2.5",
"object-inspect": "^1.13.3",
"side-channel-map": "^1.0.1"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/statuses": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
"license": "MIT",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/toidentifier": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
"license": "MIT",
"engines": {
"node": ">=0.6"
}
},
"node_modules/type-is": {
"version": "1.6.18",
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
"license": "MIT",
"dependencies": {
"media-typer": "0.3.0",
"mime-types": "~2.1.24"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/unpipe": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
"license": "MIT",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/utils-merge": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
"license": "MIT",
"engines": {
"node": ">= 0.4.0"
}
},
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
"license": "MIT",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/ws": {
"version": "8.19.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
"integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
"license": "MIT",
"engines": {
"node": ">=10.0.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": ">=5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
}
}
}
}

15
server/package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "gravity-web",
"version": "1.0.0",
"description": "Antigravity IDE 웹 원격 제어 대시보드",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": "node --watch index.js"
},
"dependencies": {
"chrome-remote-interface": "^0.33.2",
"express": "^4.21.0",
"ws": "^8.18.0"
}
}

119
server/session-manager.js Normal file
View File

@@ -0,0 +1,119 @@
/**
* Session Manager — 다중 Antigravity CDP 세션을 관리
*/
const CDPClient = require('./cdp-client');
class SessionManager {
constructor() {
/** @type {Map<string, {id: string, name: string, host: string, cdpPort: number, client: CDPClient, status: string, title: string}>} */
this.sessions = new Map();
this.nextId = 1;
}
/**
* 새 세션 등록 + CDP 연결 시도
*/
async addSession(name, host = 'localhost', cdpPort = 9000) {
const id = `s${this.nextId++}`;
const client = new CDPClient(host, cdpPort);
const session = {
id,
name,
host,
cdpPort,
client,
status: 'connecting',
title: '',
createdAt: new Date().toISOString(),
};
this.sessions.set(id, session);
// CDP 연결 시도
const result = await client.connect();
if (result.success) {
session.status = 'connected';
session.title = result.title || '';
} else {
session.status = 'error';
session.error = result.error;
}
// 연결 끊김 시 상태 업데이트
client.onDisconnect = () => {
session.status = 'disconnected';
};
return session;
}
/**
* 세션 제거 + CDP 연결 해제
*/
async removeSession(id) {
const session = this.sessions.get(id);
if (!session) return false;
await session.client.disconnect();
this.sessions.delete(id);
return true;
}
/**
* 세션 조회
*/
getSession(id) {
return this.sessions.get(id) || null;
}
/**
* 전체 세션 목록 (클라이언트 전송용 직렬화)
*/
listSessions() {
return Array.from(this.sessions.values()).map(s => ({
id: s.id,
name: s.name,
host: s.host,
cdpPort: s.cdpPort,
status: s.status,
title: s.title,
createdAt: s.createdAt,
error: s.error || null,
}));
}
/**
* 세션 재연결
*/
async reconnectSession(id) {
const session = this.sessions.get(id);
if (!session) return { success: false, error: 'Session not found' };
await session.client.disconnect();
const result = await session.client.connect();
if (result.success) {
session.status = 'connected';
session.title = result.title || '';
session.error = null;
} else {
session.status = 'error';
session.error = result.error;
}
return result;
}
/**
* 모든 세션 정리
*/
async cleanup() {
for (const [id] of this.sessions) {
await this.removeSession(id);
}
}
}
module.exports = SessionManager;