README.ru.md

Просто кликни — ничего устанавливать или собирать не нужно.

English · Русский · Español · Français · 中文 · العربية

Claude Code Chat Viewer

HTML-вьюер для транскриптов сессий Claude Code в формате JSONL. Открывается в браузере, без сервера, без сборки, одна локальная зависимость. Работает офлайн из коробки.

Зачем

Claude Code пишет каждую сессию в ~/.claude/projects/<project>/<session-uuid>.jsonl — одна строка = одна запись (сообщение пользователя, ответ модели, thinking, tool_use, tool_result, attachment и т.д.). Сырой файл нечитаем; встроенные команды вроде /resume показывают диалог, но не дают его экспортировать или разобрать post-mortem.

Этот вьюер превращает такой .jsonl в читаемую ленту с раскраской по ролям, сворачиваемыми service-блоками (thinking / tools / results) и фильтрами.

Что показывает

• user (синий) — реальные сообщения пользователя
• assistant (зелёный) — текстовые ответы Claude
• thinking (фиолетовый) — extended thinking, свёрнут по умолчанию
• tool_use (жёлтый) — вызовы инструментов с превью аргументов
• tool_result (голубой / красный для ошибок) — ответы инструментов
• meta / task-note (жёлтый) — системные инъекции и <task-notification> от субагентов
• system / attachment / ui-state — служебные записи (по умолчанию скрыты)

Каждый блок — отдельная строка с цветной полоской слева. Никаких пузырей мессенджера: это лог, а не чат.

Как открыть

Выбирай, что удобнее:

A. Скачать один файл — самый простой путь. Возьми готовый HTML из последнего релиза, двойной клик. Один файл, работает офлайн навсегда.

B. Склонировать репо — если хочешь ковырять код. Нужны index.html + папка lib/.

C. Открыть онлайн — просто зайди на https://hitmman55.github.io/claude-code-chat-viewer/. Ничего качать не надо.

Когда страница откроется, нажми «Выбрать файл» (или перетащи файл, или жми «Открыть пример») и укажи .jsonl транскрипт.

Транскрипты Claude Code лежат в:

~/.claude/projects/<project-slug>/<session-uuid>.jsonl

где <project-slug> — ваш рабочий каталог с заменёнными / на -. Пример: /home/user/myproj → -home-user-myproj.

Возможности

Как загрузить файл

• Выбор файла — кнопка «Выбрать файл», указать .jsonl.
• Drag-and-drop — перетащи файл в любое место страницы. Пунктирная обводка показывает зону. Папки и не-файлы отклоняются с сообщением.
• «Открыть пример» — в пустом состоянии (при онлайн-запуске) появляется кнопка, которая грузит встроенный demo.jsonl — маленький пример со всеми типами блоков.

Удобство чтения

• Режим чтения — тумблер в шапке: скрывает всё кроме реальных сообщений пользователя и текстовых ответов ассистента. Без thinking, без tool-вызовов, без служебных записей. Чистый взгляд на диалог.
• Копирование на каждом сообщении — кнопка 📋 в шапке entry. Копирует текст в буфер, на 1.2 сек появляется ✓ в подтверждение. Работает через navigator.clipboard.writeText с fallback на document.execCommand для file://.
• Дружелюбные названия инструментов — известные тулзы получают иконки (например 📖 Read file, 🖥️ Shell, 📝 Edit file). Неизвестные / MCP → 🔧 {raw_name}.
• Авто-тема — следует системной prefers-color-scheme по умолчанию. Клик по кнопке солнце/луна пинит выбор и запоминает его.
• Шесть языков интерфейса — English, Русский, Español, Français, 中文, العربية. Арабский автоматически переключается в RTL. Селектор в шапке.

Производительность и безопасность

• Потоковый парсинг — .jsonl читается через file.stream() + TextDecoderStream, не грузится в память целиком.
• Нативная виртуализация — content-visibility: auto на каждой записи: браузер сам пропускает layout и paint для записей вне вьюпорта. Работает с тысячами записей без лагов.
• Чанковая отрисовка — по 500 записей за раз, кнопка «Показать ещё» для остальных.
• Фильтры — пять чекбоксов (thinking / tools / results / system / ui-state), включают/выключают категории через CSS-класс на контейнере (без reflow всего DOM).
• XSS-безопасный рендер — каждый текстовый блок экранируется до передачи в markdown-парсер. Markdown-картинки нейтрализуются (показываются как инертный текст, не загружаются). Ссылки ограничены http(s) с rel="noopener noreferrer nofollow".
• Ограничение размера — прозаические блоки обрезаются на 20 KB, service-блоки на 5 KB. Операции копирования наследуют эти лимиты — страница никогда не отправляет в буфер мегабайты текста и не может подвесить браузер.
• Fallback для .json — если файл не JSONL, а обычный JSON-массив/объект, парсится как массив записей.

Требования к браузеру

• Chrome / Edge 85+
• Safari 18+
• Firefox 125+

Всё это нужно для content-visibility: auto. На старых браузерах вьюер откроется, но скролл на больших файлах будет ощутимо медленнее.

Зависимости

Одна, локально в папке lib/:

• marked — markdown → HTML (~35 KB)

Никаких CDN, сетевых запросов, Subresource Integrity. Клонируй и запускай.

Приватность

Всё работает локально в браузере. Сам вьюер не делает автоматических сетевых запросов — ни CDN, ни аналитики, ни удалённых шрифтов. Markdown-картинки из транскриптов нейтрализуются: показываются как инертный текст с видимым URL, но не загружаются. Внешние ссылки (только http(s)) открываются в новой вкладке только по клику, с rel="noopener noreferrer nofollow". Транскрипты остаются на вашей машине.

Известные ограничения

• Файлы больше ~100 MB — требуют архитектуры с индексацией по line-offsets и подгрузкой окон (пока не реализовано).
• Экспорта в Markdown/HTML нет (задача — просмотр, не конвертация).
• Подсветки синтаксиса в code-блоках нет (сознательно — чтобы минимизировать зависимости).

Разработка

Весь код в одном HTML-файле. Править можно прямо в нём — стили в <style>, логика в <script>, переводы в объекте I18N в начале скрипта.

Проверка синтаксиса JS без браузера:

sed -n '/^<script>$/,/^<\/script>$/p' index.html | sed '1d;$d' | node --check /dev/stdin

Лицензия

Unlicense — public domain. Используйте как угодно, указание авторства не требуется.