vibetunnel/mac/VibeTunnel/Presentation/Components/VisualIndicatorExamples.md

Visual Indicator Styles for VibeTunnel Menu Bar

Current Implementation

The menu bar now shows session status using visual indicators instead of cryptic numbers. Here are the available styles:

1. Dots Style (Default)

No sessions:     [empty]
Only idle:       3
Only active:     ●●●
Mixed (2/5):     ●● 5
Many active:     ●●●+ 8

• Filled dots (●) represent active sessions
• Shows up to 3 dots, then adds "+"
• Total count shown only when idle sessions exist

2. Bars Style

No sessions:     [empty]
Only idle:       ▫︎▫︎▫︎
Only active:     ▪︎▪︎▪︎
Mixed (2/5):     ▪︎▪︎▫︎▫︎▫︎
Many (3/7):      ▪︎▪︎▪︎▫︎▫︎+

• Filled squares (▪︎) for active sessions
• Empty squares (▫︎) for idle sessions
• Shows up to 5 bars total

3. Compact Style

No sessions:     [empty]
Only idle:       ◯3
Only active:     ◆2
Mixed (2/5):     2◆5

• Diamond (◆) as separator/indicator
• Most space-efficient option

4. Minimalist Style

No sessions:     [empty]
Only idle:       3
Only active:     ●2
Mixed (2/5):     2|5

• Simple vertical bar separator
• Dot prefix for active-only

5. Meter Style

No sessions:     [empty]
Only idle:       [□□□□□]
Only active:     [■■■■■]
Mixed (2/5):     [■■□□□]
Mixed (1/3):     [■■□□□]

• Progress bar visualization
• Shows active/total ratio

Changing Styles

To change the indicator style, modify line 144 in StatusBarController.swift:

let indicatorStyle: IndicatorStyle = .dots  // Change to .bars, .compact, etc.

Button Highlighting

The menu bar button now properly highlights when the dropdown is open, providing clear visual feedback that the menu is active.