www/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Claude Code</title>
  <link rel="stylesheet" href="/xterm.css" />
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #1e1e1e;
      overflow: hidden;
    }
    #terminal-wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 48px;
    }
    #terminal {
      width: 100%;
      height: 100%;
    }
    #toolbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      display: flex;
      background: #2d2d2d;
      border-top: 1px solid #444;
      z-index: 1000;
    }
    #toolbar button {
      flex: 1;
      background: #2d2d2d;
      color: #e0e0e0;
      border: none;
      border-right: 1px solid #444;
      font-size: 13px;
      font-family: monospace;
      padding: 0;
      -webkit-tap-highlight-color: rgba(255,255,255,0.2);
    }
    #toolbar button:last-child {
      border-right: none;
    }
    #toolbar button:active {
      background: #454545;
    }
  </style>
</head>
<body>
  <div id="terminal-wrap">
    <div id="terminal"></div>
  </div>
  <div id="toolbar">
    <button data-key="Escape">Esc</button>
    <button data-key="Tab">Tab</button>
    <button data-key="ArrowUp">↑</button>
    <button data-key="ArrowDown">↓</button>
    <button data-key="ArrowLeft">←</button>
    <button data-key="ArrowRight">→</button>
    <button data-key="ctrl-c">^C</button>
    <button data-key="ctrl-r">^R</button>
  </div>

  <script src="/xterm.js"></script>
  <script>
    // ttyd's default client script is loaded separately via /ttyd.js normally,
    // but since we're overriding index.html we hook into the same websocket
    // logic ttyd expects, then bind our toolbar to xterm's key input.
    document.addEventListener('DOMContentLoaded', function () {
      var checkReady = setInterval(function () {
        if (window.term) {
          clearInterval(checkReady);
          bindToolbar(window.term);
        }
      }, 100);
    });

    function bindToolbar(term) {
      var keyMap = {
        'Escape': '\x1b',
        'Tab': '\t',
        'ArrowUp': '\x1b[A',
        'ArrowDown': '\x1b[B',
        'ArrowLeft': '\x1b[D',
        'ArrowRight': '\x1b[C',
        'ctrl-c': '\x03',
        'ctrl-r': '\x12'
      };

      document.querySelectorAll('#toolbar button').forEach(function (btn) {
        btn.addEventListener('touchstart', function (e) {
          e.preventDefault();
          var seq = keyMap[btn.dataset.key];
          if (seq && term._core && term._core.coreService) {
            term._core.coreService.triggerDataEvent(seq, true);
          }
        }, { passive: false });

        btn.addEventListener('click', function (e) {
          var seq = keyMap[btn.dataset.key];
          if (seq && term._core && term._core.coreService) {
            term._core.coreService.triggerDataEvent(seq, true);
          }
        });
      });
    }
  </script>
</body>
</html>