opencode-antigravity-config 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.html ADDED
@@ -0,0 +1,432 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Opencode Antigravity Config</title>
8
+ <meta http-equiv="Content-Security-Policy"
9
+ content="script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self';">
10
+ <link rel="stylesheet" href="node_modules/@fontsource/fira-code/400.css">
11
+ <link rel="stylesheet" href="node_modules/@fontsource/fira-code/600.css">
12
+ <link rel="stylesheet" href="styles.css">
13
+ </head>
14
+
15
+ <body>
16
+ <div class="window-container">
17
+ <div class="title-bar" id="titleBar">
18
+ <div class="title-left">
19
+ <img src="app.png" class="icon" alt="Ag Icon">
20
+ <span class="title-text">Opencode Antigravity Config</span>
21
+ <span class="version-text">v1.0.0</span>
22
+ </div>
23
+ <div class="window-controls">
24
+ <button id="btnLang" class="control-btn lang-btn" title="Toggle Language">ID / EN</button>
25
+ <div class="divider-v"></div>
26
+ <button id="btnMinimize" class="control-btn minimize" title="Minimize">─</button>
27
+ <button id="btnClose" class="control-btn close" title="Close">✕</button>
28
+ </div>
29
+ </div>
30
+ <div class="step-indicator">
31
+ <div class="step active" id="step0">
32
+ <div class="dot"></div><span>Welcome</span>
33
+ </div>
34
+ <div class="step" id="step1">
35
+ <div class="dot"></div><span>oMo Model</span>
36
+ </div>
37
+ <div class="step" id="step2">
38
+ <div class="dot"></div><span>System</span>
39
+ </div>
40
+ <div class="step" id="step3">
41
+ <div class="dot"></div><span>Config</span>
42
+ </div>
43
+ <div class="step" id="step4">
44
+ <div class="dot"></div><span>Install</span>
45
+ </div>
46
+ <div class="step" id="step5">
47
+ <div class="dot"></div><span>Done</span>
48
+ </div>
49
+ </div>
50
+ <div class="content-area">
51
+ <!-- PAGE 0: WELCOME -->
52
+ <div id="page0" class="page active">
53
+ <div class="center-content">
54
+ <img src="app.png" class="hero-icon" alt="Ag Icon">
55
+ <h1>Opencode Antigravity</h1>
56
+ <h2 class="cyan-text">Config</h2>
57
+ <p class="subtitle">Install konfigurasi lengkap Opencode Antigravity stack:</p>
58
+ <span class="config-meta" id="configMetaText">Loading...</span>
59
+ <div class="welcome-actions"><button class="btn primary" id="btnStart">Get Started →</button></div>
60
+ <div class="welcome-secondary">
61
+ <button class="btn secondary btn-sm" id="btnVersionCheck">🔄 Updates</button>
62
+ <button class="btn secondary btn-sm btn-danger" id="btnUninstall">🗑 Uninstall</button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- PAGE 1: OMO CONFIG -->
68
+ <div id="page1" class="page">
69
+ <div class="page-header">
70
+ <h2>oMo Agent Model</h2>
71
+ <p>Konfigurasi model AI untuk setiap agent</p>
72
+ </div>
73
+ <div class="scroll-area" style="padding:15px 0;">
74
+ <div id="agentModelPanel" class="agent-panel">
75
+ <div class="agent-panel-header">
76
+ <h3>🤖 oMo Agents — AI Model</h3>
77
+ <div style="display:flex; gap:10px; align-items:center;">
78
+ <select id="selGlobalPreset" class="btn secondary" style="padding: 6px 10px; margin: 0; min-width: 140px; border-radius: 6px; appearance: auto; background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); cursor: pointer; height: 32px; font-size: 13px;">
79
+ <option value="" disabled selected>✨ Load Template</option>
80
+ <option value="antigravity_default">Antigravity Default</option>
81
+ <option value="max_reasoning">Max Reasoning (O1 Class)</option>
82
+ <option value="fast_cheap">Fast & Cheap</option>
83
+ <option value="claude_only">Claude Ecosystem</option>
84
+ </select>
85
+ <button type="button" id="btnAgentAdvanced" class="btn secondary btn-agent-toggle">⚙ Advanced</button>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- GROUP MODE (default) -->
90
+ <div id="agentGroupMode">
91
+ <div class="agent-group-row" style="border-left-color: #e74c3c;">
92
+ <div class="agent-group-info">
93
+ <span class="agent-group-name">🧠 Heavy</span>
94
+ <span class="agent-group-members">Sisyphus, Prometheus, Metis, Oracle</span>
95
+ </div>
96
+ <select id="selGroupHeavy" class="agent-model-select">
97
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
98
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
99
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
100
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
101
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
102
+ Think</option>
103
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
104
+ </option>
105
+ </select>
106
+ </div>
107
+ <div class="agent-group-row" style="border-left-color: #f39c12;">
108
+ <div class="agent-group-info">
109
+ <span class="agent-group-name">âš™ī¸ Standard</span>
110
+ <span class="agent-group-members">Hephaestus, Momus, Atlas</span>
111
+ </div>
112
+ <select id="selGroupStandard" class="agent-model-select">
113
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
114
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
115
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
116
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
117
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
118
+ Think</option>
119
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
120
+ </option>
121
+ </select>
122
+ </div>
123
+ <div class="agent-group-row" style="border-left-color: #3498db;">
124
+ <div class="agent-group-info">
125
+ <span class="agent-group-name">⚡ Light</span>
126
+ <span class="agent-group-members">Librarian, Explore, Multimodal-Looker</span>
127
+ </div>
128
+ <select id="selGroupLight" class="agent-model-select">
129
+ <option value="google/antigravity-gemini-3-flash" selected>Gemini 3 Flash</option>
130
+ <option value="google/antigravity-gemini-3-1-pro">Gemini 3.1 Pro</option>
131
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
132
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
133
+ Think</option>
134
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
135
+ </option>
136
+ </select>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- ADVANCED MODE (per-agent, hidden by default) -->
141
+ <div id="agentAdvancedMode" style="display:none;">
142
+ <div class="agent-adv-section" style="border-left-color:#e74c3c;">🧠 Heavy Group</div>
143
+ <div class="agent-adv-row"><span class="agent-adv-name">Sisyphus
144
+ <i>(Orchestrator)</i></span><select id="selAgent_sisyphus"
145
+ class="agent-model-select agent-adv-select" data-group="heavy">
146
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
147
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
148
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
149
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
150
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
151
+ Think</option>
152
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
153
+ </option>
154
+ </select></div>
155
+ <div class="agent-adv-row"><span class="agent-adv-name">Prometheus
156
+ <i>(Builder)</i></span><select id="selAgent_prometheus"
157
+ class="agent-model-select agent-adv-select" data-group="heavy">
158
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
159
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
160
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
161
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
162
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
163
+ Think</option>
164
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
165
+ </option>
166
+ </select></div>
167
+ <div class="agent-adv-row"><span class="agent-adv-name">Metis <i>(Coder)</i></span><select
168
+ id="selAgent_metis" class="agent-model-select agent-adv-select" data-group="heavy">
169
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
170
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
171
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
172
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
173
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
174
+ Think</option>
175
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
176
+ </option>
177
+ </select></div>
178
+ <div class="agent-adv-row"><span class="agent-adv-name">Oracle
179
+ <i>(Analyst)</i></span><select id="selAgent_oracle"
180
+ class="agent-model-select agent-adv-select" data-group="heavy">
181
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
182
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
183
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
184
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
185
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
186
+ Think</option>
187
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
188
+ </option>
189
+ </select></div>
190
+
191
+ <div class="agent-adv-section" style="border-left-color:#f39c12;">âš™ī¸ Standard Group</div>
192
+ <div class="agent-adv-row"><span class="agent-adv-name">Hephaestus
193
+ <i>(Coder)</i></span><select id="selAgent_hephaestus"
194
+ class="agent-model-select agent-adv-select" data-group="standard">
195
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
196
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
197
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
198
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
199
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
200
+ Think</option>
201
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
202
+ </option>
203
+ </select></div>
204
+ <div class="agent-adv-row"><span class="agent-adv-name">Momus
205
+ <i>(Reviewer)</i></span><select id="selAgent_momus"
206
+ class="agent-model-select agent-adv-select" data-group="standard">
207
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
208
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
209
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
210
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
211
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
212
+ Think</option>
213
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
214
+ </option>
215
+ </select></div>
216
+ <div class="agent-adv-row"><span class="agent-adv-name">Atlas <i>(Worker)</i></span><select
217
+ id="selAgent_atlas" class="agent-model-select agent-adv-select"
218
+ data-group="standard">
219
+ <option value="google/antigravity-gemini-3-1-pro" selected>Gemini 3.1 Pro</option>
220
+ <option value="google/antigravity-gemini-3-flash">Gemini 3 Flash</option>
221
+ <option value="google/antigravity-gemini-3-deep-think">Gemini 3 Deep Think</option>
222
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
223
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
224
+ Think</option>
225
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
226
+ </option>
227
+ </select></div>
228
+
229
+ <div class="agent-adv-section" style="border-left-color:#3498db;">⚡ Light Group</div>
230
+ <div class="agent-adv-row"><span class="agent-adv-name">Librarian
231
+ <i>(Research)</i></span><select id="selAgent_librarian"
232
+ class="agent-model-select agent-adv-select" data-group="light">
233
+ <option value="google/antigravity-gemini-3-flash" selected>Gemini 3 Flash</option>
234
+ <option value="google/antigravity-gemini-3-1-pro">Gemini 3.1 Pro</option>
235
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
236
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
237
+ Think</option>
238
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
239
+ </option>
240
+ </select></div>
241
+ <div class="agent-adv-row"><span class="agent-adv-name">Explore <i>(Scout)</i></span><select
242
+ id="selAgent_explore" class="agent-model-select agent-adv-select"
243
+ data-group="light">
244
+ <option value="google/antigravity-gemini-3-flash" selected>Gemini 3 Flash</option>
245
+ <option value="google/antigravity-gemini-3-1-pro">Gemini 3.1 Pro</option>
246
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
247
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
248
+ Think</option>
249
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
250
+ </option>
251
+ </select></div>
252
+ <div class="agent-adv-row"><span class="agent-adv-name">Multimodal-Looker
253
+ <i>(Vision)</i></span><select id="selAgent_multimodal_looker"
254
+ class="agent-model-select agent-adv-select" data-group="light">
255
+ <option value="google/antigravity-gemini-3-flash" selected>Gemini 3 Flash</option>
256
+ <option value="google/antigravity-gemini-3-1-pro">Gemini 3.1 Pro</option>
257
+ <option value="google/antigravity-claude-sonnet-4-6">Claude Sonnet 4.6</option>
258
+ <option value="google/antigravity-claude-sonnet-4-6-thinking">Claude Sonnet 4.6
259
+ Think</option>
260
+ <option value="google/antigravity-claude-opus-4-6-thinking">Claude Opus 4.6 Think
261
+ </option>
262
+ </select></div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div class="page-footer">
267
+ <button class="btn secondary" id="btnPrev1">← Back</button>
268
+ <div style="flex:1"></div>
269
+ <button class="btn primary" id="btnNext1">Continue →</button>
270
+ </div>
271
+ </div>
272
+ <!-- PAGE 2: SYSTEM CHECK -->
273
+ <div id="page2" class="page">
274
+ <div class="page-header">
275
+ <h2>System Check</h2>
276
+ <p>Checking environment...</p>
277
+ </div>
278
+ <div class="scroll-area" id="prereqPanel"></div>
279
+ <div class="page-footer">
280
+ <button class="btn secondary" id="btnRecheck">🔄 Re-check</button>
281
+ <div style="flex:1"></div>
282
+ <button class="btn secondary" id="btnPrev2">← Back</button>
283
+ <button class="btn primary disabled" id="btnNext2" disabled>Continue →</button>
284
+ </div>
285
+ </div>
286
+ <!-- PAGE 3: CONFIG -->
287
+ <div id="page3" class="page">
288
+ <div class="page-header">
289
+ <div class="header-row">
290
+ <div>
291
+ <h2>Configuration</h2>
292
+ <p>API Keys & file selection</p>
293
+ </div>
294
+ <div class="header-actions">
295
+ <button class="btn secondary btn-xs" id="btnImport">đŸ“Ĩ Import</button>
296
+ <button class="btn secondary btn-xs" id="btnExport">📤 Export</button>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ <div class="scroll-area">
301
+ <div class="form-group">
302
+ <div class="label-row">
303
+ <label class="cyan-label">PLUGINS <span id="pluginCount"
304
+ style="color:var(--t2);font-weight:normal;font-size:10px;margin-left:4px">3/7</span></label>
305
+ <span class="file-actions">
306
+ <a id="btnPluginAll" class="link-btn">All</a><span class="link-sep">|</span><a
307
+ id="btnPluginNone" class="link-btn">None</a>
308
+ </span>
309
+ </div>
310
+ <div class="plugin-grid" id="pluginGrid">
311
+ <div class="plugin-group-title" id="lblCorePlugins">🔒 Core (Required)</div>
312
+ <div class="plugin-row core-plugin"><label class="modern-checkbox"><input type="checkbox"
313
+ class="plugin-checkbox" value="opencode-antigravity-auth" checked disabled><span
314
+ class="checkmark"></span>⚡ opencode-antigravity-auth</label><span
315
+ class="plugin-desc">Authentication (required)</span></div>
316
+ <div class="plugin-row core-plugin"><label class="modern-checkbox"><input type="checkbox"
317
+ class="plugin-checkbox" value="oh-my-opencode" checked disabled><span
318
+ class="checkmark"></span>🤖 oh-my-opencode</label><span class="plugin-desc">oMo
319
+ Agents (required)</span></div>
320
+ <div class="plugin-row core-plugin"><label class="modern-checkbox"><input type="checkbox"
321
+ class="plugin-checkbox" value="@tarquinen/opencode-dcp" checked disabled><span
322
+ class="checkmark"></span>âœ‚ī¸ @tarquinen/opencode-dcp</label><span
323
+ class="plugin-desc">Context Pruning (required)</span></div>
324
+
325
+ <div class="plugin-group-title" id="lblOptionalPlugins" style="margin-top:4px;">âš™ī¸ Optional
326
+ </div>
327
+ <div class="plugin-row optional-plugin"><label class="modern-checkbox"><input
328
+ type="checkbox" class="plugin-checkbox" id="chkPluginSupermemory"
329
+ value="opencode-supermemory"><span class="checkmark"></span>🧠
330
+ opencode-supermemory</label><span class="plugin-badge hidden" id="warnSupermemory">⚠
331
+ No key</span><span class="plugin-desc">RAG Memory System</span></div>
332
+ <div class="plugin-row optional-plugin"><label class="modern-checkbox"><input
333
+ type="checkbox" class="plugin-checkbox"
334
+ value="@ramtinj95/opencode-tokenscope"><span class="checkmark"></span>📊
335
+ @ramtinj95/opencode-tokenscope</label><span class="plugin-desc">Token Usage
336
+ Stats</span></div>
337
+ <div class="plugin-row optional-plugin"><label class="modern-checkbox"><input
338
+ type="checkbox" class="plugin-checkbox" id="chkPluginOpenSync"
339
+ value="opencode-sync-plugin"><span class="checkmark"></span>đŸŒŠī¸
340
+ opencode-sync-plugin</label><span class="plugin-badge hidden" id="warnOpenSync">⚠ No
341
+ key</span><span class="plugin-desc">Chat Sync (OpenSync)</span></div>
342
+ <div class="plugin-row optional-plugin"><label class="modern-checkbox"><input
343
+ type="checkbox" class="plugin-checkbox" value="cc-safety-net"><span
344
+ class="checkmark"></span>đŸ›Ąī¸
345
+ cc-safety-net</label><span class="plugin-desc">Safety Guard</span></div>
346
+ </div>
347
+ <div style="margin-top:6px;text-align:right;">
348
+ <button class="btn secondary btn-xs" id="btnPreviewConfig">👁 Preview opencode.json</button>
349
+ </div>
350
+ </div>
351
+ <div class="divider"></div>
352
+ <div class="form-group">
353
+ <div class="label-row"><label class="cyan-label">SUPERMEMORY</label><span
354
+ class="val-indicator val-empty" id="valSupermemory">(Optional)</span></div>
355
+ <span class="help-text">API Key (console.supermemory.ai/keys)</span>
356
+ <input type="text" id="txtSupermemoryKey" class="modern-input" spellcheck="false"
357
+ placeholder="sm_...">
358
+ </div>
359
+ <div class="form-group">
360
+ <div class="label-row"><label class="purple-label">OPENSYNC</label><span
361
+ class="val-indicator val-empty" id="valOpenSyncKey">(Optional)</span></div>
362
+ <span class="help-text">API Key (opensync.dev → Settings)</span>
363
+ <input type="text" id="txtOpenSyncKey" class="modern-input" spellcheck="false">
364
+ <div class="label-row"><span class="help-text">Convex URL</span><span
365
+ class="val-indicator val-empty" id="valOpenSyncUrl">(Optional)</span></div>
366
+ <input type="text" id="txtOpenSyncUrl" class="modern-input" spellcheck="false"
367
+ placeholder="https://...convex.cloud">
368
+ </div>
369
+
370
+ <div class="divider"></div>
371
+ <label class="grey-label">OPTIONS</label>
372
+ <label class="modern-checkbox"><input type="checkbox" id="chkBackup" checked><span
373
+ class="checkmark"></span>Backup konfigurasi lama</label>
374
+ <label class="modern-checkbox"><input type="checkbox" id="chkNpmInstall" checked><span
375
+ class="checkmark"></span>Jalankan npm install</label>
376
+ </div>
377
+ <div class="page-footer">
378
+ <button class="btn secondary" id="btnPrev3">← Back</button>
379
+ <button class="btn primary" id="btnNext3">Install Now →</button>
380
+ </div>
381
+ </div>
382
+ <!-- PAGE 4: INSTALLING -->
383
+ <div id="page4" class="page">
384
+ <div class="page-header">
385
+ <h2 id="installTitle">Installing...</h2>
386
+ <p id="installSubtitle">Menyalin konfigurasi...</p>
387
+ </div>
388
+ <div class="progress-container">
389
+ <div class="progress-bar" id="installProgress" style="width:0%"></div>
390
+ </div>
391
+ <div class="log-container">
392
+ <div class="log-header"><span class="log-title">Log</span></div>
393
+ <div class="log-content scroll-area" id="logContent"></div>
394
+ </div>
395
+ <div class="page-footer"><button class="btn primary hidden" id="btnNext4">Finish ✓</button></div>
396
+ </div>
397
+ <!-- PAGE 5: COMPLETE -->
398
+ <div id="page5" class="page">
399
+ <div class="center-content">
400
+ <div class="success-icon">✓</div>
401
+ <h2>Installation Complete!</h2>
402
+ <p class="success-text">Antigravity OpenCode siap digunakan</p>
403
+ <div class="summary-card"><label class="cyan-label">📁 Config Location</label>
404
+ <div class="code-text" id="txtConfigPath">...</div>
405
+ </div>
406
+ <div class="summary-card"><label class="purple-label">🚀 Next Steps</label>
407
+ <div class="step-text">1. opencode auth login</div>
408
+ <div class="step-text">2. opencode</div>
409
+ </div>
410
+ <div class="action-row">
411
+ <button class="btn secondary" id="btnOpenFolder">📂 Config</button>
412
+ <button class="btn secondary" id="btnAuthLogin">🔑 Auth</button>
413
+ <button class="btn primary" id="btnFinish">Close</button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ <!-- MODAL -->
420
+ <div class="modal-overlay" id="modal">
421
+ <div class="modal-container">
422
+ <div class="modal-header"><span class="modal-title" id="modalTitle">Title</span><button class="modal-close"
423
+ id="btnModalClose">✕</button></div>
424
+ <div class="modal-body" id="modalBody"></div>
425
+ </div>
426
+ </div>
427
+ <script src="i18n.js"></script>
428
+ <script src="renderer.js"></script>
429
+ </body>
430
+
431
+ </html>
432
+