cli-tunnel 1.2.0-beta.8 → 1.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 +98 -40
- package/dist/index.js +227 -64
- package/dist/redact.d.ts +1 -0
- package/dist/redact.js +26 -0
- package/package.json +7 -5
- package/remote-ui/app.js +472 -26
- package/remote-ui/index.html +10 -10
- package/remote-ui/styles.css +169 -0
package/remote-ui/styles.css
CHANGED
|
@@ -242,10 +242,179 @@ header {
|
|
|
242
242
|
.session-card .status-dot.offline { background: var(--text-dim); }
|
|
243
243
|
.session-card .info { flex: 1; min-width: 0; }
|
|
244
244
|
.session-card .repo { color: var(--blue); font-weight: bold; font-size: 13px; }
|
|
245
|
+
.session-card .session-name { color: var(--text-bright); font-weight: bold; font-size: 14px; }
|
|
245
246
|
.session-card .branch { color: var(--text-dim); font-size: 11px; }
|
|
246
247
|
.session-card .machine { color: var(--text-dim); font-size: 11px; }
|
|
247
248
|
.session-card .arrow { color: var(--text-dim); }
|
|
248
249
|
|
|
250
|
+
/* Grid View (multi-terminal with layout modes) */
|
|
251
|
+
#grid-view {
|
|
252
|
+
flex: 1;
|
|
253
|
+
display: flex;
|
|
254
|
+
flex-direction: column;
|
|
255
|
+
overflow: hidden;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* Grid toolbar */
|
|
259
|
+
.grid-toolbar {
|
|
260
|
+
display: flex;
|
|
261
|
+
gap: 4px;
|
|
262
|
+
padding: 4px 8px;
|
|
263
|
+
background: var(--bg-tool);
|
|
264
|
+
border-bottom: 1px solid var(--border);
|
|
265
|
+
flex-shrink: 0;
|
|
266
|
+
}
|
|
267
|
+
.grid-toolbar button {
|
|
268
|
+
background: var(--bg);
|
|
269
|
+
border: 1px solid var(--border);
|
|
270
|
+
color: var(--text-dim);
|
|
271
|
+
font-family: var(--font);
|
|
272
|
+
font-size: 11px;
|
|
273
|
+
padding: 3px 8px;
|
|
274
|
+
border-radius: 4px;
|
|
275
|
+
cursor: pointer;
|
|
276
|
+
}
|
|
277
|
+
.grid-toolbar button.active {
|
|
278
|
+
border-color: var(--blue);
|
|
279
|
+
color: var(--blue);
|
|
280
|
+
}
|
|
281
|
+
.grid-toolbar .spacer { flex: 1; }
|
|
282
|
+
.grid-toolbar-presets { display: flex; gap: 4px; margin-left: 8px; }
|
|
283
|
+
.grid-toolbar-presets.hidden { display: none; }
|
|
284
|
+
|
|
285
|
+
/* Grid content area */
|
|
286
|
+
#grid-content {
|
|
287
|
+
flex: 1;
|
|
288
|
+
overflow: hidden;
|
|
289
|
+
min-height: 0;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* Thumbnail mode */
|
|
293
|
+
#grid-content.mode-thumbnails {
|
|
294
|
+
display: flex;
|
|
295
|
+
flex-wrap: wrap;
|
|
296
|
+
gap: 8px;
|
|
297
|
+
padding: 8px;
|
|
298
|
+
align-content: flex-start;
|
|
299
|
+
overflow-y: auto;
|
|
300
|
+
}
|
|
301
|
+
.grid-panel.thumbnail {
|
|
302
|
+
width: 280px;
|
|
303
|
+
height: 200px;
|
|
304
|
+
border: 1px solid var(--border);
|
|
305
|
+
border-radius: 6px;
|
|
306
|
+
cursor: pointer;
|
|
307
|
+
overflow: hidden;
|
|
308
|
+
flex-shrink: 0;
|
|
309
|
+
}
|
|
310
|
+
.grid-panel.thumbnail:hover {
|
|
311
|
+
border-color: var(--blue);
|
|
312
|
+
}
|
|
313
|
+
.grid-panel.thumbnail .grid-panel-terminal {
|
|
314
|
+
overflow: hidden;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* Tmux mode */
|
|
318
|
+
#grid-content.mode-tmux {
|
|
319
|
+
display: grid;
|
|
320
|
+
gap: 2px;
|
|
321
|
+
background: var(--border);
|
|
322
|
+
}
|
|
323
|
+
.grid-panel.active {
|
|
324
|
+
outline: 2px solid var(--blue);
|
|
325
|
+
outline-offset: -2px;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
/* Focus mode */
|
|
329
|
+
#grid-content.mode-focus {
|
|
330
|
+
display: flex;
|
|
331
|
+
flex-direction: column;
|
|
332
|
+
}
|
|
333
|
+
.grid-panel.focus-main {
|
|
334
|
+
flex: 1;
|
|
335
|
+
min-height: 0;
|
|
336
|
+
}
|
|
337
|
+
.grid-panel.focus-main .grid-panel-header {
|
|
338
|
+
background: var(--blue);
|
|
339
|
+
}
|
|
340
|
+
.grid-panel.focus-main .grid-panel-name {
|
|
341
|
+
color: #fff;
|
|
342
|
+
}
|
|
343
|
+
.focus-strips {
|
|
344
|
+
display: flex;
|
|
345
|
+
flex-shrink: 0;
|
|
346
|
+
overflow-x: auto;
|
|
347
|
+
}
|
|
348
|
+
.grid-panel.focus-strip {
|
|
349
|
+
height: 80px;
|
|
350
|
+
cursor: pointer;
|
|
351
|
+
border-top: 1px solid var(--border);
|
|
352
|
+
flex: 1;
|
|
353
|
+
min-width: 120px;
|
|
354
|
+
}
|
|
355
|
+
.grid-panel.focus-strip:hover {
|
|
356
|
+
background: var(--bg-tool);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/* Fullscreen mode */
|
|
360
|
+
#grid-content.mode-fullscreen {
|
|
361
|
+
display: flex;
|
|
362
|
+
flex-direction: column;
|
|
363
|
+
position: relative;
|
|
364
|
+
}
|
|
365
|
+
.grid-panel.fullscreen {
|
|
366
|
+
flex: 1;
|
|
367
|
+
min-height: 0;
|
|
368
|
+
}
|
|
369
|
+
.back-to-grid {
|
|
370
|
+
position: absolute;
|
|
371
|
+
top: 4px;
|
|
372
|
+
right: 8px;
|
|
373
|
+
background: var(--bg-tool);
|
|
374
|
+
border: 1px solid var(--border);
|
|
375
|
+
color: var(--text-dim);
|
|
376
|
+
font-family: var(--font);
|
|
377
|
+
font-size: 11px;
|
|
378
|
+
padding: 3px 8px;
|
|
379
|
+
border-radius: 4px;
|
|
380
|
+
cursor: pointer;
|
|
381
|
+
z-index: 10;
|
|
382
|
+
}
|
|
383
|
+
.back-to-grid:hover {
|
|
384
|
+
border-color: var(--blue);
|
|
385
|
+
color: var(--blue);
|
|
386
|
+
}
|
|
387
|
+
.grid-panel {
|
|
388
|
+
display: flex;
|
|
389
|
+
flex-direction: column;
|
|
390
|
+
background: var(--bg);
|
|
391
|
+
overflow: hidden;
|
|
392
|
+
min-height: 0;
|
|
393
|
+
}
|
|
394
|
+
.grid-panel-header {
|
|
395
|
+
display: flex;
|
|
396
|
+
align-items: center;
|
|
397
|
+
gap: 6px;
|
|
398
|
+
padding: 3px 8px;
|
|
399
|
+
background: var(--bg-tool);
|
|
400
|
+
border-bottom: 1px solid var(--border);
|
|
401
|
+
flex-shrink: 0;
|
|
402
|
+
cursor: pointer;
|
|
403
|
+
font-size: 11px;
|
|
404
|
+
}
|
|
405
|
+
.grid-panel-header:hover { background: var(--border); }
|
|
406
|
+
.grid-panel-name { color: var(--blue); font-weight: bold; }
|
|
407
|
+
.grid-panel-machine { color: var(--text-dim); flex: 1; }
|
|
408
|
+
.grid-panel-status { font-size: 8px; color: var(--yellow); }
|
|
409
|
+
.grid-panel-terminal {
|
|
410
|
+
flex: 1;
|
|
411
|
+
overflow: hidden;
|
|
412
|
+
}
|
|
413
|
+
.grid-panel-terminal .xterm {
|
|
414
|
+
height: 100%;
|
|
415
|
+
padding: 2px;
|
|
416
|
+
}
|
|
417
|
+
|
|
249
418
|
/* Scrollbar */
|
|
250
419
|
::-webkit-scrollbar { width: 6px; }
|
|
251
420
|
::-webkit-scrollbar-track { background: transparent; }
|