feat(FN-677): add browser verification workflow step template

- Add browser verification workflow step template to WORKFLOW_STEP_TEMPLATES - Update NewTaskModal UI with browser verification checkbox - Update InlineCreateCard UI with browser verification toggle - Add tests for browser verification feature - Create changeset for minor version bump
2026-04-02 10:20:22 -07:00
parent 814ce9e9d7
commit a075c549d3
6 changed files with 286 additions and 38 deletions
--- a/packages/dashboard/app/components/InlineCreateCard.tsx
+++ b/packages/dashboard/app/components/InlineCreateCard.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from "react";
-import { Brain, Link, Lightbulb, ListTree, Zap, ChevronDown, ChevronUp } from "lucide-react";
+import { Brain, Link, Lightbulb, ListTree, Zap, ChevronDown, ChevronUp, Globe } from "lucide-react";
 import type { Task, TaskCreateInput, Settings } from "@fusion/core";
 import type { ToastType } from "../hooks/useToast";
 import { fetchModels, uploadAttachment, fetchSettings, updateGlobalSettings } from "../api";
@@ -89,6 +89,7 @@ export function InlineCreateCard({
  const [submitting, setSubmitting] = useState(false);
  const [pendingImages, setPendingImages] = useState<PendingImage[]>([]);
  const [isExpanded, setIsExpanded] = useState(false);
+  const [browserVerification, setBrowserVerification] = useState(false);
  const justResetRef = useRef(false);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const cardRef = useRef<HTMLDivElement>(null);
@@ -284,6 +285,7 @@ export function InlineCreateCard({
        modelId: hasExecutorOverride ? executorModelId : undefined,
        validatorModelProvider: hasValidatorOverride ? validatorProvider : undefined,
        validatorModelId: hasValidatorOverride ? validatorModelId : undefined,
+        enabledWorkflowSteps: browserVerification ? ["browser-verification"] : undefined,
      });

      // Upload pending images as attachments
@@ -318,6 +320,7 @@ export function InlineCreateCard({
      setShowDeps(false);
      setShowModels(false);
      setShowPresets(false);
+      setBrowserVerification(false);
      addToast(`Created ${task.id}`, "success");

      // Collapse and clear localStorage after successful task creation
@@ -345,6 +348,7 @@ export function InlineCreateCard({
    onSubmit,
    addToast,
    selectedPresetId,
+    browserVerification,
  ]);

  const handleKeyDown = useCallback(
@@ -463,6 +467,7 @@ export function InlineCreateCard({
    setShowDeps(false);
    setShowModels(false);
    setShowPresets(false);
+    setBrowserVerification(false);
    setIsExpanded(false);
  }, [description, onPlanningMode, addToast]);

@@ -484,6 +489,7 @@ export function InlineCreateCard({
    setShowDeps(false);
    setShowModels(false);
    setShowPresets(false);
+    setBrowserVerification(false);
    setIsExpanded(false);
  }, [description, onSubtaskBreakdown, addToast]);

@@ -775,6 +781,17 @@ export function InlineCreateCard({
                  <ListTree size={12} style={{ verticalAlign: "middle" }} />
                  Subtask
                </button>
+                <button
+                  type="button"
+                  className={`btn btn-sm ${browserVerification ? "btn-active" : ""}`}
+                  onClick={() => setBrowserVerification((v) => !v)}
+                  disabled={submitting}
+                  data-testid="browser-verification-toggle"
+                  title="Verify with agent-browser"
+                >
+                  <Globe size={12} style={{ verticalAlign: "middle" }} />
+                  Browser
+                </button>
              </>
            )}
          </div>
--- a/packages/dashboard/app/components/NewTaskModal.tsx
+++ b/packages/dashboard/app/components/NewTaskModal.tsx
@@ -5,7 +5,7 @@ import { uploadAttachment, fetchModels, fetchSettings, fetchWorkflowSteps, refin
 import type { ModelInfo } from "../api";
 import { applyPresetToSelection, getRecommendedPresetForSize } from "../utils/modelPresets";
 import { CustomModelDropdown } from "./CustomModelDropdown";
-import { Sparkles } from "lucide-react";
+import { Sparkles, Globe } from "lucide-react";

 const ALLOWED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];

@@ -585,44 +585,71 @@ export function NewTaskModal({ isOpen, onClose, tasks, onCreateTask, addToast, o
          </div>

          {/* Workflow Steps */}
-          {workflowSteps.length > 0 && (
-            <div className="form-group" data-testid="workflow-steps-section">
-              <label>Workflow Steps</label>
-              <small style={{ marginBottom: "8px", display: "block" }}>
-                Select steps to run after task implementation completes
-              </small>
-              <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
-                {workflowSteps.map((step) => (
-                  <label
-                    key={step.id}
-                    className="checkbox-label"
-                    style={{ display: "flex", alignItems: "flex-start", gap: "8px" }}
-                    data-testid={`workflow-step-checkbox-${step.id}`}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={selectedWorkflowSteps.includes(step.id)}
-                      onChange={(e) => {
-                        setSelectedWorkflowSteps((prev) =>
-                          e.target.checked
-                            ? [...prev, step.id]
-                            : prev.filter((id) => id !== step.id)
-                        );
-                      }}
-                      disabled={isSubmitting}
-                      style={{ marginTop: "2px" }}
-                    />
-                    <div>
-                      <span style={{ fontWeight: 500, fontSize: "13px" }}>{step.name}</span>
-                      <div style={{ fontSize: "12px", color: "var(--text-secondary)", marginTop: "2px" }}>
-                        {step.description}
-                      </div>
+          <div className="form-group" data-testid="workflow-steps-section">
+            <label>Workflow Steps</label>
+            <small style={{ marginBottom: "8px", display: "block" }}>
+              Select steps to run after task implementation completes
+            </small>
+            <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+              {workflowSteps.length > 0 && workflowSteps.map((step) => (
+                <label
+                  key={step.id}
+                  className="checkbox-label"
+                  style={{ display: "flex", alignItems: "flex-start", gap: "8px" }}
+                  data-testid={`workflow-step-checkbox-${step.id}`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedWorkflowSteps.includes(step.id)}
+                    onChange={(e) => {
+                      setSelectedWorkflowSteps((prev) =>
+                        e.target.checked
+                          ? [...prev, step.id]
+                          : prev.filter((id) => id !== step.id)
+                      );
+                    }}
+                    disabled={isSubmitting}
+                    style={{ marginTop: "2px" }}
+                  />
+                  <div>
+                    <span style={{ fontWeight: 500, fontSize: "13px" }}>{step.name}</span>
+                    <div style={{ fontSize: "12px", color: "var(--text-secondary)", marginTop: "2px" }}>
+                      {step.description}
                    </div>
-                  </label>
-                ))}
-              </div>
+                  </div>
+                </label>
+              ))}
+              <label
+                key="browser-verification"
+                className="checkbox-label"
+                style={{ display: "flex", alignItems: "flex-start", gap: "8px" }}
+                data-testid="browser-verification-checkbox"
+              >
+                <input
+                  type="checkbox"
+                  checked={selectedWorkflowSteps.includes("browser-verification")}
+                  onChange={(e) => {
+                    setSelectedWorkflowSteps((prev) =>
+                      e.target.checked
+                        ? [...prev, "browser-verification"]
+                        : prev.filter((id) => id !== "browser-verification")
+                    );
+                  }}
+                  disabled={isSubmitting}
+                  style={{ marginTop: "2px" }}
+                />
+                <div>
+                  <span style={{ fontWeight: 500, fontSize: "13px" }}>
+                    <Globe size={14} style={{ verticalAlign: "middle", marginRight: "4px" }} />
+                    Browser Verification
+                  </span>
+                  <div style={{ fontSize: "12px", color: "var(--text-secondary)", marginTop: "2px" }}>
+                    Verify web application functionality using browser automation (agent-browser)
+                  </div>
+                </div>
+              </label>
            </div>
-          )}
+          </div>

          <div className="form-group">
            <label>AI-assisted creation</label>
--- a/packages/dashboard/app/components/tests/InlineCreateCard.test.tsx
+++ b/packages/dashboard/app/components/tests/InlineCreateCard.test.tsx
@@ -19,6 +19,7 @@ vi.mock("lucide-react", () => ({
  Zap: () => null,
  ChevronDown: () => null,
  ChevronUp: () => null,
+  Globe: () => null,
 }));

 // Mock the api module
@@ -740,4 +741,89 @@ describe("InlineCreateCard button visibility when collapsed", () => {
    // Footer should now be in the DOM
    expect(document.getElementById("inline-create-controls")).toBeTruthy();
  });
+
+  describe("browser verification", () => {
+    it("shows browser verification button when expanded", () => {
+      const { props } = renderCard();
+      
+      // Button should not be visible when collapsed
+      expect(screen.queryByTestId("browser-verification-toggle")).toBeNull();
+      
+      // Expand the card
+      expandCard();
+      
+      // Button should now be visible
+      expect(screen.getByTestId("browser-verification-toggle")).toBeTruthy();
+    });
+
+    it("toggles browser verification when button is clicked", () => {
+      const { props } = renderCard();
+      expandCard();
+      
+      const button = screen.getByTestId("browser-verification-toggle");
+      
+      // Initially not active
+      expect(button).not.toHaveClass("btn-active");
+      
+      // Click to enable
+      fireEvent.click(button);
+      expect(button).toHaveClass("btn-active");
+      
+      // Click to disable
+      fireEvent.click(button);
+      expect(button).not.toHaveClass("btn-active");
+    });
+
+    it("includes browser-verification in enabledWorkflowSteps when submitting with browser verification enabled", async () => {
+      const mockOnSubmit = vi.fn().mockResolvedValue(createMockTask());
+      const { props } = renderCard([], { onSubmit: mockOnSubmit });
+      expandCard();
+      
+      // Enable browser verification
+      fireEvent.click(screen.getByTestId("browser-verification-toggle"));
+      
+      // Fill in description
+      const textarea = screen.getByPlaceholderText("What needs to be done?");
+      fireEvent.change(textarea, { target: { value: "Test task with browser verification" } });
+      
+      // Submit
+      fireEvent.click(screen.getByTestId("save-button"));
+      
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalledWith(
+          expect.objectContaining({
+            enabledWorkflowSteps: ["browser-verification"],
+          }),
+        );
+      });
+    });
+
+    it("resets browser verification state after successful submission", async () => {
+      const mockOnSubmit = vi.fn().mockResolvedValue(createMockTask({ id: "FN-042" }));
+      const { props } = renderCard([], { onSubmit: mockOnSubmit });
+      expandCard();
+      
+      // Enable browser verification
+      fireEvent.click(screen.getByTestId("browser-verification-toggle"));
+      
+      // Verify button is active
+      expect(screen.getByTestId("browser-verification-toggle")).toHaveClass("btn-active");
+      
+      // Fill in description and submit
+      const textarea = screen.getByPlaceholderText("What needs to be done?");
+      fireEvent.change(textarea, { target: { value: "Task to complete" } });
+      fireEvent.click(screen.getByTestId("save-button"));
+      
+      // Wait for submission to complete
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalled();
+      });
+      
+      // Collapse and expand to reset
+      expandCard();
+      
+      // Browser verification should be reset (button not active)
+      expect(screen.getByTestId("browser-verification-toggle")).not.toHaveClass("btn-active");
+    });
+  });
 });
--- a/packages/dashboard/app/components/tests/NewTaskModal.test.tsx
+++ b/packages/dashboard/app/components/tests/NewTaskModal.test.tsx
@@ -3,6 +3,12 @@ import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { NewTaskModal } from "../NewTaskModal";
 import type { Task, Column } from "@fusion/core";

+// Mock lucide-react
+vi.mock("lucide-react", () => ({
+  Sparkles: () => null,
+  Globe: () => null,
+}));
+
 // Mock the api module
 vi.mock("../../api", () => ({
  uploadAttachment: vi.fn().mockResolvedValue({}),
@@ -233,4 +239,75 @@ describe("NewTaskModal", () => {
    const createButton = screen.getByRole("button", { name: "Create Task" });
    expect(createButton).not.toBeDisabled();
  });
+
+  // Browser verification tests
+  describe("browser verification", () => {
+    it("shows browser verification checkbox", () => {
+      renderNewTaskModal();
+      
+      expect(screen.getByTestId("browser-verification-checkbox")).toBeTruthy();
+      expect(screen.getByText("Browser Verification")).toBeTruthy();
+    });
+
+    it("adds browser-verification to selected workflow steps when checkbox is checked", async () => {
+      const { props } = renderNewTaskModal();
+      
+      const checkbox = screen.getByTestId("browser-verification-checkbox").querySelector('input[type="checkbox"]') as HTMLInputElement;
+      fireEvent.click(checkbox);
+      
+      await waitFor(() => {
+        expect(checkbox.checked).toBe(true);
+      });
+      
+      const descTextarea = screen.getByLabelText(/Description/i);
+      fireEvent.change(descTextarea, { target: { value: "Test task" } });
+      
+      fireEvent.click(screen.getByRole("button", { name: "Create Task" }));
+      
+      await waitFor(() => {
+        expect(props.onCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            enabledWorkflowSteps: expect.arrayContaining(["browser-verification"]),
+          }),
+        );
+      });
+    });
+
+    it("removes browser-verification from selected workflow steps when checkbox is unchecked", async () => {
+      renderNewTaskModal();
+      
+      const checkbox = screen.getByTestId("browser-verification-checkbox").querySelector('input[type="checkbox"]') as HTMLInputElement;
+      
+      // Check then uncheck
+      fireEvent.click(checkbox);
+      await waitFor(() => {
+        expect(checkbox.checked).toBe(true);
+      });
+      
+      fireEvent.click(checkbox);
+      await waitFor(() => {
+        expect(checkbox.checked).toBe(false);
+      });
+    });
+
+    it("includes browser-verification in enabledWorkflowSteps when submitting with checkbox checked", async () => {
+      const { props } = renderNewTaskModal();
+      
+      const checkbox = screen.getByTestId("browser-verification-checkbox").querySelector('input[type="checkbox"]') as HTMLInputElement;
+      fireEvent.click(checkbox);
+      
+      const descTextarea = screen.getByLabelText(/Description/i);
+      fireEvent.change(descTextarea, { target: { value: "Browser test task" } });
+      
+      fireEvent.click(screen.getByRole("button", { name: "Create Task" }));
+      
+      await waitFor(() => {
+        expect(props.onCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            enabledWorkflowSteps: ["browser-verification"],
+          }),
+        );
+      });
+    });
+  });
 });