Back to Vibe Kanban

Chat Interface

docs/workspaces/chat-interface.mdx

0.1.09.5 KB
Original Source
<Frame> </Frame>

The chat interface is your primary way of communicating with coding agents. It supports rich message formatting, file attachments, approval workflows, and multiple conversation sessions.

Message Types

The chat displays different types of messages, each with distinct styling:

User Messages

Your messages appear with an edit option. Click the pencil icon to modify and resend a message.

Agent Messages

Agent responses are rendered with full markdown support, including:

  • Code blocks with syntax highlighting
  • Tables and lists
  • Links and formatted text

System Messages

Informational messages from the system, such as model initialisation or status updates.

Error Messages

Error messages appear in red with a warning icon. Click to expand and see full error details.

Chat Input

Writing Messages

<Frame> </Frame>

The chat input supports rich text editing:

  • Bold - Cmd/Ctrl + B or click B
  • Italic - Cmd/Ctrl + I or click I
  • Underline - Cmd/Ctrl + U or click U
  • Strikethrough - Click S
  • Code - Click the code button or wrap with backticks

Attaching Images

<Frame> </Frame>

You can attach images to your messages:

  1. Click the attachment button (paperclip icon) in the toolbar
  2. Drag and drop images directly into the chat
  3. Images are uploaded and referenced in your message
<Tip> Attach screenshots to show the agent exactly what you're working on or what issue you're experiencing. </Tip>

File Mentions

<Frame> </Frame>

Type @ to mention files from your repository. The chat provides typeahead suggestions showing:

  • Filename in bold
  • Full path below each file
  • Matches update as you type

Select a file to include it as context for the agent.

Sending Messages

Send Actions

ActionShortcutDescription
SendCmd/Ctrl + EnterSend message immediately
QueueClick Queue buttonQueue message while agent is running
StopClick Stop buttonStop the current agent execution

Execution States

<Frame> </Frame>

The chat interface shows different states:

StateDescription
IdleReady to send a new message
RunningAgent is actively working
QueuedYour message is queued for when agent finishes
SendingMessage is being sent
<Info> When the agent is running, you can queue a follow-up message instead of waiting for it to finish. </Info>

Agent Selection

Choosing an Agent

Select which coding agent to use from the Agent dropdown in the chat toolbar. Available agents depend on your configuration.

Variants

<Frame> </Frame>

Some agents support different variants or profiles. Use the variant selector to choose:

  • Different model configurations
  • Custom system prompts
  • Specialised behaviours

Click Customise to configure agent settings.

Approval Workflow

Some agents (especially with planning mode enabled) ask for your approval before making changes. This gives you control over what gets implemented.

Why Approvals Exist

  • Prevent unwanted changes - Review the plan before code is written
  • Catch misunderstandings early - Ensure the agent understood your request
  • Guide the approach - Steer the agent toward your preferred solution

Reviewing Plans

When the agent needs approval, you'll see an approval card in the chat:

  1. Read the plan summary - What the agent intends to do
  2. Expand for details - Click to see the full plan with specific files and changes
  3. Choose an action:
    • Approve - Agent proceeds with the plan
    • Request Changes - Provide feedback for revision

Requesting Changes

If the plan isn't quite right:

  1. Type your feedback in the chat input explaining what should be different
  2. Click Request Changes
  3. The agent revises the plan based on your feedback
  4. Review the new plan and approve or request more changes
<Tip> **Be specific in your feedback.** Instead of "that's not right", say "don't modify the database schema - just add the validation to the existing User model." </Tip> <Warning> **Approval timeouts:** If you don't respond to an approval request, it may timeout. You'll need to send a new message to restart the task. </Warning>

Disabling Approvals

If you want the agent to work autonomously without asking for approval:

  1. Use an agent variant without planning mode
  2. Or configure dangerously_skip_permissions in agent settings (use with caution)

Editing Messages

You can edit and resend previous messages:

<Frame> </Frame> <Steps> <Step title="Click the Edit Button"> Click the pencil icon on any of your messages. </Step> <Step title="Modify Your Message"> The message content appears in an editable text area. Make your changes. <Frame> </Frame> </Step> <Step title="Submit the Edit"> Click **Retry** to resend the modified message. The conversation continues from that point. Click **Cancel** to discard your changes. </Step> </Steps> <Warning> Editing a message creates a new branch in the conversation. Subsequent messages after the edited one will be replaced. </Warning>

Status Indicators

Token Usage

<Frame> </Frame>

The context gauge shows how much of the agent's context window is used. Understanding this helps you get better results.

What are Tokens?

Tokens are how AI models measure text. Roughly:

  • 1 token ≈ 4 characters or ¾ of a word
  • A 200K context window can hold about 150,000 words

The context window includes everything the agent "remembers": your messages, its responses, code it has read, and file contents.

Why Token Usage Matters

When usage is high:

  • Agent may "forget" earlier parts of the conversation
  • Responses may become less accurate
  • Agent might re-read files it already read
  • Complex reasoning may suffer

Usage Levels

ColourUsageWhat to Do
Grey0-30%All good, continue working
Default30-60%Normal usage, keep going
Orange60-80%Consider starting a new session soon
Red80%+Start a new session - agent is near its limit
<Tip> **Pro tip:** When starting a new session due to high token usage, briefly summarise what was accomplished. The new agent won't know what happened before. </Tip>

Tasks Progress

<Frame> </Frame>

When the agent breaks down work into tasks, a progress indicator appears in the chat toolbar:

  • Progress bar showing completion percentage
  • Task count (e.g., "5/5 completed")
  • Individual tasks with checkmarks when complete

Click the indicator to expand the full task list showing each step the agent is working through.

File Changes

The chat shows file modification summaries:

  • Green numbers indicate lines added
  • Red numbers indicate lines removed
  • Click to view the file in the Changes panel

Tool Outputs

Command Execution

When the agent runs commands, you'll see:

  • Terminal icon for bash commands
  • Exit code for completed commands
  • Fix Script button if a command fails

Click to view full output in the logs panel.

Search Results

Search operations show summarised results. Click to expand and see full search output.

Review Comments

When you add inline comments in the Changes panel:

  1. A banner appears showing the comment count
  2. Comments are automatically included when you send a message
  3. Click Clear to remove pending comments

Keyboard Shortcuts

ShortcutAction
Cmd/Ctrl + EnterSend message (or contextual action)
Cmd/Ctrl + BBold text
Cmd/Ctrl + IItalic text
EscapeCancel current action