feat(frontend): move task creation to dedicated page with scrollable layout

Replace the EntityDetailPage modal flow with a route-based CreateTaskPage for better accessibility and long-form usability.

Add route /entities/:entityId/tasks/new and update tests for both entity detail navigation and create-task page behavior.

frontend/src/pages/EntityDetailPage.tsx

@@ -1,35 +1,10 @@
-import { useMemo, useState } from 'react'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Link, useParams } from 'react-router-dom'
 import { getEntity } from '../api/entitiesApi'
-import {
-  createTask,
-  generateTaskPreview,
-  getEmailLookbackLabel,
-  getTasksByEntity,
-  type EmailLookback,
-} from '../api/tasksApi'
-
-interface TaskFormState {
-  name: string
-  prompt: string
-  scheduleCron: string
-  emailLookback: EmailLookback
-}
-
-const DEFAULT_TASK_FORM: TaskFormState = {
-  name: '',
-  prompt: '',
-  scheduleCron: '',
-  emailLookback: 'last_week',
-}
+import { getEmailLookbackLabel, getTasksByEntity } from '../api/tasksApi'
 
 export default function EntityDetailPage() {
   const { entityId = '' } = useParams()
-  const queryClient = useQueryClient()
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [taskForm, setTaskForm] = useState<TaskFormState>(DEFAULT_TASK_FORM)
-  const [preview, setPreview] = useState('')
 
   const { data: entity, isLoading: isLoadingEntity } = useQuery({
     queryKey: ['entity', entityId],
@@ -43,26 +18,6 @@ export default function EntityDetailPage() {
     enabled: Boolean(entityId),
   })
 
-  const createTaskMutation = useMutation({
-    mutationFn: createTask,
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ['entity-tasks', entityId] })
-      setDialogOpen(false)
-      setTaskForm(DEFAULT_TASK_FORM)
-      setPreview('')
-    },
-  })
-
-  const previewMutation = useMutation({
-    mutationFn: generateTaskPreview,
-    onSuccess: (value) => setPreview(value),
-  })
-
-  const canSubmit = useMemo(
-    () => Boolean(taskForm.name.trim() && taskForm.prompt.trim() && taskForm.scheduleCron.trim()),
-    [taskForm]
-  )
-
   if (!entityId) {
     return <div className="p-8 text-sm text-slate-300">Entity identifier is missing.</div>
   }
