ASCII-дашборды вместо веб-интерфейсов
Три слова в терминале. Через две секунды — воронка, конверсия, источники трафика.
Без браузера. Без ожидания загрузки.
Контекст
У меня есть Next.js дашборд для Telegram-бота кружка. Графики. Таблицы. Фильтры. Всё красивое.
Проблема: чтобы глянуть сколько оплат за день — надо запустить npm run dev, открыть браузер, найти нужную страницу. Минута на то, что можно узнать за секунду.
Терминал с Claude Code и так открыт. Почему бы не спросить здесь?
Промпт → результат
Написал:
Агент сам нашёл .env с подключением к Railway PostgreSQL. Написал запросы к таблицам users, bookings, events. Вывел в терминал.
Данные есть. Но выглядит как простыня текста.
Попросил красивее:
Получил это:
╔══════════════════════════════════╦══════════════════════════════════╗
║ ▼ ВОРОНКА ▼ ║ ▼ ПО ДНЯМ ▼ ║
╠══════════════════════════════════╬══════════════════════════════════╣
║ ║ Дата │ Новые │ Заявки │ Start ║
║ Start ████████████████ 78 ║ ────────┼───────┼────────┼────── ║
║ VC view ████████████░░░░ 58 ║ 12.01 │ 17 │ 16 │ 24 ║
║ Заявка █████████████░░░ 61 ║ 13.01 │ 14 │ 32 │ 20 ║
║ Оплата █░░░░░░░░░░░░░░░ 2 ║ 14.01 │ 20 │ 15 │ 31 ║
║ ║ 15.01 │ 10 │ 8 │ 15 ║
║ CR: 2.5% ║ 16.01 │ 11 │ 2 │ 12 ║
╠══════════════════════════════════╬══════════════════════════════════╣
║ ▼ ТОП СОБЫТИЙ ▼ ║ ▼ ИСТОЧНИКИ ▼ ║
╠══════════════════════════════════╬══════════════════════════════════╣
║ vc_screen ██████████████ 209║ yt-guide-opencode ███████████ 23║
║ start_command ███████░░░░░░░ 102║ workshop-skills ██░░░░░░░░░ 3║
║ booking █████░░░░░░░░░ 73║ (органика) ░░░░░░░░░░ ~52║
╚══════════════════════════════════╩══════════════════════════════════╝
Реальные данные 9-го потока курса. 78 стартов бота, 2 оплаты, конверсия 2.5%. Две колонки, прогресс-бары из блоков █ и ░. Рамки из юникода.
Почему две колонки
Терминал обычно 80-120 символов в ширину. Одна колонка — половина пустая. Две — информация плотнее.
Посмотрел как делают WTF Dashboard и blessed-contrib. Там grid-системы с координатами виджетов. Для моих целей — перебор. Достаточно фиксированной ширины: 35 + 35 символов, рамка между ними.
Box drawing
Юникод-символы для рамок:
╔═╗ ┌─┐ ╭─╮
║ ║ │ │ │ │
╚═╝ └─┘ ╰─╯
Двойные линии ═║ для внешней рамки. Одинарные ─│ для внутренних разделителей. Агент знает какие где использовать — я не указывал.
Скилл
Каждый раз объяснять «найди .env, подключись к базе, выведи метрики» — лишнее. Создал скилл за 5 минут:
Агент написал TypeScript-скрипт: 70 строк, подключение к PostgreSQL, SQL-запросы, форматирование. Теперь вызываю одной командой /hsl-stream-analytics.
Когда это работает
Для быстрой проверки — идеально. Утром открыл терминал, спросил «стата по боту», увидел что вчера было 15 новых юзеров и 5 заявок.
Для глубокого анализа — веб-дашборд. Там графики за 30 дней, фильтры по потокам, детали по каждому юзеру.
ASCII-дашборд не замена. Дополнение. Быстрый снэпшот когда не хочется переключаться из терминала.
Источники
- WTF Dashboard — Grid Layout
- awesome-tuis — коллекция TUI-приложений
- lipgloss — стилизация терминала
- sampler — визуализация shell-команд
Подписаться на обновления — @sereja_tech