ft-scout 6.0.8 → 7.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/.firebase/hosting.d2Vi.cache +2 -2
- package/README.md +1 -1
- package/bin/src/commands/agent.d.ts.map +1 -1
- package/bin/src/commands/agent.js +247 -16
- package/bin/src/commands/agent.js.map +1 -1
- package/bin/src/engine/llm.d.ts.map +1 -1
- package/bin/src/engine/llm.js +98 -23
- package/bin/src/engine/llm.js.map +1 -1
- package/bin/src/index.js +4 -4
- package/bin/src/utils/branding.js +4 -4
- package/bin/src/utils/branding.js.map +1 -1
- package/package.json +1 -1
- package/web/app.js +926 -905
- package/web/styles.css +245 -54
package/web/app.js
CHANGED
|
@@ -3,443 +3,456 @@
|
|
|
3
3
|
========================================================================== */
|
|
4
4
|
|
|
5
5
|
const FIREBASE_CONFIG = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
apiKey: 'AIzaSyCMVNDgR8EejfXofUy87L7hsKxi3E_C3lg',
|
|
7
|
+
projectId: 'frontterrain',
|
|
8
|
+
tenantId: 'ft-scout-auth-gc2v5',
|
|
9
|
+
baseAuthUrl: 'https://identitytoolkit.googleapis.com/v1/accounts',
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
// Tier Configuration Details
|
|
13
13
|
const TIER_DETAILS = {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
14
|
+
free: {
|
|
15
|
+
name: 'Developer Free Tier',
|
|
16
|
+
badge: 'ACTIVE',
|
|
17
|
+
desc: 'Standard access to Scout CLI features & local execution.',
|
|
18
|
+
icon: '<i class="fa-solid fa-star text-warning" style="font-size: 24px;"></i>',
|
|
19
|
+
},
|
|
20
|
+
pro: {
|
|
21
|
+
name: 'Pro Developer Tier',
|
|
22
|
+
badge: 'PRO ACTIVE',
|
|
23
|
+
desc: 'High-power AI co-pilot capabilities, priority quota & 5 active CLI sessions.',
|
|
24
|
+
icon: '<i class="fa-solid fa-bolt text-primary" style="font-size: 24px;"></i>',
|
|
25
|
+
},
|
|
26
|
+
enterprise: {
|
|
27
|
+
name: 'Team & Enterprise Tier',
|
|
28
|
+
badge: 'ENTERPRISE ACTIVE',
|
|
29
|
+
desc: 'Organization controls, security policies & dedicated scale.',
|
|
30
|
+
icon: '<i class="fa-solid fa-building text-warning" style="font-size: 24px;"></i>',
|
|
31
|
+
},
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
// Global Application State
|
|
35
35
|
let state = {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
user: null,
|
|
37
|
+
token: null,
|
|
38
|
+
refreshToken: null,
|
|
39
|
+
activeTab: 'account',
|
|
40
|
+
serverConnected: false,
|
|
41
|
+
apiBaseUrl: '',
|
|
42
|
+
sessions: [],
|
|
43
|
+
currentTier: 'free',
|
|
44
|
+
billingCycle: 'monthly',
|
|
45
|
+
creditsUsed: 0,
|
|
46
|
+
creditsTotal: 100,
|
|
47
|
+
renewAt: null,
|
|
48
|
+
byokEnabled: false,
|
|
49
|
+
customLlmProvider: 'gemini',
|
|
50
|
+
customApiKey: '',
|
|
51
|
+
customBaseUrl: '',
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
let pendingCheckoutTier = null;
|
|
55
55
|
|
|
56
56
|
// DOM Elements Reference
|
|
57
57
|
const elements = {
|
|
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
|
-
|
|
58
|
+
// Views
|
|
59
|
+
authSection: document.getElementById('auth-section'),
|
|
60
|
+
dashboardSection: document.getElementById('dashboard-section'),
|
|
61
|
+
|
|
62
|
+
// Auth Controls
|
|
63
|
+
tabLoginBtn: document.getElementById('tab-login-btn'),
|
|
64
|
+
tabSignupBtn: document.getElementById('tab-signup-btn'),
|
|
65
|
+
loginForm: document.getElementById('login-form'),
|
|
66
|
+
signupForm: document.getElementById('signup-form'),
|
|
67
|
+
btnOpenAuth: document.getElementById('btn-open-auth'),
|
|
68
|
+
btnDemoMode: document.getElementById('btn-demo-mode'),
|
|
69
|
+
btnForgotPwd: document.getElementById('btn-forgot-pwd'),
|
|
70
|
+
|
|
71
|
+
// Navigation & User Menu
|
|
72
|
+
mainNav: document.getElementById('main-nav'),
|
|
73
|
+
userMenu: document.getElementById('user-menu'),
|
|
74
|
+
userMenuToggle: document.getElementById('user-menu-toggle'),
|
|
75
|
+
userDropdown: document.getElementById('user-dropdown'),
|
|
76
|
+
navAvatar: document.getElementById('nav-avatar'),
|
|
77
|
+
navUserName: document.getElementById('nav-user-name'),
|
|
78
|
+
dropdownName: document.getElementById('dropdown-name'),
|
|
79
|
+
dropdownEmail: document.getElementById('dropdown-email'),
|
|
80
|
+
btnDropdownLogout: document.getElementById('btn-dropdown-logout'),
|
|
81
|
+
btnDropdownProfile: document.getElementById('btn-dropdown-profile'),
|
|
82
|
+
btnDropdownTiers: document.getElementById('btn-dropdown-tiers'),
|
|
83
|
+
navTenantTag: document.getElementById('nav-tenant-tag'),
|
|
84
|
+
navTenantName: document.getElementById('nav-tenant-name'),
|
|
85
|
+
|
|
86
|
+
// Account & Header Controls
|
|
87
|
+
userDisplayName: document.getElementById('user-display-name'),
|
|
88
|
+
btnNavTiersHero: document.getElementById('btn-nav-tiers-hero'),
|
|
89
|
+
sessionTableBody: document.getElementById('session-table-body'),
|
|
90
|
+
|
|
91
|
+
// Credit Quota & Usage Controls
|
|
92
|
+
valCreditsUsed: document.getElementById('val-credits-used'),
|
|
93
|
+
valCreditsRemaining: document.getElementById('val-credits-remaining'),
|
|
94
|
+
valCreditsTotal: document.getElementById('val-credits-total'),
|
|
95
|
+
valCreditsPct: document.getElementById('val-credits-pct'),
|
|
96
|
+
creditProgressFill: document.getElementById('credit-progress-fill'),
|
|
97
|
+
valRenewDatetime: document.getElementById('val-renew-datetime'),
|
|
98
|
+
btnUpgradeCreditsHero: document.getElementById('btn-upgrade-credits-hero'),
|
|
99
|
+
creditStatusBadge: document.getElementById('credit-status-badge'),
|
|
100
|
+
labelCreditConsumption: document.getElementById('label-credit-consumption'),
|
|
101
|
+
byokBannerNote: document.getElementById('byok-banner-note'),
|
|
102
|
+
|
|
103
|
+
// BYOK & Custom Proxy Endpoint Inputs
|
|
104
|
+
byokForm: document.getElementById('byok-form'),
|
|
105
|
+
selectByokProvider: document.getElementById('select-byok-provider'),
|
|
106
|
+
inputByokEndpoint: document.getElementById('input-byok-endpoint'),
|
|
107
|
+
inputByokKey: document.getElementById('input-byok-key'),
|
|
108
|
+
checkboxEnableByok: document.getElementById('checkbox-enable-byok'),
|
|
109
|
+
byokStatusBadge: document.getElementById('byok-status-badge'),
|
|
110
|
+
|
|
111
|
+
// Profile Settings Inputs
|
|
112
|
+
settingsDisplayName: document.getElementById('settings-display-name'),
|
|
113
|
+
settingsEmail: document.getElementById('settings-email'),
|
|
114
|
+
settingsUid: document.getElementById('settings-uid'),
|
|
115
|
+
settingsActiveTier: document.getElementById('settings-active-tier'),
|
|
116
|
+
profileForm: document.getElementById('profile-form'),
|
|
117
|
+
btnAccountLogout: document.getElementById('btn-account-logout'),
|
|
118
|
+
|
|
119
|
+
// Paid Tiers UI
|
|
120
|
+
currentPlanTitle: document.getElementById('current-plan-title'),
|
|
121
|
+
currentPlanBadge: document.getElementById('current-plan-badge'),
|
|
122
|
+
currentPlanDesc: document.getElementById('current-plan-desc'),
|
|
123
|
+
tierActiveIcon: document.getElementById('tier-active-icon'),
|
|
124
|
+
toggleBillingCycle: document.getElementById('toggle-billing-cycle'),
|
|
125
|
+
priceProVal: document.getElementById('price-pro-val'),
|
|
126
|
+
priceProPeriod: document.getElementById('price-pro-period'),
|
|
127
|
+
priceEntVal: document.getElementById('price-ent-val'),
|
|
128
|
+
priceEntPeriod: document.getElementById('price-ent-period'),
|
|
129
|
+
|
|
130
|
+
// Checkout Modal Controls
|
|
131
|
+
checkoutModal: document.getElementById('checkout-modal'),
|
|
132
|
+
checkoutModalTitle: document.getElementById('checkout-modal-title'),
|
|
133
|
+
checkoutPlanName: document.getElementById('checkout-plan-name'),
|
|
134
|
+
checkoutBillingCycle: document.getElementById('checkout-billing-cycle'),
|
|
135
|
+
checkoutPlanPrice: document.getElementById('checkout-plan-price'),
|
|
136
|
+
checkoutPricePeriod: document.getElementById('checkout-price-period'),
|
|
137
|
+
checkoutQuotaVal: document.getElementById('checkout-quota-val'),
|
|
138
|
+
btnCloseCheckout: document.getElementById('btn-close-checkout'),
|
|
139
|
+
btnCancelCheckout: document.getElementById('btn-cancel-checkout'),
|
|
140
|
+
btnConfirmCheckout: document.getElementById('btn-confirm-checkout'),
|
|
141
|
+
|
|
142
|
+
// Toast Container
|
|
143
|
+
toastContainer: document.getElementById('toast-container'),
|
|
144
144
|
};
|
|
145
145
|
|
|
146
146
|
// Initialize Application
|
|
147
147
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
148
|
+
loadTierAndCreditsFromStorage();
|
|
149
|
+
loadSessionsFromStorage();
|
|
150
|
+
initEventListeners();
|
|
151
|
+
renderAllDynamicComponents();
|
|
152
|
+
await checkServerStatusAndSession();
|
|
153
153
|
});
|
|
154
154
|
|
|
155
155
|
// Time Helper Function for Dynamic Relative Timestamps
|
|
156
156
|
function timeAgo(dateInput) {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
157
|
+
if (!dateInput) return 'Just now';
|
|
158
|
+
const date = new Date(dateInput);
|
|
159
|
+
if (isNaN(date.getTime())) return String(dateInput);
|
|
160
|
+
|
|
161
|
+
const now = new Date();
|
|
162
|
+
const seconds = Math.floor((now - date) / 1000);
|
|
163
|
+
if (seconds < 45) return 'Just now';
|
|
164
|
+
const minutes = Math.floor(seconds / 60);
|
|
165
|
+
if (minutes < 60) return `${minutes}m ago`;
|
|
166
|
+
const hours = Math.floor(minutes / 60);
|
|
167
|
+
if (hours < 24) return `${hours}h ago`;
|
|
168
|
+
const days = Math.floor(hours / 24);
|
|
169
|
+
return `${days}d ago`;
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
// Load Subscription Tier & Dynamic Credits from Local Storage / Config
|
|
173
173
|
function loadTierAndCreditsFromStorage() {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
174
|
+
const savedTier = localStorage.getItem('scout_current_tier');
|
|
175
|
+
if (savedTier && TIER_DETAILS[savedTier]) {
|
|
176
|
+
state.currentTier = savedTier;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
const savedUsed = localStorage.getItem('scout_credits_used');
|
|
180
|
+
if (savedUsed !== null) {
|
|
181
|
+
state.creditsUsed = parseInt(savedUsed, 10) || 0;
|
|
182
|
+
} else {
|
|
183
|
+
state.creditsUsed = 0;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
const savedTotal = localStorage.getItem('scout_credits_total');
|
|
187
|
+
if (savedTotal !== null) {
|
|
188
|
+
state.creditsTotal = parseInt(savedTotal, 10) || 100;
|
|
189
|
+
} else {
|
|
190
|
+
state.creditsTotal = state.currentTier === 'pro' ? 1000 : state.currentTier === 'enterprise' ? 10000 : 100;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
const savedRenew = localStorage.getItem('scout_renew_at');
|
|
194
|
+
if (savedRenew) {
|
|
195
|
+
state.renewAt = savedRenew;
|
|
196
|
+
} else {
|
|
197
|
+
const now = new Date();
|
|
198
|
+
state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
state.byokEnabled = localStorage.getItem('scout_byok_enabled') === 'true';
|
|
202
|
+
state.customLlmProvider = localStorage.getItem('scout_byok_provider') || 'gemini';
|
|
203
|
+
state.customApiKey = localStorage.getItem('scout_byok_key') || '';
|
|
204
|
+
state.customBaseUrl = localStorage.getItem('scout_byok_endpoint') || '';
|
|
205
205
|
}
|
|
206
206
|
|
|
207
207
|
// Render All Dynamic Components
|
|
208
208
|
function renderAllDynamicComponents() {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
209
|
+
renderSessionsTable();
|
|
210
|
+
renderCreditUsageUI();
|
|
211
|
+
renderTiersUI();
|
|
212
212
|
}
|
|
213
213
|
|
|
214
214
|
// Open / Close Checkout Modal
|
|
215
215
|
function openCheckoutModal(targetTier) {
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
216
|
+
pendingCheckoutTier = targetTier;
|
|
217
|
+
const isAnnual = state.billingCycle === 'annual';
|
|
218
|
+
const tierInfo = TIER_DETAILS[targetTier] || TIER_DETAILS.pro;
|
|
219
|
+
|
|
220
|
+
let price = '0';
|
|
221
|
+
let quota = '100 Credits / mo';
|
|
222
|
+
|
|
223
|
+
if (targetTier === 'pro') {
|
|
224
|
+
price = isAnnual ? '15' : '19';
|
|
225
|
+
quota = '1,000 Credits / mo';
|
|
226
|
+
} else if (targetTier === 'enterprise') {
|
|
227
|
+
price = isAnnual ? '39' : '49';
|
|
228
|
+
quota = '10,000 Credits / mo';
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
if (elements.checkoutPlanName) elements.checkoutPlanName.innerText = tierInfo.name;
|
|
232
|
+
if (elements.checkoutBillingCycle) elements.checkoutBillingCycle.innerText = isAnnual ? 'Billed Annually (20% Off)' : 'Billed Monthly';
|
|
233
|
+
if (elements.checkoutPlanPrice) elements.checkoutPlanPrice.innerText = price;
|
|
234
|
+
if (elements.checkoutPricePeriod) elements.checkoutPricePeriod.innerText = isAnnual ? '/ mo (annual)' : '/ mo';
|
|
235
|
+
if (elements.checkoutQuotaVal) elements.checkoutQuotaVal.innerText = quota;
|
|
236
|
+
|
|
237
|
+
if (elements.checkoutModal) elements.checkoutModal.classList.remove('hidden');
|
|
238
238
|
}
|
|
239
239
|
|
|
240
240
|
function closeCheckoutModal() {
|
|
241
|
-
|
|
242
|
-
|
|
241
|
+
pendingCheckoutTier = null;
|
|
242
|
+
if (elements.checkoutModal) elements.checkoutModal.classList.add('hidden');
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
// Setup Event Handlers
|
|
246
246
|
function initEventListeners() {
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
247
|
+
// Auth Form Tabs Switcher
|
|
248
|
+
elements.tabLoginBtn?.addEventListener('click', () => switchAuthForm('login'));
|
|
249
|
+
elements.tabSignupBtn?.addEventListener('click', () => switchAuthForm('signup'));
|
|
250
|
+
|
|
251
|
+
// Form Submissions
|
|
252
|
+
elements.loginForm?.addEventListener('submit', handleSignIn);
|
|
253
|
+
elements.signupForm?.addEventListener('submit', handleSignUp);
|
|
254
|
+
elements.btnDemoMode?.addEventListener('click', launchDemoSession);
|
|
255
|
+
|
|
256
|
+
elements.btnForgotPwd?.addEventListener('click', (e) => {
|
|
257
|
+
e.preventDefault();
|
|
258
|
+
handleForgotPassword();
|
|
259
|
+
});
|
|
260
|
+
|
|
261
|
+
// Navigation Tabs Switcher
|
|
262
|
+
document.querySelectorAll('.nav-btn').forEach((btn) => {
|
|
263
|
+
btn.addEventListener('click', () => {
|
|
264
|
+
const targetTab = btn.getAttribute('data-tab');
|
|
265
|
+
if (targetTab) switchDashboardTab(targetTab);
|
|
266
|
+
});
|
|
267
|
+
});
|
|
268
|
+
|
|
269
|
+
// User Dropdown Menu
|
|
270
|
+
elements.userMenuToggle?.addEventListener('click', (e) => {
|
|
271
|
+
e.stopPropagation();
|
|
272
|
+
elements.userDropdown?.classList.toggle('show');
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
document.addEventListener('click', () => {
|
|
276
|
+
elements.userDropdown?.classList.remove('show');
|
|
277
|
+
});
|
|
278
|
+
|
|
279
|
+
elements.btnDropdownLogout?.addEventListener('click', handleLogout);
|
|
280
|
+
elements.btnAccountLogout?.addEventListener('click', handleLogout);
|
|
281
|
+
elements.btnDropdownProfile?.addEventListener('click', () => switchDashboardTab('account'));
|
|
282
|
+
elements.btnDropdownTiers?.addEventListener('click', () => switchDashboardTab('tiers'));
|
|
283
|
+
elements.btnNavTiersHero?.addEventListener('click', () => switchDashboardTab('tiers'));
|
|
284
|
+
elements.btnUpgradeCreditsHero?.addEventListener('click', () => switchDashboardTab('tiers'));
|
|
285
|
+
elements.btnOpenAuth?.addEventListener('click', showAuthSection);
|
|
286
|
+
|
|
287
|
+
// Checkout Modal Events
|
|
288
|
+
elements.btnCloseCheckout?.addEventListener('click', closeCheckoutModal);
|
|
289
|
+
elements.btnCancelCheckout?.addEventListener('click', closeCheckoutModal);
|
|
290
|
+
|
|
291
|
+
elements.btnConfirmCheckout?.addEventListener('click', () => {
|
|
292
|
+
if (!pendingCheckoutTier) return;
|
|
293
|
+
|
|
294
|
+
const targetTier = pendingCheckoutTier;
|
|
295
|
+
const tierInfo = TIER_DETAILS[targetTier];
|
|
296
|
+
if (!tierInfo) return;
|
|
297
|
+
|
|
298
|
+
state.currentTier = targetTier;
|
|
299
|
+
state.creditsTotal = targetTier === 'pro' ? 1000 : targetTier === 'enterprise' ? 10000 : 100;
|
|
300
|
+
|
|
301
|
+
const now = new Date();
|
|
302
|
+
state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
|
|
303
|
+
|
|
304
|
+
saveSessionToStorage();
|
|
305
|
+
syncAuthWithServer();
|
|
306
|
+
closeCheckoutModal();
|
|
307
|
+
renderCreditUsageUI();
|
|
308
|
+
renderTiersUI();
|
|
309
|
+
updateUserUI();
|
|
310
|
+
showToast(`Subscription activated! Welcome to ${tierInfo.name}. Quota upgraded to ${state.creditsTotal.toLocaleString()} credits.`, 'success');
|
|
311
|
+
});
|
|
312
|
+
|
|
313
|
+
// Password Visibility Toggle Buttons
|
|
314
|
+
document.querySelectorAll('.btn-toggle-pwd').forEach((btn) => {
|
|
315
|
+
btn.addEventListener('click', () => {
|
|
316
|
+
const targetId = btn.getAttribute('data-target');
|
|
317
|
+
const input = document.getElementById(targetId);
|
|
318
|
+
if (input) {
|
|
319
|
+
const isPwd = input.type === 'password';
|
|
320
|
+
input.type = isPwd ? 'text' : 'password';
|
|
321
|
+
btn.innerHTML = isPwd ? '<i class="fa-solid fa-eye-slash"></i>' : '<i class="fa-solid fa-eye"></i>';
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
});
|
|
325
|
+
|
|
326
|
+
// Profile Form Submission
|
|
327
|
+
elements.profileForm?.addEventListener('submit', (e) => {
|
|
328
|
+
e.preventDefault();
|
|
329
|
+
const newName = elements.settingsDisplayName.value.trim();
|
|
330
|
+
if (newName && state.user) {
|
|
331
|
+
state.user.name = newName;
|
|
332
|
+
saveSessionToStorage();
|
|
333
|
+
syncAuthWithServer();
|
|
334
|
+
updateUserUI();
|
|
335
|
+
showToast('Profile display name updated successfully!', 'success');
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
|
|
339
|
+
elements.selectByokProvider?.addEventListener('change', (e) => {
|
|
340
|
+
const provider = e.target.value;
|
|
341
|
+
const defaultEndpoints = {
|
|
342
|
+
nvidia: 'https://integrate.api.nvidia.com/v1',
|
|
343
|
+
gemini: 'https://generativelanguage.googleapis.com/v1beta/openai',
|
|
344
|
+
openai: 'https://api.openai.com/v1',
|
|
345
|
+
custom: 'http://localhost:11434/v1',
|
|
346
|
+
};
|
|
347
|
+
if (elements.inputByokEndpoint && defaultEndpoints[provider]) {
|
|
348
|
+
elements.inputByokEndpoint.value = defaultEndpoints[provider];
|
|
349
|
+
}
|
|
350
|
+
});
|
|
351
|
+
|
|
352
|
+
// BYOK & Custom Proxy Form Submission
|
|
353
|
+
elements.byokForm?.addEventListener('submit', (e) => {
|
|
354
|
+
e.preventDefault();
|
|
355
|
+
state.customLlmProvider = elements.selectByokProvider?.value || 'gemini';
|
|
356
|
+
state.customBaseUrl = elements.inputByokEndpoint?.value.trim() || '';
|
|
357
|
+
state.customApiKey = elements.inputByokKey?.value.trim() || '';
|
|
358
|
+
state.byokEnabled = elements.checkboxEnableByok?.checked || false;
|
|
359
|
+
|
|
360
|
+
localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
|
|
361
|
+
localStorage.setItem('scout_byok_provider', state.customLlmProvider);
|
|
362
|
+
localStorage.setItem('scout_byok_key', state.customApiKey);
|
|
363
|
+
localStorage.setItem('scout_byok_endpoint', state.customBaseUrl);
|
|
364
|
+
|
|
365
|
+
syncAuthWithServer();
|
|
366
|
+
renderCreditUsageUI();
|
|
367
|
+
updateUserUI();
|
|
368
|
+
|
|
369
|
+
if (state.byokEnabled) {
|
|
370
|
+
showToast('BYOK Mode Active! Requests now route through your custom API key/proxy endpoint (Scout credits bypassed).', 'success');
|
|
371
|
+
} else {
|
|
372
|
+
showToast('Endpoint configuration saved. Using standard Scout key.', 'info');
|
|
373
|
+
}
|
|
374
|
+
});
|
|
375
|
+
|
|
376
|
+
elements.checkboxEnableByok?.addEventListener('change', (e) => {
|
|
377
|
+
state.byokEnabled = e.target.checked;
|
|
378
|
+
localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
|
|
379
|
+
syncAuthWithServer();
|
|
380
|
+
renderCreditUsageUI();
|
|
381
|
+
});
|
|
382
|
+
|
|
383
|
+
// Billing Cycle Toggle Switcher
|
|
384
|
+
elements.toggleBillingCycle?.addEventListener('change', (e) => {
|
|
385
|
+
state.billingCycle = e.target.checked ? 'annual' : 'monthly';
|
|
386
|
+
renderTiersUI();
|
|
387
|
+
});
|
|
388
|
+
|
|
389
|
+
// Tier Selection Buttons
|
|
390
|
+
document.querySelectorAll('.btn-select-tier').forEach((btn) => {
|
|
391
|
+
btn.addEventListener('click', () => {
|
|
392
|
+
const targetTier = btn.getAttribute('data-tier');
|
|
393
|
+
if (!targetTier || !TIER_DETAILS[targetTier]) return;
|
|
394
|
+
|
|
395
|
+
if (targetTier === 'free') {
|
|
396
|
+
state.currentTier = 'free';
|
|
397
|
+
state.creditsTotal = 100;
|
|
398
|
+
saveSessionToStorage();
|
|
399
|
+
syncAuthWithServer();
|
|
400
|
+
renderCreditUsageUI();
|
|
401
|
+
renderTiersUI();
|
|
402
|
+
updateUserUI();
|
|
403
|
+
showToast('Switched to Developer Free Tier.', 'info');
|
|
404
|
+
} else {
|
|
405
|
+
openCheckoutModal(targetTier);
|
|
406
|
+
}
|
|
407
|
+
});
|
|
408
|
+
});
|
|
396
409
|
}
|
|
397
410
|
|
|
398
411
|
// Data Storage & Session Loaders
|
|
399
412
|
function loadSessionsFromStorage() {
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
413
|
+
try {
|
|
414
|
+
const stored = localStorage.getItem('scout_cli_sessions');
|
|
415
|
+
if (stored) {
|
|
416
|
+
state.sessions = JSON.parse(stored);
|
|
417
|
+
} else {
|
|
418
|
+
state.sessions = [
|
|
419
|
+
{
|
|
420
|
+
id: 'sess_local_1',
|
|
421
|
+
host: 'Local Workstation (FT-CLI)',
|
|
422
|
+
platform: 'Windows x64 Node.js',
|
|
423
|
+
lastActive: new Date().toISOString(),
|
|
424
|
+
ip: '127.0.0.1',
|
|
425
|
+
active: true,
|
|
426
|
+
},
|
|
427
|
+
];
|
|
428
|
+
saveSessionsToStorage();
|
|
429
|
+
}
|
|
430
|
+
} catch {
|
|
431
|
+
state.sessions = [];
|
|
432
|
+
}
|
|
420
433
|
}
|
|
421
434
|
|
|
422
435
|
function saveSessionsToStorage() {
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
436
|
+
try {
|
|
437
|
+
localStorage.setItem('scout_cli_sessions', JSON.stringify(state.sessions));
|
|
438
|
+
} catch { }
|
|
426
439
|
}
|
|
427
440
|
|
|
428
441
|
function renderSessionsTable() {
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
442
|
+
if (!elements.sessionTableBody) return;
|
|
443
|
+
|
|
444
|
+
if (!state.sessions || state.sessions.length === 0) {
|
|
445
|
+
elements.sessionTableBody.innerHTML = `
|
|
433
446
|
<tr>
|
|
434
447
|
<td colspan="4" class="empty-table-notice">No active CLI authorization sessions found.</td>
|
|
435
448
|
</tr>
|
|
436
449
|
`;
|
|
437
|
-
|
|
438
|
-
|
|
450
|
+
return;
|
|
451
|
+
}
|
|
439
452
|
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
453
|
+
elements.sessionTableBody.innerHTML = state.sessions
|
|
454
|
+
.map((sess) => {
|
|
455
|
+
return `
|
|
443
456
|
<tr data-id="${escapeHtml(sess.id)}">
|
|
444
457
|
<td>
|
|
445
458
|
<div class="flex-center-gap">
|
|
@@ -455,609 +468,617 @@ function renderSessionsTable() {
|
|
|
455
468
|
<td><button class="btn btn-xs btn-outline text-danger btn-revoke-session" onclick="revokeSession('${escapeHtml(sess.id)}')"><i class="fa-solid fa-trash"></i> Revoke</button></td>
|
|
456
469
|
</tr>
|
|
457
470
|
`;
|
|
458
|
-
|
|
459
|
-
|
|
471
|
+
})
|
|
472
|
+
.join('');
|
|
460
473
|
}
|
|
461
474
|
|
|
462
475
|
function revokeSession(sessionId) {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
476
|
+
state.sessions = state.sessions.filter(s => s.id !== sessionId);
|
|
477
|
+
saveSessionsToStorage();
|
|
478
|
+
renderSessionsTable();
|
|
479
|
+
showToast('CLI access session revoked.', 'info');
|
|
467
480
|
}
|
|
468
481
|
|
|
469
482
|
// Render Dynamic Credit Usage & BYOK Status UI
|
|
470
483
|
function renderCreditUsageUI() {
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
484
|
+
if (state.byokEnabled) {
|
|
485
|
+
if (elements.byokStatusBadge) {
|
|
486
|
+
elements.byokStatusBadge.innerText = 'BYOK Mode Active';
|
|
487
|
+
elements.byokStatusBadge.className = 'badge badge-accent';
|
|
488
|
+
}
|
|
489
|
+
if (elements.creditStatusBadge) {
|
|
490
|
+
elements.creditStatusBadge.innerText = 'Custom Endpoint Active';
|
|
491
|
+
elements.creditStatusBadge.className = 'badge badge-accent';
|
|
492
|
+
}
|
|
493
|
+
if (elements.valCreditsUsed) elements.valCreditsUsed.innerText = 'Unmonitored';
|
|
494
|
+
if (elements.valCreditsRemaining) elements.valCreditsRemaining.innerText = 'Unlimited (BYOK)';
|
|
495
|
+
if (elements.valCreditsTotal) elements.valCreditsTotal.innerText = 'Custom Provider';
|
|
496
|
+
if (elements.valCreditsPct) elements.valCreditsPct.innerText = 'BYOK';
|
|
497
|
+
|
|
498
|
+
if (elements.creditProgressFill) {
|
|
499
|
+
elements.creditProgressFill.style.width = '100%';
|
|
500
|
+
elements.creditProgressFill.style.background = 'linear-gradient(90deg, #a855f7 0%, #ec4899 100%)';
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
if (elements.labelCreditConsumption) {
|
|
504
|
+
elements.labelCreditConsumption.innerText = 'Direct Custom Endpoint Routing (Scout Credits Bypassed)';
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
if (elements.byokBannerNote) {
|
|
508
|
+
elements.byokBannerNote.classList.remove('hidden');
|
|
509
|
+
}
|
|
510
|
+
} else {
|
|
511
|
+
if (elements.byokStatusBadge) {
|
|
512
|
+
elements.byokStatusBadge.innerText = 'Scout Default';
|
|
513
|
+
elements.byokStatusBadge.className = 'badge';
|
|
514
|
+
}
|
|
515
|
+
if (elements.creditStatusBadge) {
|
|
516
|
+
elements.creditStatusBadge.innerText = 'Quota Active';
|
|
517
|
+
elements.creditStatusBadge.className = 'badge badge-success';
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
const defaultTotal = state.currentTier === 'pro' ? 1000 : state.currentTier === 'enterprise' ? 10000 : 100;
|
|
521
|
+
const total = state.creditsTotal || defaultTotal;
|
|
522
|
+
const used = state.creditsUsed || 0;
|
|
523
|
+
const remaining = Math.max(0, total - used);
|
|
524
|
+
const pct = Math.min(100, Math.round((used / total) * 100));
|
|
525
|
+
|
|
526
|
+
if (elements.valCreditsUsed) elements.valCreditsUsed.innerText = used.toLocaleString();
|
|
527
|
+
if (elements.valCreditsRemaining) elements.valCreditsRemaining.innerText = remaining.toLocaleString();
|
|
528
|
+
if (elements.valCreditsTotal) elements.valCreditsTotal.innerText = total.toLocaleString();
|
|
529
|
+
if (elements.valCreditsPct) elements.valCreditsPct.innerText = `${pct}%`;
|
|
530
|
+
|
|
531
|
+
if (elements.creditProgressFill) {
|
|
532
|
+
elements.creditProgressFill.style.width = `${pct}%`;
|
|
533
|
+
elements.creditProgressFill.style.background = 'linear-gradient(90deg, #6366f1 0%, #38bdf8 60%, #34d399 100%)';
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
if (elements.labelCreditConsumption) {
|
|
537
|
+
elements.labelCreditConsumption.innerText = 'Monthly Credit Consumption';
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
if (elements.byokBannerNote) {
|
|
541
|
+
elements.byokBannerNote.classList.add('hidden');
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
let renewDateStr = '';
|
|
546
|
+
if (state.renewAt) {
|
|
547
|
+
const d = new Date(state.renewAt);
|
|
548
|
+
if (!isNaN(d.getTime())) {
|
|
549
|
+
renewDateStr = `${d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} at 00:00:00 UTC`;
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
if (!renewDateStr) {
|
|
553
|
+
const now = new Date();
|
|
554
|
+
const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
|
|
555
|
+
renewDateStr = `${nextMonth.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} at 00:00:00 UTC`;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
if (elements.valRenewDatetime) {
|
|
559
|
+
elements.valRenewDatetime.innerText = renewDateStr;
|
|
560
|
+
}
|
|
548
561
|
}
|
|
549
562
|
|
|
550
563
|
// Render Paid Tiers UI
|
|
551
564
|
function renderTiersUI() {
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
565
|
+
const current = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
|
|
566
|
+
|
|
567
|
+
if (elements.currentPlanTitle) elements.currentPlanTitle.innerText = current.name;
|
|
568
|
+
if (elements.currentPlanBadge) elements.currentPlanBadge.innerText = current.badge;
|
|
569
|
+
if (elements.currentPlanDesc) elements.currentPlanDesc.innerText = current.desc;
|
|
570
|
+
if (elements.tierActiveIcon) elements.tierActiveIcon.innerHTML = current.icon;
|
|
571
|
+
|
|
572
|
+
// Billing Cycle Pricing Adjustments
|
|
573
|
+
const isAnnual = state.billingCycle === 'annual';
|
|
574
|
+
if (elements.priceProVal) elements.priceProVal.innerText = isAnnual ? '15' : '19';
|
|
575
|
+
if (elements.priceProPeriod) elements.priceProPeriod.innerText = isAnnual ? '/ month (billed annually)' : '/ month';
|
|
576
|
+
|
|
577
|
+
if (elements.priceEntVal) elements.priceEntVal.innerText = isAnnual ? '39' : '49';
|
|
578
|
+
if (elements.priceEntPeriod) elements.priceEntPeriod.innerText = isAnnual ? '/ month (billed annually)' : '/ month';
|
|
579
|
+
|
|
580
|
+
// Highlight Active Tier Card
|
|
581
|
+
['free', 'pro', 'enterprise'].forEach((t) => {
|
|
582
|
+
const card = document.getElementById(`tier-card-${t}`);
|
|
583
|
+
const btn = document.getElementById(`btn-tier-${t}`);
|
|
584
|
+
if (!card || !btn) return;
|
|
585
|
+
|
|
586
|
+
if (t === state.currentTier) {
|
|
587
|
+
card.classList.add('active-tier-card');
|
|
588
|
+
btn.className = 'btn btn-success btn-block btn-select-tier';
|
|
589
|
+
btn.innerText = 'Current Plan';
|
|
590
|
+
btn.disabled = true;
|
|
591
|
+
} else {
|
|
592
|
+
card.classList.remove('active-tier-card');
|
|
593
|
+
btn.disabled = false;
|
|
594
|
+
if (t === 'pro') {
|
|
595
|
+
btn.className = 'btn btn-primary btn-block btn-select-tier';
|
|
596
|
+
btn.innerText = 'Upgrade to Pro';
|
|
597
|
+
} else {
|
|
598
|
+
btn.className = 'btn btn-outline btn-block btn-select-tier';
|
|
599
|
+
btn.innerText = t === 'enterprise' ? 'Upgrade to Enterprise' : 'Switch to Free';
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
});
|
|
590
603
|
}
|
|
591
604
|
|
|
592
605
|
// Sync with Local Server CLI Session
|
|
593
606
|
async function checkServerStatusAndSession() {
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
607
|
+
let connected = false;
|
|
608
|
+
let data = null;
|
|
609
|
+
|
|
610
|
+
try {
|
|
611
|
+
const res = await fetch('/api/status', { method: 'GET' });
|
|
612
|
+
if (res.ok) {
|
|
613
|
+
data = await res.json();
|
|
614
|
+
if (data && data.status === 'ok') {
|
|
615
|
+
state.apiBaseUrl = '';
|
|
616
|
+
connected = true;
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
} catch { }
|
|
620
|
+
|
|
621
|
+
if (!connected) {
|
|
622
|
+
try {
|
|
623
|
+
const res = await fetch('http://localhost:9120/api/status', { method: 'GET' });
|
|
624
|
+
if (res.ok) {
|
|
625
|
+
data = await res.json();
|
|
626
|
+
if (data && data.status === 'ok') {
|
|
627
|
+
state.apiBaseUrl = 'http://localhost:9120';
|
|
628
|
+
connected = true;
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
} catch { }
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
if (connected && data) {
|
|
635
|
+
state.serverConnected = true;
|
|
636
|
+
|
|
637
|
+
if (elements.navTenantName) {
|
|
638
|
+
elements.navTenantName.innerText = `CLI Local Sync Active (${data.repoName || 'Workspace'})`;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
if (data.isLoggedIn && data.auth?.user) {
|
|
642
|
+
state.user = data.auth.user;
|
|
643
|
+
state.token = data.auth.token;
|
|
644
|
+
state.refreshToken = data.auth.refreshToken;
|
|
645
|
+
|
|
646
|
+
if (typeof data.auth.creditsUsed === 'number') state.creditsUsed = data.auth.creditsUsed;
|
|
647
|
+
if (typeof data.auth.creditsTotal === 'number') state.creditsTotal = data.auth.creditsTotal;
|
|
648
|
+
if (data.auth.currentTier) state.currentTier = data.auth.currentTier;
|
|
649
|
+
if (data.auth.renewAt) state.renewAt = data.auth.renewAt;
|
|
650
|
+
if (typeof data.auth.byokEnabled === 'boolean') state.byokEnabled = data.auth.byokEnabled;
|
|
651
|
+
if (data.auth.customLlmProvider) state.customLlmProvider = data.auth.customLlmProvider;
|
|
652
|
+
if (typeof data.auth.customApiKey === 'string') state.customApiKey = data.auth.customApiKey;
|
|
653
|
+
if (typeof data.auth.customBaseUrl === 'string') state.customBaseUrl = data.auth.customBaseUrl;
|
|
654
|
+
|
|
655
|
+
const localCliSession = {
|
|
656
|
+
id: 'sess_cli_local',
|
|
657
|
+
host: `Local Workstation (${data.repoName || 'FT-CLI'})`,
|
|
658
|
+
platform: `Node.js CLI (~/.ft/auth.json)`,
|
|
659
|
+
lastActive: data.auth.loggedInAt || new Date().toISOString(),
|
|
660
|
+
ip: '127.0.0.1 (Local Sync)',
|
|
661
|
+
active: true,
|
|
662
|
+
};
|
|
663
|
+
|
|
664
|
+
const otherSessions = state.sessions.filter(s => s.id !== 'sess_cli_local');
|
|
665
|
+
state.sessions = [localCliSession, ...otherSessions];
|
|
666
|
+
saveSessionsToStorage();
|
|
667
|
+
|
|
668
|
+
saveSessionToStorage();
|
|
669
|
+
showDashboard();
|
|
670
|
+
updateUserUI();
|
|
671
|
+
renderCreditUsageUI();
|
|
672
|
+
renderSessionsTable();
|
|
673
|
+
return;
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
state.serverConnected = false;
|
|
678
|
+
if (elements.navTenantName) {
|
|
679
|
+
elements.navTenantName.innerText = FIREBASE_CONFIG.tenantId;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
checkLocalStorageSession();
|
|
670
683
|
}
|
|
671
684
|
|
|
672
685
|
function checkLocalStorageSession() {
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
686
|
+
try {
|
|
687
|
+
const storedUser = localStorage.getItem('scout_auth_user');
|
|
688
|
+
const storedToken = localStorage.getItem('scout_auth_token');
|
|
689
|
+
|
|
690
|
+
if (storedUser && storedToken) {
|
|
691
|
+
state.user = JSON.parse(storedUser);
|
|
692
|
+
state.token = storedToken;
|
|
693
|
+
state.refreshToken = localStorage.getItem('scout_refresh_token') || '';
|
|
694
|
+
|
|
695
|
+
showDashboard();
|
|
696
|
+
updateUserUI();
|
|
697
|
+
return;
|
|
698
|
+
}
|
|
699
|
+
} catch (err) {
|
|
700
|
+
console.error('Saved session parse error:', err);
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
showAuthSection();
|
|
691
704
|
}
|
|
692
705
|
|
|
693
706
|
// Switch Auth View Forms
|
|
694
707
|
function switchAuthForm(mode) {
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
708
|
+
if (mode === 'login') {
|
|
709
|
+
elements.tabLoginBtn?.classList.add('active');
|
|
710
|
+
elements.tabSignupBtn?.classList.remove('active');
|
|
711
|
+
elements.loginForm?.classList.remove('hidden');
|
|
712
|
+
elements.signupForm?.classList.add('hidden');
|
|
713
|
+
} else {
|
|
714
|
+
elements.tabSignupBtn?.classList.add('active');
|
|
715
|
+
elements.tabLoginBtn?.classList.remove('active');
|
|
716
|
+
elements.signupForm?.classList.remove('hidden');
|
|
717
|
+
elements.loginForm?.classList.add('hidden');
|
|
718
|
+
}
|
|
706
719
|
}
|
|
707
720
|
|
|
708
721
|
// Handle Sign In Submission
|
|
709
722
|
async function handleSignIn(e) {
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
723
|
+
e.preventDefault();
|
|
724
|
+
const email = document.getElementById('login-email').value.trim();
|
|
725
|
+
const password = document.getElementById('login-password').value;
|
|
726
|
+
const btnSubmit = document.getElementById('btn-submit-login');
|
|
727
|
+
|
|
728
|
+
btnSubmit.disabled = true;
|
|
729
|
+
btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Authenticating...';
|
|
730
|
+
|
|
731
|
+
try {
|
|
732
|
+
let authRes;
|
|
733
|
+
if (state.serverConnected) {
|
|
734
|
+
const res = await fetch(`${state.apiBaseUrl}/api/login`, {
|
|
735
|
+
method: 'POST',
|
|
736
|
+
headers: { 'Content-Type': 'application/json' },
|
|
737
|
+
body: JSON.stringify({ email, password }),
|
|
738
|
+
});
|
|
739
|
+
const data = await res.json();
|
|
740
|
+
if (!res.ok || !data.success) {
|
|
741
|
+
throw new Error(data.error || 'Server authentication failed.');
|
|
742
|
+
}
|
|
743
|
+
authRes = data.auth;
|
|
744
|
+
} else {
|
|
745
|
+
authRes = await apiFirebaseSignIn(email, password);
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
state.token = authRes.token || authRes.idToken;
|
|
749
|
+
state.refreshToken = authRes.refreshToken;
|
|
750
|
+
state.user = authRes.user || {
|
|
751
|
+
id: authRes.localId || 'usr_' + Date.now().toString(36),
|
|
752
|
+
email: authRes.email || email,
|
|
753
|
+
name: authRes.displayName || email.split('@')[0],
|
|
754
|
+
createdAt: new Date().toISOString(),
|
|
755
|
+
};
|
|
756
|
+
|
|
757
|
+
saveSessionToStorage();
|
|
758
|
+
syncAuthWithServer();
|
|
759
|
+
showDashboard();
|
|
760
|
+
updateUserUI();
|
|
761
|
+
showToast(`Signed in successfully as ${state.user.name}!`, 'success');
|
|
762
|
+
} catch (error) {
|
|
763
|
+
showToast(error.message || 'Login failed.', 'error');
|
|
764
|
+
} finally {
|
|
765
|
+
btnSubmit.disabled = false;
|
|
766
|
+
btnSubmit.innerHTML = '<span>Sign In to Scout</span><i class="fa-solid fa-arrow-right"></i>';
|
|
767
|
+
}
|
|
755
768
|
}
|
|
756
769
|
|
|
757
770
|
// Handle Sign Up Submission
|
|
758
771
|
async function handleSignUp(e) {
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
772
|
+
e.preventDefault();
|
|
773
|
+
const name = document.getElementById('signup-name').value.trim();
|
|
774
|
+
const email = document.getElementById('signup-email').value.trim();
|
|
775
|
+
const password = document.getElementById('signup-password').value;
|
|
776
|
+
const confirmPassword = document.getElementById('signup-confirm-password').value;
|
|
777
|
+
const btnSubmit = document.getElementById('btn-submit-signup');
|
|
778
|
+
|
|
779
|
+
if (password !== confirmPassword) {
|
|
780
|
+
showToast('Passwords do not match.', 'error');
|
|
781
|
+
return;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
btnSubmit.disabled = true;
|
|
785
|
+
btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Creating Account...';
|
|
786
|
+
|
|
787
|
+
try {
|
|
788
|
+
let authRes;
|
|
789
|
+
if (state.serverConnected) {
|
|
790
|
+
const res = await fetch(`${state.apiBaseUrl}/api/signup`, {
|
|
791
|
+
method: 'POST',
|
|
792
|
+
headers: { 'Content-Type': 'application/json' },
|
|
793
|
+
body: JSON.stringify({ name, email, password }),
|
|
794
|
+
});
|
|
795
|
+
const data = await res.json();
|
|
796
|
+
if (!res.ok || !data.success) {
|
|
797
|
+
throw new Error(data.error || 'Server registration failed.');
|
|
798
|
+
}
|
|
799
|
+
authRes = data.auth;
|
|
800
|
+
} else {
|
|
801
|
+
authRes = await apiFirebaseSignUp(name, email, password);
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
state.token = authRes.token || authRes.idToken;
|
|
805
|
+
state.refreshToken = authRes.refreshToken;
|
|
806
|
+
state.user = authRes.user || {
|
|
807
|
+
id: authRes.localId || 'usr_' + Date.now().toString(36),
|
|
808
|
+
email: authRes.email || email,
|
|
809
|
+
name: name,
|
|
810
|
+
createdAt: new Date().toISOString(),
|
|
811
|
+
};
|
|
812
|
+
|
|
813
|
+
saveSessionToStorage();
|
|
814
|
+
syncAuthWithServer();
|
|
815
|
+
showDashboard();
|
|
816
|
+
updateUserUI();
|
|
817
|
+
showToast(`Account created! Welcome to FrontTerrain, ${name}.`, 'success');
|
|
818
|
+
} catch (error) {
|
|
819
|
+
showToast(error.message || 'Registration failed.', 'error');
|
|
820
|
+
} finally {
|
|
821
|
+
btnSubmit.disabled = false;
|
|
822
|
+
btnSubmit.innerHTML = '<span>Create Scout Account</span><i class="fa-solid fa-user-check"></i>';
|
|
823
|
+
}
|
|
811
824
|
}
|
|
812
825
|
|
|
813
826
|
// Forgot Password Flow
|
|
814
827
|
function handleForgotPassword() {
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
828
|
+
const email = prompt('Enter your registered email address for password reset:');
|
|
829
|
+
if (email && email.includes('@')) {
|
|
830
|
+
showToast(`Password reset link dispatched to ${email}`, 'success');
|
|
831
|
+
} else if (email) {
|
|
832
|
+
showToast('Please enter a valid email address.', 'error');
|
|
833
|
+
}
|
|
821
834
|
}
|
|
822
835
|
|
|
823
836
|
// Demo Mode Session Launcher
|
|
824
837
|
function launchDemoSession() {
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
+
state.token = 'ft_demo_token_' + Date.now().toString(36);
|
|
839
|
+
state.user = {
|
|
840
|
+
id: 'usr_demo_' + Math.floor(1000 + Math.random() * 9000),
|
|
841
|
+
email: 'developer@frontterrain.com',
|
|
842
|
+
name: 'FrontTerrain Developer',
|
|
843
|
+
createdAt: new Date().toISOString(),
|
|
844
|
+
};
|
|
845
|
+
|
|
846
|
+
saveSessionToStorage();
|
|
847
|
+
syncAuthWithServer();
|
|
848
|
+
showDashboard();
|
|
849
|
+
updateUserUI();
|
|
850
|
+
showToast('Demo Developer Session Active!', 'info');
|
|
838
851
|
}
|
|
839
852
|
|
|
840
853
|
// Firebase Direct REST API
|
|
841
854
|
async function apiFirebaseSignIn(email, password) {
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
855
|
+
const url = `${FIREBASE_CONFIG.baseAuthUrl}:signInWithPassword?key=${FIREBASE_CONFIG.apiKey}`;
|
|
856
|
+
const response = await fetch(url, {
|
|
857
|
+
method: 'POST',
|
|
858
|
+
headers: { 'Content-Type': 'application/json' },
|
|
859
|
+
body: JSON.stringify({
|
|
860
|
+
email,
|
|
861
|
+
password,
|
|
862
|
+
returnSecureToken: true,
|
|
863
|
+
tenantId: FIREBASE_CONFIG.tenantId,
|
|
864
|
+
}),
|
|
865
|
+
});
|
|
866
|
+
|
|
867
|
+
const data = await response.json();
|
|
868
|
+
if (!response.ok) {
|
|
869
|
+
throw new Error(parseFirebaseError(data, 'Firebase sign in failed'));
|
|
870
|
+
}
|
|
871
|
+
return data;
|
|
859
872
|
}
|
|
860
873
|
|
|
861
874
|
async function apiFirebaseSignUp(name, email, password) {
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
875
|
+
const url = `${FIREBASE_CONFIG.baseAuthUrl}:signUp?key=${FIREBASE_CONFIG.apiKey}`;
|
|
876
|
+
const response = await fetch(url, {
|
|
877
|
+
method: 'POST',
|
|
878
|
+
headers: { 'Content-Type': 'application/json' },
|
|
879
|
+
body: JSON.stringify({
|
|
880
|
+
email,
|
|
881
|
+
password,
|
|
882
|
+
returnSecureToken: true,
|
|
883
|
+
tenantId: FIREBASE_CONFIG.tenantId,
|
|
884
|
+
}),
|
|
885
|
+
});
|
|
886
|
+
|
|
887
|
+
const data = await response.json();
|
|
888
|
+
if (!response.ok) {
|
|
889
|
+
throw new Error(parseFirebaseError(data, 'Firebase sign up failed'));
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
try {
|
|
893
|
+
const updateUrl = `${FIREBASE_CONFIG.baseAuthUrl}:update?key=${FIREBASE_CONFIG.apiKey}`;
|
|
894
|
+
await fetch(updateUrl, {
|
|
895
|
+
method: 'POST',
|
|
896
|
+
headers: { 'Content-Type': 'application/json' },
|
|
897
|
+
body: JSON.stringify({
|
|
898
|
+
idToken: data.idToken,
|
|
899
|
+
displayName: name,
|
|
900
|
+
tenantId: FIREBASE_CONFIG.tenantId,
|
|
901
|
+
}),
|
|
902
|
+
});
|
|
903
|
+
data.displayName = name;
|
|
904
|
+
} catch { }
|
|
905
|
+
|
|
906
|
+
return data;
|
|
894
907
|
}
|
|
895
908
|
|
|
896
909
|
function parseFirebaseError(errData, defaultMsg) {
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
910
|
+
const code = errData?.error?.message || errData?.message || '';
|
|
911
|
+
if (code.includes('EMAIL_NOT_FOUND')) return 'No account found with this email.';
|
|
912
|
+
if (code.includes('INVALID_PASSWORD') || code.includes('INVALID_LOGIN_CREDENTIALS')) return 'Invalid password entered.';
|
|
913
|
+
if (code.includes('EMAIL_EXISTS')) return 'An account already exists with this email.';
|
|
914
|
+
if (code.includes('WEAK_PASSWORD')) return 'Password is too weak (min 6 chars).';
|
|
915
|
+
if (code.includes('INVALID_EMAIL')) return 'Invalid email address format.';
|
|
916
|
+
if (code.includes('TOO_MANY_ATTEMPTS_TRY_LATER')) return 'Too many login attempts. Try later.';
|
|
917
|
+
return `${defaultMsg}: ${code || 'Unknown error'}`;
|
|
905
918
|
}
|
|
906
919
|
|
|
907
920
|
// UI State Renderers
|
|
908
921
|
function showAuthSection() {
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
922
|
+
elements.authSection?.classList.remove('hidden');
|
|
923
|
+
elements.dashboardSection?.classList.add('hidden');
|
|
924
|
+
elements.userMenu?.classList.add('hidden');
|
|
925
|
+
elements.btnOpenAuth?.classList.remove('hidden');
|
|
913
926
|
}
|
|
914
927
|
|
|
915
928
|
function showDashboard() {
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
929
|
+
elements.authSection?.classList.add('hidden');
|
|
930
|
+
elements.dashboardSection?.classList.remove('hidden');
|
|
931
|
+
elements.userMenu?.classList.remove('hidden');
|
|
932
|
+
elements.btnOpenAuth?.classList.add('hidden');
|
|
933
|
+
|
|
934
|
+
renderAllDynamicComponents();
|
|
922
935
|
}
|
|
923
936
|
|
|
924
937
|
function updateUserUI() {
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
938
|
+
if (!state.user) return;
|
|
939
|
+
|
|
940
|
+
const name = state.user.name || 'Developer';
|
|
941
|
+
const initial = name.charAt(0).toUpperCase();
|
|
942
|
+
|
|
943
|
+
if (elements.navAvatar) elements.navAvatar.innerText = initial;
|
|
944
|
+
if (elements.navUserName) elements.navUserName.innerText = name;
|
|
945
|
+
if (elements.userDisplayName) elements.userDisplayName.innerText = name;
|
|
946
|
+
if (elements.dropdownName) elements.dropdownName.innerText = name;
|
|
947
|
+
if (elements.dropdownEmail) elements.dropdownEmail.innerText = state.user.email;
|
|
948
|
+
|
|
949
|
+
if (elements.settingsDisplayName) elements.settingsDisplayName.value = name;
|
|
950
|
+
if (elements.settingsEmail) elements.settingsEmail.value = state.user.email;
|
|
951
|
+
if (elements.settingsUid) elements.settingsUid.value = state.user.id;
|
|
952
|
+
|
|
953
|
+
const tierInfo = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
|
|
954
|
+
if (elements.settingsActiveTier) elements.settingsActiveTier.value = tierInfo.name;
|
|
955
|
+
|
|
956
|
+
if (elements.selectByokProvider) elements.selectByokProvider.value = state.customLlmProvider || 'gemini';
|
|
957
|
+
if (elements.inputByokEndpoint) elements.inputByokEndpoint.value = state.customBaseUrl || '';
|
|
958
|
+
if (elements.inputByokKey) elements.inputByokKey.value = state.customApiKey || '';
|
|
959
|
+
if (elements.checkboxEnableByok) elements.checkboxEnableByok.checked = Boolean(state.byokEnabled);
|
|
947
960
|
}
|
|
948
961
|
|
|
949
962
|
function switchDashboardTab(tabId) {
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
963
|
+
state.activeTab = tabId;
|
|
964
|
+
|
|
965
|
+
document.querySelectorAll('.nav-btn').forEach((btn) => {
|
|
966
|
+
if (btn.getAttribute('data-tab') === tabId) {
|
|
967
|
+
btn.classList.add('active');
|
|
968
|
+
} else {
|
|
969
|
+
btn.classList.remove('active');
|
|
970
|
+
}
|
|
971
|
+
});
|
|
972
|
+
|
|
973
|
+
document.querySelectorAll('.tab-pane').forEach((pane) => {
|
|
974
|
+
if (pane.id === `tab-${tabId}`) {
|
|
975
|
+
pane.classList.add('active');
|
|
976
|
+
} else {
|
|
977
|
+
pane.classList.remove('active');
|
|
978
|
+
}
|
|
979
|
+
});
|
|
967
980
|
}
|
|
968
981
|
|
|
969
982
|
async function handleLogout() {
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
983
|
+
if (state.serverConnected) {
|
|
984
|
+
try {
|
|
985
|
+
await fetch(`${state.apiBaseUrl}/api/logout`, { method: 'POST' });
|
|
986
|
+
} catch { }
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
state.user = null;
|
|
990
|
+
state.token = null;
|
|
991
|
+
state.refreshToken = null;
|
|
992
|
+
|
|
993
|
+
localStorage.removeItem('scout_auth_user');
|
|
994
|
+
localStorage.removeItem('scout_auth_token');
|
|
995
|
+
localStorage.removeItem('scout_refresh_token');
|
|
996
|
+
|
|
997
|
+
showAuthSection();
|
|
998
|
+
showToast('Signed out of Scout session.', 'info');
|
|
986
999
|
}
|
|
987
1000
|
|
|
988
1001
|
function saveSessionToStorage() {
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1002
|
+
if (state.user) localStorage.setItem('scout_auth_user', JSON.stringify(state.user));
|
|
1003
|
+
if (state.token) localStorage.setItem('scout_auth_token', state.token);
|
|
1004
|
+
if (state.refreshToken) localStorage.setItem('scout_refresh_token', state.refreshToken);
|
|
1005
|
+
localStorage.setItem('scout_current_tier', state.currentTier);
|
|
1006
|
+
localStorage.setItem('scout_credits_used', String(state.creditsUsed));
|
|
1007
|
+
localStorage.setItem('scout_credits_total', String(state.creditsTotal));
|
|
1008
|
+
if (state.renewAt) localStorage.setItem('scout_renew_at', state.renewAt);
|
|
1009
|
+
localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
|
|
1010
|
+
localStorage.setItem('scout_byok_provider', state.customLlmProvider);
|
|
1011
|
+
localStorage.setItem('scout_byok_key', state.customApiKey);
|
|
1012
|
+
localStorage.setItem('scout_byok_endpoint', state.customBaseUrl);
|
|
1000
1013
|
}
|
|
1001
1014
|
|
|
1002
1015
|
async function syncAuthWithServer() {
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1016
|
+
if (state.user) {
|
|
1017
|
+
try {
|
|
1018
|
+
await fetch(`${state.apiBaseUrl}/api/save-auth`, {
|
|
1019
|
+
method: 'POST',
|
|
1020
|
+
headers: { 'Content-Type': 'application/json' },
|
|
1021
|
+
body: JSON.stringify({
|
|
1022
|
+
user: state.user,
|
|
1023
|
+
token: state.token,
|
|
1024
|
+
refreshToken: state.refreshToken,
|
|
1025
|
+
creditsUsed: state.creditsUsed,
|
|
1026
|
+
creditsTotal: state.creditsTotal,
|
|
1027
|
+
currentTier: state.currentTier,
|
|
1028
|
+
renewAt: state.renewAt,
|
|
1029
|
+
byokEnabled: state.byokEnabled,
|
|
1030
|
+
customLlmProvider: state.customLlmProvider,
|
|
1031
|
+
customApiKey: state.customApiKey,
|
|
1032
|
+
customBaseUrl: state.customBaseUrl,
|
|
1033
|
+
}),
|
|
1034
|
+
});
|
|
1035
|
+
} catch { }
|
|
1036
|
+
}
|
|
1024
1037
|
}
|
|
1025
1038
|
|
|
1026
1039
|
// Copy Utility
|
|
1027
1040
|
function copyText(text, successMsg = 'Copied to clipboard!') {
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1041
|
+
navigator.clipboard.writeText(text).then(
|
|
1042
|
+
() => showToast(successMsg, 'success'),
|
|
1043
|
+
() => showToast('Failed to copy to clipboard', 'error')
|
|
1044
|
+
);
|
|
1032
1045
|
}
|
|
1033
1046
|
|
|
1047
|
+
document.addEventListener('click', (e) => {
|
|
1048
|
+
const copyBtn = e.target.closest('#btn-copy-terminal-cmd');
|
|
1049
|
+
if (copyBtn) {
|
|
1050
|
+
const cmdText = document.getElementById('terminal-cmd-display')?.innerText || 'npx -y ft-scout@latest';
|
|
1051
|
+
copyText(cmdText, 'CLI Command copied to clipboard!');
|
|
1052
|
+
}
|
|
1053
|
+
});
|
|
1054
|
+
|
|
1034
1055
|
// Toast System
|
|
1035
1056
|
function showToast(message, type = 'info') {
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1057
|
+
if (!elements.toastContainer) return;
|
|
1058
|
+
|
|
1059
|
+
const toast = document.createElement('div');
|
|
1060
|
+
toast.className = `toast toast-${type}`;
|
|
1061
|
+
|
|
1062
|
+
let iconClass = 'fa-circle-info';
|
|
1063
|
+
if (type === 'success') iconClass = 'fa-circle-check';
|
|
1064
|
+
if (type === 'error') iconClass = 'fa-circle-exclamation';
|
|
1065
|
+
|
|
1066
|
+
toast.innerHTML = `<i class="fa-solid ${iconClass}"></i> <span>${message}</span>`;
|
|
1067
|
+
elements.toastContainer.appendChild(toast);
|
|
1068
|
+
|
|
1069
|
+
setTimeout(() => {
|
|
1070
|
+
toast.style.opacity = '0';
|
|
1071
|
+
toast.style.transform = 'translateX(100%)';
|
|
1072
|
+
toast.style.transition = 'all 0.3s ease-out';
|
|
1073
|
+
setTimeout(() => toast.remove(), 300);
|
|
1074
|
+
}, 3500);
|
|
1054
1075
|
}
|
|
1055
1076
|
|
|
1056
1077
|
function escapeHtml(str) {
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1078
|
+
if (!str) return '';
|
|
1079
|
+
return String(str)
|
|
1080
|
+
.replace(/&/g, '&')
|
|
1081
|
+
.replace(/</g, '<')
|
|
1082
|
+
.replace(/>/g, '>')
|
|
1083
|
+
.replace(/"/g, '"');
|
|
1063
1084
|
}
|