Back to Cc Switch

1.3 Interface Overview

docs/user-manual/en/1-getting-started/1.3-interface.md

3.14.16.3 KB
Original Source

1.3 Interface Overview

Main Interface Layout

Top Navigation Bar

#ElementDescription
1LogoClick to visit the GitHub project page
2Settings ButtonOpen the settings page (shortcut Cmd/Ctrl + ,)
3Proxy ToggleStart/stop the local proxy service
4App SwitcherSwitch between Claude / Codex / Gemini / OpenCode / OpenClaw
5Feature AreaSkills / Prompts / MCP entry points
6Add ButtonAdd a new provider

App Switcher

Click the dropdown menu to switch the currently managed application:

  • Claude - Manage Claude Code configuration
  • Codex - Manage Codex configuration
  • Gemini - Manage Gemini CLI configuration
  • OpenCode - Manage OpenCode configuration
  • OpenClaw - Manage OpenClaw configuration

After switching, the provider list displays the configurations for the selected application.

Feature Area Buttons

ButtonFunctionVisibility
SkillsSkill extension managementAlways visible
PromptsSystem prompt managementAlways visible
MCPMCP server managementAlways visible

Provider Cards

Each provider is displayed as a card, containing the following elements from left to right:

Card Elements (Left to Right)

#ElementIconDescription
1Drag HandleHold and drag up/down to reorder providers
2Provider Icon-Displays provider brand icon with customizable color
3Provider Info-Name, notes/endpoint URL (clickable to open website)
4Usage Info-Shows remaining balance; displays plan count for multi-plan
5Enable Button-Switch to this provider
6Edit Button-Edit provider configuration
7Duplicate Button-Duplicate provider (create a copy)
8Speed Test Button-Test model availability and response speed
9Usage Query-Configure usage query script
10Delete Button-Delete provider (disabled when currently active)

Tip: The action buttons area (5-10) appears on hover and is hidden by default to keep the interface clean.

Button Details

ButtonState ChangesNotes
EnableShows checkmark and disables when activeChanges to "Join/Joined" in failover mode
EditAlways availableOpens edit panel to modify configuration
DuplicateAlways availableCreates a copy with copy suffix
Speed TestShows loading animation during testOnly available when proxy service is running
Usage QueryAlways availableConfigure custom usage query script
DeleteSemi-transparent/disabled when activeMust switch to another provider first

Card States

StateBorder ColorDescription
Currently ActiveBlue borderCurrent provider in normal mode
Proxy ActiveGreen borderProvider actually in use during proxy takeover mode
NormalDefault borderInactive provider
In FailoverShows priority badgee.g., P1, P2 indicates failover priority

Health Status Badges

In proxy mode, providers in the failover queue display health status:

BadgeColorDescription
HealthyGreen0 consecutive failures
WarningYellow1-2 consecutive failures
UnhealthyRed3+ consecutive failures, may trigger circuit breaker

System Tray

CC Switch displays an icon in the system tray, providing quick access to operations.

Tray Menu Structure

Menu ItemFunction
Open Main WindowShow and focus the main window
App SubmenusCollapsible submenus grouped by Claude/Codex/Gemini (e.g., "Claude · PackyCode")
Provider ListInside each submenu, click to switch; currently active shows a checkmark
Lightweight ModeToggle checkbox to enter/exit tray-only mode
QuitFully exit the application

Note: Each app submenu title shows the current provider name (e.g., "Claude · PackyCode"). Apps with no configured providers show a disabled "(no providers)" entry. App visibility is controlled by the App Visibility setting.

Multi-language Support

The tray menu supports three languages, automatically switching based on settings:

LanguageOpen Main WindowQuit
ChineseOpen Main WindowQuit
EnglishOpen main windowQuit
JapaneseOpen main windowQuit

Lightweight Mode

The tray menu includes a Lightweight Mode toggle (checkbox). When enabled:

  • The main window is closed to free up resources
  • The app continues running in the system tray only
  • You can still switch providers via the tray submenus
  • On macOS, the Dock icon is also hidden

To exit Lightweight Mode, uncheck the toggle or click "Open main window" — the main window will be rebuilt and shown.

Use Cases

Switching providers via the tray menu doesn't require opening the main window, suitable for:

  • Frequently switching providers
  • Quick operations when the main window is minimized
  • Managing configurations while running in the background
  • Running in Lightweight Mode for minimal resource usage

Settings Page

The settings page is divided into multiple tabs:

General Tab

  • Language settings (Chinese/English/Japanese)
  • Theme settings (System/Light/Dark)
  • Window behavior (launch on startup, close behavior)

Advanced Tab

  • Configuration directory settings
  • Proxy service configuration
  • Failover settings
  • Pricing configuration
  • Data import/export

Usage Tab

  • Request statistics overview
  • Trend charts
  • Request logs
  • Provider/model statistics

About Tab

  • Version information
  • Update check
  • Open source license

Keyboard Shortcuts

ShortcutFunction
Cmd/Ctrl + ,Open Settings
Cmd/Ctrl + FSearch providers
EscClose dialog/search

Press Cmd/Ctrl + F to open the search bar:

  • Search by name, notes, or URL
  • Real-time provider list filtering
  • Press Esc to close search