Visual UI

Diff previews, real-time tool execution, and git activity badges for complete visibility

The 1Code UI gives you complete visibility into what your AI agents are doing. See diffs before they land, watch tool execution in real-time, and track git operations directly on messages.

Why It Matters

AI coding agents make dozens of file changes in seconds. Without visibility, you can’t:

• Catch mistakes before they’re committed
• Understand what changed and why
• Roll back specific changes
• Learn from the agent’s approach

The visual UI solves this by showing you exactly what’s happening, as it happens.

Diff Previews

See exactly what changes the agent is making before they land in your codebase.

Real-Time Diff View

As the agent edits files, diffs appear instantly in the sidebar:

• Unified view: Traditional diff format with context lines
• Split view: Side-by-side comparison
• Syntax highlighting: Language-aware coloring
• Inline comments: Add notes on specific changes

Access the diff sidebar:

• Click the “Changes” badge on any message
• Press Cmd+D to toggle
• Click any file in the git activity badge

File List

The changes sidebar shows all modified files with:

• File path and icon
• Lines added (+) and removed (-)
• Change type (modified, added, deleted)
• Tree or flat view toggle

Implementation: The diff sidebar (src/renderer/features/changes/components/diff-sidebar-header/diff-sidebar-header.tsx) uses Monaco editor for syntax highlighting and supports both unified and split view modes.

Full-Page Diff Mode

For complex changes, press Shift+Enter on any file to view the diff in full-page mode (src/renderer/features/changes/components/diff-full-page-view/diff-full-page-view.tsx:1). This gives you:

• Maximum screen space for reviewing changes
• Keyboard navigation (arrow keys, Escape to close)
• Same syntax highlighting and view modes

Git Activity Badges

Every agent message shows git operations that happened during execution.

Changed Files Badge

Expand to see:

• List of all edited files
• Lines added and deleted per file
• Total change count
• Click any file to see its diff

Example:

Edited 3 files +47 -12
  ├─ src/index.ts +20 -5
  ├─ tests/index.test.ts +25 -4
  └─ package.json +2 -3

Commit Badge

When the agent creates a commit, you’ll see:

• Commit message
• Click to view commit details
• If pushed: links to GitHub commit page
• If local: opens history tab with commit diff

Pull Request Badge

When a PR is created:

• PR title and number
• Click to open on GitHub
• Status indicator (open, merged, closed)

Implementation: Git activity extraction (src/renderer/features/agents/ui/git-activity-badges.tsx:12) parses tool execution results to identify git operations and file changes.

Real-Time Tool Execution

Watch every tool the agent runs, with inputs and outputs.

Supported Tools

File Operations:

• read - File contents appear in expandable blocks
• write - Shows full file content being written
• edit - Displays old and new strings side-by-side

Code Operations:

• bash - Command, output, and exit code
• grep - Search pattern and matching files
• glob - File pattern and matched paths

AI Operations:

• task - Sub-agent execution with nested tools
• thinking - Extended reasoning visualization
• web_search - Query and top results

Tool Execution States

Running

Tool is executing. For long-running commands, output streams in real-time.

Success

Tool completed successfully. Output is collapsible for readability.

Error

Tool failed. Error message is highlighted in red with full stack trace.

Interrupted

User stopped the agent mid-execution. Partial output is preserved.

Tool Output Formatting

Code blocks are syntax-highlighted:

// Example from a bash tool
const result = await runCommand('npm test')

Long output is truncated with “Show more” buttons.

Structured data (JSON, YAML) is formatted and collapsible.

Built-In Git Client

Manage your git workflow without leaving the app.

Visual Staging

• Stage individual files or hunks
• Unstage changes
• Discard modifications
• Stage all / unstage all buttons

Commit UI

Commit input:

• Commit message field with syntax highlighting
• Auto-generated suggestions based on changes
• Commit & Push option
• Amend last commit

Commit history:

• Timeline view of all commits
• Commit message, author, time
• Click to view commit diff
• Revert, cherry-pick, reset options

Branch Management

• Create new branches
• Switch branches
• Delete branches (with safety checks)
• Push to remote
• Pull latest changes

PR Creation

Create pull requests directly from the app:

1. Click “Create PR” in the changes sidebar
2. Fill in title and description (auto-generated)
3. Select base branch
4. Click “Create” - PR opens on GitHub

PR creation uses the gh CLI under the hood for seamless GitHub integration.

File Viewer

Preview any file in your project with Cmd+P search.

Features

• Fuzzy search: Type partial paths to find files
• Syntax highlighting: 100+ languages supported
• Image viewer: PNG, JPEG, SVG, GIF
• Markdown preview: Rendered markdown with GitHub-flavored support
• Line numbers: Click to copy permalink
• File tree: Navigate by directory structure

