Chat Interface
The heart of Broski - where you interact with your AI coding assistant.
Real-time Interaction
The chat screen streams AI responses in real-time, shows tool execution progress, displays file diffs, and handles permission requests - all from your phone.
App Bar
The top bar contains:
| Element | Description |
|---|---|
| Back Arrow | Return to previous screen |
| Session Title | Current session name |
| Project Subtitle | Project folder name |
| Sidebar Button | Open session context panel |
| More Menu | Additional session actions |
More Menu Options
Tap the three-dot menu for session actions:
| Option | Description |
|---|---|
| Fork Session | Create a branch from current point |
| Share Session | Generate shareable URL (OpenCode) |
| Compact | Summarize old messages to save context |
| Initialize | Create AGENTS.md for the project |
Claude Code Menu
When using Claude Code, additional options appear:
- Model - Switch between Sonnet, Opus, Haiku
- Tools - Configure permissions and enabled tools
- Commands - View available slash commands
- Skills - Browse loaded skills
- Hooks - View active hooks
- MCP Servers - Check MCP server status
Session Sidebar
Tap the sidebar button to reveal session context:
| Section | Information |
|---|---|
| Token Usage | Input/output/cache read tokens |
| Cost | Estimated API cost in USD |
| Modified Files | List of changed files with +/- counts |
| Todos | Task list (OpenCode) |
Message Types
User Messages
Your messages appear on the right side:
- Primary color background - Subtle accent color
- Rounded corners - Bubble shape with sharp bottom-right
- Text content - Your input preserved as-is
Assistant Messages
AI responses appear on the left:
- Left accent bar - Subtle vertical line
- Markdown support - Headers, bold, italic, code, links
- Streaming indicator - Pulsing blue dot while generating
System Messages
Status and error information:
- Error messages - Red background with error icon
- Diff-only messages - Hidden (diffs shown inline)
Markdown Rendering
AI responses support GitHub-flavored markdown:
| Syntax | Rendering |
|---|---|
| **bold** | Bold text |
| *italic* | Italic text |
| `code` | Inline code with background |
| ```code blocks``` | Syntax highlighted with line numbers |
| # Heading | Styled headers (H1-H3) |
| [link](url) | Clickable blue links |
| - item | Bulleted lists with indentation |
| > quote | Block quotes with left border |
Code Blocks
Code blocks in messages feature:
- Syntax highlighting - Language-specific colors
- Dark theme - Atom One Dark style
- Monospace font - JetBrains Mono
- Copy support - Select and copy code text
Tool Calls
When the AI uses tools, you'll see Tool Call Cards:
| Element | Description |
|---|---|
| Tool Icon | Type-specific icon (edit, read, bash, etc.) |
| Tool Name | e.g., "Editing file.dart" |
| Status Indicator | Running (spinner) or Completed (checkmark) |
| Expand Arrow | Tap to see details |
Tool Types and Icons
| Tool | Icon | Description |
|---|---|---|
| Read | Document | Reading file contents |
| Edit | Pencil | Modifying existing file |
| Write | Plus-document | Creating new file |
| Bash | Terminal | Running shell command |
| Search | Magnifying glass | Searching files/text |
| Task | Robot | Delegating to subagent |
| Thinking | Brain | Model reasoning |
Expanded Tool Card
When expanded, tool cards show:
- Input parameters - File paths, content, commands
- Output - Tool execution results
- Code preview - Syntax-highlighted content
- Undo button - Revert changes (edit tools only)
- Copy button - Copy content to clipboard
File Diffs
When the AI modifies files, inline diff viewers appear:
Diff Card Elements
- File icon - Code file indicator
- File name - Just the filename (not full path)
- Change stats - Green +X and red -Y counts
- Expand arrow - Show more diff lines
Inline Diff Preview
- Red lines - Removed content with - prefix
- Green lines - Added content with + prefix
- Line numbers - Position reference
- Stats badges - +5 -3 showing net changes
Diff Actions
| Action | Result |
|---|---|
| Tap | Expand/collapse diff preview |
| "View full" button | Open full-screen diff viewer |
| "Undo" button | Revert this specific change |
Full-Screen Diff View
Tap "View full" to open the full-screen viewer:
- Split view - Before (left) and After (right)
- Unified view - Single column with +/- prefixes
- Line numbers - Both old and new line numbers
- Color coding - Red/green backgrounds
- Scroll sync - Both panes scroll together
Permission Requests
When the AI needs to perform potentially dangerous actions, you'll see a permission prompt:
| Element | Description |
|---|---|
| Title | "Permission required" |
| Description | What the AI wants to do |
| Command | Specific command (if bash) |
| Diff Preview | Proposed changes (if file edit) |
| Deny Button | Red outline, rejects the action |
| Approve Button | Primary color, allows the action |
Common Permission Scenarios
File edits show the proposed diff before applying. Shell commands show the exact command. Destructive operations require extra confirmation.
Thinking Card
When the AI is reasoning (extended thinking), you'll see a Thinking Card:
- Brain icon - Indicates reasoning mode
- Elapsed time - "Thinking... 2.3s"
- Expandable content - See reasoning text
- Streaming animation - Pulsing while active
Input Bar
The input bar at the bottom is where you type messages:
| Element | Description |
|---|---|
| Text Field | Multi-line text input |
| Attachment Button | Add files or images |
| Send Button | Submit your message |
Input Styles
The input bar supports different styles (Settings > Customization):
- Standard - Simple text field
- Rounded - Pill-shaped input
- Outlined - Border emphasis style
Attachments
Tap the attachment button for:
- Take Photo - Use device camera
- Choose from Gallery - Select existing image
- Attach File - Type @ to search files
@ File Mentions
Type @ in the input to search and attach files:
- Type @ followed by search query
- Autocomplete dropdown appears
- Shows matching files from project
- Tap to attach file to message
- File content is sent to the AI
For Claude Code, @ inserts the file path as text instead of attachment.
Slash Commands
Type / to see available commands:
| Command | Description |
|---|---|
| /undo | Undo last message |
| /redo | Redo last message |
| /compact | Summarize session |
| /fork | Fork session |
| /share | Share session |
| /new | Create new session |
| /help | Show all commands |
Custom commands from .claude/commands/ also appear here.
Agent @ Mentions
Type @ followed by an agent name to direct your request:
@explore- Code exploration agent@librarian- Documentation agent@security- Security analysis agent
Auto-Scroll Behavior
The chat automatically scrolls as new content arrives:
- During streaming - Follows new text
- During tool execution - Shows tool progress
- After scrolling up - Stops auto-scroll (respects your position)
- Return to bottom - Auto-scroll resumes when you scroll back down
Message Actions
Long-press on a message for options:
- Fork from here - Create new session branch starting at this message
- Copy - Copy message text to clipboard