nowaikit-utils 1.1.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/LICENSE +21 -0
- package/README.md +152 -0
- package/ai-window.html +598 -0
- package/background/service-worker.js +398 -0
- package/cli.mjs +65 -0
- package/content/ai-sidebar.js +1198 -0
- package/content/code-templates.js +843 -0
- package/content/content.js +2527 -0
- package/content/integration-bridge.js +627 -0
- package/content/main-panel.js +592 -0
- package/content/styles.css +1609 -0
- package/icons/README.txt +1 -0
- package/icons/icon-128.png +0 -0
- package/icons/icon-16.png +0 -0
- package/icons/icon-48.png +0 -0
- package/icons/icon.svg +16 -0
- package/manifest.json +63 -0
- package/options/options.html +434 -0
- package/package.json +49 -0
- package/popup/popup.html +663 -0
- package/popup/popup.js +414 -0
package/popup/popup.html
ADDED
|
@@ -0,0 +1,663 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<style>
|
|
6
|
+
:root {
|
|
7
|
+
--teal: #00D4AA;
|
|
8
|
+
--navy: #0F4C81;
|
|
9
|
+
--bg: #0B1020;
|
|
10
|
+
--card: #111828;
|
|
11
|
+
--border: #1e2a3e;
|
|
12
|
+
--text: #e0e5ec;
|
|
13
|
+
--text-dim: #6b7a90;
|
|
14
|
+
--env-dev: #4ade80;
|
|
15
|
+
--env-test: #facc15;
|
|
16
|
+
--env-staging: #f97316;
|
|
17
|
+
--env-prod: #f87171;
|
|
18
|
+
--env-other: #60a5fa;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
22
|
+
|
|
23
|
+
body {
|
|
24
|
+
width: 420px;
|
|
25
|
+
min-height: 200px;
|
|
26
|
+
max-height: 580px;
|
|
27
|
+
background: var(--bg);
|
|
28
|
+
color: var(--text);
|
|
29
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
30
|
+
font-size: 13px;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Side panel mode — fill the full sidebar area */
|
|
37
|
+
@media (min-height: 600px) {
|
|
38
|
+
body {
|
|
39
|
+
width: 100%;
|
|
40
|
+
max-height: none;
|
|
41
|
+
height: 100vh;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.header {
|
|
46
|
+
background: linear-gradient(135deg, #0a2e5c 0%, #065f50 100%);
|
|
47
|
+
border-bottom: 1px solid #1e2a3e;
|
|
48
|
+
padding: 14px 16px;
|
|
49
|
+
text-align: center;
|
|
50
|
+
flex-shrink: 0;
|
|
51
|
+
position: relative;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.header-row {
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
gap: 10px;
|
|
59
|
+
margin-bottom: 2px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.header h1 { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
|
|
63
|
+
.header .subtitle { font-size: 11px; color: rgba(255,255,255,0.7); }
|
|
64
|
+
|
|
65
|
+
/* Branded logo text */
|
|
66
|
+
.logo-now { background:linear-gradient(135deg,#fff 0%,#B8C4D4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
|
|
67
|
+
.logo-ai { background:linear-gradient(90deg,#00F0C0,#00D4AA,#0F4C81,#00D4AA,#00F0C0);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:nkShimmer 4s ease-in-out infinite; }
|
|
68
|
+
.logo-kit { background:linear-gradient(135deg,#A0AEBE 0%,#6B7A8E 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
|
|
69
|
+
.logo-suffix { font-weight:400;font-size:0.75em;color:rgba(255,255,255,0.5);-webkit-text-fill-color:rgba(255,255,255,0.5);letter-spacing:0.04em; }
|
|
70
|
+
@keyframes nkShimmer { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
|
|
71
|
+
|
|
72
|
+
.popup-scroll {
|
|
73
|
+
flex: 1;
|
|
74
|
+
overflow-y: auto;
|
|
75
|
+
overflow-x: hidden;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.popup-scroll::-webkit-scrollbar { width: 5px; }
|
|
79
|
+
.popup-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
80
|
+
|
|
81
|
+
/* ── Status bar ─────────────────────────────────────────────────────── */
|
|
82
|
+
|
|
83
|
+
.status {
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
gap: 8px;
|
|
87
|
+
padding: 10px 16px;
|
|
88
|
+
background: var(--card);
|
|
89
|
+
border-bottom: 1px solid var(--border);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.status-dot {
|
|
93
|
+
width: 8px; height: 8px; border-radius: 50%; background: #555; flex-shrink: 0;
|
|
94
|
+
}
|
|
95
|
+
.status-dot.active {
|
|
96
|
+
background: var(--teal); box-shadow: 0 0 6px rgba(0,212,170,0.4);
|
|
97
|
+
}
|
|
98
|
+
.status-info { flex: 1; }
|
|
99
|
+
.status-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
100
|
+
.status-value { font-size: 13px; font-weight: 600; }
|
|
101
|
+
|
|
102
|
+
/* ── Page info ──────────────────────────────────────────────────────── */
|
|
103
|
+
|
|
104
|
+
.page-info {
|
|
105
|
+
padding: 8px 16px;
|
|
106
|
+
background: rgba(0,212,170,0.05);
|
|
107
|
+
border-bottom: 1px solid var(--border);
|
|
108
|
+
}
|
|
109
|
+
.page-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
|
110
|
+
.page-info-item { font-size: 11px; }
|
|
111
|
+
.page-info-item .label { color: var(--text-dim); font-size: 10px; }
|
|
112
|
+
.page-info-item .value { color: var(--teal); font-family: 'JetBrains Mono', monospace; cursor: pointer; }
|
|
113
|
+
|
|
114
|
+
/* ── Sections ───────────────────────────────────────────────────────── */
|
|
115
|
+
|
|
116
|
+
.section {
|
|
117
|
+
padding: 10px 16px;
|
|
118
|
+
border-bottom: 1px solid var(--border);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.section-title {
|
|
122
|
+
font-size: 10px; font-weight: 600; color: var(--text-dim);
|
|
123
|
+
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* ── Quick actions grid ─────────────────────────────────────────────── */
|
|
127
|
+
|
|
128
|
+
.quick-actions {
|
|
129
|
+
display: grid;
|
|
130
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
131
|
+
gap: 5px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.action-btn {
|
|
135
|
+
background: var(--card);
|
|
136
|
+
border: 1px solid var(--border);
|
|
137
|
+
border-radius: 6px;
|
|
138
|
+
padding: 8px 6px;
|
|
139
|
+
color: var(--text);
|
|
140
|
+
font-size: 11px;
|
|
141
|
+
cursor: pointer;
|
|
142
|
+
text-align: center;
|
|
143
|
+
transition: border-color 0.2s, background 0.2s;
|
|
144
|
+
white-space: nowrap;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.action-btn:hover {
|
|
148
|
+
border-color: var(--teal);
|
|
149
|
+
background: rgba(0,212,170,0.05);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.action-btn .icon { font-size: 13px; display: block; margin-bottom: 2px; }
|
|
153
|
+
|
|
154
|
+
.action-btn-wide {
|
|
155
|
+
grid-column: 1 / -1;
|
|
156
|
+
background: linear-gradient(135deg, var(--navy), rgba(0,212,170,0.15));
|
|
157
|
+
border-color: var(--teal);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* ── Toggles ────────────────────────────────────────────────────────── */
|
|
161
|
+
|
|
162
|
+
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
|
|
163
|
+
.toggle-label { font-size: 12px; }
|
|
164
|
+
|
|
165
|
+
.toggle { position: relative; width: 36px; height: 20px; }
|
|
166
|
+
.toggle input { opacity: 0; width: 0; height: 0; }
|
|
167
|
+
.toggle-slider {
|
|
168
|
+
position: absolute; inset: 0; background: #2a3548; border-radius: 10px;
|
|
169
|
+
cursor: pointer; transition: background 0.2s;
|
|
170
|
+
}
|
|
171
|
+
.toggle-slider::before {
|
|
172
|
+
content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px;
|
|
173
|
+
background: #fff; border-radius: 50%; transition: transform 0.2s;
|
|
174
|
+
}
|
|
175
|
+
.toggle input:checked + .toggle-slider { background: var(--teal); }
|
|
176
|
+
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }
|
|
177
|
+
|
|
178
|
+
/* ── Keyboard shortcuts (collapsible) ────────────────────────────────── */
|
|
179
|
+
|
|
180
|
+
.section-title-collapsible {
|
|
181
|
+
font-size: 10px; font-weight: 600; color: var(--text-dim);
|
|
182
|
+
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0;
|
|
183
|
+
cursor: pointer; display: flex; justify-content: space-between; align-items: center;
|
|
184
|
+
user-select: none;
|
|
185
|
+
}
|
|
186
|
+
.section-title-collapsible:hover { color: var(--teal); }
|
|
187
|
+
.section-title-collapsible .chevron {
|
|
188
|
+
font-size: 10px; transition: transform 0.2s; display: inline-block;
|
|
189
|
+
}
|
|
190
|
+
.section-title-collapsible.expanded .chevron { transform: rotate(90deg); }
|
|
191
|
+
.section-title-collapsible.expanded { margin-bottom: 8px; }
|
|
192
|
+
|
|
193
|
+
.shortcuts { display: flex; flex-direction: column; gap: 3px; }
|
|
194
|
+
.shortcuts.collapsed { display: none; }
|
|
195
|
+
.shortcut-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
|
|
196
|
+
.shortcut-label { color: var(--text-dim); font-size: 11px; }
|
|
197
|
+
.shortcut-keys { display: flex; gap: 2px; }
|
|
198
|
+
|
|
199
|
+
kbd {
|
|
200
|
+
background: #1a2236; border: 1px solid var(--border); border-radius: 3px;
|
|
201
|
+
padding: 1px 5px; font-size: 10px; font-family: 'JetBrains Mono', monospace;
|
|
202
|
+
color: var(--teal);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* ── Saved Instances — hierarchical tree ─────────────────────────────── */
|
|
206
|
+
|
|
207
|
+
.instance-tree {
|
|
208
|
+
display: flex;
|
|
209
|
+
flex-direction: column;
|
|
210
|
+
gap: 2px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* Group header */
|
|
214
|
+
.inst-group {
|
|
215
|
+
display: flex;
|
|
216
|
+
align-items: center;
|
|
217
|
+
gap: 6px;
|
|
218
|
+
padding: 6px 8px;
|
|
219
|
+
border-radius: 5px;
|
|
220
|
+
cursor: pointer;
|
|
221
|
+
user-select: none;
|
|
222
|
+
transition: background 0.15s;
|
|
223
|
+
}
|
|
224
|
+
.inst-group:hover { background: rgba(255,255,255,0.03); }
|
|
225
|
+
|
|
226
|
+
.inst-chevron {
|
|
227
|
+
font-size: 10px;
|
|
228
|
+
color: var(--text-dim);
|
|
229
|
+
transition: transform 0.2s;
|
|
230
|
+
width: 12px;
|
|
231
|
+
text-align: center;
|
|
232
|
+
flex-shrink: 0;
|
|
233
|
+
}
|
|
234
|
+
.inst-chevron.collapsed { transform: rotate(-90deg); }
|
|
235
|
+
|
|
236
|
+
.inst-group-icon {
|
|
237
|
+
font-size: 12px;
|
|
238
|
+
flex-shrink: 0;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.inst-group-name {
|
|
242
|
+
font-size: 12px;
|
|
243
|
+
font-weight: 600;
|
|
244
|
+
color: var(--text);
|
|
245
|
+
flex: 1;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.inst-group-count {
|
|
249
|
+
font-size: 10px;
|
|
250
|
+
color: var(--text-dim);
|
|
251
|
+
padding: 1px 6px;
|
|
252
|
+
background: rgba(255,255,255,0.04);
|
|
253
|
+
border-radius: 8px;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* Instance row */
|
|
257
|
+
.inst-row {
|
|
258
|
+
display: flex;
|
|
259
|
+
align-items: center;
|
|
260
|
+
gap: 8px;
|
|
261
|
+
padding: 6px 8px;
|
|
262
|
+
border-radius: 5px;
|
|
263
|
+
cursor: pointer;
|
|
264
|
+
transition: background 0.15s;
|
|
265
|
+
}
|
|
266
|
+
.inst-row:hover { background: rgba(0,212,170,0.06); }
|
|
267
|
+
.inst-row.depth-0 { padding-left: 8px; }
|
|
268
|
+
.inst-row.depth-1 { padding-left: 28px; }
|
|
269
|
+
.inst-row.depth-2 { padding-left: 46px; }
|
|
270
|
+
|
|
271
|
+
.inst-env-dot {
|
|
272
|
+
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
|
|
273
|
+
}
|
|
274
|
+
.inst-env-dot.dev { background: var(--env-dev); }
|
|
275
|
+
.inst-env-dot.test { background: var(--env-test); }
|
|
276
|
+
.inst-env-dot.staging { background: var(--env-staging); }
|
|
277
|
+
.inst-env-dot.prod { background: var(--env-prod); }
|
|
278
|
+
.inst-env-dot.other { background: var(--env-other); }
|
|
279
|
+
|
|
280
|
+
.inst-details { flex: 1; min-width: 0; }
|
|
281
|
+
.inst-name {
|
|
282
|
+
font-size: 12px; font-weight: 500; color: var(--text);
|
|
283
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
284
|
+
}
|
|
285
|
+
.inst-alias {
|
|
286
|
+
font-size: 10px; color: var(--teal); font-family: 'JetBrains Mono', monospace;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.inst-env-badge {
|
|
290
|
+
font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
|
|
291
|
+
padding: 2px 5px; border-radius: 3px; flex-shrink: 0;
|
|
292
|
+
}
|
|
293
|
+
.inst-env-badge.dev { background: rgba(74,222,128,0.12); color: var(--env-dev); }
|
|
294
|
+
.inst-env-badge.test { background: rgba(250,204,21,0.12); color: var(--env-test); }
|
|
295
|
+
.inst-env-badge.staging { background: rgba(249,115,22,0.12); color: var(--env-staging); }
|
|
296
|
+
.inst-env-badge.prod { background: rgba(248,113,113,0.12); color: var(--env-prod); }
|
|
297
|
+
.inst-env-badge.other { background: rgba(96,165,250,0.12); color: var(--env-other); }
|
|
298
|
+
|
|
299
|
+
.inst-actions { display: flex; gap: 2px; }
|
|
300
|
+
.inst-actions button {
|
|
301
|
+
background: none; border: none; color: var(--text-dim);
|
|
302
|
+
cursor: pointer; font-size: 12px; padding: 2px 4px;
|
|
303
|
+
border-radius: 3px; transition: color 0.15s, background 0.15s;
|
|
304
|
+
}
|
|
305
|
+
.inst-actions button:hover { color: var(--teal); background: rgba(0,212,170,0.08); }
|
|
306
|
+
.inst-actions .btn-remove:hover { color: #f87171; background: rgba(248,113,113,0.08); }
|
|
307
|
+
|
|
308
|
+
/* Add instance */
|
|
309
|
+
.add-instance-btn {
|
|
310
|
+
display: flex; align-items: center; justify-content: center; gap: 4px;
|
|
311
|
+
width: 100%; padding: 7px; margin-top: 6px;
|
|
312
|
+
background: rgba(0,212,170,0.04); border: 1px dashed var(--border); border-radius: 5px;
|
|
313
|
+
color: var(--text-dim); font-size: 11px; cursor: pointer;
|
|
314
|
+
transition: border-color 0.2s, color 0.2s;
|
|
315
|
+
}
|
|
316
|
+
.add-instance-btn:hover { border-color: var(--teal); color: var(--teal); }
|
|
317
|
+
|
|
318
|
+
.add-instance-form {
|
|
319
|
+
display: none; flex-direction: column; gap: 6px; margin-top: 8px;
|
|
320
|
+
padding: 10px; background: rgba(255,255,255,0.02); border-radius: 6px;
|
|
321
|
+
border: 1px solid var(--border);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.form-label {
|
|
325
|
+
font-size: 10px; color: var(--text-dim); text-transform: uppercase;
|
|
326
|
+
letter-spacing: 0.3px; margin-bottom: 2px;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.add-instance-form input,
|
|
330
|
+
.add-instance-form select {
|
|
331
|
+
background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
|
|
332
|
+
padding: 6px 8px; color: var(--text); font-size: 12px; outline: none;
|
|
333
|
+
transition: border-color 0.2s;
|
|
334
|
+
}
|
|
335
|
+
.add-instance-form input:focus,
|
|
336
|
+
.add-instance-form select:focus { border-color: var(--teal); }
|
|
337
|
+
.add-instance-form input::placeholder { color: #3a4a60; }
|
|
338
|
+
|
|
339
|
+
.form-row { display: flex; gap: 6px; }
|
|
340
|
+
.form-row input { flex: 1; }
|
|
341
|
+
.form-row select { width: 90px; }
|
|
342
|
+
.form-row-half { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
|
|
343
|
+
|
|
344
|
+
.save-instance-btn {
|
|
345
|
+
background: var(--teal); border: none; border-radius: 5px;
|
|
346
|
+
padding: 7px; color: #000; font-size: 11px; font-weight: 600;
|
|
347
|
+
cursor: pointer; transition: opacity 0.2s;
|
|
348
|
+
}
|
|
349
|
+
.save-instance-btn:hover { opacity: 0.9; }
|
|
350
|
+
|
|
351
|
+
.empty-state {
|
|
352
|
+
text-align: center; padding: 12px 8px;
|
|
353
|
+
font-size: 11px; color: var(--text-dim);
|
|
354
|
+
}
|
|
355
|
+
.empty-state span { display: block; font-size: 20px; margin-bottom: 4px; opacity: 0.5; }
|
|
356
|
+
|
|
357
|
+
/* ── Connected services ──────────────────────────────────────────────── */
|
|
358
|
+
|
|
359
|
+
.service-row {
|
|
360
|
+
display: flex; align-items: center; gap: 8px; padding: 4px 0;
|
|
361
|
+
}
|
|
362
|
+
.service-dot {
|
|
363
|
+
width: 6px; height: 6px; border-radius: 50%; background: #555; flex-shrink: 0;
|
|
364
|
+
}
|
|
365
|
+
.service-name { font-size: 12px; color: var(--text-dim); flex: 1; }
|
|
366
|
+
.service-status { font-size: 11px; color: var(--text-dim); }
|
|
367
|
+
|
|
368
|
+
/* ── Footer ──────────────────────────────────────────────────────────── */
|
|
369
|
+
|
|
370
|
+
.footer {
|
|
371
|
+
padding: 8px 16px; text-align: center; font-size: 10px; color: var(--text-dim);
|
|
372
|
+
border-top: 1px solid var(--border); flex-shrink: 0;
|
|
373
|
+
}
|
|
374
|
+
.footer a { color: var(--teal); text-decoration: none; }
|
|
375
|
+
.footer a:hover { text-decoration: underline; }
|
|
376
|
+
|
|
377
|
+
/* ── Theme toggle button ─────────────────────────────────────────── */
|
|
378
|
+
|
|
379
|
+
.theme-btn {
|
|
380
|
+
position: absolute; right: 14px; top: 14px;
|
|
381
|
+
background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.35); color: #FFD700;
|
|
382
|
+
width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
|
|
383
|
+
display: flex; align-items: center; justify-content: center;
|
|
384
|
+
transition: background .2s, border-color .2s;
|
|
385
|
+
}
|
|
386
|
+
.theme-btn:hover { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.55); }
|
|
387
|
+
.theme-btn svg { width: 16px; height: 16px; stroke-width: 2.5; }
|
|
388
|
+
|
|
389
|
+
/* ── Light Theme ─────────────────────────────────────────────────── */
|
|
390
|
+
|
|
391
|
+
body.light {
|
|
392
|
+
--bg: #f8fafc; --card: #ffffff; --border: #e2e8f0;
|
|
393
|
+
--text: #1a202c; --text-dim: #64748b;
|
|
394
|
+
}
|
|
395
|
+
body.light .header { background: linear-gradient(135deg, #0a2e5c 0%, #065f50 100%); border-bottom-color: #1e2a3e; }
|
|
396
|
+
body.light .toggle-slider { background: #cbd5e1; }
|
|
397
|
+
body.light kbd { background: #f1f5f9; border-color: #e2e8f0; color: #0D9488; }
|
|
398
|
+
body.light .action-btn { background: #f8fafc; border-color: #e2e8f0; color: #1a202c; }
|
|
399
|
+
body.light .action-btn:hover { border-color: #0D9488; background: rgba(13,148,136,.05); }
|
|
400
|
+
body.light .action-btn-wide { background: linear-gradient(135deg, #0D9488, rgba(13,148,136,.12)); color: #fff; border-color: #0D9488; }
|
|
401
|
+
body.light .inst-row:hover { background: rgba(13,148,136,.06); }
|
|
402
|
+
body.light .add-instance-form input,
|
|
403
|
+
body.light .add-instance-form select { background: #f8fafc; border-color: #e2e8f0; color: #1a202c; }
|
|
404
|
+
body.light .popup-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }
|
|
405
|
+
body.light .theme-btn { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.5); color: #FFD700; }
|
|
406
|
+
body.light .theme-btn:hover { background: rgba(255,255,255,.5); }
|
|
407
|
+
|
|
408
|
+
/* Light mode — status bar */
|
|
409
|
+
body.light .status { background: #ffffff; border-bottom-color: #e2e8f0; }
|
|
410
|
+
body.light .status-label { color: #64748b; }
|
|
411
|
+
body.light .status-value { color: #1a202c; }
|
|
412
|
+
|
|
413
|
+
/* Light mode — page info */
|
|
414
|
+
body.light .page-info { background: rgba(13,148,136,0.04); border-bottom-color: #e2e8f0; }
|
|
415
|
+
body.light .page-info-item .label { color: #64748b; }
|
|
416
|
+
body.light .page-info-item .value { color: #0D9488; }
|
|
417
|
+
|
|
418
|
+
/* Light mode — section titles, toggles, services */
|
|
419
|
+
body.light .section { border-bottom-color: #e2e8f0; }
|
|
420
|
+
body.light .section-title { color: #64748b; }
|
|
421
|
+
body.light .toggle-label { color: #1a202c; }
|
|
422
|
+
body.light .toggle-slider { background: #cbd5e1; }
|
|
423
|
+
body.light .service-name { color: #64748b; }
|
|
424
|
+
body.light .service-status { color: #64748b; }
|
|
425
|
+
|
|
426
|
+
/* Light mode — shortcuts */
|
|
427
|
+
body.light .section-title-collapsible { color: #64748b; }
|
|
428
|
+
body.light .section-title-collapsible:hover { color: #0D9488; }
|
|
429
|
+
body.light .shortcut-label { color: #64748b; }
|
|
430
|
+
|
|
431
|
+
/* Light mode — instances */
|
|
432
|
+
body.light .inst-group-name { color: #1a202c; }
|
|
433
|
+
body.light .inst-group-count { background: rgba(0,0,0,0.04); color: #64748b; }
|
|
434
|
+
body.light .inst-name { color: #1a202c; }
|
|
435
|
+
body.light .inst-alias { color: #0D9488; }
|
|
436
|
+
body.light .inst-actions button { color: #94a3b8; }
|
|
437
|
+
body.light .inst-actions button:hover { color: #0D9488; background: rgba(13,148,136,0.06); }
|
|
438
|
+
body.light .inst-actions .btn-remove:hover { color: #dc2626; background: rgba(239,68,68,0.06); }
|
|
439
|
+
body.light .add-instance-btn { background: rgba(13,148,136,0.03); border-color: #e2e8f0; color: #64748b; }
|
|
440
|
+
body.light .add-instance-btn:hover { border-color: #0D9488; color: #0D9488; }
|
|
441
|
+
body.light .empty-state { color: #94a3b8; }
|
|
442
|
+
|
|
443
|
+
/* Light mode — footer */
|
|
444
|
+
body.light .footer { border-top-color: #e2e8f0; color: #94a3b8; }
|
|
445
|
+
body.light .footer a { color: #0D9488; }
|
|
446
|
+
|
|
447
|
+
/* Light mode — form */
|
|
448
|
+
body.light .form-label { color: #64748b; }
|
|
449
|
+
body.light .add-instance-form { background: rgba(0,0,0,0.02); border-color: #e2e8f0; }
|
|
450
|
+
body.light .save-instance-btn { background: #0D9488; }
|
|
451
|
+
|
|
452
|
+
/* ── Collapse animation ──────────────────────────────────────────────── */
|
|
453
|
+
|
|
454
|
+
.inst-children {
|
|
455
|
+
overflow: hidden;
|
|
456
|
+
transition: max-height 0.2s ease, opacity 0.15s ease;
|
|
457
|
+
max-height: 500px;
|
|
458
|
+
opacity: 1;
|
|
459
|
+
}
|
|
460
|
+
.inst-children.collapsed {
|
|
461
|
+
max-height: 0;
|
|
462
|
+
opacity: 0;
|
|
463
|
+
}
|
|
464
|
+
</style>
|
|
465
|
+
</head>
|
|
466
|
+
<body>
|
|
467
|
+
|
|
468
|
+
<div class="header">
|
|
469
|
+
<div class="header-row">
|
|
470
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32" height="32" style="flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));">
|
|
471
|
+
<defs>
|
|
472
|
+
<linearGradient id="nk-bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
473
|
+
<stop offset="0%" stop-color="#00F0C0"/>
|
|
474
|
+
<stop offset="50%" stop-color="#00D4AA"/>
|
|
475
|
+
<stop offset="100%" stop-color="#0F4C81"/>
|
|
476
|
+
</linearGradient>
|
|
477
|
+
<clipPath id="nk-clip"><rect width="512" height="512" rx="128"/></clipPath>
|
|
478
|
+
</defs>
|
|
479
|
+
<rect width="512" height="512" rx="128" fill="url(#nk-bg)"/>
|
|
480
|
+
<g transform="translate(256,256) scale(9.13) translate(-22,-23)">
|
|
481
|
+
<path d="M5 39V7l15 27V7" stroke="#fff" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
482
|
+
<path d="M34 4l2 7 6 2-6 2-2 7-2-7-6-2 6-2z" fill="#fff" opacity="0.9">
|
|
483
|
+
<animate attributeName="opacity" values="0.9;0.4;0.9" dur="2s" repeatCount="indefinite"/>
|
|
484
|
+
</path>
|
|
485
|
+
<line x1="34" y1="19" x2="34" y2="28.5" stroke="#fff" stroke-width="1.8" opacity="0.5">
|
|
486
|
+
<animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" repeatCount="indefinite"/>
|
|
487
|
+
</line>
|
|
488
|
+
<circle cx="34" cy="34" r="4.5" fill="#fff" opacity="0.8">
|
|
489
|
+
<animate attributeName="opacity" values="0.8;0.4;0.8" dur="2s" repeatCount="indefinite" begin="0.3s"/>
|
|
490
|
+
<animate attributeName="r" values="4.5;5.5;4.5" dur="2s" repeatCount="indefinite" begin="0.3s"/>
|
|
491
|
+
</circle>
|
|
492
|
+
</g>
|
|
493
|
+
</svg>
|
|
494
|
+
<h1><span class="logo-now">Now</span><span class="logo-ai">AI</span><span class="logo-kit">Kit</span><span class="logo-suffix"> Utils</span></h1>
|
|
495
|
+
</div>
|
|
496
|
+
<div class="subtitle">ServiceNow Browser Toolkit</div>
|
|
497
|
+
<button class="theme-btn" id="themeToggle" title="Toggle light/dark mode">
|
|
498
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" id="themeIcon"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
|
499
|
+
</button>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
<div class="popup-scroll">
|
|
503
|
+
|
|
504
|
+
<div class="status">
|
|
505
|
+
<div class="status-dot" id="statusDot"></div>
|
|
506
|
+
<div class="status-info">
|
|
507
|
+
<div class="status-label">Instance</div>
|
|
508
|
+
<div class="status-value" id="instanceName">Detecting...</div>
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
|
|
512
|
+
<div class="page-info" id="pageInfo" style="display:none">
|
|
513
|
+
<div class="page-info-grid">
|
|
514
|
+
<div class="page-info-item">
|
|
515
|
+
<div class="label">Table</div>
|
|
516
|
+
<div class="value" id="tableName" title="Click to copy"></div>
|
|
517
|
+
</div>
|
|
518
|
+
<div class="page-info-item">
|
|
519
|
+
<div class="label">sys_id</div>
|
|
520
|
+
<div class="value" id="sysId" title="Click to copy"></div>
|
|
521
|
+
</div>
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
|
|
525
|
+
<div class="section">
|
|
526
|
+
<div class="section-title">Quick Actions</div>
|
|
527
|
+
<div class="quick-actions">
|
|
528
|
+
<button class="action-btn" id="btnCopySysId"><span class="icon">📋</span>Copy sys_id</button>
|
|
529
|
+
<button class="action-btn" id="btnCopyUrl"><span class="icon">🔗</span>Copy URL</button>
|
|
530
|
+
<button class="action-btn" id="btnOpenList"><span class="icon">📄</span>List View</button>
|
|
531
|
+
<button class="action-btn" id="btnViewXml"><span class="icon">📄</span>XML View</button>
|
|
532
|
+
<button class="action-btn" id="btnViewJson"><span class="icon">{}</span>JSON View</button>
|
|
533
|
+
<button class="action-btn" id="btnSchema"><span class="icon">📑</span>Schema</button>
|
|
534
|
+
<button class="action-btn" id="btnSwitchNode"><span class="icon">🌐</span>Switch Node</button>
|
|
535
|
+
<button class="action-btn" id="btnCodeTemplates"><span class="icon">📝</span>Templates</button>
|
|
536
|
+
<button class="action-btn action-btn-wide" id="btnAISidebar"><span class="icon">🤖</span> AI Assistant (<span class="mod-key">Ctrl</span>+Shift+A)</button>
|
|
537
|
+
<button class="action-btn action-btn-wide" id="btnMainPanel"><span class="icon">📌</span> Main Panel (<span class="mod-key">Ctrl</span>+Shift+P)</button>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
|
|
541
|
+
<div class="section">
|
|
542
|
+
<div class="section-title">Features</div>
|
|
543
|
+
<div class="toggle-row">
|
|
544
|
+
<span class="toggle-label">Technical names on fields</span>
|
|
545
|
+
<label class="toggle"><input type="checkbox" id="toggleTechNames" checked><span class="toggle-slider"></span></label>
|
|
546
|
+
</div>
|
|
547
|
+
<div class="toggle-row">
|
|
548
|
+
<span class="toggle-label">Update set banner</span>
|
|
549
|
+
<label class="toggle"><input type="checkbox" id="toggleUpdateSet" checked><span class="toggle-slider"></span></label>
|
|
550
|
+
</div>
|
|
551
|
+
<div class="toggle-row">
|
|
552
|
+
<span class="toggle-label">Field copy buttons</span>
|
|
553
|
+
<label class="toggle"><input type="checkbox" id="toggleFieldCopy" checked><span class="toggle-slider"></span></label>
|
|
554
|
+
</div>
|
|
555
|
+
<div class="toggle-row">
|
|
556
|
+
<span class="toggle-label">Quick navigation</span>
|
|
557
|
+
<label class="toggle"><input type="checkbox" id="toggleQuickNav" checked><span class="toggle-slider"></span></label>
|
|
558
|
+
</div>
|
|
559
|
+
</div>
|
|
560
|
+
|
|
561
|
+
<div class="section" id="integrationSection">
|
|
562
|
+
<div class="section-title">Connected Services</div>
|
|
563
|
+
<div class="service-row">
|
|
564
|
+
<div class="service-dot" id="builderDot"></div>
|
|
565
|
+
<span class="service-name">NowAIKit Builder (VS Code)</span>
|
|
566
|
+
<span class="service-status" id="builderStatus">Checking...</span>
|
|
567
|
+
</div>
|
|
568
|
+
<div class="service-row">
|
|
569
|
+
<div class="service-dot" id="mcpDot"></div>
|
|
570
|
+
<span class="service-name">NowAIKit MCP Server</span>
|
|
571
|
+
<span class="service-status" id="mcpStatus">Via Builder</span>
|
|
572
|
+
</div>
|
|
573
|
+
<a href="https://nowaikit.com/docs.html#setup" target="_blank" style="display:block;font-size:10px;color:var(--teal);margin-top:6px;text-decoration:none;">Setup guide →</a>
|
|
574
|
+
</div>
|
|
575
|
+
|
|
576
|
+
<div class="section">
|
|
577
|
+
<div class="section-title">Saved Instances</div>
|
|
578
|
+
<div class="instance-tree" id="instanceTree"></div>
|
|
579
|
+
<button class="add-instance-btn" id="btnAddInstance">+ Add Instance</button>
|
|
580
|
+
<div class="add-instance-form" id="addInstanceForm">
|
|
581
|
+
<div>
|
|
582
|
+
<div class="form-label">Instance URL *</div>
|
|
583
|
+
<div style="font-size:10px;color:var(--text-dim);margin-bottom:4px;">
|
|
584
|
+
<span style="color:var(--teal);">https://</span><name><span style="color:var(--teal);">.service-now.com</span>
|
|
585
|
+
</div>
|
|
586
|
+
<input type="text" id="newInstanceUrl" placeholder="e.g. dev12345">
|
|
587
|
+
</div>
|
|
588
|
+
<div class="form-row">
|
|
589
|
+
<div style="flex:1">
|
|
590
|
+
<div class="form-label">Alias</div>
|
|
591
|
+
<input type="text" id="newInstanceAlias" placeholder="e.g. Customer A Dev">
|
|
592
|
+
</div>
|
|
593
|
+
<div>
|
|
594
|
+
<div class="form-label">Environment</div>
|
|
595
|
+
<select id="newInstanceEnv">
|
|
596
|
+
<option value="dev">Dev</option>
|
|
597
|
+
<option value="test">Test</option>
|
|
598
|
+
<option value="staging">Staging</option>
|
|
599
|
+
<option value="prod">Prod</option>
|
|
600
|
+
<option value="other">Other</option>
|
|
601
|
+
</select>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
<div>
|
|
605
|
+
<div class="form-label">Group</div>
|
|
606
|
+
<input type="text" id="newInstanceGroup" list="groupSuggestions" placeholder="e.g. Work, Personal, Customer A">
|
|
607
|
+
<datalist id="groupSuggestions"></datalist>
|
|
608
|
+
</div>
|
|
609
|
+
<button class="save-instance-btn" id="btnSaveInstance">Save Instance</button>
|
|
610
|
+
</div>
|
|
611
|
+
</div>
|
|
612
|
+
|
|
613
|
+
<div class="section">
|
|
614
|
+
<div class="section-title-collapsible" id="shortcutsToggle">Keyboard Shortcuts <span class="chevron">▶</span></div>
|
|
615
|
+
<div class="shortcuts collapsed" id="shortcutsSection">
|
|
616
|
+
<div class="shortcut-row">
|
|
617
|
+
<span class="shortcut-label">Quick Navigation</span>
|
|
618
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd></div>
|
|
619
|
+
</div>
|
|
620
|
+
<div class="shortcut-row">
|
|
621
|
+
<span class="shortcut-label">Copy sys_id</span>
|
|
622
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>C</kbd></div>
|
|
623
|
+
</div>
|
|
624
|
+
<div class="shortcut-row">
|
|
625
|
+
<span class="shortcut-label">Copy URL</span>
|
|
626
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>U</kbd></div>
|
|
627
|
+
</div>
|
|
628
|
+
<div class="shortcut-row">
|
|
629
|
+
<span class="shortcut-label">List View</span>
|
|
630
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>L</kbd></div>
|
|
631
|
+
</div>
|
|
632
|
+
<div class="shortcut-row">
|
|
633
|
+
<span class="shortcut-label">XML / JSON View</span>
|
|
634
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>X</kbd> / <kbd>J</kbd></div>
|
|
635
|
+
</div>
|
|
636
|
+
<div class="shortcut-row">
|
|
637
|
+
<span class="shortcut-label">Code Templates</span>
|
|
638
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>T</kbd></div>
|
|
639
|
+
</div>
|
|
640
|
+
<div class="shortcut-row">
|
|
641
|
+
<span class="shortcut-label">AI Assistant</span>
|
|
642
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>A</kbd></div>
|
|
643
|
+
</div>
|
|
644
|
+
<div class="shortcut-row">
|
|
645
|
+
<span class="shortcut-label">Switch Node</span>
|
|
646
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>N</kbd></div>
|
|
647
|
+
</div>
|
|
648
|
+
<div class="shortcut-row">
|
|
649
|
+
<span class="shortcut-label">Main Panel</span>
|
|
650
|
+
<div class="shortcut-keys"><kbd class="mod-key">Ctrl</kbd><kbd>Shift</kbd><kbd>P</kbd></div>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
<div class="footer">
|
|
658
|
+
Part of <a href="https://nowaikit.com" target="_blank">NowAIKit</a> · v1.0.0
|
|
659
|
+
</div>
|
|
660
|
+
|
|
661
|
+
<script src="popup.js"></script>
|
|
662
|
+
</body>
|
|
663
|
+
</html>
|