| <!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> |
