feat: Gravity Web Phase 1 - CDP remote control dashboard
This commit is contained in:
612
public/css/style.css
Normal file
612
public/css/style.css
Normal 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
150
public/index.html
Normal 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
252
public/js/app.js
Normal 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
134
public/js/chat-panel.js
Normal 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;
|
||||
}
|
||||
}
|
||||
91
public/js/session-panel.js
Normal file
91
public/js/session-panel.js
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user