# BitSeek Claw Overview

BitSeek Claw features a modern three-panel layout design, providing an intuitive user interface. Below is an introduction to the overall interface structure.

## Interface Layout

![Overall Layout](images/main-page.png)

The BitSeek Claw interface is divided into three main areas:

1. **Top Navigation Bar** - Function module switching
2. **Left Sidebar** - Session management and navigation
3. **Central Main Area** - Chat and workspace
4. **Right Panel** - File browsing (optional)

## Top Navigation Bar

![Navigation Bar](images/navigation-bar.png)

The navigation bar is located at the top of the page and contains the following function modules:

| Icon | Name | Description |
|------|------|-------------|
| 💬 | Chat | Communicate with AI through dialogue |
| 👥 | AI Colleagues | Manage and interact with multiple AI agents |
| 📋 | Tasks | View and manage task lists |
| 📊 | Kanban | Task kanban view |
| ⚡ | Skills | Manage AI skill library |
| 🧠 | Memory | View and manage AI memory |
| 📁 | Workspace | File and project management |
| ⚙️ | Profiles | Agent configuration management |
| ✅ | Todos | Todo item management |
| 📈 | Insights | Usage statistics and insights |
| 📊 | Hermes Dashboard | System monitoring panel |
| 📝 | Logs | System log viewing |
| ⚙️ | Settings | System settings |

## Left Sidebar

![Sidebar](images/sidebar.png)

The left sidebar provides session management and quick navigation:

### Session Management
- **New Conversation** - Create a new chat session
- **Filter Conversations** - Filter sessions by keywords
- **Session List** - Displays all historical sessions
  - Grouped by time (today, yesterday, last week, etc.)
  - Each session shows title and last active time
  - Right-click menu provides more operations

### Project Management
- **All** - View all sessions
- **Unassigned** - View sessions without assigned projects
- **New Project** - Create new project group

## Central Main Area

![Chat Area](images/chat-area.png)

The central main area is the primary workspace, displaying different content based on the currently selected function module:

### Chat Interface
- **Welcome Message** - Displays guide questions
- **Message Input Box** - Enter messages to communicate with AI
- **Quick Actions** - File selection, dictation, and other functions
- **Context Information** - Shows current model, workspace, etc.

### Other Function Interfaces
- Task management, kanban view, skills management, etc.
- Each function module has its own dedicated interface layout

## Right Workspace Panel

![Workspace Panel](images/workspace-panel.png)

The right workspace panel provides file management functions:

### File Browser
- **File List** - Displays files and folders in the workspace
- **File Operations** - Create new files, folders, refresh, etc.
- **File Preview** - Click on a file to preview its content

### Function Tabs
- **Files** - File browser
- **Artifacts** - Generated artifacts and content

## Bottom Control Bar

The bottom control bar provides session-level controls:

### Model Selection
- **AI Model** - Switch between different AI models
- **Reasoning Effort** - Adjust AI reasoning intensity
- **Profile** - Switch user profiles

### Message Actions
- **Send Button** - Send the entered message
- **File Attachment** - Attach files to messages
- **Dictation** - Voice input support

## Themes and Appearance

BitSeek Claw supports multiple themes:

- **Dark Theme** - Default theme, comfortable for eyes
- **Light Theme** - Bright and refreshing interface
- **Custom Themes** - Supports custom color schemes

## Responsive Design

The interface supports different screen sizes:
- **Desktop** - Complete three-panel layout
- **Tablet** - Collapsible sidebar
- **Mobile** - Single-column layout, adapted for phone screens

## Keyboard Shortcuts

Common keyboard shortcuts:
- `Ctrl/Cmd + N` - New conversation
- `Ctrl/Cmd + /` - Focus search box
- `Ctrl/Cmd + Enter` - Send message
- `Esc` - Close popup or cancel operation

## Next Steps

After understanding the overall layout, please refer to:
- **[Page Operations](02-Page-Operations.md)** - Detailed operation guide for each function module
