User Guide

Chat

Real-time conversations with Claude, with tool-use visualization and streaming

Chat

The Chat page gives you a full-screen interface for conversing with Claude. Messages are streamed in real time over a WebSocket connection, and you can see exactly what tools Claude is using as it works.

Layout

The page follows a two-panel layout:

  • Left panel -- A collapsible, resizable conversation list sidebar.
  • Main panel -- The active conversation with a message area and input bar.

On mobile, the sidebar is hidden and a "new conversation" button appears in the navbar.

Conversations

Starting a New Conversation

Click the New button at the top of the sidebar (or in the mobile navbar) to start a fresh conversation. Your first message will create the conversation and it will appear in the sidebar list.

Switching Conversations

Click any conversation in the sidebar to load its message history. The conversation title updates in the navbar to show which one is active.

Deleting Conversations

Each conversation in the sidebar has a delete action. Deleting a conversation removes it from the list. If you delete the active conversation, the interface resets to a blank "start a conversation" state.

Sending Messages

Type your message in the text area at the bottom of the screen and press Enter to send (use Shift+Enter for a new line). The input automatically expands as you type, up to a reasonable height.

The send button is disabled when:

  • The WebSocket is not connected.
  • Claude is currently streaming a response.
  • The input is empty.

Streaming Responses

When Claude responds, you will see:

  1. A "Streaming" badge in the navbar.
  2. Text appearing incrementally in a message bubble as Claude generates it.
  3. A pulsing "Thinking..." indicator while the response is in progress.
  4. Rendered markdown in real time (headings, lists, code blocks, etc.).

Tool Use

Claude can use tools during a conversation (reading files, running commands, searching the web, etc.). When this happens, you will see tool call blocks inline in the streaming message:

  • A spinning icon and the tool name while the tool is running.
  • A "running" badge during execution.
  • The tool result (or an "error" badge if it failed) once complete.
  • Click on a tool call block to expand and see the truncated output.

Tools are displayed with recognizable icons -- for example, a file icon for Read, a terminal icon for Bash, and a search icon for Grep.

Interrupting

While Claude is streaming, the send button changes to a red stop button. Click it to interrupt the current response. Any partial text that has been generated will be preserved as a message in the conversation.

Cost Tracking

Each assistant message records its cost and duration. This data feeds into the Usage analytics page. For per-conversation cost details, see API Reference.

Connection Status

The input area shows a connection indicator when the WebSocket is not connected:

  • Connecting... -- The client is attempting to establish a connection.
  • Disconnected -- The connection was lost. The client will automatically retry up to 5 times with increasing delays.

The Chat page uses the same Claude integration that powers the Assistant Panel on other pages. For details on how Claude is configured with skills, hooks, and memory, see the Claude Integration section.