@tstax/coding-tab 0.1.2 → 0.2.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/README.md +60 -7
- package/dist/browser.js +81 -39
- package/dist/browser.js.map +1 -1
- package/dist/server.cjs +642 -125
- package/dist/server.cjs.map +1 -1
- package/dist/server.d.cts +150 -22
- package/dist/server.d.ts +150 -22
- package/dist/server.js +641 -123
- package/dist/server.js.map +1 -1
- package/dist/style.css +310 -17
- package/package.json +2 -2
package/dist/style.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.coding-tab {
|
|
2
2
|
--ct-bg: #0b0b0d;
|
|
3
3
|
--ct-bg-alt: #15161a;
|
|
4
|
+
--ct-bg-row: #1d1f25;
|
|
4
5
|
--ct-fg: #e6e6e8;
|
|
5
6
|
--ct-fg-dim: #9b9ba3;
|
|
6
7
|
--ct-border: #2a2c33;
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
.coding-tab {
|
|
28
29
|
--ct-bg: #ffffff;
|
|
29
30
|
--ct-bg-alt: #f6f7f9;
|
|
31
|
+
--ct-bg-row: #eef0f4;
|
|
30
32
|
--ct-fg: #1a1c20;
|
|
31
33
|
--ct-fg-dim: #6c7280;
|
|
32
34
|
--ct-border: #e1e4ea;
|
|
@@ -37,6 +39,7 @@
|
|
|
37
39
|
.coding-tab * { box-sizing: border-box; }
|
|
38
40
|
.coding-tab a { color: var(--ct-accent); }
|
|
39
41
|
|
|
42
|
+
/* ───────── header ───────── */
|
|
40
43
|
.coding-tab__header {
|
|
41
44
|
display: flex;
|
|
42
45
|
align-items: center;
|
|
@@ -58,6 +61,12 @@
|
|
|
58
61
|
}
|
|
59
62
|
.coding-tab__header button { cursor: pointer; }
|
|
60
63
|
.coding-tab__header button:hover { border-color: var(--ct-accent); }
|
|
64
|
+
.coding-tab__hamburger {
|
|
65
|
+
display: none;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
padding: 4px 7px;
|
|
69
|
+
}
|
|
61
70
|
.coding-tab__mode {
|
|
62
71
|
display: inline-flex;
|
|
63
72
|
border: 1px solid var(--ct-border);
|
|
@@ -100,9 +109,7 @@
|
|
|
100
109
|
align-items: center;
|
|
101
110
|
gap: 8px;
|
|
102
111
|
}
|
|
103
|
-
.coding-tab__user img {
|
|
104
|
-
width: 22px; height: 22px; border-radius: 50%;
|
|
105
|
-
}
|
|
112
|
+
.coding-tab__user img { width: 22px; height: 22px; border-radius: 50%; }
|
|
106
113
|
.coding-tab__user button {
|
|
107
114
|
background: transparent;
|
|
108
115
|
border: 0;
|
|
@@ -113,6 +120,147 @@
|
|
|
113
120
|
}
|
|
114
121
|
.coding-tab__user button:hover { color: var(--ct-fg); background: var(--ct-bg); }
|
|
115
122
|
|
|
123
|
+
/* ───────── body / sidebar / pane ───────── */
|
|
124
|
+
.coding-tab__body {
|
|
125
|
+
flex: 1;
|
|
126
|
+
display: flex;
|
|
127
|
+
min-height: 0;
|
|
128
|
+
}
|
|
129
|
+
.coding-tab__sidebar {
|
|
130
|
+
width: 240px;
|
|
131
|
+
flex-shrink: 0;
|
|
132
|
+
display: flex;
|
|
133
|
+
flex-direction: column;
|
|
134
|
+
border-right: 1px solid var(--ct-border);
|
|
135
|
+
background: var(--ct-bg-alt);
|
|
136
|
+
overflow: hidden;
|
|
137
|
+
}
|
|
138
|
+
.coding-tab__new-chat {
|
|
139
|
+
display: inline-flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
justify-content: center;
|
|
142
|
+
gap: 6px;
|
|
143
|
+
margin: 12px;
|
|
144
|
+
}
|
|
145
|
+
.coding-tab__chat-list {
|
|
146
|
+
flex: 1;
|
|
147
|
+
overflow-y: auto;
|
|
148
|
+
padding: 0 8px 12px;
|
|
149
|
+
display: flex;
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
gap: 2px;
|
|
152
|
+
}
|
|
153
|
+
.coding-tab__chat-empty {
|
|
154
|
+
font-size: 12px;
|
|
155
|
+
color: var(--ct-fg-dim);
|
|
156
|
+
padding: 12px;
|
|
157
|
+
text-align: center;
|
|
158
|
+
}
|
|
159
|
+
.coding-tab__chat-row {
|
|
160
|
+
display: flex;
|
|
161
|
+
align-items: stretch;
|
|
162
|
+
border-radius: 6px;
|
|
163
|
+
overflow: hidden;
|
|
164
|
+
transition: background 0.1s;
|
|
165
|
+
}
|
|
166
|
+
.coding-tab__chat-row:hover { background: var(--ct-bg-row); }
|
|
167
|
+
.coding-tab__chat-row.is-active { background: var(--ct-bg-row); }
|
|
168
|
+
.coding-tab__chat-row.is-active .coding-tab__chat-row-title { color: var(--ct-fg); }
|
|
169
|
+
.coding-tab__chat-row-main {
|
|
170
|
+
flex: 1;
|
|
171
|
+
min-width: 0;
|
|
172
|
+
text-align: left;
|
|
173
|
+
background: transparent;
|
|
174
|
+
border: 0;
|
|
175
|
+
color: var(--ct-fg);
|
|
176
|
+
padding: 8px 10px;
|
|
177
|
+
cursor: pointer;
|
|
178
|
+
display: flex;
|
|
179
|
+
flex-direction: column;
|
|
180
|
+
gap: 2px;
|
|
181
|
+
position: relative;
|
|
182
|
+
}
|
|
183
|
+
.coding-tab__chat-row-dot {
|
|
184
|
+
position: absolute;
|
|
185
|
+
top: 10px; right: 8px;
|
|
186
|
+
width: 7px; height: 7px;
|
|
187
|
+
border-radius: 50%;
|
|
188
|
+
background: var(--ct-accent);
|
|
189
|
+
animation: ct-pulse 1.2s infinite;
|
|
190
|
+
}
|
|
191
|
+
.coding-tab__chat-row-title {
|
|
192
|
+
font-size: 13px;
|
|
193
|
+
color: var(--ct-fg);
|
|
194
|
+
white-space: nowrap;
|
|
195
|
+
overflow: hidden;
|
|
196
|
+
text-overflow: ellipsis;
|
|
197
|
+
padding-right: 16px;
|
|
198
|
+
}
|
|
199
|
+
.coding-tab__chat-row-meta {
|
|
200
|
+
font-size: 11px;
|
|
201
|
+
color: var(--ct-fg-dim);
|
|
202
|
+
}
|
|
203
|
+
.coding-tab__chat-row-actions {
|
|
204
|
+
display: none;
|
|
205
|
+
align-items: center;
|
|
206
|
+
padding-right: 6px;
|
|
207
|
+
gap: 2px;
|
|
208
|
+
}
|
|
209
|
+
.coding-tab__chat-row:hover .coding-tab__chat-row-actions,
|
|
210
|
+
.coding-tab__chat-row.is-active .coding-tab__chat-row-actions {
|
|
211
|
+
display: flex;
|
|
212
|
+
}
|
|
213
|
+
.coding-tab__chat-row-actions button {
|
|
214
|
+
background: transparent;
|
|
215
|
+
border: 0;
|
|
216
|
+
color: var(--ct-fg-dim);
|
|
217
|
+
cursor: pointer;
|
|
218
|
+
padding: 4px;
|
|
219
|
+
border-radius: 4px;
|
|
220
|
+
}
|
|
221
|
+
.coding-tab__chat-row-actions button:hover {
|
|
222
|
+
color: var(--ct-fg);
|
|
223
|
+
background: var(--ct-bg);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.coding-tab__pane {
|
|
227
|
+
flex: 1;
|
|
228
|
+
display: flex;
|
|
229
|
+
flex-direction: column;
|
|
230
|
+
min-width: 0;
|
|
231
|
+
background: var(--ct-bg);
|
|
232
|
+
}
|
|
233
|
+
.coding-tab__pane-empty {
|
|
234
|
+
margin: auto;
|
|
235
|
+
padding: 40px 20px;
|
|
236
|
+
text-align: center;
|
|
237
|
+
display: flex;
|
|
238
|
+
flex-direction: column;
|
|
239
|
+
align-items: center;
|
|
240
|
+
gap: 12px;
|
|
241
|
+
max-width: 360px;
|
|
242
|
+
color: var(--ct-fg-dim);
|
|
243
|
+
}
|
|
244
|
+
.coding-tab__pane-empty h3 { margin: 0; color: var(--ct-fg); font-weight: 500; }
|
|
245
|
+
.coding-tab__pane-empty p { margin: 0; }
|
|
246
|
+
|
|
247
|
+
@media (max-width: 720px) {
|
|
248
|
+
.coding-tab__hamburger { display: inline-flex; }
|
|
249
|
+
.coding-tab__sidebar {
|
|
250
|
+
position: absolute;
|
|
251
|
+
z-index: 10;
|
|
252
|
+
top: 0; bottom: 0; left: 0;
|
|
253
|
+
width: 80%;
|
|
254
|
+
max-width: 280px;
|
|
255
|
+
transform: translateX(-100%);
|
|
256
|
+
transition: transform 0.2s ease-out;
|
|
257
|
+
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
|
|
258
|
+
}
|
|
259
|
+
.coding-tab__sidebar.is-open { transform: translateX(0); }
|
|
260
|
+
.coding-tab__body { position: relative; }
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/* ───────── thread / messages ───────── */
|
|
116
264
|
.coding-tab__thread {
|
|
117
265
|
flex: 1;
|
|
118
266
|
overflow-y: auto;
|
|
@@ -134,8 +282,10 @@
|
|
|
134
282
|
border: 1px solid var(--ct-border);
|
|
135
283
|
border-radius: 8px;
|
|
136
284
|
padding: 10px 12px;
|
|
137
|
-
white-space: pre-wrap;
|
|
138
285
|
word-wrap: break-word;
|
|
286
|
+
display: flex;
|
|
287
|
+
flex-direction: column;
|
|
288
|
+
gap: 8px;
|
|
139
289
|
}
|
|
140
290
|
.coding-tab__msg.user .coding-tab__msg-body {
|
|
141
291
|
background: var(--ct-accent);
|
|
@@ -143,30 +293,171 @@
|
|
|
143
293
|
border-color: transparent;
|
|
144
294
|
align-self: flex-end;
|
|
145
295
|
max-width: 85%;
|
|
296
|
+
white-space: pre-wrap;
|
|
297
|
+
display: block;
|
|
146
298
|
}
|
|
147
299
|
.coding-tab__msg.user { align-items: flex-end; }
|
|
148
|
-
.coding-tab__msg-
|
|
300
|
+
.coding-tab__msg-pending {
|
|
301
|
+
color: var(--ct-fg-dim);
|
|
302
|
+
font-style: italic;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* ───────── markdown ───────── */
|
|
306
|
+
.coding-tab__md { display: block; }
|
|
307
|
+
.coding-tab__md > * + * { margin-top: 8px; }
|
|
308
|
+
.coding-tab__md p { margin: 0; }
|
|
309
|
+
.coding-tab__md h1,
|
|
310
|
+
.coding-tab__md h2,
|
|
311
|
+
.coding-tab__md h3,
|
|
312
|
+
.coding-tab__md h4 {
|
|
313
|
+
margin: 4px 0 4px;
|
|
314
|
+
font-weight: 600;
|
|
315
|
+
line-height: 1.25;
|
|
316
|
+
}
|
|
317
|
+
.coding-tab__md h1 { font-size: 1.3em; }
|
|
318
|
+
.coding-tab__md h2 { font-size: 1.18em; border-bottom: 1px solid var(--ct-border); padding-bottom: 4px; }
|
|
319
|
+
.coding-tab__md h3 { font-size: 1.05em; color: var(--ct-fg); }
|
|
320
|
+
.coding-tab__md h4 { font-size: 1em; color: var(--ct-fg-dim); }
|
|
321
|
+
.coding-tab__md ul,
|
|
322
|
+
.coding-tab__md ol {
|
|
323
|
+
margin: 0;
|
|
324
|
+
padding-left: 22px;
|
|
325
|
+
display: flex;
|
|
326
|
+
flex-direction: column;
|
|
327
|
+
gap: 2px;
|
|
328
|
+
}
|
|
329
|
+
.coding-tab__md li { margin: 0; }
|
|
330
|
+
.coding-tab__md li > ul,
|
|
331
|
+
.coding-tab__md li > ol { margin-top: 2px; }
|
|
332
|
+
.coding-tab__md hr {
|
|
333
|
+
border: 0;
|
|
334
|
+
border-top: 1px solid var(--ct-border);
|
|
335
|
+
margin: 8px 0;
|
|
336
|
+
}
|
|
337
|
+
.coding-tab__md code {
|
|
338
|
+
background: rgba(127, 127, 127, 0.18);
|
|
339
|
+
padding: 1px 5px;
|
|
340
|
+
border-radius: 4px;
|
|
341
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
342
|
+
font-size: 0.9em;
|
|
343
|
+
}
|
|
344
|
+
.coding-tab__md pre {
|
|
345
|
+
background: rgba(127, 127, 127, 0.12);
|
|
346
|
+
border: 1px solid var(--ct-border);
|
|
347
|
+
border-radius: 6px;
|
|
348
|
+
padding: 10px 12px;
|
|
349
|
+
margin: 0;
|
|
350
|
+
overflow-x: auto;
|
|
351
|
+
}
|
|
352
|
+
.coding-tab__md pre code {
|
|
353
|
+
background: transparent;
|
|
354
|
+
padding: 0;
|
|
355
|
+
font-size: 0.88em;
|
|
356
|
+
line-height: 1.45;
|
|
357
|
+
}
|
|
358
|
+
.coding-tab__md a {
|
|
359
|
+
color: var(--ct-accent);
|
|
360
|
+
text-decoration: underline;
|
|
361
|
+
text-underline-offset: 2px;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
/* ───────── tool calls (expandable) ───────── */
|
|
149
365
|
.coding-tab__tool {
|
|
366
|
+
border: 1px solid var(--ct-border);
|
|
367
|
+
border-radius: 6px;
|
|
368
|
+
background: rgba(127, 127, 127, 0.06);
|
|
150
369
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
151
370
|
font-size: 12px;
|
|
152
|
-
|
|
371
|
+
overflow: hidden;
|
|
372
|
+
}
|
|
373
|
+
.coding-tab__tool-header {
|
|
374
|
+
width: 100%;
|
|
153
375
|
display: flex;
|
|
154
376
|
align-items: center;
|
|
155
|
-
gap:
|
|
377
|
+
gap: 8px;
|
|
378
|
+
padding: 6px 10px;
|
|
379
|
+
background: transparent;
|
|
380
|
+
border: 0;
|
|
381
|
+
color: var(--ct-fg);
|
|
382
|
+
cursor: pointer;
|
|
383
|
+
text-align: left;
|
|
384
|
+
font: inherit;
|
|
156
385
|
}
|
|
157
|
-
.coding-tab__tool .
|
|
386
|
+
.coding-tab__tool-header:hover { background: rgba(127, 127, 127, 0.08); }
|
|
387
|
+
.coding-tab__tool-dot {
|
|
158
388
|
width: 8px; height: 8px; border-radius: 50%;
|
|
159
389
|
background: var(--ct-fg-dim);
|
|
390
|
+
flex-shrink: 0;
|
|
391
|
+
}
|
|
392
|
+
.coding-tab__tool[data-status="completed"] .coding-tab__tool-dot { background: var(--ct-success); }
|
|
393
|
+
.coding-tab__tool[data-status="error"] .coding-tab__tool-dot { background: var(--ct-danger); }
|
|
394
|
+
.coding-tab__tool[data-status="running"] .coding-tab__tool-dot {
|
|
395
|
+
background: var(--ct-warn);
|
|
396
|
+
animation: ct-pulse 1.2s infinite;
|
|
397
|
+
}
|
|
398
|
+
.coding-tab__tool .ct-chevron {
|
|
399
|
+
transition: transform 0.15s;
|
|
400
|
+
color: var(--ct-fg-dim);
|
|
401
|
+
flex-shrink: 0;
|
|
402
|
+
}
|
|
403
|
+
.coding-tab__tool-header[aria-expanded="true"] .ct-chevron {
|
|
404
|
+
transform: rotate(90deg);
|
|
405
|
+
}
|
|
406
|
+
.coding-tab__tool-name {
|
|
407
|
+
font-weight: 600;
|
|
408
|
+
color: var(--ct-fg);
|
|
409
|
+
flex-shrink: 0;
|
|
410
|
+
}
|
|
411
|
+
.coding-tab__tool-summary {
|
|
412
|
+
color: var(--ct-fg-dim);
|
|
413
|
+
white-space: nowrap;
|
|
414
|
+
overflow: hidden;
|
|
415
|
+
text-overflow: ellipsis;
|
|
416
|
+
min-width: 0;
|
|
417
|
+
}
|
|
418
|
+
.coding-tab__tool-detail {
|
|
419
|
+
padding: 8px 12px 10px;
|
|
420
|
+
border-top: 1px solid var(--ct-border);
|
|
421
|
+
display: flex;
|
|
422
|
+
flex-direction: column;
|
|
423
|
+
gap: 8px;
|
|
424
|
+
background: rgba(127, 127, 127, 0.04);
|
|
425
|
+
}
|
|
426
|
+
.coding-tab__tool-section { display: flex; flex-direction: column; gap: 4px; }
|
|
427
|
+
.coding-tab__tool-label {
|
|
428
|
+
font-size: 10px;
|
|
429
|
+
letter-spacing: 0.05em;
|
|
430
|
+
text-transform: uppercase;
|
|
431
|
+
color: var(--ct-fg-dim);
|
|
432
|
+
}
|
|
433
|
+
.coding-tab__tool-detail pre {
|
|
434
|
+
margin: 0;
|
|
435
|
+
padding: 8px 10px;
|
|
436
|
+
background: rgba(0, 0, 0, 0.25);
|
|
437
|
+
border: 1px solid var(--ct-border);
|
|
438
|
+
border-radius: 4px;
|
|
439
|
+
max-height: 360px;
|
|
440
|
+
overflow: auto;
|
|
441
|
+
white-space: pre-wrap;
|
|
442
|
+
word-break: break-word;
|
|
443
|
+
font-size: 11px;
|
|
444
|
+
line-height: 1.4;
|
|
160
445
|
}
|
|
161
|
-
|
|
162
|
-
.coding-tab__tool
|
|
163
|
-
|
|
446
|
+
@media (prefers-color-scheme: light) {
|
|
447
|
+
.coding-tab__tool-detail pre { background: rgba(0, 0, 0, 0.04); }
|
|
448
|
+
}
|
|
449
|
+
.coding-tab__tool-pending {
|
|
450
|
+
color: var(--ct-fg-dim);
|
|
451
|
+
font-style: italic;
|
|
452
|
+
}
|
|
453
|
+
|
|
164
454
|
@keyframes ct-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
|
165
455
|
|
|
456
|
+
/* ───────── plan + PR + composer ───────── */
|
|
166
457
|
.coding-tab__plan-actions {
|
|
167
458
|
display: flex;
|
|
168
459
|
gap: 8px;
|
|
169
|
-
margin-top:
|
|
460
|
+
margin-top: 4px;
|
|
170
461
|
}
|
|
171
462
|
.coding-tab__btn {
|
|
172
463
|
font: inherit;
|
|
@@ -176,6 +467,9 @@
|
|
|
176
467
|
border: 1px solid var(--ct-border);
|
|
177
468
|
background: var(--ct-bg);
|
|
178
469
|
color: var(--ct-fg);
|
|
470
|
+
display: inline-flex;
|
|
471
|
+
align-items: center;
|
|
472
|
+
gap: 6px;
|
|
179
473
|
}
|
|
180
474
|
.coding-tab__btn:hover { border-color: var(--ct-accent); }
|
|
181
475
|
.coding-tab__btn.primary { background: var(--ct-accent); color: var(--ct-accent-fg); border-color: transparent; }
|
|
@@ -183,7 +477,7 @@
|
|
|
183
477
|
.coding-tab__btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
184
478
|
|
|
185
479
|
.coding-tab__pr {
|
|
186
|
-
margin-top:
|
|
480
|
+
margin-top: 4px;
|
|
187
481
|
padding: 10px 12px;
|
|
188
482
|
border: 1px solid var(--ct-border);
|
|
189
483
|
border-radius: 8px;
|
|
@@ -218,10 +512,9 @@
|
|
|
218
512
|
border-radius: 6px;
|
|
219
513
|
padding: 8px 10px;
|
|
220
514
|
}
|
|
221
|
-
.coding-tab__composer button {
|
|
222
|
-
align-self: flex-end;
|
|
223
|
-
}
|
|
515
|
+
.coding-tab__composer button { align-self: flex-end; }
|
|
224
516
|
|
|
517
|
+
/* ───────── sign in / notices ───────── */
|
|
225
518
|
.coding-tab__signin {
|
|
226
519
|
margin: auto;
|
|
227
520
|
text-align: center;
|
|
@@ -248,7 +541,7 @@
|
|
|
248
541
|
padding: 8px 12px;
|
|
249
542
|
border-radius: 6px;
|
|
250
543
|
font-size: 13px;
|
|
251
|
-
margin: 8px
|
|
544
|
+
margin: 8px 0;
|
|
252
545
|
}
|
|
253
546
|
.coding-tab__notice.error { background: rgba(248, 81, 73, 0.12); color: var(--ct-danger); }
|
|
254
547
|
.coding-tab__notice.info { background: rgba(79, 140, 255, 0.12); color: var(--ct-accent); }
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tstax/coding-tab",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Drop-in Cursor-style coding agent tab for any Express app.
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Drop-in Cursor-style coding agent tab for any Express app. Multiple persistent chats, plan/agent modes, in-line tool inspection, GitHub OAuth, opens PRs against your repo via the Cursor SDK cloud runtime.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|