@tstax/coding-tab 0.1.2 → 0.2.1
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 +83 -40
- 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 +435 -19
- 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;
|
|
@@ -18,15 +19,20 @@
|
|
|
18
19
|
display: flex;
|
|
19
20
|
flex-direction: column;
|
|
20
21
|
height: 100%;
|
|
21
|
-
min-height:
|
|
22
|
+
min-height: 0;
|
|
23
|
+
min-width: 0;
|
|
22
24
|
border-radius: var(--ct-radius);
|
|
23
25
|
overflow: hidden;
|
|
24
26
|
border: 1px solid var(--ct-border);
|
|
27
|
+
/* iOS Safari sometimes needs an explicit minimum so the inner thread can
|
|
28
|
+
shrink to viewport width when embedded inside a flex container. */
|
|
29
|
+
max-width: 100%;
|
|
25
30
|
}
|
|
26
31
|
@media (prefers-color-scheme: light) {
|
|
27
32
|
.coding-tab {
|
|
28
33
|
--ct-bg: #ffffff;
|
|
29
34
|
--ct-bg-alt: #f6f7f9;
|
|
35
|
+
--ct-bg-row: #eef0f4;
|
|
30
36
|
--ct-fg: #1a1c20;
|
|
31
37
|
--ct-fg-dim: #6c7280;
|
|
32
38
|
--ct-border: #e1e4ea;
|
|
@@ -37,6 +43,7 @@
|
|
|
37
43
|
.coding-tab * { box-sizing: border-box; }
|
|
38
44
|
.coding-tab a { color: var(--ct-accent); }
|
|
39
45
|
|
|
46
|
+
/* ───────── header ───────── */
|
|
40
47
|
.coding-tab__header {
|
|
41
48
|
display: flex;
|
|
42
49
|
align-items: center;
|
|
@@ -45,6 +52,7 @@
|
|
|
45
52
|
border-bottom: 1px solid var(--ct-border);
|
|
46
53
|
background: var(--ct-bg-alt);
|
|
47
54
|
flex-wrap: wrap;
|
|
55
|
+
min-width: 0;
|
|
48
56
|
}
|
|
49
57
|
.coding-tab__header select,
|
|
50
58
|
.coding-tab__header input,
|
|
@@ -58,11 +66,19 @@
|
|
|
58
66
|
}
|
|
59
67
|
.coding-tab__header button { cursor: pointer; }
|
|
60
68
|
.coding-tab__header button:hover { border-color: var(--ct-accent); }
|
|
69
|
+
.coding-tab__hamburger {
|
|
70
|
+
display: none;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
padding: 4px 7px;
|
|
74
|
+
flex-shrink: 0;
|
|
75
|
+
}
|
|
61
76
|
.coding-tab__mode {
|
|
62
77
|
display: inline-flex;
|
|
63
78
|
border: 1px solid var(--ct-border);
|
|
64
79
|
border-radius: 6px;
|
|
65
80
|
overflow: hidden;
|
|
81
|
+
flex-shrink: 0;
|
|
66
82
|
}
|
|
67
83
|
.coding-tab__mode button {
|
|
68
84
|
border: 0;
|
|
@@ -89,6 +105,7 @@
|
|
|
89
105
|
font-size: 0.92em;
|
|
90
106
|
flex: 0 1 auto;
|
|
91
107
|
min-width: 0;
|
|
108
|
+
max-width: 100%;
|
|
92
109
|
}
|
|
93
110
|
.coding-tab__repo-locked:hover { border-color: var(--ct-accent); color: var(--ct-fg); }
|
|
94
111
|
.coding-tab__repo-locked span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
@@ -99,10 +116,10 @@
|
|
|
99
116
|
display: flex;
|
|
100
117
|
align-items: center;
|
|
101
118
|
gap: 8px;
|
|
119
|
+
min-width: 0;
|
|
102
120
|
}
|
|
103
|
-
.coding-tab__user img {
|
|
104
|
-
|
|
105
|
-
}
|
|
121
|
+
.coding-tab__user img { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
|
|
122
|
+
.coding-tab__user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
106
123
|
.coding-tab__user button {
|
|
107
124
|
background: transparent;
|
|
108
125
|
border: 0;
|
|
@@ -110,19 +127,194 @@
|
|
|
110
127
|
cursor: pointer;
|
|
111
128
|
padding: 2px 6px;
|
|
112
129
|
border-radius: 4px;
|
|
130
|
+
flex-shrink: 0;
|
|
113
131
|
}
|
|
114
132
|
.coding-tab__user button:hover { color: var(--ct-fg); background: var(--ct-bg); }
|
|
115
133
|
|
|
134
|
+
/* ───────── body / sidebar / pane ───────── */
|
|
135
|
+
.coding-tab__body {
|
|
136
|
+
flex: 1;
|
|
137
|
+
display: flex;
|
|
138
|
+
min-height: 0;
|
|
139
|
+
min-width: 0;
|
|
140
|
+
position: relative;
|
|
141
|
+
}
|
|
142
|
+
.coding-tab__sidebar {
|
|
143
|
+
width: 240px;
|
|
144
|
+
flex-shrink: 0;
|
|
145
|
+
display: flex;
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
border-right: 1px solid var(--ct-border);
|
|
148
|
+
background: var(--ct-bg-alt);
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
min-width: 0;
|
|
151
|
+
}
|
|
152
|
+
.coding-tab__new-chat {
|
|
153
|
+
display: inline-flex;
|
|
154
|
+
align-items: center;
|
|
155
|
+
justify-content: center;
|
|
156
|
+
gap: 6px;
|
|
157
|
+
margin: 12px;
|
|
158
|
+
}
|
|
159
|
+
.coding-tab__chat-list {
|
|
160
|
+
flex: 1;
|
|
161
|
+
overflow-y: auto;
|
|
162
|
+
padding: 0 8px 12px;
|
|
163
|
+
display: flex;
|
|
164
|
+
flex-direction: column;
|
|
165
|
+
gap: 2px;
|
|
166
|
+
min-width: 0;
|
|
167
|
+
}
|
|
168
|
+
.coding-tab__chat-empty {
|
|
169
|
+
font-size: 12px;
|
|
170
|
+
color: var(--ct-fg-dim);
|
|
171
|
+
padding: 12px;
|
|
172
|
+
text-align: center;
|
|
173
|
+
}
|
|
174
|
+
.coding-tab__chat-row {
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: stretch;
|
|
177
|
+
border-radius: 6px;
|
|
178
|
+
overflow: hidden;
|
|
179
|
+
transition: background 0.1s;
|
|
180
|
+
min-width: 0;
|
|
181
|
+
}
|
|
182
|
+
.coding-tab__chat-row:hover { background: var(--ct-bg-row); }
|
|
183
|
+
.coding-tab__chat-row.is-active { background: var(--ct-bg-row); }
|
|
184
|
+
.coding-tab__chat-row.is-active .coding-tab__chat-row-title { color: var(--ct-fg); }
|
|
185
|
+
.coding-tab__chat-row-main {
|
|
186
|
+
flex: 1;
|
|
187
|
+
min-width: 0;
|
|
188
|
+
text-align: left;
|
|
189
|
+
background: transparent;
|
|
190
|
+
border: 0;
|
|
191
|
+
color: var(--ct-fg);
|
|
192
|
+
padding: 8px 10px;
|
|
193
|
+
cursor: pointer;
|
|
194
|
+
display: flex;
|
|
195
|
+
flex-direction: column;
|
|
196
|
+
gap: 2px;
|
|
197
|
+
position: relative;
|
|
198
|
+
}
|
|
199
|
+
.coding-tab__chat-row-dot {
|
|
200
|
+
position: absolute;
|
|
201
|
+
top: 10px; right: 8px;
|
|
202
|
+
width: 7px; height: 7px;
|
|
203
|
+
border-radius: 50%;
|
|
204
|
+
background: var(--ct-accent);
|
|
205
|
+
animation: ct-pulse 1.2s infinite;
|
|
206
|
+
}
|
|
207
|
+
.coding-tab__chat-row-title {
|
|
208
|
+
font-size: 13px;
|
|
209
|
+
color: var(--ct-fg);
|
|
210
|
+
white-space: nowrap;
|
|
211
|
+
overflow: hidden;
|
|
212
|
+
text-overflow: ellipsis;
|
|
213
|
+
padding-right: 16px;
|
|
214
|
+
}
|
|
215
|
+
.coding-tab__chat-row-meta {
|
|
216
|
+
font-size: 11px;
|
|
217
|
+
color: var(--ct-fg-dim);
|
|
218
|
+
}
|
|
219
|
+
.coding-tab__chat-row-actions {
|
|
220
|
+
display: none;
|
|
221
|
+
align-items: center;
|
|
222
|
+
padding-right: 6px;
|
|
223
|
+
gap: 2px;
|
|
224
|
+
flex-shrink: 0;
|
|
225
|
+
}
|
|
226
|
+
.coding-tab__chat-row:hover .coding-tab__chat-row-actions,
|
|
227
|
+
.coding-tab__chat-row.is-active .coding-tab__chat-row-actions {
|
|
228
|
+
display: flex;
|
|
229
|
+
}
|
|
230
|
+
.coding-tab__chat-row-actions button {
|
|
231
|
+
background: transparent;
|
|
232
|
+
border: 0;
|
|
233
|
+
color: var(--ct-fg-dim);
|
|
234
|
+
cursor: pointer;
|
|
235
|
+
padding: 4px;
|
|
236
|
+
border-radius: 4px;
|
|
237
|
+
}
|
|
238
|
+
.coding-tab__chat-row-actions button:hover {
|
|
239
|
+
color: var(--ct-fg);
|
|
240
|
+
background: var(--ct-bg);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.coding-tab__pane {
|
|
244
|
+
flex: 1;
|
|
245
|
+
display: flex;
|
|
246
|
+
flex-direction: column;
|
|
247
|
+
/* CRITICAL: without this, any wide child (long URL in tool args, code block,
|
|
248
|
+
overflowing pre) blows out the flex container width and forces the whole
|
|
249
|
+
thread to scroll horizontally — making text wrap word-by-word in the tiny
|
|
250
|
+
visible strip. */
|
|
251
|
+
min-width: 0;
|
|
252
|
+
min-height: 0;
|
|
253
|
+
background: var(--ct-bg);
|
|
254
|
+
overflow: hidden;
|
|
255
|
+
}
|
|
256
|
+
.coding-tab__pane-empty {
|
|
257
|
+
margin: auto;
|
|
258
|
+
padding: 40px 20px;
|
|
259
|
+
text-align: center;
|
|
260
|
+
display: flex;
|
|
261
|
+
flex-direction: column;
|
|
262
|
+
align-items: center;
|
|
263
|
+
gap: 12px;
|
|
264
|
+
max-width: 360px;
|
|
265
|
+
color: var(--ct-fg-dim);
|
|
266
|
+
}
|
|
267
|
+
.coding-tab__pane-empty h3 { margin: 0; color: var(--ct-fg); font-weight: 500; }
|
|
268
|
+
.coding-tab__pane-empty p { margin: 0; }
|
|
269
|
+
|
|
270
|
+
@media (max-width: 720px) {
|
|
271
|
+
.coding-tab__hamburger { display: inline-flex; }
|
|
272
|
+
.coding-tab__sidebar {
|
|
273
|
+
position: absolute;
|
|
274
|
+
z-index: 10;
|
|
275
|
+
top: 0; bottom: 0; left: 0;
|
|
276
|
+
width: 80%;
|
|
277
|
+
max-width: 280px;
|
|
278
|
+
transform: translateX(-100%);
|
|
279
|
+
transition: transform 0.2s ease-out;
|
|
280
|
+
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
|
|
281
|
+
}
|
|
282
|
+
.coding-tab__sidebar.is-open { transform: translateX(0); }
|
|
283
|
+
/* Hide the repo pill on mobile — it's mostly redundant since the chat is
|
|
284
|
+
already locked to that repo by the server. */
|
|
285
|
+
.coding-tab__repo-locked { display: none; }
|
|
286
|
+
/* Collapse the user block to just avatar + sign-out, drop the @login text. */
|
|
287
|
+
.coding-tab__user-name { display: none; }
|
|
288
|
+
.coding-tab__user { gap: 4px; }
|
|
289
|
+
.coding-tab__header { gap: 6px; padding: 6px 10px; }
|
|
290
|
+
.coding-tab__header select { max-width: 130px; }
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
@media (max-width: 480px) {
|
|
294
|
+
.coding-tab__user img { display: none; }
|
|
295
|
+
.coding-tab__user button { padding: 4px 8px; font-size: 11px; }
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* ───────── thread / messages ───────── */
|
|
116
299
|
.coding-tab__thread {
|
|
117
300
|
flex: 1;
|
|
118
301
|
overflow-y: auto;
|
|
302
|
+
overflow-x: hidden;
|
|
303
|
+
-webkit-overflow-scrolling: touch;
|
|
119
304
|
padding: 16px;
|
|
120
305
|
display: flex;
|
|
121
306
|
flex-direction: column;
|
|
122
307
|
gap: 14px;
|
|
308
|
+
min-width: 0;
|
|
123
309
|
}
|
|
124
310
|
|
|
125
|
-
.coding-tab__msg {
|
|
311
|
+
.coding-tab__msg {
|
|
312
|
+
display: flex;
|
|
313
|
+
flex-direction: column;
|
|
314
|
+
gap: 4px;
|
|
315
|
+
min-width: 0;
|
|
316
|
+
max-width: 100%;
|
|
317
|
+
}
|
|
126
318
|
.coding-tab__msg-role {
|
|
127
319
|
font-size: 11px;
|
|
128
320
|
text-transform: uppercase;
|
|
@@ -134,8 +326,13 @@
|
|
|
134
326
|
border: 1px solid var(--ct-border);
|
|
135
327
|
border-radius: 8px;
|
|
136
328
|
padding: 10px 12px;
|
|
137
|
-
white-space: pre-wrap;
|
|
138
329
|
word-wrap: break-word;
|
|
330
|
+
overflow-wrap: anywhere;
|
|
331
|
+
display: flex;
|
|
332
|
+
flex-direction: column;
|
|
333
|
+
gap: 8px;
|
|
334
|
+
min-width: 0;
|
|
335
|
+
max-width: 100%;
|
|
139
336
|
}
|
|
140
337
|
.coding-tab__msg.user .coding-tab__msg-body {
|
|
141
338
|
background: var(--ct-accent);
|
|
@@ -143,30 +340,204 @@
|
|
|
143
340
|
border-color: transparent;
|
|
144
341
|
align-self: flex-end;
|
|
145
342
|
max-width: 85%;
|
|
343
|
+
white-space: pre-wrap;
|
|
344
|
+
display: block;
|
|
345
|
+
word-break: break-word;
|
|
146
346
|
}
|
|
147
347
|
.coding-tab__msg.user { align-items: flex-end; }
|
|
148
|
-
.coding-tab__msg-
|
|
348
|
+
.coding-tab__msg-pending {
|
|
349
|
+
color: var(--ct-fg-dim);
|
|
350
|
+
font-style: italic;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
@media (max-width: 720px) {
|
|
354
|
+
.coding-tab__thread { padding: 12px; gap: 12px; }
|
|
355
|
+
.coding-tab__msg-body { padding: 9px 11px; }
|
|
356
|
+
.coding-tab__msg.user .coding-tab__msg-body { max-width: 92%; }
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/* ───────── markdown ───────── */
|
|
360
|
+
.coding-tab__md { display: block; min-width: 0; max-width: 100%; }
|
|
361
|
+
.coding-tab__md > * + * { margin-top: 8px; }
|
|
362
|
+
.coding-tab__md p { margin: 0; }
|
|
363
|
+
.coding-tab__md h1,
|
|
364
|
+
.coding-tab__md h2,
|
|
365
|
+
.coding-tab__md h3,
|
|
366
|
+
.coding-tab__md h4 {
|
|
367
|
+
margin: 4px 0 4px;
|
|
368
|
+
font-weight: 600;
|
|
369
|
+
line-height: 1.25;
|
|
370
|
+
word-break: break-word;
|
|
371
|
+
}
|
|
372
|
+
.coding-tab__md h1 { font-size: 1.3em; }
|
|
373
|
+
.coding-tab__md h2 { font-size: 1.18em; border-bottom: 1px solid var(--ct-border); padding-bottom: 4px; }
|
|
374
|
+
.coding-tab__md h3 { font-size: 1.05em; color: var(--ct-fg); }
|
|
375
|
+
.coding-tab__md h4 { font-size: 1em; color: var(--ct-fg-dim); }
|
|
376
|
+
.coding-tab__md ul,
|
|
377
|
+
.coding-tab__md ol {
|
|
378
|
+
margin: 0;
|
|
379
|
+
padding-left: 22px;
|
|
380
|
+
display: flex;
|
|
381
|
+
flex-direction: column;
|
|
382
|
+
gap: 2px;
|
|
383
|
+
}
|
|
384
|
+
.coding-tab__md li { margin: 0; }
|
|
385
|
+
.coding-tab__md li > ul,
|
|
386
|
+
.coding-tab__md li > ol { margin-top: 2px; }
|
|
387
|
+
.coding-tab__md hr {
|
|
388
|
+
border: 0;
|
|
389
|
+
border-top: 1px solid var(--ct-border);
|
|
390
|
+
margin: 8px 0;
|
|
391
|
+
}
|
|
392
|
+
.coding-tab__md code {
|
|
393
|
+
background: rgba(127, 127, 127, 0.18);
|
|
394
|
+
padding: 1px 5px;
|
|
395
|
+
border-radius: 4px;
|
|
396
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
397
|
+
font-size: 0.9em;
|
|
398
|
+
word-break: break-word;
|
|
399
|
+
}
|
|
400
|
+
.coding-tab__md pre {
|
|
401
|
+
background: rgba(127, 127, 127, 0.12);
|
|
402
|
+
border: 1px solid var(--ct-border);
|
|
403
|
+
border-radius: 6px;
|
|
404
|
+
padding: 10px 12px;
|
|
405
|
+
margin: 0;
|
|
406
|
+
max-width: 100%;
|
|
407
|
+
overflow-x: auto;
|
|
408
|
+
-webkit-overflow-scrolling: touch;
|
|
409
|
+
}
|
|
410
|
+
.coding-tab__md pre code {
|
|
411
|
+
background: transparent;
|
|
412
|
+
padding: 0;
|
|
413
|
+
font-size: 0.88em;
|
|
414
|
+
line-height: 1.45;
|
|
415
|
+
word-break: normal;
|
|
416
|
+
white-space: pre;
|
|
417
|
+
}
|
|
418
|
+
.coding-tab__md a {
|
|
419
|
+
color: var(--ct-accent);
|
|
420
|
+
text-decoration: underline;
|
|
421
|
+
text-underline-offset: 2px;
|
|
422
|
+
word-break: break-all;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
/* ───────── tool calls (expandable) ───────── */
|
|
149
426
|
.coding-tab__tool {
|
|
427
|
+
border: 1px solid var(--ct-border);
|
|
428
|
+
border-radius: 6px;
|
|
429
|
+
background: rgba(127, 127, 127, 0.06);
|
|
150
430
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
151
431
|
font-size: 12px;
|
|
152
|
-
|
|
432
|
+
overflow: hidden;
|
|
433
|
+
min-width: 0;
|
|
434
|
+
max-width: 100%;
|
|
435
|
+
}
|
|
436
|
+
.coding-tab__tool-header {
|
|
437
|
+
width: 100%;
|
|
153
438
|
display: flex;
|
|
154
439
|
align-items: center;
|
|
155
|
-
gap:
|
|
440
|
+
gap: 8px;
|
|
441
|
+
padding: 6px 10px;
|
|
442
|
+
background: transparent;
|
|
443
|
+
border: 0;
|
|
444
|
+
color: var(--ct-fg);
|
|
445
|
+
cursor: pointer;
|
|
446
|
+
text-align: left;
|
|
447
|
+
font: inherit;
|
|
448
|
+
min-width: 0;
|
|
156
449
|
}
|
|
157
|
-
.coding-tab__tool .
|
|
450
|
+
.coding-tab__tool-header:hover { background: rgba(127, 127, 127, 0.08); }
|
|
451
|
+
.coding-tab__tool-dot {
|
|
158
452
|
width: 8px; height: 8px; border-radius: 50%;
|
|
159
453
|
background: var(--ct-fg-dim);
|
|
454
|
+
flex-shrink: 0;
|
|
160
455
|
}
|
|
161
|
-
.coding-tab__tool[data-status="completed"] .dot { background: var(--ct-success); }
|
|
162
|
-
.coding-tab__tool[data-status="error"] .dot { background: var(--ct-danger); }
|
|
163
|
-
.coding-tab__tool[data-status="running"] .dot {
|
|
456
|
+
.coding-tab__tool[data-status="completed"] .coding-tab__tool-dot { background: var(--ct-success); }
|
|
457
|
+
.coding-tab__tool[data-status="error"] .coding-tab__tool-dot { background: var(--ct-danger); }
|
|
458
|
+
.coding-tab__tool[data-status="running"] .coding-tab__tool-dot {
|
|
459
|
+
background: var(--ct-warn);
|
|
460
|
+
animation: ct-pulse 1.2s infinite;
|
|
461
|
+
}
|
|
462
|
+
.coding-tab__tool .ct-chevron {
|
|
463
|
+
transition: transform 0.15s;
|
|
464
|
+
color: var(--ct-fg-dim);
|
|
465
|
+
flex-shrink: 0;
|
|
466
|
+
}
|
|
467
|
+
.coding-tab__tool-header[aria-expanded="true"] .ct-chevron {
|
|
468
|
+
transform: rotate(90deg);
|
|
469
|
+
}
|
|
470
|
+
.coding-tab__tool-name {
|
|
471
|
+
font-weight: 600;
|
|
472
|
+
color: var(--ct-fg);
|
|
473
|
+
flex-shrink: 0;
|
|
474
|
+
}
|
|
475
|
+
.coding-tab__tool-summary {
|
|
476
|
+
color: var(--ct-fg-dim);
|
|
477
|
+
white-space: nowrap;
|
|
478
|
+
overflow: hidden;
|
|
479
|
+
text-overflow: ellipsis;
|
|
480
|
+
min-width: 0;
|
|
481
|
+
flex: 1 1 auto;
|
|
482
|
+
}
|
|
483
|
+
.coding-tab__tool-detail {
|
|
484
|
+
padding: 8px 12px 10px;
|
|
485
|
+
border-top: 1px solid var(--ct-border);
|
|
486
|
+
display: flex;
|
|
487
|
+
flex-direction: column;
|
|
488
|
+
gap: 8px;
|
|
489
|
+
background: rgba(127, 127, 127, 0.04);
|
|
490
|
+
min-width: 0;
|
|
491
|
+
max-width: 100%;
|
|
492
|
+
}
|
|
493
|
+
.coding-tab__tool-section { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
494
|
+
.coding-tab__tool-label {
|
|
495
|
+
font-size: 10px;
|
|
496
|
+
letter-spacing: 0.05em;
|
|
497
|
+
text-transform: uppercase;
|
|
498
|
+
color: var(--ct-fg-dim);
|
|
499
|
+
}
|
|
500
|
+
.coding-tab__tool-detail pre {
|
|
501
|
+
margin: 0;
|
|
502
|
+
padding: 8px 10px;
|
|
503
|
+
background: rgba(0, 0, 0, 0.25);
|
|
504
|
+
border: 1px solid var(--ct-border);
|
|
505
|
+
border-radius: 4px;
|
|
506
|
+
max-height: 360px;
|
|
507
|
+
max-width: 100%;
|
|
508
|
+
overflow: auto;
|
|
509
|
+
-webkit-overflow-scrolling: touch;
|
|
510
|
+
/* Wrap long lines within the visible width so they don't push the parent
|
|
511
|
+
wider on mobile; horizontal scroll still works for monolithic code. */
|
|
512
|
+
white-space: pre-wrap;
|
|
513
|
+
word-break: break-word;
|
|
514
|
+
overflow-wrap: anywhere;
|
|
515
|
+
font-size: 11px;
|
|
516
|
+
line-height: 1.4;
|
|
517
|
+
}
|
|
518
|
+
@media (prefers-color-scheme: light) {
|
|
519
|
+
.coding-tab__tool-detail pre { background: rgba(0, 0, 0, 0.04); }
|
|
520
|
+
}
|
|
521
|
+
.coding-tab__tool-pending {
|
|
522
|
+
color: var(--ct-fg-dim);
|
|
523
|
+
font-style: italic;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
@media (max-width: 720px) {
|
|
527
|
+
.coding-tab__tool { font-size: 11.5px; }
|
|
528
|
+
.coding-tab__tool-header { padding: 7px 8px; gap: 6px; }
|
|
529
|
+
.coding-tab__tool-detail { padding: 6px 8px 8px; }
|
|
530
|
+
.coding-tab__tool-detail pre { max-height: 240px; padding: 6px 8px; font-size: 10.5px; }
|
|
531
|
+
}
|
|
532
|
+
|
|
164
533
|
@keyframes ct-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
|
165
534
|
|
|
535
|
+
/* ───────── plan + PR + composer ───────── */
|
|
166
536
|
.coding-tab__plan-actions {
|
|
167
537
|
display: flex;
|
|
168
538
|
gap: 8px;
|
|
169
|
-
margin-top:
|
|
539
|
+
margin-top: 4px;
|
|
540
|
+
flex-wrap: wrap;
|
|
170
541
|
}
|
|
171
542
|
.coding-tab__btn {
|
|
172
543
|
font: inherit;
|
|
@@ -176,14 +547,36 @@
|
|
|
176
547
|
border: 1px solid var(--ct-border);
|
|
177
548
|
background: var(--ct-bg);
|
|
178
549
|
color: var(--ct-fg);
|
|
550
|
+
display: inline-flex;
|
|
551
|
+
align-items: center;
|
|
552
|
+
gap: 6px;
|
|
553
|
+
position: relative;
|
|
554
|
+
transition: opacity 0.15s, background 0.15s, border-color 0.15s;
|
|
179
555
|
}
|
|
180
556
|
.coding-tab__btn:hover { border-color: var(--ct-accent); }
|
|
181
557
|
.coding-tab__btn.primary { background: var(--ct-accent); color: var(--ct-accent-fg); border-color: transparent; }
|
|
182
558
|
.coding-tab__btn.danger { color: var(--ct-danger); }
|
|
183
|
-
.coding-tab__btn
|
|
559
|
+
.coding-tab__btn.success { background: var(--ct-success); color: var(--ct-accent-fg); border-color: transparent; }
|
|
560
|
+
.coding-tab__btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
561
|
+
.coding-tab__btn[data-state="loading"] { padding-left: 30px; }
|
|
562
|
+
.coding-tab__btn[data-state="loading"]::before {
|
|
563
|
+
content: "";
|
|
564
|
+
position: absolute;
|
|
565
|
+
left: 12px; top: 50%;
|
|
566
|
+
width: 12px; height: 12px;
|
|
567
|
+
margin-top: -6px;
|
|
568
|
+
border: 2px solid currentColor;
|
|
569
|
+
border-right-color: transparent;
|
|
570
|
+
border-radius: 50%;
|
|
571
|
+
animation: ct-spin 0.7s linear infinite;
|
|
572
|
+
opacity: 0.85;
|
|
573
|
+
}
|
|
574
|
+
@keyframes ct-spin {
|
|
575
|
+
to { transform: rotate(360deg); }
|
|
576
|
+
}
|
|
184
577
|
|
|
185
578
|
.coding-tab__pr {
|
|
186
|
-
margin-top:
|
|
579
|
+
margin-top: 4px;
|
|
187
580
|
padding: 10px 12px;
|
|
188
581
|
border: 1px solid var(--ct-border);
|
|
189
582
|
border-radius: 8px;
|
|
@@ -191,13 +584,29 @@
|
|
|
191
584
|
display: flex;
|
|
192
585
|
flex-direction: column;
|
|
193
586
|
gap: 8px;
|
|
587
|
+
min-width: 0;
|
|
588
|
+
max-width: 100%;
|
|
194
589
|
}
|
|
195
590
|
.coding-tab__pr-title {
|
|
196
591
|
font-weight: 600;
|
|
197
592
|
display: flex;
|
|
198
593
|
align-items: center;
|
|
199
594
|
gap: 6px;
|
|
595
|
+
flex-wrap: wrap;
|
|
596
|
+
word-break: break-word;
|
|
200
597
|
}
|
|
598
|
+
.coding-tab__pr-actions {
|
|
599
|
+
display: flex;
|
|
600
|
+
gap: 8px;
|
|
601
|
+
flex-wrap: wrap;
|
|
602
|
+
}
|
|
603
|
+
.coding-tab__pr-status {
|
|
604
|
+
font-size: 12px;
|
|
605
|
+
color: var(--ct-fg-dim);
|
|
606
|
+
font-style: italic;
|
|
607
|
+
}
|
|
608
|
+
.coding-tab__pr-status.is-success { color: var(--ct-success); font-style: normal; }
|
|
609
|
+
.coding-tab__pr-status.is-error { color: var(--ct-danger); font-style: normal; }
|
|
201
610
|
|
|
202
611
|
.coding-tab__composer {
|
|
203
612
|
display: flex;
|
|
@@ -205,9 +614,11 @@
|
|
|
205
614
|
padding: 10px 12px;
|
|
206
615
|
border-top: 1px solid var(--ct-border);
|
|
207
616
|
background: var(--ct-bg-alt);
|
|
617
|
+
min-width: 0;
|
|
208
618
|
}
|
|
209
619
|
.coding-tab__composer textarea {
|
|
210
620
|
flex: 1;
|
|
621
|
+
min-width: 0;
|
|
211
622
|
min-height: 44px;
|
|
212
623
|
max-height: 200px;
|
|
213
624
|
resize: vertical;
|
|
@@ -218,10 +629,15 @@
|
|
|
218
629
|
border-radius: 6px;
|
|
219
630
|
padding: 8px 10px;
|
|
220
631
|
}
|
|
221
|
-
.coding-tab__composer button {
|
|
222
|
-
|
|
632
|
+
.coding-tab__composer button { align-self: flex-end; flex-shrink: 0; }
|
|
633
|
+
|
|
634
|
+
@media (max-width: 720px) {
|
|
635
|
+
.coding-tab__composer { padding: 8px 10px; gap: 6px; }
|
|
636
|
+
.coding-tab__composer textarea { font-size: 16px; /* iOS won't auto-zoom inputs >= 16px */ }
|
|
637
|
+
.coding-tab__btn { padding: 7px 12px; }
|
|
223
638
|
}
|
|
224
639
|
|
|
640
|
+
/* ───────── sign in / notices ───────── */
|
|
225
641
|
.coding-tab__signin {
|
|
226
642
|
margin: auto;
|
|
227
643
|
text-align: center;
|
|
@@ -248,7 +664,7 @@
|
|
|
248
664
|
padding: 8px 12px;
|
|
249
665
|
border-radius: 6px;
|
|
250
666
|
font-size: 13px;
|
|
251
|
-
margin: 8px
|
|
667
|
+
margin: 8px 0;
|
|
252
668
|
}
|
|
253
669
|
.coding-tab__notice.error { background: rgba(248, 81, 73, 0.12); color: var(--ct-danger); }
|
|
254
670
|
.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.1
|
|
4
|
-
"description": "Drop-in Cursor-style coding agent tab for any Express app.
|
|
3
|
+
"version": "0.2.1",
|
|
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
|
".": {
|