andrew-mart

Claude Code Webview — Development skill for Claude Code

Development community

Watch Claude Code sessions live in your browser, styled like Claude Desktop: file previews, bookmarks, an outline of your prompts, and — with herdr — sending prompts from the page.

How to install Claude Code Webview

This entry records only its repository, not the path inside it, so there is no exact command to give. Open andrew-mart/claude-code-webview and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Code Webview does

Watch Claude Code sessions live in your browser, styled like Claude Desktop: file previews, bookmarks, an outline of your prompts, and — with herdr — sending prompts from the page.

Alternatives in Development

Process Bookmarks — /process-bookmarks 849 ★
Zoetrope — Watch a Claude Code session as a live flow graph, in your terminal or your browser 584 ★
Layrr — A browser coding agent interface for selecting elements and sending instructions directly to Claude Code 264 ★

README

Claude Code Webview

Watch your [Claude Code](https://code.claude.com) sessions live in the browser, laid out the way Claude Desktop shows them: your prompts in bubbles, answers in rendered markdown, tool calls folded into compact rows with diffs and output. Every line Claude Code writes to the session transcript shows up on the page within half a second.

![Claude Code Webview](docs/screenshot.png)

Quick start

The viewer runs from its source. Requires Node.js 22 or newer.

git clone https://github.com/andrew-mart/claude-code-webview.git
cd claude-code-webview
npm install --omit=dev
node bin/claude-code-webview.js

The viewer starts on http://127.0.0.1:7788 and opens in your browser. If it is already running, the command just opens the browser. Press Ctrl+C to stop; `node bin/claude-code-webview.js --background` runs it without a terminal window. To update: `git pull`, `npm install --omit=dev`, then `node bin/claude-code-webview.js --restart`.

What you get

All sessions of every project, newest first, with titles, project folder and age; an orange dot marks a session written to in the last two minutes. "Follow the active session" switches to whichever session was written to last. Sessions that a program drives (claude -p, the Agent SDK) are hidden until you tick "Show SDK sessions".
The feed:
- prompts with images, slash commands and ! shell commands with their output;
- answers in markdown with syntax highlighting;
- thinking with its duration (Claude Code usually does not store the thinking text — then only the duration is shown);
- tool calls as one-line rows that expand: Bash shows the command and output, Read the file with line numbers, Edit and Write a diff with line numbers, Agent its task, report and a live view of the subagent's own transcript;
- markers for interrupts, background task results, context compaction, API errors and turn duration.
Show briefly / Show in detail. Briefly (default) fol