[UX] Add visual indicator for per-view mode isolation

[easonLiangWorldedtech]

[UX] Add visual indicator for per-view mode isolation

Problem

PR #909 implemented per-view mode isolation, but the UI provides no visual feedback to indicate which tabs use different modes. Users cannot easily tell if their current tab's mode differs from other open tabs or the project default.

Evidence

Code locations:

• ModesView.tsx:85: Mode selector component — no isolation indicator
• ExtensionStateContext.tsx: No field tracking "is this tab's mode different from project default?"
• ClineProvider.ts: modeApiConfigs (project-level default) is shared, but UI doesn't compare it against view-local mode

Reproduction:

1. Tab A: mode = "code" (default)
2. Tab B: user switches to mode = "architect" via handleModeSwitch()
3. Both tabs show identical mode selector UI — no visual distinction
4. User has no way to know Tab B is using a different mode without checking each tab individually

Root Cause

The mode selector (ModesView) renders based on the current mode value from context, but doesn't compare it against:

1. The project default (from modeApiConfigs or ProviderSettingsManager.getModeConfig())
2. Other open tabs' modes (which would require cross-tab communication)

Proposed Fix

Option A: Compare against project default (recommended)

// In ModesView.tsx
const modeSelector = useMemo(() => {
    const isIsolated = mode !== getDefaultModeForCurrentTab()  // New helper
    return (
        <div className={isIsolated ? "mode-isolated-indicator" : ""}>
            <ModeSelect value={mode} onChange={setMode} />
            {isIsolated && (
                <Tooltip content="This tab uses a different mode than the project default">
                    <Badge variant="info" size="sm">Custom</Badge>
                </Tooltip>
            )}
        </div>
    )
}, [mode])

Option B: Cross-tab indicator (future enhancement)

• Add a subtle dot/badge when this tab's mode differs from ANY other open tab
• Requires cross-tab communication via ClineProvider.activeInstances or VSCode window events

Scope

• Impact: All multi-tab users — improves discoverability of per-view isolation feature
• Risk: Low — purely visual enhancement, no behavior change
• Priority: Medium (enhances feature awareness)

Design Considerations

1. Badge style: Use a subtle dot or "Custom" badge in the mode selector header
2. Tooltip text: "This tab uses a different mode than other tabs" or "Per-view isolated mode"
3. Color coding: Consider adding a subtle border/background color to distinguish isolated modes (e.g., blue tint for architect, green for code)
4. Performance: The comparison should be O(1) — just compare against project default, not all open tabs

Related

• PR fix(webview): isolate parallel provider view state #909: fix(webview): isolate parallel provider view state #909
• Main tracking issue: [UX] Multi-tab mode isolation — follow-up issues from PR #909 #913