ThinkCode UI Overview

ThinkCode's interface is designed to be intuitive while providing powerful features for AI-assisted coding. This guide will help you understand the different components of the ThinkCode interface and how to navigate them effectively.

Main Interface Components

ThinkCode's interface consists of several key components:

graph TD
    A[ThinkCode Interface] --> B[Activity Bar]
    A --> C[Editor Area]
    A --> D[Side Bar]
    A --> E[Panel]
    A --> F[Status Bar]
    A --> G[Think Panel]
    
    B --> B1[Explorer]
    B --> B2[Search]
    B --> B3[Source Control]
    B --> B4[Debug]
    B --> B5[Extensions]
    B --> B6[AI Assistant]
    
    C --> C1[Editor Groups]
    C --> C2[Editor Tabs]
    
    D --> D1[Explorer View]
    D --> D2[Outline View]
    D --> D3[Timeline View]
    
    E --> E1[Terminal]
    E --> E2[Problems]
    E --> E3[Output]
    E --> E4[Debug Console]
    
    G --> G1[Chat Interface]
    G --> G2[AI Context]
    G --> G3[Code Suggestions]
    
    style G fill:#f96,stroke:#333,stroke-width:2px
    style G1 fill:#f9c,stroke:#333,stroke-width:1px
    style G2 fill:#f9c,stroke:#333,stroke-width:1px
    style G3 fill:#f9c,stroke:#333,stroke-width:1px

Activity Bar

The Activity Bar is located on the left edge of the window and contains icons for different views:

Explorer (Ctrl+Shift+E / Cmd+Shift+E): File explorer for navigating your project files
Search (Ctrl+Shift+F / Cmd+Shift+F): Search across your entire project
Source Control (Ctrl+Shift+G / Cmd+Shift+G): Git integration and version control
Debug (Ctrl+Shift+D / Cmd+Shift+D): Debugging tools and configurations
Extensions (Ctrl+Shift+X / Cmd+Shift+X): Browse and manage extensions
AI Assistant (Ctrl+Shift+T / Cmd+Shift+T): Open the Think Panel for AI assistance

The Side Bar displays the active view selected from the Activity Bar:

Explorer View: Navigate files and folders in your project
Outline View: Show the structure of the current file
Timeline View: View file history and changes
Search Results: Display search results across your project
Source Control: Manage git changes and commits
Debug View: Configure and control debugging sessions
Extensions View: Browse and manage extensions

Editor Area

The central part of the interface where you edit your code:

Editor Groups: The editor can be split into multiple groups for side-by-side editing
Editor Tabs: Switch between open files
Breadcrumbs: Navigation path at the top of the editor
Minimap: Code overview on the right side (can be toggled)
Inline Completions: AI suggestions appear inline as you type
Code Lens: Contextual information and actions displayed above code

Panel

The Panel at the bottom of the window contains:

Terminal (Ctrl+`` / Cmd+``): Integrated terminal for running commands
Problems (Ctrl+Shift+M / Cmd+Shift+M): Errors and warnings in your code
Output: Output from various tasks and extensions
Debug Console: Console for debugging information
AI Logs: Records of AI interactions and suggestions

Status Bar

The Status Bar at the bottom of the window shows:

Branch Name: Current git branch
Line and Column: Current cursor position
Indentation Settings: Spaces/tabs and size
Encoding: File encoding
Line Ending: Line ending type (CRLF/LF)
Language Mode: Current file language
AI Status: Current AI model and status
Notifications: Notification indicators

Think Panel

The Think Panel is unique to ThinkCode and provides AI assistance:

Chat Interface: Ask questions and get responses about your code
AI Context: View what code the AI is currently considering
Code Suggestions: Browse and apply AI-generated code suggestions
Role Selector: Switch between different AI assistant roles
Model Selector: Choose different AI models

Editor Features

Code Editor

The code editor includes numerous features:

Syntax Highlighting: Language-specific coloring
IntelliSense: Code completion, parameter info, quick info, and member lists
Code Folding: Collapse code sections
Multiple Cursors: Edit in multiple places simultaneously
Format Document: Automatically format your code
Find and Replace: Search within the current file
Go to Definition: Navigate to where symbols are defined
Peek Definition: View definitions inline
Rename Symbol: Rename variables and functions across files

AI-Specific Features

ThinkCode enhances the editor with AI capabilities:

Inline Completions: Suggestions appear as ghost text as you type
Block Completions: Complete entire blocks of code
Code Generation from Comments: Write a comment describing what you want, and the AI generates the code
Contextual Documentation: AI-generated documentation for your code
Error Explanations: AI explains errors and suggests fixes
Refactoring Suggestions: AI suggests ways to improve your code