Lanterm: PTY-терминалы в вебе без оверкилла

Последние полгода я замечаю странный тренд: воркфлоу с AI-ассистентами и браузерными IDE всё чаще требуют настоящих терминалов внутри интерфейса. Не эмуляторов вроде xterm.js, а полноценных PTY-сессий с возможностью кастомизации. Проблема в том, что существующие решения работают по принципу «всё или ничего».

Почему ttyd не всегда подходит

Когда я впервые попробовал встроить терминал в свой pet-project с код-ассистентом, стандартный путь выглядел так:

1. Ставим ttyd или аналог
2. Прокидываем WebSocket
3. Получаем терминал в iframe или отдельной вкладке

Но в моем случае нужно было:

• Взаимодействие с соседними компонентами (например, подсказки AI на основе вывода в терминал)
• Кастомные хоткеи поверх bash/zsh
• Логирование сессий для последующего анализа

ttyd отлично справляется с задачей «дайте мне полноценный терминал в браузере», но становится неудобен, когда терминал — лишь часть сложного интерфейса. Это как использовать целый текстовый редактор только ради одного <textarea>.

Что предлагает Lanterm

Lanterm — это не готовый терминальный сервер, а набор инструментов для сборки своего решения. В отличие от голого xterm.js, он сразу даёт:

• Готовую связку PTY ↔ WebSocket ↔ React-компонент
• Типизированный протокол обмена сообщениями
• Поддержку ресайза и сессионного менеджмента

Пример интеграции:

import { Terminal } from '@lanterm/react';
import { createPtySession } from '@lanterm/server';

function App() {
  const [session, setSession] = useState();

  useEffect(() => {
    const newSession = createPtySession({
      socketUrl: 'ws://localhost:3000/pty',
      onData: (data) => {
        // Хук для анализа вывода
        if (data.includes('git push')) {
          trackGitPush();
        }
      }
    });
    setSession(newSession);
  }, []);

  return (
    <div className="app">
      <Terminal session={session} />
      <SidePanel logs={session?.logs} />
    </div>
  );
}

Где это реально полезно

1. AI coding tools
   Когда ваш ассистент (Copilot, Cody, Codeium) должен не только предлагать код, но и уметь его выполнять. Например, можно:

   • Ловить ошибки компиляции прямо в стриме
   • Автоматически фиксировать изменения после успешного теста
   • Визуализировать выполнение скриптов

2. Education platforms
   Интерактивные туториалы, где терминал — часть учебного интерфейса с подсказками и проверкой заданий.

3. Internal dashboards
   Админки с возможностью запуска обслуживающих скриптов без переключения контекста.

Подводные камни

Lanterm пока сыроват:

• Нет встроенной аутентификации (придётся городить свой middleware для WebSocket)
• Rust-часть (@lanterm/pty) требует сборки под целевые платформы
• API для кастомных keybindings пока в зачаточном состоянии

Если вам нужно просто поднять терминал в браузере — возможно, ttyd всё ещё лучше. Но если терминал должен быть интегрирован в сложный интерфейс с реактивными компонентами, Lanterm сэкономит неделю кастомной разработки.

Для экспериментаторов: попробуйте собрать гибридный интерфейс, где AI-агент управляет терминалом через Lanterm API, а вы контролируете процесс через GUI. Получается странный, но рабочий симбиоз между человеком и машиной.

Попробуй сам: Cursor — AI-редактор для разработчиков.

Источник: https://github.com/ynqa/lanterm