Feature Request: Session Background Customization (Color/Pattern/Watermark)

Feature Request: Session Background Customization (Color/Pattern/Watermark)

Summary

Add the ability to customize session background colors, patterns, or watermark text in the VS Code extension, similar to iTerm2's background customization. This enables visual identification of sessions at a glance, preventing accidents and improving multi-session workflow organization.

Current Behavior

All sessions have identical white/default background:

• No visual differentiation between sessions
• Easy to confuse sessions when quickly switching
• Must read content to determine which session you're in

Requested Behavior

Background Color Options

• Solid colors - Pick from palette or custom hex (e.g., #f0f0ff for light blue)
• Color intensity - Subtle tint (90% opacity) to full color (for critical sessions)
• Per-session persistence - Background color saved with session

Pattern Options (Advanced)

• Dot pattern - Subtle dots (for backend work)
• Stripe pattern - Diagonal stripes (for frontend work)
• Grid pattern - Light grid (for database work)
• Custom patterns - Upload image/pattern

Watermark Text (Optional)

• Diagonal text - Project name displayed diagonally (like "PRODUCTION" in red)
• Opacity control - Subtle 10% to prominent 40%
• Position options - Center, corner, edge
• Font size - Large watermark or small label

Use Cases

1. At-a-Glance Project Identification

Problem: With 6 sessions open, you must read each one to find the right project.

Solution: Color-coded sessions:

• Blue background = ClientA work
• Orange background = ClientB work
• Green background = Personal projects
• Red background = Production hotfixes

Result: Instant visual recognition before reading any text.

2. Urgency/Priority Signaling

Problem: No visual distinction between "safe exploration" and "production code".

Solution: Intensity-based color coding:

• Light green = Exploration/sandbox (safe to experiment)
• Yellow = Testing environment (moderate caution)
• Red = Production code (BE CAREFUL!)
• Gray = Paused/blocked sessions

Result: Color reinforces mental state needed for that session.

3. Work Type Categorization

Problem: Mixing frontend, backend, and database sessions causes confusion.

Solution: Pattern-based identification:

• Dots pattern = Backend work
• Stripes pattern = Frontend work
• Grid pattern = Database work
• Solid = Documentation/planning

Result: Brain automatically categorizes session by pattern.

4. Accident Prevention

Problem: Almost edited production code thinking you were in sandbox session.

Solution: High-contrast visual warnings:

• Production session with bright red watermark "PRODUCTION - CAREFUL"
• Sandbox session with green watermark "SANDBOX - SAFE"
• Impossible to confuse them even when quickly switching

Result: Visual confirmation BEFORE you start typing prevents mistakes.

5. Client/Project Branding

Problem: Managing work for multiple clients - easy to commit to wrong repo.

Solution: Match company brand colors:

• ClientA uses blue branding → blue background for all ClientA sessions
• ClientB uses orange branding → orange background for all ClientB sessions
• Personal projects → purple background

Result: Client brand color = automatic brain context switch.

6. Session State Indicators

Problem: Can't tell which sessions are active vs paused/blocked.

Solution: Opacity-based state indication:

• Bright background = Active session, ready to work
• Faded background = Paused/blocked, waiting for something
• Gray background = Archived/reference only

Result: Visual priority queue - focus on bright sessions first.

Real-World Workflow Example

Scenario: Developer managing 4 concurrent sessions

Before (No Background Customization):

[Tab] 3bad5253... (which client was this?)
[Tab] fae22ef8... (is this the production fix?)
[Tab] 99662639... (backend or frontend?)
[Tab] b2e60a57... (is this the sandbox or production?)

Developer clicks each tab, reads content, realizes wrong session, tries next tab...

After (With Background Customization):

[Tab - BLUE BG] ClientA Auth Feature     (blue = ClientA)
[Tab - RED BG] Production Hotfix ⚠️      (red = production, watermark warns)
[Tab - DOTTED BG] Backend API Debug     (dots = backend)
[Tab - GREEN BG] Sandbox Experiments    (green = safe to experiment)

Developer sees blue background → "That's ClientA work" → clicks correct tab immediately.

Implementation Suggestions

UI/UX

Settings Menu:

1. Right-click session tab → "Customize Background"
2. Opens color picker + pattern selector + watermark editor
3. Live preview as you adjust settings
4. Save → applies immediately to session

Quick Presets:

• Production - Red background, "PRODUCTION" watermark
• Staging - Yellow background, "STAGING" watermark
• Development - Green background
• Sandbox - Light green, "SANDBOX - SAFE" watermark

Persistence

Store in session metadata (same file as session renaming):

{
  "session_uuid": "3bad5253-ad7f-45e2-8965-de0a738f598a",
  "custom_name": "Production Hotfix - Payment",
  "background": {
    "color": "#ffcccc",
    "opacity": 0.3,
    "pattern": "none",
    "watermark": {
      "text": "PRODUCTION",
      "color": "#cc0000",
      "opacity": 0.15,
      "position": "center-diagonal",
      "fontSize": "72px"
    }
  }
}

CSS Implementation

Apply to VS Code webview container:

.claude-session-container {
  background-color: rgba(255, 204, 204, 0.3); /* Light red tint */
  background-image: linear-gradient(45deg, transparent 40%, rgba(255,0,0,0.05) 50%, transparent 60%);
}

.claude-session-container::before {
  content: "PRODUCTION";
  position: absolute;
  font-size: 72px;
  color: rgba(204, 0, 0, 0.15);
  transform: rotate(-45deg);
  pointer-events: none;
}

Accessibility Considerations

• Contrast checking - Warn if text becomes unreadable on chosen background
• Colorblind mode - Offer pattern alternatives for color-dependent workflows
• Disable option - Users can turn off backgrounds globally if not needed
• Text readability - Auto-adjust text color (dark/light) based on background

Comparison to iTerm2

iTerm2 offers robust background customization:

• Solid colors, gradients, images
• Per-profile persistence
• Opacity control
• Widely used for similar workflow management (dev/staging/prod terminals)

Bring this proven UX pattern to Claude Code VS Code extension.

Benefits Summary

✅ Instant visual identification - Color/pattern recognition faster than reading
✅ Accident prevention - Visual confirmation before you type
✅ Mental context switching - Color triggers the right mental state
✅ Multi-project management - Brand colors organize work automatically
✅ Session state awareness - Faded = paused, bright = active
✅ Professional workflows - Production vs sandbox clearly distinguished
✅ Complements session renaming - Visual + textual identification work together
✅ Reduces cognitive load - Brain processes color faster than text

Priority

Medium-High - Power users managing multiple sessions/projects will find this transformative. Casual users with 1-2 sessions won't need it, but it doesn't hurt them either.

Related

• iTerm2 background customization (reference implementation)
• Session renaming feature (complementary feature - use together)
• VS Code theme customization (similar UX patterns)

Optional Enhancements

Advanced Features (Future)

• Auto-coloring rules - "Sessions matching 'production' → red background"
• Time-based fading - Sessions inactive >1 hour auto-fade
• Gradient backgrounds - Subtle top-to-bottom color shifts
• Custom images - Company logo as watermark background
• Workspace presets - Save color schemes and apply to multiple sessions

Integration Ideas

• Git branch detection - Auto-color based on branch name (main=red, develop=yellow)
• Working directory - Sessions in /production → red, /sandbox → green
• Export settings - Share background configs with team