File size: 6,886 Bytes
b9a3ef2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | <!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">
<!-- Left Tool Buttons -->
<aside id="tool-rail"></aside>
<!-- Main Canvas -->
<main id="canvas">
<!-- Status bar -->
<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>
<!-- Settings Panel (hidden by default) -->
<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>
<!-- Center Card (initial state) -->
<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>
<!-- Conversation view -->
<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> |