Add Channel Analysis UI Strategy Document (#171)

Created a comprehensive strategy document for implementing the 'Select Channels for Analysis' UI in the team-based integration model. This document outlines:

- Current state analysis of legacy and team-based implementations
- Technical requirements and implementation phases
- Component structure and API endpoints needed
- Considerations for state management, performance, and security

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <[email protected]>

Author: halsk

frontend/src/components/slack/important_logs.txt

@@ -1,66 +1,208 @@
-# OAuth Flow Debugging Logs
-
-## OAuth Flow Issues
-
-1. Client ID and Client Secret not being properly passed through the OAuth flow
-   - ConnectWorkspace component now saves these in sessionStorage
-   - OAuthCallback component retrieves them during the OAuth flow
-
-2. Team ID not available at the time of OAuth callback
-   - Added logic to wait for team context to load before proceeding
-   - Added timeout to prevent indefinite loading
-
-3. Slack API Client URL Formation
-   - Fixed base URL path in SlackApiClient to properly handle team-scoped integrations
-   - Added proper error handling for API responses
-
-## API Response Conversion
-
-1. Backend failing to properly convert SQLAlchemy models to Pydantic schemas
-   - Added conversion functions for ServiceResource, IntegrationShare, and ResourceAccess
-   - Updated error handling for null responses
-
-2. Resource Sync Button
-   - Fixed issues with the sync resources button not working properly
-   - Added proper URL formation in the API client
-
-## Team-Based Integration Model
-
-1. Transitioning from legacy Slack integration to team-based model
-   - Each team now has its own integration
-   - OAuth callback requires team context
-   - Client credentials collected on a per-team basis instead of environment variables
-
-## Error Debugging (April 15-18)
-
-1. Authorization Error (April 17):
-   - Error: Failed to complete OAuth handshake with Slack
-   - Status: 400
-   - Details: Invalid client_secret parameter
-   - Resolution: Fixed parameter passing from frontend to backend
-
-2. OAuth Token Expiration (April 17):
-   - Error: Failed to fetch channel list
-   - Status: 401
-   - Details: Token expired or revoked
-   - Resolution: Added reconnection flow in IntegrationDetail component
-
-3. URL Construction Issue (April 15):
-   - Error: Duplicate path segment in URL 
-   - URL: https://api.example.com/api/slack/slack/oauth-callback
-   - Fixed URL: https://api.example.com/api/slack/oauth-callback
-
-4. Reconnection Error (April 18):
-   - Error: Failed to reconnect Slack workspace
-   - Status: 409
-   - Details: Workspace already connected to team "Engineering"
-   - WorkspaceID: W0123456789
-   - AttemptedTeamID: team_67890
-   - Resolution: Need to implement uniqueness constraints
-
-## Next Steps
-
-1. Implement uniqueness constraints for (team_id, slack_workspace_id)
-2. Create detailed API and UI implementation plans
-3. Add proper error handling for duplicate workspace connections
-4. Implement reconnection flow for expired or revoked tokens
+# Strategy for Integrating "Select Channels for Analysis" UI into Team-Based Integration
+
+## Overview
+This document outlines a strategy for implementing the "Select Channels for Analysis" functionality within the team-based integration model, leveraging existing components from the legacy Slack implementation while maintaining proper team context.
+
+## Current State Analysis
+
+### Legacy Implementation
+The current "Select Channels for Analysis" functionality is implemented in:
+- `frontend/src/components/slack/ChannelList.tsx`: The main component for channel selection
+- `frontend/src/pages/slack/ChannelAnalysisPage.tsx`: The page for running channel analysis
+
+Key features of the legacy implementation:
+1. Fetches channels from Slack workspace
+2. Provides UI for filtering and selecting channels (pagination, search, type filters)
+3. Marks channels for analysis
+4. Manages bot installation status for selected channels
+5. Synchronizes channel data with Slack API
+
+### Team-Based Integration Model
+The new team-based integration model uses:
+- `frontend/src/components/integration/IntegrationDetail.tsx`: Main component for viewing integration details
+- `frontend/src/components/integration/ResourceList.tsx`: Component for displaying integration resources (channels, users)
+
+The team-based model currently:
+1. Displays integration details and status
+2. Shows resources as a simple list without selection functionality
+3. Provides a "Sync Resources" action to update resources
+4. Uses React context for integration data management (`useIntegration`)
+
+## Technical Requirements
+
+1. Enable selection of specific channels for analysis within a team-owned Slack integration
+2. Maintain team context throughout the channel selection and analysis process
+3. Support channel filtering and search functionality
+4. Handle bot installation status for selected channels
+5. Ensure proper synchronization with Slack API
+6. Manage transitions between different UI states (loading, error, success)
+7. Implement proper pagination and sorting
+8. Preserve existing integration management features
+
+## Implementation Strategy
+
+### 1. Create new components for channel selection within team context
+
+#### A. New Component: `TeamChannelSelector`
+Create a new component specifically for selecting channels within a team-owned integration:
+
+```
+frontend/src/components/integration/TeamChannelSelector.tsx
+```
+
+This component will:
+- Be based on the existing `ChannelList` component
+- Accept team context and integration ID as props
+- Use the integration context for data fetching and state management
+- Show only channels from the specific team-owned integration
+- Maintain the same filtering and search capabilities
+- Connect to team-scoped API endpoints
+
+#### B. New Component: `ChannelAnalysisSettings`
+Create a component for configuring analysis parameters:
+
+```
+frontend/src/components/integration/ChannelAnalysisSettings.tsx
+```
+
+This will:
+- Provide date range selection
+- Toggle options (include threads, include reactions)
+- Similar to the form section in the existing `ChannelAnalysisPage`
+
+#### C. New Page: `TeamChannelAnalysisPage`
+Create a new page for running analysis within team context:
+
+```
+frontend/src/pages/integration/TeamChannelAnalysisPage.tsx
+```
+
+This will:
+- Be similar to the existing `ChannelAnalysisPage`
+- Maintain team context
+- Use team-scoped API endpoints
+
+### 2. Extend the Integration Context
+
+Update `IntegrationContext.tsx` and `integrationService.ts` to include:
+
+- Channel selection state management
+- Methods for selecting/deselecting channels for analysis
+- Methods for running analysis on selected channels
+- Methods for fetching analysis results
+
+Example additions:
+```typescript
+// New methods for IntegrationContext
+const selectChannelsForAnalysis = async (
+  integrationId: string, 
+  channelIds: string[]
+): Promise<boolean> => {
+  // Implementation
+}
+
+const analyzeChannel = async (
+  integrationId: string,
+  channelId: string,
+  options: AnalysisOptions
+): Promise<AnalysisResult> => {
+  // Implementation
+}
+```
+
+### 3. Enhance the backend API endpoints
+
+Extend the team-based integration API to support:
+- Marking channels for analysis within team context
+- Running analysis on selected channels
+- Managing bot installation for selected channels
+- Retrieving analysis results with proper team scoping
+
+Example endpoints:
+```
+POST /api/v1/integrations/{integrationId}/resources/channels/select
+POST /api/v1/integrations/{integrationId}/resources/channels/{channelId}/analyze
+GET /api/v1/integrations/{integrationId}/resources/channels/{channelId}/analysis/{analysisId}
+```
+
+### 4. Update the routing and navigation
+
+Enhance the application routing to include:
+- Path to channel selection for team integrations
+- Path to channel analysis for team integrations
+- Proper navigation between these views
+
+Example routes:
+```typescript
+<Route path="/dashboard/integrations/:integrationId/channels" element={<TeamChannelSelectorPage />} />
+<Route path="/dashboard/integrations/:integrationId/channels/:channelId/analyze" element={<TeamChannelAnalysisPage />} />
+<Route path="/dashboard/integrations/:integrationId/channels/:channelId/analysis/:analysisId" element={<TeamAnalysisResultPage />} />
+```
+
+### 5. Enhance the UI for resource management
+
+Update `IntegrationDetail.tsx` and `ResourceList.tsx` to:
+- Add action buttons for channel selection and analysis
+- Provide visual indicators for channels marked for analysis
+- Include proper navigation to channel selection and analysis pages
+
+### 6. Data Migration and Backward Compatibility
+
+Consider:
+- Migrating existing channel selection data to the team-based model
+- Maintaining backward compatibility with existing analysis results
+- Providing a smooth transition path for users
+
+## Implementation Phases
+
+### Phase 1: Core Components and Structure
+1. Create the `TeamChannelSelector` component (simplified version)
+2. Enhance integration context with basic channel selection functionality
+3. Update `ResourceList` to include action buttons for channel management
+4. Implement basic routing for new channel selection views
+
+### Phase 2: Complete UI Implementation
+1. Enhance `TeamChannelSelector` with full filtering and search capabilities
+2. Create the `ChannelAnalysisSettings` component
+3. Implement `TeamChannelAnalysisPage` for running analysis
+4. Update navigation and links throughout the application
+
+### Phase 3: API Integration and Data Flow
+1. Connect UI components to backend API endpoints
+2. Implement proper error handling and loading states
+3. Add data validation and synchronization
+4. Test the complete flow from selection to analysis
+
+### Phase 4: Refinement and Optimization
+1. Improve performance for large channel lists
+2. Enhance UX for channel selection process
+3. Add additional features like bulk selection
+4. Implement proper documentation and user guidance
+
+## Technical Considerations
+
+### State Management
+- Use React context for managing integration and channel selection state
+- Consider using reducers for complex state transitions
+- Implement proper caching for channel data
+
+### Performance
+- Optimize for large channel lists with pagination and virtualization
+- Implement efficient filtering and searching on the client side
+- Consider using web workers for heavy computations
+
+### Security
+- Ensure proper team scoping for all API requests
+- Validate permissions for channel access and analysis
+- Implement proper error handling for unauthorized actions
+
+### UX Considerations
+- Maintain consistent UI patterns with existing components
+- Provide clear feedback during long-running operations
+- Implement progressive loading for large data sets
+
+## Conclusion
+
+This strategy provides a comprehensive approach to implementing the "Select Channels for Analysis" functionality within the team-based integration model. By leveraging existing components from the legacy implementation while enhancing them with team context awareness, we can provide a seamless experience for users transitioning to the new model.
+
+The phased implementation approach allows for incremental development and testing, ensuring that each component functions correctly before moving on to the next phase.