Skip to content

Add file/screenshot upload to QA feedback interface #1018

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndyMik90 merged 14 commits into from
Jan 13, 2026
Merged

Add file/screenshot upload to QA feedback interface #1018

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e694aee
auto-claude: subtask-1-1 - Add feedbackImages state and handlers to u…
AndyMik90 Jan 7, 2026
915a733
auto-claude: subtask-1-2 - Update IPC interface to support images in …
AndyMik90 Jan 7, 2026
9150597
auto-claude: subtask-1-3 - Update submitReview function in task-store…
AndyMik90 Jan 7, 2026
32b6e7a
auto-claude: subtask-2-1 - Add paste/drop handlers and image thumbnai…
AndyMik90 Jan 7, 2026
7174864
auto-claude: subtask-2-2 - Update TaskReview to pass image props to Q…
AndyMik90 Jan 7, 2026
0968189
auto-claude: subtask-2-3 - Update TaskDetailModal to manage image sta…
AndyMik90 Jan 7, 2026
93ab00b
auto-claude: subtask-3-1 - Add English translations for feedback imag…
AndyMik90 Jan 7, 2026
4ea7a39
auto-claude: subtask-3-2 - Add French translations for feedback image UI
AndyMik90 Jan 7, 2026
34950de
Merge origin/develop and fix PR review issues for file upload feature
Jan 13, 2026
13b6f5f
fix: resolve merge conflicts with develop and update test for images …
Jan 13, 2026
6f46661
fix(security): sanitize image filename to prevent path traversal
Jan 13, 2026
4e7a642
fix: add MIME type validation and fix SVG file extension
Jan 13, 2026
3725973
fix: require mimeType and apply SVG extension fix to drop handler
Jan 13, 2026
973c352
Merge branch 'develop' into auto-claude/107-add-file-upload-to-task-f…
AndyMik90 Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,15 @@ function TaskDetailModalContent({ open, task, onOpenChange, onSwitchToTerminals,
};

const handleReject = async () => {
if (!state.feedback.trim()) {
// Allow submission if there's text feedback OR images attached
if (!state.feedback.trim() && state.feedbackImages.length === 0) {
return;
}
state.setIsSubmitting(true);
await submitReview(task.id, false, state.feedback);
await submitReview(task.id, false, state.feedback, state.feedbackImages);
state.setIsSubmitting(false);
state.setFeedback('');
state.setFeedbackImages([]);
Copy link

@cursor cursor bot Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Form state cleared regardless of submission success

Medium Severity

The handleReject function clears feedbackImages (and feedback) unconditionally after calling submitReview, without checking whether submission succeeded. The submitReview function returns false on failure, but this return value is ignored. If submission fails, users lose their feedback text and attached images with no error indication. While text clearing was pre-existing, the new setFeedbackImages([]) call extends this data loss to images, which can be harder to recreate (e.g., screenshots). Compare with handleDelete in the same file which correctly checks result.success before cleanup.

Fix in Cursor Fix in Web

};

const handleDelete = async () => {
Expand Down Expand Up @@ -432,6 +434,8 @@ function TaskDetailModalContent({ open, task, onOpenChange, onSwitchToTerminals,
showConflictDialog={state.showConflictDialog}
onFeedbackChange={state.setFeedback}
onReject={handleReject}
images={state.feedbackImages}
onImagesChange={state.setFeedbackImages}
onMerge={handleMerge}
onDiscard={handleDiscard}
onShowDiscardDialog={state.setShowDiscardDialog}
Expand Down
10 changes: 9 additions & 1 deletion apps/frontend/src/renderer/components/task-detail/TaskReview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Task, WorktreeStatus, WorktreeDiff, MergeConflict, MergeStats, GitConflictInfo } from '../../../shared/types';
import type { Task, WorktreeStatus, WorktreeDiff, MergeConflict, MergeStats, GitConflictInfo, ImageAttachment } from '../../../shared/types';
import {
StagedSuccessMessage,
WorkspaceStatus,
Expand Down Expand Up @@ -32,6 +32,10 @@ interface TaskReviewProps {
showConflictDialog: boolean;
onFeedbackChange: (value: string) => void;
onReject: () => void;
/** Image attachments for visual feedback */
images?: ImageAttachment[];
/** Callback when images change */
onImagesChange?: (images: ImageAttachment[]) => void;
onMerge: () => void;
onDiscard: () => void;
onShowDiscardDialog: (show: boolean) => void;
Expand Down Expand Up @@ -74,6 +78,8 @@ export function TaskReview({
showConflictDialog,
onFeedbackChange,
onReject,
images,
onImagesChange,
onMerge,
onDiscard,
onShowDiscardDialog,
Expand Down Expand Up @@ -137,6 +143,8 @@ export function TaskReview({
isSubmitting={isSubmitting}
onFeedbackChange={onFeedbackChange}
onReject={onReject}
images={images}
onImagesChange={onImagesChange}
/>

{/* Discard Confirmation Dialog */}
Expand Down
29 changes: 28 additions & 1 deletion apps/frontend/src/renderer/components/task-detail/hooks/useTaskDetail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { useState, useRef, useEffect, useCallback } from 'react';
import { useProjectStore } from '../../../stores/project-store';
import { checkTaskRunning, isIncompleteHumanReview, getTaskProgress } from '../../../stores/task-store';
import type { Task, TaskLogs, TaskLogPhase, WorktreeStatus, WorktreeDiff, MergeConflict, MergeStats, GitConflictInfo } from '../../../../shared/types';
import type { Task, TaskLogs, TaskLogPhase, WorktreeStatus, WorktreeDiff, MergeConflict, MergeStats, GitConflictInfo, ImageAttachment } from '../../../../shared/types';

export interface UseTaskDetailOptions {
task: Task;
}

export function useTaskDetail({ task }: UseTaskDetailOptions) {
const [feedback, setFeedback] = useState('');
const [feedbackImages, setFeedbackImages] = useState<ImageAttachment[]>([]);
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider resetting feedbackImages when the task changes.

The feedbackImages state is not reset when the task prop changes. If the modal is reused across different tasks without unmounting, stale images from a previous review could persist.

♻️ Suggested defensive reset

Add an effect to clear images when the task ID changes:

+ // Reset feedback images when task changes
+ useEffect(() => {
+   setFeedbackImages([]);
+ }, [task.id]);
🤖 Prompt for AI Agents 
In @apps/frontend/src/renderer/components/task-detail/hooks/useTaskDetail.ts at
line 12, The feedbackImages state in useTaskDetail is never cleared when the
task prop changes, causing stale images to persist; add a useEffect inside the
useTaskDetail hook that watches the task identifier (e.g., task?.id or taskId)
and calls setFeedbackImages([]) whenever it changes so the modal resets images
when a new task is loaded. Ensure the effect runs only on task id changes (not
on every render) and reference feedbackImages and setFeedbackImages within the
useTaskDetail hook to implement the reset.

const [isSubmitting, setIsSubmitting] = useState(false);
const [activeTab, setActiveTab] = useState('overview');
const [isUserScrolledUp, setIsUserScrolledUp] = useState(false);
Expand Down Expand Up @@ -211,6 +212,26 @@ export function useTaskDetail({ task }: UseTaskDetailOptions) {
});
}, []);

// Add a feedback image
const addFeedbackImage = useCallback((image: ImageAttachment) => {
setFeedbackImages(prev => [...prev, image]);
}, []);

// Add multiple feedback images at once
const addFeedbackImages = useCallback((images: ImageAttachment[]) => {
setFeedbackImages(prev => [...prev, ...images]);
}, []);

// Remove a feedback image by ID
const removeFeedbackImage = useCallback((imageId: string) => {
setFeedbackImages(prev => prev.filter(img => img.id !== imageId));
}, []);

// Clear all feedback images
const clearFeedbackImages = useCallback(() => {
setFeedbackImages([]);
}, []);
Comment on lines +264 to +282
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

These new helper functions (addFeedbackImage, addFeedbackImages, removeFeedbackImage, clearFeedbackImages) for manipulating the feedbackImages state are a good addition. However, they are not currently used in this pull request. The QAFeedbackSection component receives the raw setFeedbackImages setter and implements its own logic for adding and removing images.

To improve encapsulation and make the useTaskDetail hook the single source of truth for this state logic, you should refactor the code to use these functions. Pass them as props to QAFeedbackSection instead of setFeedbackImages. This would make the code cleaner and avoid re-implementing state update logic in the component.

For example, QAFeedbackSection could receive onAddImages={addFeedbackImages} and onRemoveImage={removeFeedbackImage}.


// Track if we've already loaded preview for this task to prevent infinite loops
const hasLoadedPreviewRef = useRef<string | null>(null);

Expand Down Expand Up @@ -245,6 +266,7 @@ export function useTaskDetail({ task }: UseTaskDetailOptions) {
return {
// State
feedback,
feedbackImages,
isSubmitting,
activeTab,
isUserScrolledUp,
Expand Down Expand Up @@ -285,6 +307,7 @@ export function useTaskDetail({ task }: UseTaskDetailOptions) {

// Setters
setFeedback,
setFeedbackImages,
setIsSubmitting,
setActiveTab,
setIsUserScrolledUp,
Expand Down Expand Up @@ -318,5 +341,9 @@ export function useTaskDetail({ task }: UseTaskDetailOptions) {
handleLogsScroll,
togglePhase,
loadMergePreview,
addFeedbackImage,
addFeedbackImages,
removeFeedbackImage,
clearFeedbackImages,
};
}
Loading