UI: Move log mode indicator to header

[jongio]

Summary

Move the log mode indicator (Local/Azure) from a separate row into the log pane header as a persistent, right-aligned badge to reduce vertical space while maintaining clear visibility of which logs are being displayed.

Motivation

Currently, each log pane consumes two rows for headers:

1. Service name, icons, and actions
2. Full-width mode bar showing "Viewing Azure Logs • Live from Azure resources"

This wastes valuable vertical space that could display more logs. Moving the mode indicator into the header as a compact badge will:

• ✅ Reclaim ~30px vertical space per log pane
• ✅ Maintain persistent visibility of log source (never hidden)
• ✅ Enable faster visual scanning across multiple panes
• ✅ Reduce visual clutter without sacrificing clarity

Current vs Proposed

Current: Two-row header
\
┌─────────────────────────────────────────────────────────┐
│ ⌄ service-name:3000 ⚫ ✓ [Actions] │
├─────────────────────────────────────────────────────────┤
│ ☁ Viewing Azure Logs • Live from Azure resources │
├─────────────────────────────────────────────────────────┤
│ [Logs...] │
\\

Proposed: Single-row header with mode badge
\
┌─────────────────────────────────────────────────────────┐
│ ⌄ service-name:3000 ⚫ ✓ [☁ Azure] [Actions] │
├─────────────────────────────────────────────────────────┤
│ [Logs...] │
\\

Design Details

Mode Badge Component

Local Mode:

• Icon: Monitor (💻)
• Text: "Local"
• Colors: Gray with subtle background
• Tooltip: "Viewing local development logs"

Azure Mode:

• Icon: Cloud (☁️)
• Text: "Azure"
• Colors: Azure blue theme
• Tooltip: "Viewing Azure resource logs"

Switching State:

• Icon: Spinner (animated)
• Text: "Switching..."
• Visual feedback during mode transitions

Header Positioning

Badge placement (left to right):

1. Collapse chevron
2. Service name + port
3. Process status icon
4. Health status icon
5. → Log mode badge ← NEW
6. Action buttons (ServiceActions, Settings, ExternalLink, etc.)

Implementation Tasks

1. Create LogModeBadge Component

• Design badge component with local/azure/switching states
• Implement proper theming (light/dark modes)
• Add tooltips for accessibility
• Handle switching animation (spinner + text)

2. Update LogsPaneHeader

• Import Monitor, Cloud, Loader2 icons
• Add badge between health icon and action buttons
• Ensure proper spacing and alignment
• Pass \logMode\ and \isModeSwitching\ props

3. Remove LogsPaneModeBar

• Remove <LogsPaneModeBar>\ from LogsPane.tsx
• Mark LogsPaneAzureControls component as deprecated
• Update tests to expect new layout

4. Testing

• Visual testing in light/dark themes
• Verify mode switching animation works smoothly
• Test with multiple panes side-by-side
• Accessibility: screen readers, keyboard nav, color contrast
• Responsive: narrow viewports, touch targets

Files to Modify

• \cli/dashboard/src/components/LogsPaneHeader.tsx\ - Add badge component
• \cli/dashboard/src/components/LogsPane.tsx\ - Remove mode bar usage
• \cli/dashboard/src/components/LogsPaneAzureControls.tsx\ - Mark as deprecated

Success Criteria

• ✅ Mode badge always visible in header (never hidden)
• ✅ ~30px vertical space reclaimed per log pane
• ✅ Switching state shows clear visual feedback
• ✅ WCAG AA color contrast maintained
• ✅ No usability regressions
• ✅ All existing tests pass

Documentation

📋 Full Spec: docs/specs/log-mode-header-indicator/spec.md

---

Type: UI Enhancement
Priority: P2
Effort: Small (~4-6 hours)
Component: Dashboard Logs