Dom/rpa_vision_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a7de6a488b8269927a6eb78adea3c9632acc3f33
rpa_vision_v3/.kiro/specs/tool-documentation-ui/tasks.md
Dom a7de6a488b feat: replay E2E fonctionnel — 25/25 actions, 0 retries, SomEngine via serveur 
Validé sur PC Windows (DESKTOP-58D5CAC, 2560x1600) :
- 8 clics résolus visuellement (1 anchor_template, 1 som_text_match, 6 som_vlm)
- Score moyen 0.75, temps moyen 1.6s
- Texte tapé correctement (bonjour, test word, date, email)
- 0 retries, 2 actions non vérifiées (OK)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 14:04:41 +02:00

342 lines
11 KiB
Markdown
Raw Blame History

# Tasks - Documentation Interactive des Outils
## Overview
Ce document détaille les tâches d'implémentation pour le système de documentation interactive des outils dans le Visual Workflow Builder. L'implémentation se fait en TypeScript/React pour s'intégrer parfaitement avec l'architecture existante.
## Programming Language
**TypeScript** - Pour une intégration native avec l'écosystème React existant du Visual Workflow Builder et bénéficier du typage statique pour la robustesse du code.
## Implementation Tasks
### Phase 1: Documentation Content & Service
#### Task 1.1: Create Documentation Content Structure
**Estimate:** 4 hours
**Priority:** High
**Dependencies:** None
Create comprehensive French documentation content for all existing tools in the palette.
**Deliverables:**
- `visual_workflow_builder/frontend/src/data/toolDocumentation.ts` - Complete documentation content
- Documentation for all 14 existing tools: click, type, wait, navigate, validate, extract, variable, transform, condition, loop, start, end, api, database
- Each tool documentation includes: description, purpose, use cases, parameters, examples, best practices, limitations
**Acceptance Criteria:**
- All tools from `NODE_TYPES` array have complete French documentation
- Documentation follows the `ToolDocumentation` interface from design
- Content is categorized by tool category (Actions Web, Données, Logique, Contrôle, Intégrations)
- Examples are practical and realistic
#### Task 1.2: Create Documentation Service
**Estimate:** 3 hours
**Priority:** High
**Dependencies:** Task 1.1
Implement the central documentation service for content management and retrieval.
**Deliverables:**
- `visual_workflow_builder/frontend/src/services/DocumentationService.ts`
- `visual_workflow_builder/frontend/src/types/documentation.ts` - TypeScript interfaces
- Caching mechanism for performance
- Search functionality within documentation
**Acceptance Criteria:**
- Implements all methods from `DocumentationService` interface
- Provides fast content retrieval (<200ms)
- Supports search across all content sections
- Handles missing documentation gracefully
### Phase 2: Palette Integration
#### Task 2.1: Create Help Button Component
**Estimate:** 2 hours
**Priority:** High
**Dependencies:** Task 1.2
Create the help button component that appears on palette tools.
**Deliverables:**
- `visual_workflow_builder/frontend/src/components/HelpButton/index.tsx`
- `visual_workflow_builder/frontend/src/components/HelpButton/HelpButton.css`
- Hover states and accessibility support
**Acceptance Criteria:**
- Button appears on hover over palette tools
- Accessible via keyboard navigation
- Prevents interference with drag-and-drop functionality
- Follows Material-UI design system
#### Task 2.2: Create Documentation Popup Component
**Estimate:** 4 hours
**Priority:** High
**Dependencies:** Task 2.1
Implement the modal popup that displays tool documentation.
**Deliverables:**
- `visual_workflow_builder/frontend/src/components/DocumentationPopup/index.tsx`
- `visual_workflow_builder/frontend/src/components/DocumentationPopup/DocumentationPopup.css`
- Search functionality within popup
- Responsive design
**Acceptance Criteria:**
- Modal opens when help button is clicked
- Displays complete tool documentation
- Includes internal search with highlighting
- Closes on outside click or ESC key
- Mobile-responsive layout
#### Task 2.3: Integrate Help Buttons in Palette
**Estimate:** 2 hours
**Priority:** High
**Dependencies:** Task 2.1, Task 2.2
Modify the existing Palette component to include help buttons.
**Deliverables:**
- Updated `visual_workflow_builder/frontend/src/components/Palette/index.tsx`
- Help button integration without breaking existing functionality
**Acceptance Criteria:**
- Help buttons appear on all palette tools
- Drag-and-drop functionality remains intact
- Hover states work correctly
- Performance impact is minimal
### Phase 3: Properties Panel Integration
#### Task 3.1: Create Documentation Tab Component
**Estimate:** 3 hours
**Priority:** High
**Dependencies:** Task 1.2
Create the documentation tab for the properties panel.
**Deliverables:**
- `visual_workflow_builder/frontend/src/components/DocumentationTab/index.tsx`
- `visual_workflow_builder/frontend/src/components/DocumentationTab/DocumentationTab.css`
- Contextual highlighting based on current configuration
**Acceptance Criteria:**
- Displays documentation for selected node type
- Shows general help when no node is selected
- Highlights relevant sections based on current parameters
- Updates automatically when selection changes
#### Task 3.2: Integrate Documentation Tab in Properties Panel
**Estimate:** 2 hours
**Priority:** High
**Dependencies:** Task 3.1
Modify the PropertiesPanel to include the documentation tab.
**Deliverables:**
- Updated `visual_workflow_builder/frontend/src/components/PropertiesPanel/index.tsx`
- Tab navigation integration
**Acceptance Criteria:**
- Documentation tab appears alongside existing tabs
- Tab switching works smoothly
- Content synchronizes with selected node
- Maintains existing properties panel functionality
### Phase 4: Advanced Features
#### Task 4.1: Implement Contextual Help Features
**Estimate:** 3 hours
**Priority:** Medium
**Dependencies:** Task 3.2
Add contextual help features like parameter highlighting and related tool suggestions.
**Deliverables:**
- Enhanced DocumentationTab with contextual features
- Parameter highlighting logic
- Related tools suggestions
**Acceptance Criteria:**
- Highlights documentation sections relevant to current configuration
- Suggests related tools based on current tool
- Shows warnings for risky configurations
- Provides links to complementary tools
#### Task 4.2: Implement Search Engine
**Estimate:** 3 hours
**Priority:** Medium
**Dependencies:** Task 2.2
Enhance search functionality with advanced features.
**Deliverables:**
- `visual_workflow_builder/frontend/src/utils/SearchEngine.ts`
- Advanced search with result ranking
- Search result navigation
**Acceptance Criteria:**
- Searches across all content sections
- Ranks results by relevance
- Highlights matching terms
- Supports navigation between results
- Handles no results gracefully
#### Task 4.3: Add Accessibility Features
**Estimate:** 2 hours
**Priority:** Medium
**Dependencies:** Task 3.2
Implement accessibility features for the documentation system.
**Deliverables:**
- Keyboard navigation support
- Screen reader compatibility
- Font size adjustment
- High contrast support
**Acceptance Criteria:**
- F1 key opens documentation for selected tool
- Full keyboard navigation in popups and tabs
- ARIA labels for screen readers
- Adjustable font sizes
- Meets WCAG 2.1 AA standards
### Phase 5: Performance & Polish
#### Task 5.1: Implement Performance Optimizations
**Estimate:** 2 hours
**Priority:** Medium
**Dependencies:** Task 4.2
Optimize performance for large documentation content.
**Deliverables:**
- Content lazy loading
- Search result caching
- Component memoization
**Acceptance Criteria:**
- Documentation loads in <200ms
- Search results appear instantly for cached queries
- Memory usage remains reasonable
- No performance impact on main workflow builder
#### Task 5.2: Add Error Handling & Fallbacks
**Estimate:** 2 hours
**Priority:** Medium
**Dependencies:** Task 5.1
Implement comprehensive error handling and graceful degradation.
**Deliverables:**
- Error boundary components
- Fallback content for missing documentation
- User-friendly error messages
**Acceptance Criteria:**
- Handles missing documentation gracefully
- Shows fallback content when errors occur
- Provides recovery options for users
- Logs errors for debugging
### Phase 6: Testing
#### Task 6.1: Unit Tests
**Estimate:** 4 hours
**Priority:** High
**Dependencies:** Task 5.2
Create comprehensive unit tests for all components and services.
**Deliverables:**
- `visual_workflow_builder/frontend/src/components/HelpButton/__tests__/index.test.tsx`
- `visual_workflow_builder/frontend/src/components/DocumentationPopup/__tests__/index.test.tsx`
- `visual_workflow_builder/frontend/src/components/DocumentationTab/__tests__/index.test.tsx`
- `visual_workflow_builder/frontend/src/services/__tests__/DocumentationService.test.ts`
- Test coverage >90%
**Acceptance Criteria:**
- All components have unit tests
- Service methods are fully tested
- Edge cases and error conditions covered
- Tests run in CI/CD pipeline
#### Task 6.2: Property-Based Tests
**Estimate:** 3 hours
**Priority:** Medium
**Dependencies:** Task 6.1
Implement property-based tests using fast-check to validate system properties.
**Deliverables:**
- `visual_workflow_builder/frontend/src/__tests__/properties/toolDocumentation.properties.test.ts`
- Tests for all 8 core properties from design document
- Minimum 100 iterations per property test
**Acceptance Criteria:**
- All core properties from design document are tested
- Tests validate documentation completeness
- UI integration properties are verified
- Performance properties are validated
- Tests include proper tags: `Feature: tool-documentation-ui, Property X: [description]`
#### Task 6.3: Integration Tests
**Estimate:** 2 hours
**Priority:** Medium
**Dependencies:** Task 6.2
Create integration tests for the complete documentation system.
**Deliverables:**
- `visual_workflow_builder/frontend/src/__tests__/integration/documentationSystem.test.tsx`
- End-to-end workflow tests
- Cross-component interaction tests
**Acceptance Criteria:**
- Tests complete user workflows (palette → popup → properties)
- Validates data flow between components
- Tests accessibility features
- Verifies performance requirements
## Implementation Guidelines
### Code Standards
- Follow existing TypeScript/React patterns in the codebase
- Use Material-UI components for consistency
- Implement proper TypeScript interfaces for all data structures
- Follow existing CSS naming conventions
### Performance Requirements
- Documentation popup must open in <200ms
- Search results must appear instantly for cached queries
- No impact on main workflow builder performance
- Memory usage must remain reasonable
### Accessibility Requirements
- Full keyboard navigation support
- Screen reader compatibility with ARIA labels
- Adjustable font sizes
- High contrast mode support
- F1 shortcut for contextual help
### Testing Requirements
- Unit test coverage >90%
- Property-based tests for all core properties
- Integration tests for complete workflows
- Performance tests for loading times
## Success Criteria
The implementation is considered successful when:
1. **All 14 existing tools have complete French documentation** accessible via both palette help buttons and properties panel tab
2. **Documentation loads in <200ms** and provides instant search results
3. **Full accessibility support** including keyboard navigation and screen reader compatibility
4. **Comprehensive test coverage** with unit, property-based, and integration tests
5. **Zero performance impact** on existing workflow builder functionality
6. **Graceful error handling** with appropriate fallbacks for missing content
## Estimated Total Effort
**26 hours** across 6 phases, with tasks prioritized for incremental delivery and testing.
Reference in New Issue View Git Blame Copy Permalink