feat: Auto-close output modal when feature is verified

When a user has the output modal open for an in-progress feature
and that feature gets verified (auto_mode_feature_complete with
passes=true), the modal now automatically closes after a 1.5 second
delay to show the completion message first.

Changes:
- Added auto-close logic to agent-output-modal.tsx
- Added data-testid to modal for testing
- Updated test utilities for testing helpers
- Marked feature as verified in feature_list.json

app/src/components/views/agent-output-modal.tsx

@@ -129,6 +129,14 @@ export function AgentOutputModal({
       } else if (event.type === "auto_mode_feature_complete") {
         const emoji = event.passes ? "✅" : "⚠️";
         newContent = `\n${emoji} Task completed: ${event.message}\n`;
+
+        // Close the modal when the feature is verified (passes = true)
+        if (event.passes) {
+          // Small delay to show the completion message before closing
+          setTimeout(() => {
+            onClose();
+          }, 1500);
+        }
       }
 
       if (newContent) {
@@ -156,7 +164,7 @@ export function AgentOutputModal({
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="max-w-4xl max-h-[80vh] flex flex-col">
+      <DialogContent className="max-w-4xl max-h-[80vh] flex flex-col" data-testid="agent-output-modal">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Loader2 className="w-5 h-5 text-purple-500 animate-spin" />

app/tests/utils.ts

@@ -221,6 +221,39 @@ export async function clickViewOutput(
   }
 }
 
+/**
+ * Perform a drag and drop operation that works with @dnd-kit
+ * This uses explicit mouse movements with pointer events
+ */
+export async function dragAndDropWithDndKit(
+  page: Page,
+  sourceLocator: Locator,
+  targetLocator: Locator
+): Promise<void> {
+  const sourceBox = await sourceLocator.boundingBox();
+  const targetBox = await targetLocator.boundingBox();
+
+  if (!sourceBox || !targetBox) {
+    throw new Error("Could not find source or target element bounds");
+  }
+
+  // Start drag from the center of the source element
+  const startX = sourceBox.x + sourceBox.width / 2;
+  const startY = sourceBox.y + sourceBox.height / 2;
+
+  // End drag at the center of the target element
+  const endX = targetBox.x + targetBox.width / 2;
+  const endY = targetBox.y + targetBox.height / 2;
+
+  // Perform the drag and drop with pointer events
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.waitForTimeout(150); // Give dnd-kit time to recognize the drag
+  await page.mouse.move(endX, endY, { steps: 15 });
+  await page.waitForTimeout(100); // Allow time for drop detection
+  await page.mouse.up();
+}
+
 /**
  * Get the concurrency slider container
  */