From 2bd0d21ebcf83d183494d99bf125d8c70825e838 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@users.noreply.github.com>
Date: Wed, 18 Feb 2026 20:43:00 +0000
Subject: [PATCH 1/2] fix(web): prevent task form input crash and harden
 coverage

---
 AGENTS.md                                     | 11 +++
 CLAUDE.md                                     | 11 +++
 apps/web/src/components/project/TaskForm.tsx  | 28 ++++--
 .../components/project/task-form.test.tsx     | 90 +++++++++++++++++++
 apps/web/tests/unit/pages/project.test.tsx    | 33 +++++++
 5 files changed, 167 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/tests/unit/components/project/task-form.test.tsx

diff --git a/AGENTS.md b/AGENTS.md
index 982adfa..e131c95 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -78,6 +78,17 @@ Before marking feature work complete:
 - [ ] Local test run passes for impacted packages
 - [ ] CI test checks are expected to pass with the changes
 
+### UI Form Behavior Test Rules (REQUIRED FOR FORM CHANGES)
+
+When changing any UI form or input handling logic, apply all of these rules:
+
+1. **MUST** add/extend tests that simulate realistic typing sequences (single char -> multi-char -> edit) for each changed text field
+2. **MUST** cover all changed input types (text, textarea, number, select, checkbox/radio where applicable), not just one happy-path field
+3. **MUST** include at least one integration-level test that exercises the full user flow (open form -> type -> submit -> assert payload/API call)
+4. **MUST** include assertions that no crash/regression occurs during rapid consecutive changes
+5. **MUST** avoid reading React synthetic event objects inside deferred/functional state updaters; capture `const value = event.currentTarget.value` before async or queued updates
+6. **SHOULD** include edge-case behavior for user edits (clearing fields, trimming, retyping, invalid intermediate numeric input)
+
 ---
 
 ## CRITICAL: Constitution Validation (NON-NEGOTIABLE)
diff --git a/CLAUDE.md b/CLAUDE.md
index 982adfa..e131c95 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -78,6 +78,17 @@ Before marking feature work complete:
 - [ ] Local test run passes for impacted packages
 - [ ] CI test checks are expected to pass with the changes
 
+### UI Form Behavior Test Rules (REQUIRED FOR FORM CHANGES)
+
+When changing any UI form or input handling logic, apply all of these rules:
+
+1. **MUST** add/extend tests that simulate realistic typing sequences (single char -> multi-char -> edit) for each changed text field
+2. **MUST** cover all changed input types (text, textarea, number, select, checkbox/radio where applicable), not just one happy-path field
+3. **MUST** include at least one integration-level test that exercises the full user flow (open form -> type -> submit -> assert payload/API call)
+4. **MUST** include assertions that no crash/regression occurs during rapid consecutive changes
+5. **MUST** avoid reading React synthetic event objects inside deferred/functional state updaters; capture `const value = event.currentTarget.value` before async or queued updates
+6. **SHOULD** include edge-case behavior for user edits (clearing fields, trimming, retyping, invalid intermediate numeric input)
+
 ---
 
 ## CRITICAL: Constitution Validation (NON-NEGOTIABLE)
