cli-tunnel 1.2.0-beta.9 → 1.2.1-beta.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 +172 -60
- package/dist/redact.d.ts +1 -0
- package/dist/redact.js +26 -0
- package/package.json +7 -5
- package/remote-ui/app.js +388 -77
- package/remote-ui/index.html +10 -10
- package/remote-ui/styles.css +131 -3
package/remote-ui/styles.css
CHANGED
|
@@ -247,15 +247,143 @@ header {
|
|
|
247
247
|
.session-card .machine { color: var(--text-dim); font-size: 11px; }
|
|
248
248
|
.session-card .arrow { color: var(--text-dim); }
|
|
249
249
|
|
|
250
|
-
/* Grid View (
|
|
250
|
+
/* Grid View (multi-terminal with layout modes) */
|
|
251
251
|
#grid-view {
|
|
252
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 {
|
|
253
319
|
display: grid;
|
|
254
320
|
gap: 2px;
|
|
255
|
-
padding: 2px;
|
|
256
|
-
overflow: hidden;
|
|
257
321
|
background: var(--border);
|
|
258
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
|
+
}
|
|
259
387
|
.grid-panel {
|
|
260
388
|
display: flex;
|
|
261
389
|
flex-direction: column;
|