Keyboard Shortcuts

• Cmd+P - Open file search
• Cmd+Shift+F - Find in files
• Cmd+W - Close current file
• Cmd+[ / Cmd+] - Navigate back/forward

Integrated Terminal

Access a full terminal directly within 1Code, without switching to an external terminal app.

Features

• Multiple terminals: Create multiple terminal sessions per workspace
• Split view: Terminal in sidebar or bottom panel
• Keyboard shortcut: Toggle with Cmd+J
• Shared across worktrees: Terminal sessions persist across local-mode workspaces
• Session restoration: Terminal state is saved and restored on app restart

Terminal Modes

Sidebar terminal:

• Opens on the right side of the window
• Compact view for quick commands
• Doesn’t obstruct the main editor

Bottom panel terminal:

• Opens at the bottom of the window
• Full-width for better visibility
• Resizable height

Terminal sessions run in the current worktree directory, making it easy to run project-specific commands.

Kanban Board

Visualize all your agent sessions in a kanban-style board view.

Board Columns

• Active: Chats with running agents
• Waiting: Queued messages or paused sessions
• Completed: Finished agent tasks
• Archived: Archived chats

Features

• Drag and drop: Move chats between columns
• Quick actions: Archive, delete, or reopen from card menu
• Status indicators: See agent status, worktree, and recent activity
• Filters: Filter by project, agent type, or date

Access the kanban view from the sidebar navigation or with Cmd+K.

Chat Forking

Create a sub-chat from any assistant message to explore alternative approaches.

How It Works

1. Hover over any assistant message
2. Click the “Fork” icon
3. New sub-chat opens with conversation history up to that point
4. Make changes and see different outcomes
5. Compare results between the main chat and forked versions

Use Cases

Explore alternatives:

• Fork after a design decision to try different approaches
• Test multiple implementation strategies
• Compare different agent models on the same task

Rollback and retry:

• Fork before a large change
• If the main chat goes wrong, continue from the fork
• Merge successful changes back to main

Forked chats appear in the sidebar with a branch icon and are linked to their parent chat.

Message Queue

Queue up prompts while an agent is working, so you don’t have to wait.

How It Works

• Type a message while the agent is running
• Message is added to the queue
• When the agent finishes, queued messages are sent automatically
• Edit or remove queued messages before they’re sent

Queue UI

Queue indicator:

• Badge shows number of queued messages
• Click to view and manage queue

Queue management:

• Reorder messages via drag and drop
• Edit message content
• Remove messages from queue
• Clear entire queue

This is especially useful for long-running tasks where you think of follow-up questions during execution.

Extended Thinking

Visual representation of the agent’s reasoning process before it acts.

What Is Extended Thinking?

Extended thinking (also called “chain of thought”) shows the agent’s internal reasoning:

• Problem analysis
• Solution brainstorming
• Step-by-step planning
• Trade-off considerations

Visual Representation

Thinking gradient:

• Purple gradient background indicates thinking mode
• Animated shimmer effect while thinking
• Thinking text is collapsible for readability

Thinking duration:

• Displayed in the message header
• Longer thinking time for complex problems
• Can be enabled/disabled per model

Extended thinking is enabled by default for Claude Sonnet and other supported models. It significantly improves output quality for complex tasks.

Memory Support

1Code supports project-level memory through special markdown files that agents can read.

CLAUDE.md

Project-specific instructions for Claude Code:

• Coding style preferences
• Architecture decisions
• Tech stack details
• Build/deployment commands

Place CLAUDE.md in your project root. Claude will read it at the start of each session.

Example CLAUDE.md:

# Project Instructions

This is a React + TypeScript project using Vite.

## Code Style
- Use functional components with hooks
- Prefer named exports over default exports
- Use Tailwind CSS for styling

## Testing
Run tests with: `npm test`

AGENTS.md

Generic instructions for all AI agents (Claude and Codex):

• General project information
• Contribution guidelines
• Common tasks and workflows

If both CLAUDE.md and AGENTS.md exist, agents read both (with CLAUDE.md taking precedence for Claude-specific settings).

Location: Place these files in the root of your git repository.

Best Practices

Review Before Committing

Always expand the changed files badge and review diffs before accepting commits.

Use Full-Page Mode for Big Changes

When reviewing large refactors, press Shift+Enter for maximum screen space.

Track Git History

Click commit badges to build a mental model of the agent’s git workflow.

Stage Selectively

Don’t stage everything at once. Review and stage files one at a time.

Related Features

• Worktree Isolation - Keep changes isolated per chat
• Plan Mode - See structured plans before execution
• Background Agents - Monitor cloud agents visually