@@ -75,7 +30,10 @@ export default function EntityDetailPage() {
     return (
       <div className="p-8">
         <p className="text-sm text-red-300">Entity not found.</p>
-        <Link to="/entities" className="mt-4 inline-block text-sm text-cyan-300 hover:text-cyan-200">
+        <Link
+          to="/entities"
+          className="mt-4 inline-block text-sm text-cyan-300 hover:text-cyan-200"
+        >
           Back to Entities
         </Link>
       </div>
@@ -87,14 +45,16 @@ export default function EntityDetailPage() {
       <div className="flex items-start justify-between gap-4">
         <div>
           <h1 className="text-3xl font-bold text-slate-100">{entity.name}</h1>
-          <p className="mt-2 text-sm text-slate-300">{entity.jobTitle} - {entity.email}</p>
+          <p className="mt-2 text-sm text-slate-300">
+            {entity.jobTitle} - {entity.email}
+          </p>
         </div>
-        <button
-          onClick={() => setDialogOpen(true)}
+        <Link
+          to={`/entities/${entityId}/tasks/new`}
           className="rounded-md bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-cyan-400"
         >
           New Task
-        </button>
+        </Link>
       </div>
 
       <section>
@@ -104,126 +64,17 @@ export default function EntityDetailPage() {
             <li key={task.id} className="space-y-1 px-4 py-3">
               <p className="font-medium text-slate-100">{task.name}</p>
               <p className="text-sm text-slate-300">Schedule: {task.scheduleCron}</p>
-              <p className="text-sm text-slate-400">Email context: {getEmailLookbackLabel(task.emailLookback)}</p>
+              <p className="text-sm text-slate-400">
+                Email context: {getEmailLookbackLabel(task.emailLookback)}
+              </p>
             </li>
           ))}
-          {tasks.length === 0 && <li className="px-4 py-4 text-sm text-slate-400">No scheduled tasks yet.</li>}
+          {tasks.length === 0 && (
+            <li className="px-4 py-4 text-sm text-slate-400">No scheduled tasks yet.</li>
+          )}
         </ul>
       </section>
-
-      {dialogOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4" role="dialog" aria-modal="true">
-          <div className="w-full max-w-2xl rounded-xl border border-slate-800 bg-slate-950 p-6 shadow-2xl">
-            <h3 className="text-xl font-semibold text-slate-100">Create New Task</h3>
-            <form
-              className="mt-4 space-y-4"
-              onSubmit={(event) => {
-                event.preventDefault()
-                if (!canSubmit) return
-                createTaskMutation.mutate({
-                  entityId,
-                  name: taskForm.name,
-                  prompt: taskForm.prompt,
-                  scheduleCron: taskForm.scheduleCron,
-                  emailLookback: taskForm.emailLookback,
-                })
-              }}
-            >
-              <div>
-                <label htmlFor="task-name" className="text-sm font-medium text-slate-200">Task Name</label>
-                <input
-                  id="task-name"
-                  value={taskForm.name}
-                  onChange={(event) => setTaskForm((prev) => ({ ...prev, name: event.target.value }))}
-                  className="mt-1 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
-                  required
-                />
-              </div>
-
-              <div>
-                <label htmlFor="task-prompt" className="text-sm font-medium text-slate-200">Task Prompt</label>
-                <textarea
-                  id="task-prompt"
-                  value={taskForm.prompt}
-                  onChange={(event) => setTaskForm((prev) => ({ ...prev, prompt: event.target.value }))}
-                  className="mt-1 min-h-28 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
-                  required
-                />
-              </div>
-
-              <div className="grid gap-4 md:grid-cols-2">
-                <div>
-                  <label htmlFor="task-schedule" className="text-sm font-medium text-slate-200">Task Schedule</label>
-                  <input
-                    id="task-schedule"
-                    value={taskForm.scheduleCron}
-                    onChange={(event) => setTaskForm((prev) => ({ ...prev, scheduleCron: event.target.value }))}
-                    className="mt-1 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
-                    placeholder="0 9 * * 1"
-                    required
-                  />
-                </div>
-                <div>
-                  <label htmlFor="task-lookback" className="text-sm font-medium text-slate-200">Email Period</label>
-                  <select
-                    id="task-lookback"
-                    value={taskForm.emailLookback}
-                    onChange={(event) => setTaskForm((prev) => ({ ...prev, emailLookback: event.target.value as EmailLookback }))}
-                    className="mt-1 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
-                  >
-                    <option value="last_day">Last 24 hours</option>
-                    <option value="last_week">Last week</option>
-                    <option value="last_month">Last month</option>
-                  </select>
-                </div>
-              </div>
-
-              <div className="rounded-md border border-slate-800 bg-slate-900 p-3">
-                <button
-                  type="button"
-                  onClick={() => {
-                    if (!canSubmit) return
-                    previewMutation.mutate({
-                      entityId,
-                      name: taskForm.name,
-                      prompt: taskForm.prompt,
-                      scheduleCron: taskForm.scheduleCron,
-                      emailLookback: taskForm.emailLookback,
-                    })
-                  }}
-                  className="rounded-md border border-cyan-500 px-3 py-2 text-sm font-medium text-cyan-300 hover:bg-cyan-500/10"
-                >
-                  Generate Test Message
-                </button>
-
-                {preview && (
-                  <pre className="mt-3 whitespace-pre-wrap rounded-md bg-slate-950 p-3 text-xs text-slate-200">{preview}</pre>
-                )}
-              </div>
-
-              <div className="flex justify-end gap-2">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setDialogOpen(false)
-                    setPreview('')
-                  }}
-                  className="rounded-md border border-slate-700 px-4 py-2 text-sm text-slate-200"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="rounded-md bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-cyan-400 disabled:opacity-50"
-                  disabled={!canSubmit}
-                >
-                  Create Task
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
+