claude-remote-cli 1.0.0 → 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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/public/app.js +24 -0
  3. package/public/index.html +9 -14
  4. package/public/style.css +30 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "claude-remote-cli",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Remote web interface for Claude Code CLI sessions",
5
5
  "type": "module",
6
6
  "main": "dist/server/index.js",
package/public/app.js CHANGED
@@ -720,6 +720,30 @@
720
720
  }
721
721
  });
722
722
 
723
+ // ── Keyboard-Aware Viewport ─────────────────────────────────────────────────
724
+
725
+ (function () {
726
+ if (!window.visualViewport) return;
727
+
728
+ var vv = window.visualViewport;
729
+
730
+ function onViewportResize() {
731
+ var keyboardHeight = window.innerHeight - vv.height;
732
+ if (keyboardHeight > 50) {
733
+ mainApp.style.height = vv.height + 'px';
734
+ } else {
735
+ mainApp.style.height = '';
736
+ }
737
+ if (fitAddon) {
738
+ fitAddon.fit();
739
+ sendResize();
740
+ }
741
+ }
742
+
743
+ vv.addEventListener('resize', onViewportResize);
744
+ vv.addEventListener('scroll', onViewportResize);
745
+ })();
746
+
723
747
  // ── Auto-auth Check ─────────────────────────────────────────────────────────
724
748
 
725
749
  fetch('/sessions')
package/public/index.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
6
6
  <title>Claude Remote CLI</title>
7
7
  <link rel="stylesheet" href="/vendor/xterm.css" />
8
8
  <link rel="stylesheet" href="/style.css" />
@@ -64,21 +64,16 @@
64
64
 
65
65
  <!-- Touch Toolbar -->
66
66
  <div id="toolbar">
67
- <div class="toolbar-row">
68
- <button class="tb-btn" data-key="&#x1b;[D" aria-label="Left arrow">&#8592;</button>
69
- <button class="tb-btn" data-key="&#x1b;[A" aria-label="Up arrow">&#8593;</button>
70
- <button class="tb-btn" data-key="&#x1b;[B" aria-label="Down arrow">&#8595;</button>
71
- <button class="tb-btn" data-key="&#x1b;[C" aria-label="Right arrow">&#8594;</button>
72
- <button class="tb-btn" data-key="&#x0d;" aria-label="Enter">&#9166;</button>
67
+ <div class="toolbar-grid">
68
+ <button class="tb-btn" data-key="&#x09;" aria-label="Tab">Tab</button>
69
+ <button class="tb-btn tb-arrow" data-key="&#x1b;[A" aria-label="Up arrow">&#8593;</button>
70
+ <button class="tb-btn" data-key="&#x1b;[Z" aria-label="Shift+Tab">&#8679;Tab</button>
73
71
  <button class="tb-btn" data-key="&#x1b;" aria-label="Escape">Esc</button>
72
+ <button class="tb-btn tb-arrow" data-key="&#x1b;[D" aria-label="Left arrow">&#8592;</button>
73
+ <button class="tb-btn tb-arrow" data-key="&#x1b;[B" aria-label="Down arrow">&#8595;</button>
74
+ <button class="tb-btn tb-arrow" data-key="&#x1b;[C" aria-label="Right arrow">&#8594;</button>
74
75
  <button class="tb-btn" data-key="&#x03;" aria-label="Ctrl+C">^C</button>
75
- </div>
76
- <div class="toolbar-row">
77
- <button class="tb-btn" data-key="y" aria-label="y">y</button>
78
- <button class="tb-btn" data-key="n" aria-label="n">n</button>
79
- <button class="tb-btn" data-text="/resume&#x0d;" aria-label="/resume">/resume</button>
80
- <button class="tb-btn" data-text="/clear&#x0d;" aria-label="/clear">/clear</button>
81
- <button class="tb-btn" data-key="&#x1b;[Z" aria-label="Shift+Tab">&#8679;Tab</button>
76
+ <button class="tb-btn tb-enter" data-key="&#x0d;" aria-label="Enter">&#9166;</button>
82
77
  </div>
83
78
  </div>
84
79
  </div>
package/public/style.css CHANGED
@@ -105,6 +105,7 @@ html, body {
105
105
  flex-direction: row;
106
106
  width: 100%;
107
107
  height: 100vh;
108
+ height: 100dvh;
108
109
  overflow: hidden;
109
110
  }
110
111
 
@@ -416,38 +417,36 @@ html, body {
416
417
 
417
418
  /* ===== Touch Toolbar ===== */
418
419
  #toolbar {
419
- display: flex;
420
- flex-direction: column;
421
- gap: 4px;
422
- padding: 6px 4px;
420
+ flex-shrink: 0;
423
421
  background: var(--surface);
424
422
  border-top: 1px solid var(--border);
425
- flex-shrink: 0;
423
+ padding: 6px 4px;
424
+ padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
426
425
  }
427
426
 
428
- .toolbar-row {
429
- display: flex;
430
- flex-direction: row;
427
+ .toolbar-grid {
428
+ display: grid;
429
+ grid-template-columns: 1fr 1fr 1fr 1fr;
430
+ grid-template-rows: auto auto auto;
431
431
  gap: 4px;
432
+ max-width: 400px;
433
+ margin: 0 auto;
432
434
  }
433
435
 
434
436
  .tb-btn {
435
- flex: 1;
436
- padding: 12px 4px;
437
+ padding: 14px 4px;
437
438
  background: var(--bg);
438
439
  border: 1px solid var(--border);
439
440
  border-radius: 6px;
440
441
  color: var(--text);
441
- font-size: 0.8rem;
442
+ font-size: 0.85rem;
442
443
  font-family: monospace;
443
444
  cursor: pointer;
444
445
  touch-action: manipulation;
445
446
  -webkit-tap-highlight-color: transparent;
446
447
  text-align: center;
447
448
  white-space: nowrap;
448
- overflow: hidden;
449
- text-overflow: ellipsis;
450
- min-width: 0;
449
+ min-height: 44px;
451
450
  }
452
451
 
453
452
  .tb-btn:active {
@@ -456,6 +455,16 @@ html, body {
456
455
  color: #fff;
457
456
  }
458
457
 
458
+ .tb-btn.tb-arrow {
459
+ font-size: 1.1rem;
460
+ }
461
+
462
+ /* Enter button: bottom-right cell only */
463
+ .tb-btn.tb-enter {
464
+ grid-column: 4;
465
+ grid-row: 3;
466
+ }
467
+
459
468
  /* ===== Dialog ===== */
460
469
  dialog#new-session-dialog {
461
470
  background: var(--surface);
@@ -783,8 +792,13 @@ dialog#settings-dialog h2 {
783
792
  }
784
793
 
785
794
  .tb-btn {
786
- padding: 14px 2px;
787
- font-size: 0.75rem;
795
+ padding: 16px 2px;
796
+ font-size: 0.8rem;
797
+ min-height: 48px;
798
+ }
799
+
800
+ .tb-btn.tb-arrow {
801
+ font-size: 1.2rem;
788
802
  }
789
803
  }
790
804