feat(FN-806): replace hardcoded border-radius with dashboard token in agent-create-form

- Replace hardcoded border-radius value in AgentsView agent create form with CSS variable token
- Update dashboard README styling description for the Agents View create-form
- Add unit test for agent create form border-radius token usage

packages/dashboard/README.md

@@ -96,9 +96,9 @@ A persistent footer status bar at the bottom of the dashboard displays real-time
 Manage AI agents with a dedicated control surface accessible from the main dashboard navigation.
 
 **Features**:
-- **State Filter**: Styled dropdown to filter agents by state (All States, Idle, Active, Paused, Terminated) with icon and consistent dashboard styling
+- **State Filter**: Styled dropdown to filter agents by state (All States, Idle, Active, Paused, Terminated) with icon and consistent dashboard styling using design tokens
 - **View Modes**: Board (compact grid) and list (detailed card) layouts, persisted to localStorage
-- **Agent CRUD**: Create agents with name and role, change state, update roles inline, delete terminated agents
+- **Agent CRUD**: Create agents with name and role (create form uses dashboard radius tokens for consistent styling), change state, update roles inline, delete terminated agents
 - **Health Monitoring**: Heartbeat-based health status (Healthy, Unresponsive, Starting, Paused, Terminated)
 - **Agent Detail**: Click any agent card to open a detail modal with full agent information
 

packages/dashboard/app/components/AgentsView.tsx

@@ -612,7 +612,7 @@ export function AgentsView({ addToast, projectId }: AgentsViewProps) {
           margin-bottom: 16px;
           padding: 16px;
           background: var(--bg-secondary);
-          border-radius: 8px;
+          border-radius: var(--radius-sm);
         }
 
         .agent-create-form .input {

packages/dashboard/app/components/__tests__/AgentsView.test.tsx

@@ -349,6 +349,33 @@ describe("AgentsView", () => {
         );
       });
     });
+
+    it("renders create form with dashboard token-based styling", async () => {
+      render(<AgentsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("New Agent")).toBeTruthy();
+      });
+
+      fireEvent.click(screen.getByText("New Agent"));
+
+      // The create form container is rendered
+      const createForm = document.querySelector(".agent-create-form");
+      expect(createForm).toBeTruthy();
+
+      // The inline style block should use var(--radius-sm) instead of hardcoded 8px
+      const styleElements = document.querySelectorAll("style");
+      let foundCreateFormRule = false;
+      styleElements.forEach(styleEl => {
+        const css = styleEl.textContent ?? "";
+        if (css.includes(".agent-create-form")) {
+          foundCreateFormRule = true;
+          // Must not contain hardcoded border-radius: 8px
+          expect(css).not.toMatch(/\.agent-create-form\s*\{[^}]*border-radius:\s*8px/);
+        }
+      });
+      expect(foundCreateFormRule).toBe(true);
+    });
   });
 
   describe("change agent state", () => {