SessionHub - Интерактивные функции

Дата: 2025-12-29
Версия: 1.1.0

Добавлены три кнопки на каждой карточке сессии

1. ℹ️ Инфо

Назначение: Просмотр краткой информации о сессии

Как работает:
- Нажатие кнопки "Инфо" → открывается полноэкранный просмотр
- Вызывается API: GET /api/sessions/{id}
- Использует session_extract.py для получения выжимки сессии
- Показывает: проект, описание, основные темы

Реализация:

openInfo(session) {
    this.viewMode = 'info';
    fetch(`/api/sessions/${session.id}`)
        .then(data => this.sessionInfo = data.content);
}

Backend:

@app.get("/api/sessions/{session_id}")
async def get_session_details(session_id: int):
    # Вызов session_extract.py
    # Возврат выжимки сессии

2. 📜 История

Назначение: Просмотр полной истории диалога сессии

Как работает:
- Нажатие кнопки "История" → открывается полноэкранный просмотр
- Вызывается API: GET /api/sessions/{id}/history
- Показывает: проект, описание, время, статус
- (В будущем: полная история сообщений)

Реализация:

openHistory(session) {
    this.viewMode = 'history';
    fetch(`/api/sessions/${session.id}/history`)
        .then(data => this.sessionHistory = data.history);
}

Backend:

@app.get("/api/sessions/{session_id}/history")
async def get_session_history(session_id: int):
    # Поиск файла сессии
    # Возврат истории (сейчас: заглушка с базовой информацией)

TODO: Реализовать чтение полного файла сессии из /tmp/claude-code-*/

3. 💻 Терминал

Назначение: Интерактивное подключение к сессии

Как работает:
- Нажатие кнопки "Терминал" → открывается терминал
- Устанавливается WebSocket соединение: wss://sessions.0kt.ru/ws/chat/{id}
- Пользователь может вводить команды
- Сообщения отображаются с цветовой подсветкой:
- 🔵 User (синий) - команды пользователя
- 🟣 Assistant (фиолетовый) - ответы Claude
- 🟡 System (жёлтый) - системные сообщения

Реализация:

openTerminal(session) {
    this.viewMode = 'terminal';
    const wsUrl = `wss://${window.location.host}/ws/chat/${session.id}`;
    this.terminalWs = new WebSocket(wsUrl);

    this.terminalWs.onmessage = (event) => {
        const data = JSON.parse(event.data);
        this.addTerminalMessage(data.type, data.sender, data.text);
    };
}

sendTerminalCommand() {
    this.terminalWs.send(this.terminalInput);
    this.addTerminalMessage('user', 'You', this.terminalInput);
}

Backend:

@app.websocket("/ws/chat/{session_id}")
async def websocket_chat(websocket: WebSocket, session_id: int):
    await websocket.accept()

    # Сейчас: эхо-режим (заглушка)
    # TODO: Интеграция с Claude API для отправки команд в сессию

TODO: Реализовать отправку команд в активную сессию Claude

UI/UX

Навигация

• Назад: Кнопка "←" в заголовке каждого режима
• Закрытие: Вызов closeView() → возврат к списку сессий
• WebSocket: Автоматическое закрытие соединения при выходе из терминала

Стили

• Info/History: Белый фон, чёрный текст, шрифт моноширинный для логов
• Terminal: Тёмная тема (фон #1e1e1e, текст #d4d4d4), моноширинный шрифт
• Кнопки: Цветовая кодировка (синий=info, фиолетовый=history, зелёный=terminal)

Адаптивность

• Полноэкранные режимы на мобильных
• Автоскролл в терминале при новых сообщениях
• Автофокус на input в терминале

Архитектура

Frontend (Alpine.js)

{
    // Режимы просмотра
    viewMode: null,           // 'info' | 'history' | 'terminal'
    currentSession: null,
    sessionInfo: '',
    sessionHistory: '',

    // Терминал
    terminalMessages: [],
    terminalInput: '',
    terminalWs: null,

    // Методы
    openInfo(session),
    openHistory(session),
    openTerminal(session),
    sendTerminalCommand(),
    closeView()
}

Backend (FastAPI)

GET  /api/sessions                   → Список сессий
GET  /api/sessions/{id}              → Информация о сессии
GET  /api/sessions/{id}/history      → История сессии
WS   /ws/chat/{id}                   → WebSocket для терминала
POST /api/sessions/{id}/resume       → Возобновить сессию

Следующие шаги

Приоритет 1: Полная история

• [ ] Найти файлы сессий в /tmp/claude-code-*/
• [ ] Парсить markdown файлы сессий
• [ ] Извлекать сообщения (user/assistant/system)
• [ ] Форматировать для отображения

Приоритет 2: Рабочий терминал

• [ ] Интеграция с Claude API
• [ ] Отправка команд в активную сессию
• [ ] Получение ответов в реальном времени
• [ ] Поддержка команд: list, info, continue, close

Приоритет 3: Улучшения UX

• [ ] Поиск по сессиям
• [ ] Фильтр по проектам
• [ ] Пагинация списка
• [ ] Экспорт истории в файл

Доступ

URL: https://sessions.0kt.ru

API:
- GET /api/sessions - список сессий
- GET /api/sessions/1 - информация о сессии #1
- GET /api/sessions/1/history - история сессии #1

Порт: 8093 (внутренний)
Сервис: systemctl status sessionhub

Статус: ✅ MVP ГОТОВ (info + history + terminal UI)