UX Feedback Loop - Visual Annotation System#130
Open
Conversation
- Created apps/frontend/src/shared/types/annotation.ts with comprehensive annotation types - Added AnnotationSeverity (low, medium, high, critical) - Added AnnotationStatus (draft, submitted, processing, completed, failed) - Added Annotation interface with screenshot, coordinates, description, severity - Added AnnotationCoordinates, AnnotationViewport interfaces - Added AnnotationFormData, AnnotationSubmissionResult types - Added IPC-related types (AnnotationCreatePayload, AnnotationListResult, etc.) - Added AnnotationStats for session statistics - Updated types/index.ts to export annotation types - Followed patterns from task.ts and other type files Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add ANNOTATION_SUBMIT, ANNOTATION_GET, ANNOTATION_DELETE, and ANNOTATION_LIST IPC channels for the UX feedback loop feature.
… clear actions - Created annotation-store.ts following kanban-settings-store pattern - Added state for isAnnotationMode, annotations array, and draftAnnotation - Actions include: - toggleAnnotationMode/setAnnotationMode for mode control - createDraftAnnotation for starting new annotation - submitDraftAnnotation for completing annotation with form data - cancelDraftAnnotation for discarding draft - addAnnotation/updateAnnotation/deleteAnnotation for CRUD - clearAnnotations for resetting state - getAnnotation/getAnnotationsCountByStatus/getAnnotationsCountBySeverity for queries - Includes localStorage persistence for annotation mode - Validates coordinates (positive values, non-zero dimensions) - Validates description (min 10 characters)
Created annotation-to-spec-service.ts with the following features:
- Converts visual UI annotations to Auto-Claude spec folder structure
- Generates spec.md with annotation details, severity, and screen context
- Generates requirements.json with annotation metadata
- Saves screenshot as PNG file from base64 data
- Validates annotation data (description length, coordinates, etc.)
- Creates folders in format: {id}-annotation-{slug}
- Follows existing patterns from project-store.ts and profile-service.ts
- Uses atomicWriteFile for safe file operations
- Handles edge cases and provides clear error messages
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…e operations - Created annotation-handlers.ts with IPC handlers for: - ANNOTATION_SUBMIT: Create annotation and optionally generate spec - ANNOTATION_GET: Get single annotation by ID - ANNOTATION_LIST: List annotations with optional filtering - ANNOTATION_DELETE: Delete annotation and optionally its generated spec - Storage: Annotations persisted to JSON file in userData directory - Integrated with AnnotationToSpecService for spec generation - Added validation for annotation payloads - Registered handlers in index.ts Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added Zod schema for create_annotation_task with validation - Added AnnotationTask interface - Registered create_annotation_task tool in MCP server - Implemented handler with rate limiting and IPC notification - Updated tool count from 5 to 6 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Updated implementation_plan.json: subtask-4-2 status to completed - Added detailed completion notes for create_annotation_task MCP tool - Updated build-progress.txt with session 14 summary - Overall progress: 7/16 subtasks completed (44%) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ction Created AnnotationOverlay component with click-drag selection functionality: - Full-screen overlay that appears when annotation mode is active - Click and drag to create selection rectangle with visual feedback - Touch support for mobile/tablet devices - Automatic screenshot capture using window.electronAPI.capture() - Escape key cancels active selection - Minimum selection size validation (20px) - Crosshair cursor when active, hints for user guidance - Creates draft annotation via store on selection complete - Only renders in dev mode when annotation mode is enabled Follows RateLimitModal.tsx patterns for code style, i18n usage, and error handling. Follows ResizablePanels.tsx patterns for mouse/touch drag event handling. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
… severity input Created AnnotationForm component with: - Dialog UI following FeedbackDialog.tsx pattern - Screenshot preview with dimensions display - Required description field with character count validation (min 10 chars) - Severity selector (low, medium, high, critical) with color indicators - Form validation with visual error feedback - Loading state during submission - Cancel support with isSubmitting guard - i18n translation keys for all UI text - Proper error handling with user-friendly messages - Updated barrel export in annotations/index.ts Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…annotations Created AnnotationList.tsx following ChatHistorySidebar.tsx patterns: - Display list of annotations grouped by status (draft/submitted/processing/completed/failed) - Status filter dropdown with all status options - Multi-select mode with SelectAll/Clear links and bulk delete - Inline editing of annotation descriptions with textarea - Screenshot thumbnail preview showing dimensions - Severity indicator with color-coded badges (blue/yellow/orange/red) - Delete confirmation dialogs (single and bulk with preview) - Regenerate spec option for failed annotations - Timestamp formatting with relative time (Just now, Xm ago, Xh ago, Xd ago) - Proper i18n translation keys using annotationList:* namespace - Error display for failed annotations - Component and route metadata display - Spec ID display for completed annotations - Dropdown menu with Edit/Regenerate/Delete actions - Loading state, empty state, and active annotation highlighting - Keyboard navigation support (Enter/Space to select, Escape to cancel edit) Exported via annotations/index.ts barrel. TypeScript compilation verified.
- Add toggle button for annotation mode - Shows active state with visual indicator - Uses MousePointer2 icon and tooltip - Supports icon-only and text modes - Only renders when wrapped in dev mode conditional
- Added 'annotation' section to en/common.json with English translations - Added 'annotation' section to fr/common.json with French translations - Includes keys for add, edit, delete, show/hide annotations - Includes placeholder text and count keys with pluralization support
…dev-only rendering - Add imports for AnnotationOverlay, AnnotationForm, AnnotationList, AnnotationToggle - Add annotation store usage (isAnnotationMode, draftAnnotation, annotations, etc.) - Add annotation state (annotationStatusFilter, isAnnotationListOpen) - Add handler functions: - handleAnnotationSubmit - submits draft annotation with form data - handleAnnotationCancel - cancels draft annotation - handleAnnotationDelete - deletes annotation by ID - handleAnnotationEdit - updates annotation description - handleAnnotationRegenerate - re-submits failed annotation for spec regeneration - Add dev-only annotation toolbar between project tabs and main content with: - "DEV TOOLS" label - AnnotationToggle button - "View Annotations" button with count - Active mode indicator with pulsing dot - Add dev-only annotation components section: - AnnotationOverlay - visual selection when annotation mode is active - AnnotationForm - dialog when draft annotation exists - AnnotationList - dialog for viewing all annotations - All annotation components wrapped with process.env.NODE_ENV === 'development' check - Follows existing codebase patterns for dev-only conditional rendering Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add createAnnotation and submitAnnotation methods to the preload script. Methods integrate with existing annotation IPC handlers for UX feedback loop.
Fixes: - Add annotation-form.test.tsx unit test for form validation, severity selection, and submission - Add annotation-to-spec-service.test.ts unit test for spec generation and validation - Fix lint warnings: - Prefix unused getMainWindow parameter with underscore in annotation-handlers.ts - Replace 'any' type with proper AnnotationStatus type in annotation-api.ts - Prefix unused getSeverityColorClass function with underscore in AnnotationForm.tsx - Add biome-ignore comment for intentional useEffect dependencies in AnnotationForm.tsx - Remove unused Input import from AnnotationList.tsx Tests: - annotation-form.test.tsx covers form validation, severity selection, submission flow - annotation-to-spec-service.test.ts covers validation, spec generation, and CRUD operations QA Fix Session: 1
Contributor
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (22)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This feature integrates a visual UX feedback loop into the Auto-Claude Electron application's development workflow. Based on the approach described in the Habr article (agentation-style visual annotation), developers will be able to annotate UI defects and gaps directly on the running prototype, with annotations automatically converted into actionable tasks/specs within the existing Auto-Claude pipeline. This eliminates friction between identifying UI issues and tracking them, accelerating the prototype-to-production workflow.