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

.automaker/feature_list.json

@@ -34,7 +34,7 @@
       "3. wait until it is moved to verified",
       "4. assert modal is hidden"
     ],
-    "status": "in_progress"
+    "status": "verified"
   },
   {
     "id": "feature-1765254432072-bqk25kivv",
@@ -42,5 +42,12 @@
     "description": "Add a concurrency slider left of automode so I can specify how many max agents should be running at one time.  if we are at max, do not pull over more tasks from the backlog",
     "steps": [],
     "status": "verified"
+  },
+  {
+    "id": "feature-1765259922422-d61lu00sq",
+    "category": "Core",
+    "description": "add a context feature / route which allows users to upload files or images or text which will persist to .automaker/context. there should be a left panel with all context files and a text editor or image previewer that lets users view edit delete the context.  include the context in every single coding prompt or improve the coding_prompt.md to have a phase where it loads in that context",
+    "steps": [],
+    "status": "in_progress"
   }
 ]

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
  */