Code Mode (Web Terminal)

Terminal-style AI coding assistant in your browser. Same experience as the AgentiCode CLI, but embedded in the platform.

---

What is it?

Code Mode brings the Claude Code / AgentiCode CLI experience to the web. Instead of switching to a terminal, you get a terminal-like interface right in the AgenticWork UI.

---

Interface

The layout mirrors the CLI:

┌─────────────────────────────────────────────────────┐
│ ◆ agenticode  claude-3-5-sonnet • ~/my-project      │  ← Header
├─────────────────────────────────────────────────────┤
│                                                     │
│ > analyze the auth flow                             │  ← User input
│                                                     │
│ ∴ Thought for 3s                                    │  ← Thinking indicator
│                                                     │
│ ⚡ read_file(src/auth/login.ts)                     │  ← Tool call
│   export async function login(...)                  │
│                                                     │
│ The authentication flow works like this...          │  ← Response
│                                                     │
├─────────────────────────────────────────────────────┤
│ Ask me anything...                                  │  ← Input
├─────────────────────────────────────────────────────┤
│ [ask] esc to exit • ? for help • 142 in / 89 out   │  ← Status bar
└─────────────────────────────────────────────────────┘

---

Features

Thinking display

When the model is thinking (especially with extended thinking enabled), you see:

• Animated status indicator

• Elapsed time counter

• Preview of thinking content (ctrl+o to expand)

Tool execution

Tools show:

• Tool name and arguments

• Live execution status

• Results (truncated for long output)

• File diffs for edit operations

File edits

When the model edits files, you get a diff view:

src/utils/helpers.ts
+ export function formatDate(date: Date): string {
+   return date.toISOString().split('T')[0];
+ }

Session persistence

Your session persists across page refreshes. Come back later and continue where you left off.

---

Permission modes

Toggle with the status bar or keyboard shortcut:

Mode	Behavior
ask	Confirm before tool execution (default)
bypass	Auto-approve all tools
deny	Block all tool execution

---

Keyboard shortcuts

Key	Action
Enter	Send message
Shift+Enter	New line
Ctrl+C	Abort current operation
Ctrl+O	Show/hide thinking
Esc	Exit code mode

---

WebSocket events

Code Mode uses WebSocket for real-time updates:

// Events from server
type CodeModeEvent =
  | { type: 'session_started'; sessionId: string }
  | { type: 'thinking_start' }
  | { type: 'thinking_update'; step: string }
  | { type: 'thinking_end' }
  | { type: 'tool_start'; toolId: string; toolName: string; args: object }
  | { type: 'tool_end'; status: 'success' | 'error'; output?: string }
  | { type: 'message'; role: 'assistant'; content: string }
  | { type: 'usage'; inputTokens: number; outputTokens: number }
  | { type: 'error'; message: string }

// Events to server
type UserEvent =
  | { type: 'user_message'; content: string; sessionId: string }
  | { type: 'abort'; sessionId: string }

---

Integration with platform

Code Mode has full access to:

• Your platform auth (Azure AD token)

• All MCP tools you have permission for

• Workspace files (via agenticode-manager service)

• Session history and vector memory

---

When to use it

Code Mode vs Chat Mode:

Use Code Mode when...	Use Chat Mode when...
Working on code tasks	General Q&A
Need tool execution	Quick questions
Want terminal feel	Prefer chat interface
File editing workflow	Document analysis

---

Accessing Code Mode

1. Click the terminal icon in the UI header

2. Or press `Ctrl+`` (backtick)

3. Or navigate to /code route

---

Configuration

Project context

Create AGENTICODE.md in your workspace root to give the model context:

# My Project

## Stack
- Next.js 14
- TypeScript
- Prisma

## Key files
- src/app/page.tsx - Main entry
- src/lib/db.ts - Database client

Model selection

Code Mode respects your Intelligence Slider setting. Higher values = better models.