spectyra-proxy 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/INSTALLATION.md +96 -0
- package/PROVIDER_SUPPORT.md +162 -0
- package/README.md +194 -0
- package/SETUP_GUIDE.md +183 -0
- package/dist/dashboard/index.html +386 -0
- package/dist/spectyra-proxy.js +367 -0
- package/package.json +48 -0
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Spectyra Proxy Dashboard</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
16
|
+
background: #f5f5f5;
|
|
17
|
+
color: #333;
|
|
18
|
+
padding: 20px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.container {
|
|
22
|
+
max-width: 1200px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
header {
|
|
27
|
+
background: white;
|
|
28
|
+
padding: 20px;
|
|
29
|
+
border-radius: 8px;
|
|
30
|
+
margin-bottom: 20px;
|
|
31
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
h1 {
|
|
35
|
+
font-size: 24px;
|
|
36
|
+
margin-bottom: 8px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.subtitle {
|
|
40
|
+
color: #666;
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.tabs {
|
|
45
|
+
display: flex;
|
|
46
|
+
gap: 10px;
|
|
47
|
+
margin-bottom: 20px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.tab {
|
|
51
|
+
padding: 10px 20px;
|
|
52
|
+
background: white;
|
|
53
|
+
border: none;
|
|
54
|
+
border-radius: 8px 8px 0 0;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
font-weight: 500;
|
|
58
|
+
color: #666;
|
|
59
|
+
transition: all 0.2s;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.tab.active {
|
|
63
|
+
background: #007bff;
|
|
64
|
+
color: white;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.tab-content {
|
|
68
|
+
display: none;
|
|
69
|
+
background: white;
|
|
70
|
+
padding: 30px;
|
|
71
|
+
border-radius: 8px;
|
|
72
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.tab-content.active {
|
|
76
|
+
display: block;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.form-group {
|
|
80
|
+
margin-bottom: 20px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
label {
|
|
84
|
+
display: block;
|
|
85
|
+
margin-bottom: 6px;
|
|
86
|
+
font-weight: 500;
|
|
87
|
+
color: #333;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
input, select {
|
|
91
|
+
width: 100%;
|
|
92
|
+
padding: 10px;
|
|
93
|
+
border: 1px solid #ddd;
|
|
94
|
+
border-radius: 4px;
|
|
95
|
+
font-size: 14px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
button {
|
|
99
|
+
padding: 10px 20px;
|
|
100
|
+
background: #007bff;
|
|
101
|
+
color: white;
|
|
102
|
+
border: none;
|
|
103
|
+
border-radius: 4px;
|
|
104
|
+
font-size: 14px;
|
|
105
|
+
font-weight: 500;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
transition: background 0.2s;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
button:hover {
|
|
111
|
+
background: #0056b3;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.status {
|
|
115
|
+
padding: 12px;
|
|
116
|
+
border-radius: 4px;
|
|
117
|
+
margin-bottom: 20px;
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.status.success {
|
|
122
|
+
background: #d4edda;
|
|
123
|
+
color: #155724;
|
|
124
|
+
display: block;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.status.error {
|
|
128
|
+
background: #f8d7da;
|
|
129
|
+
color: #721c24;
|
|
130
|
+
display: block;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.stats-grid {
|
|
134
|
+
display: grid;
|
|
135
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
136
|
+
gap: 20px;
|
|
137
|
+
margin-bottom: 30px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.stat-card {
|
|
141
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
142
|
+
color: white;
|
|
143
|
+
padding: 20px;
|
|
144
|
+
border-radius: 8px;
|
|
145
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.stat-card.green {
|
|
149
|
+
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.stat-card.blue {
|
|
153
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.stat-card.orange {
|
|
157
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.stat-label {
|
|
161
|
+
font-size: 12px;
|
|
162
|
+
opacity: 0.9;
|
|
163
|
+
margin-bottom: 8px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.stat-value {
|
|
167
|
+
font-size: 32px;
|
|
168
|
+
font-weight: 600;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.recent-requests {
|
|
172
|
+
margin-top: 30px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.request-item {
|
|
176
|
+
padding: 12px;
|
|
177
|
+
border-bottom: 1px solid #eee;
|
|
178
|
+
display: flex;
|
|
179
|
+
justify-content: space-between;
|
|
180
|
+
align-items: center;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.request-item:last-child {
|
|
184
|
+
border-bottom: none;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.request-time {
|
|
188
|
+
color: #666;
|
|
189
|
+
font-size: 12px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.request-savings {
|
|
193
|
+
font-weight: 600;
|
|
194
|
+
color: #28a745;
|
|
195
|
+
}
|
|
196
|
+
</style>
|
|
197
|
+
</head>
|
|
198
|
+
<body>
|
|
199
|
+
<div class="container">
|
|
200
|
+
<header>
|
|
201
|
+
<h1>💰 Spectyra Proxy Dashboard</h1>
|
|
202
|
+
<p class="subtitle">Real-time optimization and savings tracking</p>
|
|
203
|
+
</header>
|
|
204
|
+
|
|
205
|
+
<div class="tabs">
|
|
206
|
+
<button class="tab active" onclick="showTab('stats')">Statistics</button>
|
|
207
|
+
<button class="tab" onclick="showTab('config')">Configuration</button>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div id="stats-tab" class="tab-content active">
|
|
211
|
+
<div class="stats-grid">
|
|
212
|
+
<div class="stat-card blue">
|
|
213
|
+
<div class="stat-label">Total Requests</div>
|
|
214
|
+
<div class="stat-value" id="total-requests">0</div>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="stat-card green">
|
|
217
|
+
<div class="stat-label">Tokens Saved</div>
|
|
218
|
+
<div class="stat-value" id="tokens-saved">0</div>
|
|
219
|
+
</div>
|
|
220
|
+
<div class="stat-card orange">
|
|
221
|
+
<div class="stat-label">Cost Saved</div>
|
|
222
|
+
<div class="stat-value" id="cost-saved">$0.00</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<div class="recent-requests">
|
|
227
|
+
<h2 style="margin-bottom: 15px;">Recent Requests</h2>
|
|
228
|
+
<div id="recent-requests-list"></div>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div id="config-tab" class="tab-content">
|
|
233
|
+
<div id="status" class="status"></div>
|
|
234
|
+
|
|
235
|
+
<form id="config-form">
|
|
236
|
+
<div class="form-group">
|
|
237
|
+
<label for="spectyra-key">Spectyra API Key</label>
|
|
238
|
+
<input type="text" id="spectyra-key" placeholder="sk-..." required>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<div class="form-group">
|
|
242
|
+
<label for="provider-key">Provider API Key (BYOK)</label>
|
|
243
|
+
<input type="text" id="provider-key" placeholder="sk-..." required>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="form-group">
|
|
247
|
+
<label for="provider">Provider</label>
|
|
248
|
+
<select id="provider">
|
|
249
|
+
<option value="openai">OpenAI (Copilot, Cursor with OpenAI)</option>
|
|
250
|
+
<option value="anthropic">Anthropic (Claude Code, Cursor with Claude)</option>
|
|
251
|
+
<option value="gemini">Gemini (Google AI tools)</option>
|
|
252
|
+
<option value="grok">Grok (X.AI tools)</option>
|
|
253
|
+
</select>
|
|
254
|
+
<div style="font-size: 12px; color: #666; margin-top: 4px;">
|
|
255
|
+
Select the provider your coding tool uses. The proxy will automatically handle the API format.
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div class="form-group">
|
|
260
|
+
<label for="path">Path</label>
|
|
261
|
+
<select id="path">
|
|
262
|
+
<option value="code" selected>Code (Coding workflows)</option>
|
|
263
|
+
<option value="talk">Talk (Chat/Q&A)</option>
|
|
264
|
+
</select>
|
|
265
|
+
</div>
|
|
266
|
+
|
|
267
|
+
<div class="form-group">
|
|
268
|
+
<label for="optimization-level">Optimization Level: <span id="level-value">2</span></label>
|
|
269
|
+
<input type="range" id="optimization-level" min="0" max="4" value="2" style="width: 100%;">
|
|
270
|
+
<div style="display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-top: 4px;">
|
|
271
|
+
<span>Minimal</span>
|
|
272
|
+
<span>Conservative</span>
|
|
273
|
+
<span>Balanced</span>
|
|
274
|
+
<span>Aggressive</span>
|
|
275
|
+
<span>Maximum</span>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<button type="submit">Save Configuration</button>
|
|
280
|
+
</form>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
<script>
|
|
285
|
+
function showTab(tab) {
|
|
286
|
+
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
287
|
+
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
|
288
|
+
event.target.classList.add('active');
|
|
289
|
+
document.getElementById(tab + '-tab').classList.add('active');
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
// Load config
|
|
293
|
+
async function loadConfig() {
|
|
294
|
+
try {
|
|
295
|
+
const res = await fetch('/api/config');
|
|
296
|
+
const config = await res.json();
|
|
297
|
+
if (config.spectyraKey) document.getElementById('spectyra-key').value = config.spectyraKey;
|
|
298
|
+
if (config.providerKey) document.getElementById('provider-key').value = config.providerKey;
|
|
299
|
+
if (config.provider) document.getElementById('provider').value = config.provider;
|
|
300
|
+
if (config.path) document.getElementById('path').value = config.path;
|
|
301
|
+
if (config.optimizationLevel !== undefined) {
|
|
302
|
+
document.getElementById('optimization-level').value = config.optimizationLevel;
|
|
303
|
+
document.getElementById('level-value').textContent = config.optimizationLevel;
|
|
304
|
+
}
|
|
305
|
+
} catch (error) {
|
|
306
|
+
console.error('Error loading config:', error);
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
// Save config
|
|
311
|
+
document.getElementById('config-form').addEventListener('submit', async (e) => {
|
|
312
|
+
e.preventDefault();
|
|
313
|
+
const status = document.getElementById('status');
|
|
314
|
+
|
|
315
|
+
try {
|
|
316
|
+
const res = await fetch('/api/config', {
|
|
317
|
+
method: 'POST',
|
|
318
|
+
headers: { 'Content-Type': 'application/json' },
|
|
319
|
+
body: JSON.stringify({
|
|
320
|
+
spectyraKey: document.getElementById('spectyra-key').value,
|
|
321
|
+
providerKey: document.getElementById('provider-key').value,
|
|
322
|
+
provider: document.getElementById('provider').value,
|
|
323
|
+
path: document.getElementById('path').value,
|
|
324
|
+
optimizationLevel: parseInt(document.getElementById('optimization-level').value),
|
|
325
|
+
}),
|
|
326
|
+
});
|
|
327
|
+
|
|
328
|
+
if (res.ok) {
|
|
329
|
+
status.className = 'status success';
|
|
330
|
+
status.textContent = 'Configuration saved successfully!';
|
|
331
|
+
} else {
|
|
332
|
+
throw new Error('Failed to save');
|
|
333
|
+
}
|
|
334
|
+
} catch (error) {
|
|
335
|
+
status.className = 'status error';
|
|
336
|
+
status.textContent = 'Error saving configuration: ' + error.message;
|
|
337
|
+
}
|
|
338
|
+
});
|
|
339
|
+
|
|
340
|
+
// Update level display
|
|
341
|
+
document.getElementById('optimization-level').addEventListener('input', (e) => {
|
|
342
|
+
document.getElementById('level-value').textContent = e.target.value;
|
|
343
|
+
});
|
|
344
|
+
|
|
345
|
+
// Load stats
|
|
346
|
+
async function loadStats() {
|
|
347
|
+
try {
|
|
348
|
+
const res = await fetch('/api/stats');
|
|
349
|
+
const data = await res.json();
|
|
350
|
+
|
|
351
|
+
document.getElementById('total-requests').textContent = data.totalRequests.toLocaleString();
|
|
352
|
+
document.getElementById('tokens-saved').textContent = data.totalTokensSaved.toLocaleString();
|
|
353
|
+
document.getElementById('cost-saved').textContent = '$' + data.totalCostSaved.toFixed(2);
|
|
354
|
+
|
|
355
|
+
// Recent requests
|
|
356
|
+
const list = document.getElementById('recent-requests-list');
|
|
357
|
+
if (data.recentRequests && data.recentRequests.length > 0) {
|
|
358
|
+
list.innerHTML = data.recentRequests.reverse().map(req => {
|
|
359
|
+
const date = new Date(req.timestamp);
|
|
360
|
+
return `
|
|
361
|
+
<div class="request-item">
|
|
362
|
+
<div>
|
|
363
|
+
<div style="font-weight: 500;">${req.model}</div>
|
|
364
|
+
<div class="request-time">${date.toLocaleString()}</div>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="request-savings">
|
|
367
|
+
${req.pctSaved.toFixed(1)}% saved (${req.tokensSaved} tokens, $${req.costSaved.toFixed(4)})
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
`;
|
|
371
|
+
}).join('');
|
|
372
|
+
} else {
|
|
373
|
+
list.innerHTML = '<p style="color: #666; text-align: center; padding: 20px;">No requests yet. Start using your coding assistant!</p>';
|
|
374
|
+
}
|
|
375
|
+
} catch (error) {
|
|
376
|
+
console.error('Error loading stats:', error);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
// Auto-refresh stats every 2 seconds
|
|
381
|
+
loadConfig();
|
|
382
|
+
loadStats();
|
|
383
|
+
setInterval(loadStats, 2000);
|
|
384
|
+
</script>
|
|
385
|
+
</body>
|
|
386
|
+
</html>
|