| | <!DOCTYPE html>
|
| | <html lang="en">
|
| |
|
| | <head>
|
| | <meta charset="UTF-8">
|
| | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| | <meta name="description" content="Agent Bridge -- Webapp-to-Antigravity-CLI bridging framework">
|
| | <title>Agent Bridge</title>
|
| | <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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap"
|
| | rel="stylesheet">
|
| | <link rel="stylesheet" href="src/style.css">
|
| | </head>
|
| |
|
| | <body>
|
| |
|
| | <div id="app">
|
| |
|
| | <aside id="tool-rail"></aside>
|
| |
|
| |
|
| | <main id="canvas">
|
| |
|
| | <div id="status-bar">
|
| | <span id="connection-indicator"></span>
|
| | <span id="status-text">Connecting...</span>
|
| | <button id="settings-toggle" class="settings-btn" title="Settings">
|
| | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
| | stroke-linecap="round" stroke-linejoin="round">
|
| | <circle cx="12" cy="12" r="3"></circle>
|
| | <path
|
| | d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z">
|
| | </path>
|
| | </svg>
|
| | </button>
|
| | </div>
|
| |
|
| |
|
| | <div id="settings-panel" class="hidden">
|
| | <div class="settings-card">
|
| | <div class="settings-header">
|
| | <h2>Antigravity Settings</h2>
|
| | <button id="settings-close" aria-label="Close">×</button>
|
| | </div>
|
| |
|
| | <div class="settings-body">
|
| | <label class="settings-label">CLI Executable Path</label>
|
| | <div class="settings-input-row">
|
| | <input type="text" id="cli-path-input"
|
| | placeholder="e.g. C:\Users\You\AppData\Local\Programs\antigravity\antigravity.exe" spellcheck="false">
|
| | <button id="save-path-btn" class="btn-primary">Save</button>
|
| | </div>
|
| | <p class="settings-hint">Full path to the Antigravity CLI binary on your computer.</p>
|
| |
|
| | <div class="settings-divider"></div>
|
| |
|
| | <label class="settings-label">Detection Status</label>
|
| | <div id="detection-status" class="detection-box">
|
| | <span id="detect-indicator" class="detect-dot"></span>
|
| | <span id="detect-text">Checking...</span>
|
| | </div>
|
| | <div id="detect-details" class="detect-details"></div>
|
| |
|
| | <button id="redetect-btn" class="btn-outline">Re-detect CLI</button>
|
| |
|
| | <div class="settings-divider"></div>
|
| |
|
| | <label class="settings-label">CLI Session</label>
|
| | <div class="settings-actions">
|
| | <button id="connect-btn" class="btn-primary">Connect to CLI</button>
|
| | <button id="disconnect-btn" class="btn-outline btn-danger" disabled>Disconnect</button>
|
| | </div>
|
| | <p id="session-status" class="settings-hint">No active session.</p>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div id="center-card">
|
| | <button id="card-close" aria-label="Close">×</button>
|
| | <h1 id="greeting">Hey, what are we working on today?</h1>
|
| |
|
| | <div id="prompt-container">
|
| | <input type="text" id="prompt-input" placeholder="I want to create..." autocomplete="off" spellcheck="false">
|
| | <button id="send-btn" title="Send">
|
| | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
| | stroke-linecap="round" stroke-linejoin="round">
|
| | <line x1="5" y1="12" x2="19" y2="12"></line>
|
| | <polyline points="12 5 19 12 12 19"></polyline>
|
| | </svg>
|
| | </button>
|
| | </div>
|
| |
|
| | <div id="icon-bar"></div>
|
| |
|
| | <div id="suggestion-chips"></div>
|
| |
|
| | <div id="bottom-links">
|
| | <a href="#" id="link-tools" class="bottom-link">
|
| | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| | <rect x="3" y="3" width="7" height="7"></rect>
|
| | <rect x="14" y="3" width="7" height="7"></rect>
|
| | <rect x="14" y="14" width="7" height="7"></rect>
|
| | <rect x="3" y="14" width="7" height="7"></rect>
|
| | </svg>
|
| | Explore Tools
|
| | </a>
|
| | <a href="#" id="link-bridge" class="bottom-link">
|
| | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| | <circle cx="12" cy="12" r="10"></circle>
|
| | <line x1="2" y1="12" x2="22" y2="12"></line>
|
| | <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z">
|
| | </path>
|
| | </svg>
|
| | Bridge Status
|
| | </a>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div id="conversation" class="hidden">
|
| | <div id="messages"></div>
|
| |
|
| | <div id="output-area" class="hidden">
|
| | <div id="output-header">
|
| | <span>Output</span>
|
| | <button id="close-output" aria-label="Close">×</button>
|
| | </div>
|
| | <div id="output-content"></div>
|
| | </div>
|
| |
|
| | <div id="conv-input-bar">
|
| | <input type="text" id="conv-input" placeholder="Type a prompt or tool command..." autocomplete="off"
|
| | spellcheck="false">
|
| | <button id="conv-send-btn" title="Send">
|
| | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
| | stroke-linecap="round" stroke-linejoin="round">
|
| | <line x1="5" y1="12" x2="19" y2="12"></line>
|
| | <polyline points="12 5 19 12 12 19"></polyline>
|
| | </svg>
|
| | </button>
|
| | </div>
|
| | </div>
|
| | </main>
|
| | </div>
|
| |
|
| | <script src="/socket.io/socket.io.js"></script>
|
| | <script src="src/main.js"></script>
|
| | </body>
|
| |
|
| | </html> |
