Soul-Brews-Studio

Jsonl Liveness — Design skill for Claude Code

Design community

Read-only live Claude JSONL sessions: Bun CLI/TUI, React + Tailwind web popup, time-first change checks.

How to install Jsonl Liveness

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Soul-Brews-Studio/jsonl-liveness and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Jsonl Liveness does

Read-only live Claude JSONL sessions: Bun CLI/TUI, React + Tailwind web popup, time-first change checks.

Alternatives in Design

Tokenicode — A Claude Code GUI — Tauri 2 + React 19 + TypeScript + Tailwind CSS 4 436 ★
Claude Code UI — A real-time dashboard for monitoring Claude Code sessions across multiple projects 383 ★
Design Framework — Convert HTML/CSS design output to framework-specific component code 309 ★

README

JSONL liveness

Standalone Bun + TypeScript CLI and live web app. The scanner/TUI have no third-party runtime dependencies. The browser now uses **React + Tailwind**, explicitly requested after the original zero-dependency lab.

[![Deploy frontend to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https%3A%2F%2Fgithub.com%2FSoul-Brews-Studio%2Fjsonl-liveness)

Timestamp meanings

**File updated** is the filesystem modification time, not the time a message was sent. Each recent-message preview shows its own **Message** timestamp; the popup also shows **Last recorded event**. All are displayed in local time. A later file write does not prove a new chat message arrived or that an agent is working.

See it live

The home table puts the latest recorded messages first. A newly arrived or changed message briefly fades its highlight and New badge in, then out; file touches and alias changes do not. Click a session row to open its **live popup**. Complete messages refresh every **2 seconds**; choose **Newest first** or **Jump to latest** to follow activity.

![Live session popup with newest-first messages and Van Gogh theme](tutorials/images/03-live-append.png)

Timeline: one table, no popup

Open **Timeline**, or go directly to `http://127.0.0.1:47881/?view=timeline`. Each event gets its own comfortable multiline row with **project/directory**, **recorded date/time**, **session ID**, and **message or tool text**. Multiple rows can belong to the same session. Content is readable inline: no session popup, sidebar, or extra click is required.

All projects or one exact project; search messages, names, IDs and paths.
New events → At the top is the default: new arrivals appear above existing rows. Choose At the bottom for a downward stream. New rows fade their highlight and New badge in, then back out; Reduce Motion disables the animation. Existing rows do not animate on every poll.
**Events