commit 8020a5b0725e202d1839b8e4d396bfd40a32f5a9 Author: CD Date: Sat Mar 7 18:53:41 2026 +0900 feat: Gravity Web Phase 1 - CDP remote control dashboard diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..18b6430 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules/ +.agents/ +server/scan-ports.js +*.log +.env diff --git a/README.md b/README.md new file mode 100644 index 0000000..d8739f8 --- /dev/null +++ b/README.md @@ -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 diff --git a/launch-antigravity-debug.bat b/launch-antigravity-debug.bat new file mode 100644 index 0000000..dfb706e --- /dev/null +++ b/launch-antigravity-debug.bat @@ -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 diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..c00468d --- /dev/null +++ b/public/css/style.css @@ -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); } diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..d560795 --- /dev/null +++ b/public/index.html @@ -0,0 +1,150 @@ + + + + + + Gravity Web — Antigravity Remote Control + + + + + + + +
+ +
+
+ +
+
+
+ + 연결 중... +
+
+
+ + +
+ + + + +
+ +
+
+ + + +
+

세션을 선택하세요

+

좌측에서 세션을 선택하거나 + 버튼으로 새 세션을 추가하세요

+
+ + + + + + +
+
+ + + +
+ + + + + + diff --git a/public/js/app.js b/public/js/app.js new file mode 100644 index 0000000..3e927ec --- /dev/null +++ b/public/js/app.js @@ -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(); +})(); diff --git a/public/js/chat-panel.js b/public/js/chat-panel.js new file mode 100644 index 0000000..2a8c6e6 --- /dev/null +++ b/public/js/chat-panel.js @@ -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 = ` +
+

채팅 데이터를 불러오는 중...

+
+ `; + + 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 = ` +
+

⚠️ 채팅 컨테이너를 찾을 수 없습니다.
+ Antigravity에서 채팅을 시작해주세요.

+
+ `; + return; + } + + // HTML 삽입 (Antigravity에서 가져온 DOM) + const wasAtBottom = this._isScrolledToBottom(); + + this.messagesEl.innerHTML = `
${html}
`; + + // 스크롤 유지 + 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; + } +} diff --git a/public/js/session-panel.js b/public/js/session-panel.js new file mode 100644 index 0000000..7b0446c --- /dev/null +++ b/public/js/session-panel.js @@ -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 = ` +
+ 세션이 없습니다
+ 버튼으로 추가하세요 +
+ `; + return; + } + + this.listEl.innerHTML = this.sessions.map(s => ` +
+
+
+
${this._escapeHtml(s.name)}
+
${s.host}:${s.cdpPort} · ${this._statusText(s.status)}
+
+ +
+ `).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; + } +} diff --git a/server/cdp-client.js b/server/cdp-client.js new file mode 100644 index 0000000..4571c23 --- /dev/null +++ b/server/cdp-client.js @@ -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 ''; + })() + `, + 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; diff --git a/server/index.js b/server/index.js new file mode 100644 index 0000000..13f55d1 --- /dev/null +++ b/server/index.js @@ -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} */ +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); + }); +}); diff --git a/server/package-lock.json b/server/package-lock.json new file mode 100644 index 0000000..f809744 --- /dev/null +++ b/server/package-lock.json @@ -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 + } + } + } + } +} diff --git a/server/package.json b/server/package.json new file mode 100644 index 0000000..17b296f --- /dev/null +++ b/server/package.json @@ -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" + } +} diff --git a/server/session-manager.js b/server/session-manager.js new file mode 100644 index 0000000..b0e2e55 --- /dev/null +++ b/server/session-manager.js @@ -0,0 +1,119 @@ +/** + * Session Manager — 다중 Antigravity CDP 세션을 관리 + */ + +const CDPClient = require('./cdp-client'); + +class SessionManager { + constructor() { + /** @type {Map} */ + 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;