diff --git a/apps/web/src/components/project/TaskForm.tsx b/apps/web/src/components/project/TaskForm.tsx
index cc6f15e..4818a21 100644
--- a/apps/web/src/components/project/TaskForm.tsx
+++ b/apps/web/src/components/project/TaskForm.tsx
@@ -41,6 +41,9 @@ export function TaskForm({
   const [error, setError] = useState<string | null>(null);
 
   const candidateParents = tasks.filter((task) => task.id !== currentTaskId);
+  const updateField = <K extends keyof TaskFormValues>(field: K, value: TaskFormValues[K]) => {
+    setValues((current) => ({ ...current, [field]: value }));
+  };
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -68,7 +71,10 @@ export function TaskForm({
         <span style={{ fontSize: '0.875rem', color: 'var(--sam-color-fg-muted)' }}>Title</span>
         <Input
           value={values.title}
-          onChange={(event) => setValues((current) => ({ ...current, title: event.currentTarget.value }))}
+          onChange={(event) => {
+            const value = event.currentTarget.value;
+            updateField('title', value);
+          }}
           placeholder="Task title"
           disabled={submitting}
         />
@@ -78,7 +84,10 @@ export function TaskForm({
         <span style={{ fontSize: '0.875rem', color: 'var(--sam-color-fg-muted)' }}>Description</span>
         <textarea
           value={values.description}
-          onChange={(event) => setValues((current) => ({ ...current, description: event.currentTarget.value }))}
+          onChange={(event) => {
+            const value = event.currentTarget.value;
+            updateField('description', value);
+          }}
           rows={3}
           disabled={submitting}
           style={{
@@ -99,8 +108,9 @@ export function TaskForm({
           type="number"
           value={String(values.priority)}
           onChange={(event) => {
-            const parsed = Number.parseInt(event.currentTarget.value, 10);
-            setValues((current) => ({ ...current, priority: Number.isNaN(parsed) ? 0 : parsed }));
+            const rawValue = event.currentTarget.value;
+            const parsed = Number.parseInt(rawValue, 10);
+            updateField('priority', Number.isNaN(parsed) ? 0 : parsed);
           }}
           disabled={submitting}
         />
@@ -110,7 +120,10 @@ export function TaskForm({
         <span style={{ fontSize: '0.875rem', color: 'var(--sam-color-fg-muted)' }}>Parent task</span>
         <select
           value={values.parentTaskId}
-          onChange={(event) => setValues((current) => ({ ...current, parentTaskId: event.currentTarget.value }))}
+          onChange={(event) => {
+            const value = event.currentTarget.value;
+            updateField('parentTaskId', value);
+          }}
           disabled={submitting}
           style={{
             width: '100%',
@@ -135,7 +148,10 @@ export function TaskForm({
         <span style={{ fontSize: '0.875rem', color: 'var(--sam-color-fg-muted)' }}>Agent hint</span>
         <Input
           value={values.agentProfileHint}
-          onChange={(event) => setValues((current) => ({ ...current, agentProfileHint: event.currentTarget.value }))}
+          onChange={(event) => {
+            const value = event.currentTarget.value;
+            updateField('agentProfileHint', value);
+          }}
           placeholder="Optional agent profile hint"
           disabled={submitting}
         />
diff --git a/apps/web/tests/unit/components/project/task-form.test.tsx b/apps/web/tests/unit/components/project/task-form.test.tsx
new file mode 100644
index 0000000..18ca93a
--- /dev/null
+++ b/apps/web/tests/unit/components/project/task-form.test.tsx
@@ -0,0 +1,90 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { Task } from '@simple-agent-manager/shared';
+import { TaskForm } from '../../../../src/components/project/TaskForm';
+
+const taskA: Task = {
+  id: 'task-a',
+  projectId: 'proj-1',
+  userId: 'user-1',
+  parentTaskId: null,
+  workspaceId: null,
+  title: 'Task A',
+  description: 'Task A description',
+  status: 'draft',
+  priority: 1,
+  agentProfileHint: null,
+  blocked: false,
+  startedAt: null,
+  completedAt: null,
+  errorMessage: null,
+  outputSummary: null,
+  outputBranch: null,
+  outputPrUrl: null,
+  createdAt: '2026-02-18T00:00:00.000Z',
+  updatedAt: '2026-02-18T00:00:00.000Z',
+};
+
+describe('TaskForm', () => {
+  it('accepts multi-character typing across fields and submits values', async () => {
+    const onSubmit = vi.fn();
+
+    render(
+      <TaskForm
+        mode="create"
+        tasks={[taskA]}
+        onSubmit={onSubmit}
+      />
+    );
+
+    fireEvent.change(screen.getByPlaceholderText('Task title'), { target: { value: 'Write tests' } });
+    fireEvent.change(screen.getByRole('textbox', { name: 'Description' }), {
+      target: { value: 'Cover critical user flows' },
+    });
+    fireEvent.change(screen.getByRole('spinbutton', { name: 'Priority' }), { target: { value: '12' } });
+    fireEvent.change(screen.getByRole('combobox', { name: 'Parent task' }), { target: { value: 'task-a' } });
+    fireEvent.change(screen.getByPlaceholderText('Optional agent profile hint'), {
+      target: { value: 'frontend-specialist' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create Task' }));
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      title: 'Write tests',
+      description: 'Cover critical user flows',
+      priority: 12,
+      parentTaskId: 'task-a',
+      agentProfileHint: 'frontend-specialist',
+    });
+  });
+
+  it('preserves input while typing multiple consecutive characters', () => {
+    render(
+      <TaskForm
+        mode="create"
+        tasks={[]}
+        onSubmit={vi.fn()}
+      />
+    );
+
+    const titleInput = screen.getByPlaceholderText('Task title') as HTMLInputElement;
+    const descriptionInput = screen.getByRole('textbox', { name: 'Description' }) as HTMLTextAreaElement;
+    const hintInput = screen.getByPlaceholderText('Optional agent profile hint') as HTMLInputElement;
+
+    fireEvent.change(titleInput, { target: { value: 'a' } });
+    fireEvent.change(titleInput, { target: { value: 'ab' } });
+    fireEvent.change(titleInput, { target: { value: 'abc' } });
+
+    fireEvent.change(descriptionInput, { target: { value: 'x' } });
+    fireEvent.change(descriptionInput, { target: { value: 'xy' } });
+    fireEvent.change(descriptionInput, { target: { value: 'xyz' } });
+
+    fireEvent.change(hintInput, { target: { value: 'm' } });
+    fireEvent.change(hintInput, { target: { value: 'mo' } });
+    fireEvent.change(hintInput, { target: { value: 'mod' } });
+
+    expect(titleInput.value).toBe('abc');
+    expect(descriptionInput.value).toBe('xyz');
+    expect(hintInput.value).toBe('mod');
+  });
+});
diff --git a/apps/web/tests/unit/pages/project.test.tsx b/apps/web/tests/unit/pages/project.test.tsx
index 02b663b..0d790e4 100644
--- a/apps/web/tests/unit/pages/project.test.tsx
+++ b/apps/web/tests/unit/pages/project.test.tsx
@@ -215,4 +215,37 @@ describe('Project page', () => {
       });
     });
   });
+
+  it('supports multi-character typing across new-task form fields', async () => {
+    renderProjectPage();
+
+    fireEvent.click(await screen.findByRole('button', { name: 'New task' }));
+
+    const titleInput = screen.getByPlaceholderText('Task title');
+    fireEvent.change(titleInput, { target: { value: 'W' } });
+    fireEvent.change(titleInput, { target: { value: 'Wr' } });
+    fireEvent.change(titleInput, { target: { value: 'Write docs' } });
+
+    fireEvent.change(screen.getByRole('textbox', { name: 'Description' }), {
+      target: { value: 'Document edge cases for typing flows' },
+    });
+    fireEvent.change(screen.getByRole('spinbutton', { name: 'Priority' }), {
+      target: { value: '11' },
+    });
+    fireEvent.change(screen.getByPlaceholderText('Optional agent profile hint'), {
+      target: { value: 'qa-reviewer' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create Task' }));
+
+    await waitFor(() => {
+      expect(mocks.createProjectTask).toHaveBeenCalledWith('proj-1', {
+        title: 'Write docs',
+        description: 'Document edge cases for typing flows',
+        priority: 11,
+        parentTaskId: undefined,
+        agentProfileHint: 'qa-reviewer',
+      });
+    });
+  });
 });

From d41e1f91466bf6f7d5d3260766b180b72348baf0 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@users.noreply.github.com>
Date: Wed, 18 Feb 2026 22:37:09 +0000
Subject: [PATCH 2/2] chore(ci): retrigger checks after preflight body update