lobstakit-cloud 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/bin/lobstakit.js +2 -0
- package/lib/config.js +176 -0
- package/lib/gateway.js +104 -0
- package/lib/proxy.js +33 -0
- package/package.json +16 -0
- package/public/css/styles.css +579 -0
- package/public/index.html +507 -0
- package/public/js/app.js +198 -0
- package/public/js/login.js +93 -0
- package/public/js/manage.js +1274 -0
- package/public/js/setup.js +755 -0
- package/public/login.html +73 -0
- package/public/manage.html +734 -0
- package/server.js +1357 -0
|
@@ -0,0 +1,507 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="dark">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Setup - LobstaKit</title>
|
|
7
|
+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦞</text></svg>">
|
|
8
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
9
|
+
<script>
|
|
10
|
+
tailwind.config = {
|
|
11
|
+
darkMode: 'class',
|
|
12
|
+
theme: {
|
|
13
|
+
extend: {
|
|
14
|
+
colors: {
|
|
15
|
+
lobsta: {
|
|
16
|
+
bg: '#0A0A0A',
|
|
17
|
+
card: '#171717',
|
|
18
|
+
border: '#262626',
|
|
19
|
+
accent: '#DC2626',
|
|
20
|
+
'accent-dark': '#991B1B',
|
|
21
|
+
'accent-light': '#EF4444',
|
|
22
|
+
light: '#FF6B6B',
|
|
23
|
+
success: '#22c55e',
|
|
24
|
+
warning: '#f59e0b',
|
|
25
|
+
error: '#ef4444',
|
|
26
|
+
muted: '#737373',
|
|
27
|
+
gray: '#404040',
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
</script>
|
|
34
|
+
<link rel="stylesheet" href="/css/styles.css">
|
|
35
|
+
</head>
|
|
36
|
+
<body class="bg-lobsta-bg text-gray-100 min-h-screen">
|
|
37
|
+
<!-- Navigation -->
|
|
38
|
+
<nav class="bg-lobsta-card border-b border-lobsta-border sticky top-0 z-50">
|
|
39
|
+
<div class="max-w-6xl mx-auto px-4">
|
|
40
|
+
<div class="flex items-center justify-between h-16">
|
|
41
|
+
<a href="/" class="flex items-center space-x-3">
|
|
42
|
+
<span class="text-2xl">🛠️</span>
|
|
43
|
+
<span class="font-bold text-xl text-white">LobstaKit</span>
|
|
44
|
+
</a>
|
|
45
|
+
<div class="flex items-center space-x-4">
|
|
46
|
+
<a href="/manage" class="px-3 py-2 rounded-lg hover:bg-lobsta-border transition">
|
|
47
|
+
Dashboard
|
|
48
|
+
</a>
|
|
49
|
+
<a href="/setup" class="px-3 py-2 rounded-lg hover:bg-lobsta-border transition bg-lobsta-border">
|
|
50
|
+
Setup
|
|
51
|
+
</a>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</nav>
|
|
56
|
+
|
|
57
|
+
<!-- Main Content -->
|
|
58
|
+
<main class="max-w-2xl mx-auto px-4 py-8">
|
|
59
|
+
<div class="space-y-6">
|
|
60
|
+
<!-- Header -->
|
|
61
|
+
<div class="text-center mb-8">
|
|
62
|
+
<h1 class="text-3xl font-bold text-white">Setup Wizard</h1>
|
|
63
|
+
<p class="text-lobsta-muted mt-2" id="subdomain-display">Configure your Lobsta gateway</p>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<!-- Progress Steps -->
|
|
67
|
+
<div class="flex justify-center mb-8">
|
|
68
|
+
<div class="flex items-center space-x-4">
|
|
69
|
+
<button onclick="showStep(1)" class="step-indicator active" id="step-1-indicator">
|
|
70
|
+
<span class="step-number">1</span>
|
|
71
|
+
<span class="step-label hidden md:inline">Welcome</span>
|
|
72
|
+
</button>
|
|
73
|
+
<div class="w-8 h-0.5 bg-lobsta-border step-line" id="line-1"></div>
|
|
74
|
+
<button onclick="showStep(2)" class="step-indicator" id="step-2-indicator">
|
|
75
|
+
<span class="step-number">2</span>
|
|
76
|
+
<span class="step-label hidden md:inline">API Key</span>
|
|
77
|
+
</button>
|
|
78
|
+
<div class="w-8 h-0.5 bg-lobsta-border step-line" id="line-2"></div>
|
|
79
|
+
<button onclick="showStep(3)" class="step-indicator" id="step-3-indicator">
|
|
80
|
+
<span class="step-number">3</span>
|
|
81
|
+
<span class="step-label hidden md:inline">Channel</span>
|
|
82
|
+
</button>
|
|
83
|
+
<div class="w-8 h-0.5 bg-lobsta-border step-line" id="line-3"></div>
|
|
84
|
+
<button onclick="showStep(4)" class="step-indicator" id="step-4-indicator">
|
|
85
|
+
<span class="step-number">4</span>
|
|
86
|
+
<span class="step-label hidden md:inline">Launch</span>
|
|
87
|
+
</button>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<!-- Step 1: Welcome -->
|
|
92
|
+
<div class="card step-content" id="step-1">
|
|
93
|
+
<div class="text-center mb-6">
|
|
94
|
+
<span class="text-5xl block mb-4">🚀</span>
|
|
95
|
+
<h2 class="text-xl font-semibold mb-2">Welcome to LobstaKit</h2>
|
|
96
|
+
<p class="text-lobsta-muted">
|
|
97
|
+
Your personal AI gateway is ready to be configured. Let's set up your chatbot in <strong class="text-white">3 quick steps</strong>.
|
|
98
|
+
</p>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div class="bg-lobsta-bg rounded-lg p-4 mb-6">
|
|
102
|
+
<p class="text-sm font-medium mb-3 text-white">You'll need:</p>
|
|
103
|
+
<ul class="space-y-2 text-sm text-lobsta-muted">
|
|
104
|
+
<li class="flex items-center space-x-2">
|
|
105
|
+
<span class="text-lobsta-accent">•</span>
|
|
106
|
+
<span>An <strong class="text-white">API key</strong> from your preferred AI provider (Anthropic, OpenAI, Google, xAI, DeepSeek, Mistral, or OpenRouter)</span>
|
|
107
|
+
</li>
|
|
108
|
+
<li class="flex items-center space-x-2">
|
|
109
|
+
<span class="text-lobsta-accent">•</span>
|
|
110
|
+
<span><strong class="text-white">Choose how to chat:</strong> Web UI, Telegram, or Discord</span>
|
|
111
|
+
</li>
|
|
112
|
+
</ul>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div class="flex justify-end">
|
|
116
|
+
<button onclick="showStep(2)" class="btn btn-primary w-full">
|
|
117
|
+
Get Started →
|
|
118
|
+
</button>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<!-- Step 2: API Key -->
|
|
123
|
+
<div class="card step-content hidden" id="step-2">
|
|
124
|
+
<h2 class="text-xl font-semibold mb-2" id="step2-title">🔑 API Key</h2>
|
|
125
|
+
<p class="text-lobsta-muted mb-6" id="step2-subtitle">
|
|
126
|
+
Get your API key from
|
|
127
|
+
<a id="provider-console-link" href="https://claude.ai/settings" target="_blank" class="text-lobsta-accent hover:underline">
|
|
128
|
+
claude.ai/settings
|
|
129
|
+
</a>
|
|
130
|
+
</p>
|
|
131
|
+
|
|
132
|
+
<div class="space-y-4">
|
|
133
|
+
<div>
|
|
134
|
+
<label class="block text-sm font-medium mb-2">Provider</label>
|
|
135
|
+
<select id="provider" class="input w-full" onchange="onProviderChange()">
|
|
136
|
+
<option value="anthropic">Anthropic</option>
|
|
137
|
+
<option value="openai">OpenAI</option>
|
|
138
|
+
<option value="google">Google (Gemini)</option>
|
|
139
|
+
<option value="xai">xAI (Grok)</option>
|
|
140
|
+
<option value="deepseek">DeepSeek</option>
|
|
141
|
+
<option value="mistral">Mistral</option>
|
|
142
|
+
<option value="openrouter">OpenRouter (all models)</option>
|
|
143
|
+
</select>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<!-- Anthropic Key Type Toggle (only visible when Anthropic selected) -->
|
|
147
|
+
<div id="anthropic-key-type-section">
|
|
148
|
+
<label class="block text-sm font-medium mb-2">API Key Type</label>
|
|
149
|
+
<div class="key-type-toggle">
|
|
150
|
+
<label class="key-type-option selected" id="key-type-subscription-label">
|
|
151
|
+
<input type="radio" name="anthropic-key-type" value="subscription" checked class="sr-only" onchange="onKeyTypeChange()">
|
|
152
|
+
<span class="key-type-title">☁️ Claude Subscription</span>
|
|
153
|
+
<span class="key-type-desc">Pro / Max plan</span>
|
|
154
|
+
</label>
|
|
155
|
+
<label class="key-type-option" id="key-type-api-label">
|
|
156
|
+
<input type="radio" name="anthropic-key-type" value="api" class="sr-only" onchange="onKeyTypeChange()">
|
|
157
|
+
<span class="key-type-title">🔧 Standard API Key</span>
|
|
158
|
+
<span class="key-type-desc">Pay-per-use</span>
|
|
159
|
+
</label>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="key-type-instructions" id="key-type-instructions">
|
|
162
|
+
<div id="instructions-subscription">
|
|
163
|
+
<p class="text-xs text-lobsta-muted">
|
|
164
|
+
Go to <a href="https://claude.ai/settings" target="_blank" class="text-lobsta-accent hover:underline">claude.ai</a> → <strong class="text-white">Settings</strong> → <strong class="text-white">Developer</strong> → <strong class="text-white">Generate API key</strong>
|
|
165
|
+
</p>
|
|
166
|
+
<p class="text-xs text-lobsta-muted mt-2 flex items-start gap-1.5">
|
|
167
|
+
<span class="text-green-400">✓</span>
|
|
168
|
+
<span>Uses your existing Claude Pro/Max subscription — no extra billing</span>
|
|
169
|
+
</p>
|
|
170
|
+
</div>
|
|
171
|
+
<div id="instructions-api" class="hidden">
|
|
172
|
+
<p class="text-xs text-lobsta-muted">
|
|
173
|
+
Get your API key from <a href="https://console.anthropic.com/settings/keys" target="_blank" class="text-lobsta-accent hover:underline">console.anthropic.com</a>
|
|
174
|
+
</p>
|
|
175
|
+
<p class="text-xs text-lobsta-muted mt-2 flex items-start gap-1.5">
|
|
176
|
+
<span class="text-lobsta-warning">$</span>
|
|
177
|
+
<span>Pay-per-use billing through Anthropic's API console</span>
|
|
178
|
+
</p>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<div>
|
|
184
|
+
<label class="block text-sm font-medium mb-2">API Key</label>
|
|
185
|
+
<div class="relative">
|
|
186
|
+
<input type="password" id="api-key"
|
|
187
|
+
class="input w-full pr-16"
|
|
188
|
+
placeholder="sk-ant-..."
|
|
189
|
+
autocomplete="off">
|
|
190
|
+
<button onclick="toggleVisibility('api-key', this)"
|
|
191
|
+
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-lobsta-muted hover:text-white transition" type="button">
|
|
192
|
+
Show
|
|
193
|
+
</button>
|
|
194
|
+
</div>
|
|
195
|
+
<p class="text-xs text-lobsta-error mt-1 hidden" id="api-key-error"></p>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<div>
|
|
199
|
+
<label class="block text-sm font-medium mb-2">Model</label>
|
|
200
|
+
<select id="model" class="input w-full">
|
|
201
|
+
<option value="anthropic/claude-sonnet-4-5">Claude Sonnet 4.5 — Recommended</option>
|
|
202
|
+
<option value="anthropic/claude-opus-4-5">Claude Opus 4.5 — Most powerful</option>
|
|
203
|
+
<option value="anthropic/claude-haiku-3-5">Claude Haiku 3.5 — Budget</option>
|
|
204
|
+
</select>
|
|
205
|
+
<p class="text-xs text-lobsta-muted mt-1" id="model-hint">Sonnet 4.5 is the best balance of speed, capability, and cost.</p>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<!-- Private Memory Option -->
|
|
210
|
+
<div class="border-t border-lobsta-border mt-6 pt-5">
|
|
211
|
+
<div class="flex items-center justify-between">
|
|
212
|
+
<div class="flex items-start space-x-3">
|
|
213
|
+
<span class="text-lg mt-0.5">🔒</span>
|
|
214
|
+
<div>
|
|
215
|
+
<p class="text-sm font-medium text-white">Enable Private Memory</p>
|
|
216
|
+
<p class="text-xs text-lobsta-muted mt-0.5">Keep all memory data on your server. Uses a local AI model (~313MB download) instead of cloud APIs for memory search.</p>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
<label class="toggle-switch ml-4">
|
|
220
|
+
<input type="checkbox" id="private-memory-toggle" checked>
|
|
221
|
+
<span class="toggle-slider"></span>
|
|
222
|
+
</label>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<div class="flex justify-between mt-6">
|
|
227
|
+
<button onclick="showStep(1)" class="btn btn-secondary">← Back</button>
|
|
228
|
+
<button onclick="validateStep2()" class="btn btn-primary">
|
|
229
|
+
Next: Channel →
|
|
230
|
+
</button>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<!-- Step 3: Channel Picker -->
|
|
235
|
+
<div class="card step-content hidden" id="step-3">
|
|
236
|
+
<h2 class="text-xl font-semibold mb-2">📡 Chat Channel</h2>
|
|
237
|
+
<p class="text-lobsta-muted mb-6">
|
|
238
|
+
Choose how you want to talk to your bot.
|
|
239
|
+
</p>
|
|
240
|
+
|
|
241
|
+
<!-- Channel Cards Grid -->
|
|
242
|
+
<div class="channel-grid">
|
|
243
|
+
<!-- Web Chat -->
|
|
244
|
+
<div class="channel-card selected" data-channel="web" onclick="selectChannel('web')">
|
|
245
|
+
<div class="channel-card-icon">🌐</div>
|
|
246
|
+
<div class="channel-card-content">
|
|
247
|
+
<div class="channel-card-title">Web Chat <span class="channel-badge-recommended">Recommended</span></div>
|
|
248
|
+
<div class="channel-card-desc">Chat directly in your browser. No bot setup required.</div>
|
|
249
|
+
<div class="channel-card-sub">Access via Tailscale or LobstaKit dashboard</div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<!-- Telegram -->
|
|
254
|
+
<div class="channel-card" data-channel="telegram" onclick="selectChannel('telegram')">
|
|
255
|
+
<div class="channel-card-icon">📱</div>
|
|
256
|
+
<div class="channel-card-content">
|
|
257
|
+
<div class="channel-card-title">Telegram</div>
|
|
258
|
+
<div class="channel-card-desc">Chat via Telegram messenger</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<!-- Discord -->
|
|
263
|
+
<div class="channel-card" data-channel="discord" onclick="selectChannel('discord')">
|
|
264
|
+
<div class="channel-card-icon">🎮</div>
|
|
265
|
+
<div class="channel-card-content">
|
|
266
|
+
<div class="channel-card-title">Discord</div>
|
|
267
|
+
<div class="channel-card-desc">Chat via Discord server</div>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
<!-- Signal (Coming Soon) -->
|
|
272
|
+
<div class="channel-card disabled">
|
|
273
|
+
<div class="channel-card-icon">📲</div>
|
|
274
|
+
<div class="channel-card-content">
|
|
275
|
+
<div class="channel-card-title">Signal <span class="channel-badge-soon">Coming Soon</span></div>
|
|
276
|
+
<div class="channel-card-desc">Secure messaging via Signal</div>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
<!-- WhatsApp (Coming Soon) -->
|
|
281
|
+
<div class="channel-card disabled">
|
|
282
|
+
<div class="channel-card-icon">💬</div>
|
|
283
|
+
<div class="channel-card-content">
|
|
284
|
+
<div class="channel-card-title">WhatsApp <span class="channel-badge-soon">Coming Soon</span></div>
|
|
285
|
+
<div class="channel-card-desc">Chat via WhatsApp</div>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
<!-- Telegram Config (hidden by default) -->
|
|
291
|
+
<div id="channel-config-telegram" class="channel-config hidden">
|
|
292
|
+
<div class="space-y-4 mt-6">
|
|
293
|
+
<div>
|
|
294
|
+
<label class="block text-sm font-medium mb-2">Telegram Bot Token</label>
|
|
295
|
+
<div class="relative">
|
|
296
|
+
<input type="password" id="bot-token"
|
|
297
|
+
class="input w-full pr-16"
|
|
298
|
+
placeholder="123456789:ABCdefGhIjKlMnOpQrStUvWxYz"
|
|
299
|
+
autocomplete="off">
|
|
300
|
+
<button onclick="toggleVisibility('bot-token', this)"
|
|
301
|
+
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-lobsta-muted hover:text-white transition" type="button">
|
|
302
|
+
Show
|
|
303
|
+
</button>
|
|
304
|
+
</div>
|
|
305
|
+
<p class="text-xs text-lobsta-muted mt-1">
|
|
306
|
+
Create a bot with <strong>@BotFather</strong> on Telegram → send <code class="bg-lobsta-bg px-1 rounded">/newbot</code> → copy the token
|
|
307
|
+
</p>
|
|
308
|
+
<p class="text-xs text-lobsta-error mt-1 hidden" id="bot-token-error"></p>
|
|
309
|
+
</div>
|
|
310
|
+
|
|
311
|
+
<div>
|
|
312
|
+
<label class="block text-sm font-medium mb-2">Your Telegram User ID</label>
|
|
313
|
+
<input type="text" id="user-id"
|
|
314
|
+
class="input w-full"
|
|
315
|
+
placeholder="123456789"
|
|
316
|
+
inputmode="numeric">
|
|
317
|
+
<p class="text-xs text-lobsta-muted mt-1">
|
|
318
|
+
Send <code class="bg-lobsta-bg px-1 rounded">/start</code> to <strong>@userinfobot</strong> on Telegram to get your ID
|
|
319
|
+
</p>
|
|
320
|
+
<p class="text-xs text-lobsta-error mt-1 hidden" id="user-id-error"></p>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
|
|
325
|
+
<!-- Discord Config (hidden by default) -->
|
|
326
|
+
<div id="channel-config-discord" class="channel-config hidden">
|
|
327
|
+
<div class="space-y-4 mt-6">
|
|
328
|
+
<div>
|
|
329
|
+
<label class="block text-sm font-medium mb-2">Discord Bot Token</label>
|
|
330
|
+
<div class="relative">
|
|
331
|
+
<input type="password" id="discord-bot-token"
|
|
332
|
+
class="input w-full pr-16"
|
|
333
|
+
placeholder="MTIz..."
|
|
334
|
+
autocomplete="off">
|
|
335
|
+
<button onclick="toggleVisibility('discord-bot-token', this)"
|
|
336
|
+
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-lobsta-muted hover:text-white transition" type="button">
|
|
337
|
+
Show
|
|
338
|
+
</button>
|
|
339
|
+
</div>
|
|
340
|
+
<p class="text-xs text-lobsta-muted mt-1">
|
|
341
|
+
Create a bot at <a href="https://discord.com/developers/applications" target="_blank" class="text-lobsta-accent hover:underline">discord.com/developers</a> → Bot → Copy token
|
|
342
|
+
</p>
|
|
343
|
+
<p class="text-xs text-lobsta-error mt-1 hidden" id="discord-bot-token-error"></p>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<div>
|
|
347
|
+
<label class="block text-sm font-medium mb-2">Server ID</label>
|
|
348
|
+
<input type="text" id="discord-server-id"
|
|
349
|
+
class="input w-full"
|
|
350
|
+
placeholder="123456789012345678"
|
|
351
|
+
inputmode="numeric">
|
|
352
|
+
<p class="text-xs text-lobsta-muted mt-1">
|
|
353
|
+
Right-click your server → <strong>Copy Server ID</strong> (enable Developer Mode in Settings → Advanced)
|
|
354
|
+
</p>
|
|
355
|
+
<p class="text-xs text-lobsta-error mt-1 hidden" id="discord-server-id-error"></p>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
|
|
360
|
+
<div class="flex justify-between mt-6">
|
|
361
|
+
<button onclick="showStep(2)" class="btn btn-secondary">← Back</button>
|
|
362
|
+
<button onclick="validateStep3()" class="btn btn-primary">
|
|
363
|
+
Next: Review →
|
|
364
|
+
</button>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
<!-- Step 4: Review & Launch -->
|
|
369
|
+
<div class="card step-content hidden" id="step-4">
|
|
370
|
+
<div id="review-panel">
|
|
371
|
+
<h2 class="text-xl font-semibold mb-2">🔍 Review & Launch</h2>
|
|
372
|
+
<p class="text-lobsta-muted mb-6">
|
|
373
|
+
Double-check your settings before launching.
|
|
374
|
+
</p>
|
|
375
|
+
|
|
376
|
+
<div class="bg-lobsta-bg rounded-lg divide-y divide-lobsta-border mb-6">
|
|
377
|
+
<div class="flex justify-between items-center p-3">
|
|
378
|
+
<span class="text-sm text-lobsta-muted">Provider</span>
|
|
379
|
+
<span class="text-sm" id="summary-provider"></span>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="flex justify-between items-center p-3">
|
|
382
|
+
<span class="text-sm text-lobsta-muted">API Key</span>
|
|
383
|
+
<span class="text-sm font-mono" id="summary-api-key"></span>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="flex justify-between items-center p-3">
|
|
386
|
+
<span class="text-sm text-lobsta-muted">Model</span>
|
|
387
|
+
<span class="text-sm" id="summary-model"></span>
|
|
388
|
+
</div>
|
|
389
|
+
<div class="flex justify-between items-center p-3">
|
|
390
|
+
<span class="text-sm text-lobsta-muted">Channel</span>
|
|
391
|
+
<span class="text-sm" id="summary-channel"></span>
|
|
392
|
+
</div>
|
|
393
|
+
<div class="flex justify-between items-center p-3">
|
|
394
|
+
<span class="text-sm text-lobsta-muted">Memory</span>
|
|
395
|
+
<span class="text-sm" id="summary-memory"></span>
|
|
396
|
+
</div>
|
|
397
|
+
<div class="flex justify-between items-center p-3 hidden" id="summary-channel-detail-row">
|
|
398
|
+
<span class="text-sm text-lobsta-muted" id="summary-channel-detail-label"></span>
|
|
399
|
+
<span class="text-sm font-mono" id="summary-channel-detail-value"></span>
|
|
400
|
+
</div>
|
|
401
|
+
<div class="flex justify-between items-center p-3 hidden" id="summary-email-row">
|
|
402
|
+
<span class="text-sm text-lobsta-muted">Login Email</span>
|
|
403
|
+
<span class="text-sm" id="summary-email"></span>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<!-- Dashboard Account -->
|
|
408
|
+
<div class="mt-6 pt-6 border-t border-lobsta-border" id="password-setup-section">
|
|
409
|
+
<h3 class="text-lg font-semibold mb-2">🔒 Dashboard Account</h3>
|
|
410
|
+
<p class="text-sm text-lobsta-muted mb-4">
|
|
411
|
+
Set up your login credentials to protect your LobstaKit dashboard.
|
|
412
|
+
</p>
|
|
413
|
+
<div class="space-y-3">
|
|
414
|
+
<div>
|
|
415
|
+
<label class="block text-sm font-medium mb-1">Email</label>
|
|
416
|
+
<input type="email" id="dashboard-email" class="input w-full" placeholder="you@email.com" autocomplete="email">
|
|
417
|
+
<p class="text-xs text-lobsta-muted mt-1" id="dashboard-email-hint">Used to log into your LobstaKit dashboard</p>
|
|
418
|
+
</div>
|
|
419
|
+
<div>
|
|
420
|
+
<label class="block text-sm font-medium mb-1">Password</label>
|
|
421
|
+
<input type="password" id="dashboard-password" class="input w-full" placeholder="Min 6 characters" minlength="6" autocomplete="new-password">
|
|
422
|
+
</div>
|
|
423
|
+
<div>
|
|
424
|
+
<label class="block text-sm font-medium mb-1">Confirm Password</label>
|
|
425
|
+
<input type="password" id="dashboard-password-confirm" class="input w-full" placeholder="Confirm password" autocomplete="new-password">
|
|
426
|
+
<p class="text-xs text-lobsta-error mt-1 hidden" id="password-error"></p>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
|
|
431
|
+
<div class="flex justify-between mt-6">
|
|
432
|
+
<button onclick="showStep(3)" class="btn btn-secondary">← Back</button>
|
|
433
|
+
<button onclick="launchBot()" class="btn btn-success" id="launch-btn">
|
|
434
|
+
Launch Your Bot 🚀
|
|
435
|
+
</button>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
|
|
439
|
+
<!-- Progress Panel (shown during launch) -->
|
|
440
|
+
<div id="launch-progress" class="hidden">
|
|
441
|
+
<h2 class="text-xl font-semibold mb-4 text-center">Setting up your bot...</h2>
|
|
442
|
+
|
|
443
|
+
<div class="space-y-3 mb-6">
|
|
444
|
+
<div class="flex items-center justify-between p-3 rounded bg-lobsta-bg">
|
|
445
|
+
<span class="flex items-center space-x-2">
|
|
446
|
+
<span id="progress-config-icon" class="text-lobsta-muted">○</span>
|
|
447
|
+
<span>Write Config</span>
|
|
448
|
+
</span>
|
|
449
|
+
<span class="text-sm text-lobsta-muted" id="progress-config-status">Pending</span>
|
|
450
|
+
</div>
|
|
451
|
+
<div class="flex items-center justify-between p-3 rounded bg-lobsta-bg">
|
|
452
|
+
<span class="flex items-center space-x-2">
|
|
453
|
+
<span id="progress-gateway-icon" class="text-lobsta-muted">○</span>
|
|
454
|
+
<span>Start Gateway</span>
|
|
455
|
+
</span>
|
|
456
|
+
<span class="text-sm text-lobsta-muted" id="progress-gateway-status">Pending</span>
|
|
457
|
+
</div>
|
|
458
|
+
<div class="flex items-center justify-between p-3 rounded bg-lobsta-bg">
|
|
459
|
+
<span class="flex items-center space-x-2">
|
|
460
|
+
<span id="progress-health-icon" class="text-lobsta-muted">○</span>
|
|
461
|
+
<span>Health Check</span>
|
|
462
|
+
</span>
|
|
463
|
+
<span class="text-sm text-lobsta-muted" id="progress-health-status">Pending</span>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<!-- Success Panel -->
|
|
469
|
+
<div id="launch-success" class="hidden">
|
|
470
|
+
<div class="text-center">
|
|
471
|
+
<span class="text-5xl block mb-4">🎉</span>
|
|
472
|
+
<h2 class="text-2xl font-bold mb-2">Your bot is live!</h2>
|
|
473
|
+
<p class="text-lobsta-muted mb-6" id="success-message">
|
|
474
|
+
Your gateway is configured and running. Start chatting!
|
|
475
|
+
</p>
|
|
476
|
+
<div class="space-y-3">
|
|
477
|
+
<a href="/manage" class="btn btn-primary w-full block text-center">
|
|
478
|
+
Open Dashboard →
|
|
479
|
+
</a>
|
|
480
|
+
<a id="success-channel-link" href="https://t.me/" target="_blank" class="btn btn-secondary w-full block text-center hidden">
|
|
481
|
+
Open Telegram ↗
|
|
482
|
+
</a>
|
|
483
|
+
</div>
|
|
484
|
+
</div>
|
|
485
|
+
</div>
|
|
486
|
+
|
|
487
|
+
<!-- Error Panel -->
|
|
488
|
+
<div id="launch-error" class="hidden">
|
|
489
|
+
<div class="bg-lobsta-error/10 border border-lobsta-error/30 rounded-lg p-4 mb-4">
|
|
490
|
+
<p class="text-lobsta-error font-semibold">⚠️ Setup Failed</p>
|
|
491
|
+
<p class="text-sm text-lobsta-muted mt-1" id="launch-error-message"></p>
|
|
492
|
+
</div>
|
|
493
|
+
<button onclick="retryLaunch()" class="btn btn-primary w-full">
|
|
494
|
+
Try Again
|
|
495
|
+
</button>
|
|
496
|
+
</div>
|
|
497
|
+
</div>
|
|
498
|
+
</div>
|
|
499
|
+
</main>
|
|
500
|
+
|
|
501
|
+
<!-- Toast Container -->
|
|
502
|
+
<div id="toast-container" class="fixed bottom-4 right-4 space-y-2 z-50"></div>
|
|
503
|
+
|
|
504
|
+
<script src="/js/app.js"></script>
|
|
505
|
+
<script src="/js/setup.js"></script>
|
|
506
|
+
</body>
|
|
507
|
+
</html>
|