Add Indexing Status Badge to Chat View

[hannesrudolph]

What specific problem does this solve?

Currently, users must navigate to Settings to check the codebase indexing status. This creates friction and lack of awareness about the indexing state, especially during active indexing or when errors occur.

Who is affected: All users who have enabled codebase indexing
When this happens:

• When starting indexing and wanting to monitor progress
• When indexing fails and users are unaware of the error
• When users want to verify if their codebase is indexed before using codebase_search
  Current behavior: Status only visible in settings page, requiring navigation away from main workflow
  Expected behavior: Quick visual feedback about indexing status without leaving the chat interface
  Impact: Users waste time navigating to settings, may miss indexing errors, and lack confidence about whether codebase search will work

How should this be solved?

Implement a small, unobtrusive indexing status badge in the chat view that appears only when:

1. Indexing is actively in progress
2. An indexing error has occurred

What will change:

• Add a floating status badge component (suggested placement: bottom corner of chat view, but exact position can be refined during implementation)
• Badge shows current status with appropriate styling:
  • Yellow pulsing dot + "Indexing X%" during active indexing
  • Red dot + "Indexing Error" when errors occur
  • Hidden when status is "Standby" or "Indexed" (successful completion)
• Badge is clickable to navigate directly to indexing settings
• Smooth fade in/out animations for appearance/disappearance

User interaction:

• Badge appears automatically when indexing starts or errors occur
• Shows real-time progress percentage during indexing
• Click badge to jump to settings for more details or to resolve errors
• Badge disappears after successful indexing completion

How will we know it works? (Acceptance Criteria)

Given codebase indexing is enabled
When indexing starts
Then a status badge appears in the chat view
And it shows "Indexing X%" with a yellow pulsing indicator
And the percentage updates in real-time

Given indexing is in progress
When an error occurs
Then the badge changes to show "Indexing Error" with a red indicator
And clicking the badge navigates to the indexing settings

Given indexing completes successfully
When the status changes to "Indexed"
Then the badge fades out and disappears
And the chat view returns to normal state

Given the badge is visible
When user clicks on it
Then they are navigated to the Codebase Indexing settings

Technical Implementation Details

Based on codebase analysis:

• Key files to modify:
  • webview-ui/src/components/chat/ChatView.tsx - Add badge component
  • Create new webview-ui/src/components/chat/IndexingStatusBadge.tsx
• Current architecture:
  • Status updates via indexingStatusUpdate messages already exist
  • ClineProvider already subscribes to indexing progress events
• Integration points:
  • Listen for existing indexingStatusUpdate messages in ChatView
  • Reuse status indicator styles from CodeIndexSettings.tsx

Technical considerations (optional)

• Badge positioning must account for different viewport sizes and avoid overlapping with existing UI elements
• Should work well with both light and dark themes
• Consider z-index to ensure badge stays above other UI elements
• Implement debouncing for rapid status updates during indexing
• Ensure accessibility with proper ARIA labels and keyboard navigation

Trade-offs and risks (optional)

Trade-offs:

• Always visible vs. conditional: Showing only during active states reduces UI clutter but may surprise users when it appears
• Placement options: Different positions (bottom-left, bottom-right, top corner) each have trade-offs regarding visibility and potential conflicts with other UI elements

Risks:

• UI overlap: Badge might cover important content on small screens
• Performance: Frequent progress updates could impact UI responsiveness if not optimized

[daniel-lxs]

LGTM!