feat(frontend): implement step 1 - entity task detail and scheduler UX

frontend/src/pages/DashboardPage.tsx

@@ -1,38 +1,83 @@
 import { useQuery } from '@tanstack/react-query'
 import { getEntities } from '../api/entitiesApi'
 import { getLogs } from '../api/logsApi'
+import { getAllTasks, getEmailLookbackLabel } from '../api/tasksApi'
 
 export default function DashboardPage() {
   const appVersion = __APP_VERSION__
   const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
   const { data: logs = [] } = useQuery({ queryKey: ['logs'], queryFn: getLogs })
+  const { data: entityTasks = [] } = useQuery({ queryKey: ['entity-tasks'], queryFn: getAllTasks })
 
   const activeCount = entities.filter((e) => e.active).length
+  const scheduledDefaults = entities
+    .filter((entity) => entity.active && entity.scheduleCron)
+    .map((entity) => ({
+      id: `default-${entity.id}`,
+      entityName: entity.name,
+      taskName: `${entity.name} default task`,
+      scheduleCron: entity.scheduleCron,
+      emailLookbackLabel: `Last ${entity.contextWindowDays} days`,
+    }))
+
+  const scheduledCustomTasks = entityTasks.map((task) => ({
+    id: task.id,
+    entityName: entities.find((entity) => entity.id === task.entityId)?.name ?? 'Unknown entity',
+    taskName: task.name,
+    scheduleCron: task.scheduleCron,
+    emailLookbackLabel: getEmailLookbackLabel(task.emailLookback),
+  }))
+
+  const scheduledTasks = [...scheduledDefaults, ...scheduledCustomTasks]
 
   return (
-    <div className="p-8">
-      <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
-      <p className="mt-2 text-xs text-gray-400">Version {appVersion}</p>
-      <div className="mt-6 grid grid-cols-2 gap-4">
-        <div className="rounded-lg border bg-white p-4 shadow-sm">
-          <p className="text-sm text-gray-500">Active Entities</p>
+    <div className="space-y-8 p-8">
+      <div>
+        <h1 className="text-3xl font-bold text-slate-100">Dashboard</h1>
+        <p className="mt-2 text-xs text-slate-400">Version {appVersion}</p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="rounded-xl border border-slate-800 bg-slate-900/70 p-5 shadow-sm">
+          <p className="text-sm text-slate-400">Active Entities</p>
           <p className="mt-1 text-2xl font-bold">{activeCount} active {activeCount === 1 ? 'entity' : 'entities'}</p>
         </div>
+        <div className="rounded-xl border border-slate-800 bg-slate-900/70 p-5 shadow-sm">
+          <p className="text-sm text-slate-400">Scheduled Tasks</p>
+          <p className="mt-1 text-2xl font-bold text-slate-100">{scheduledTasks.length}</p>
+        </div>
       </div>
-      <div className="mt-8">
-        <h2 className="text-lg font-semibold text-gray-800">Recent Dispatches</h2>
-        <ul className="mt-2 divide-y divide-gray-100 rounded-lg border bg-white shadow-sm">
+
+      <section>
+        <h2 className="text-lg font-semibold text-slate-100">Scheduled Tasks</h2>
+        <ul className="mt-2 divide-y divide-slate-800 overflow-hidden rounded-xl border border-slate-800 bg-slate-900/70 shadow-sm">
+          {scheduledTasks.map((task) => (
+            <li key={task.id} className="px-4 py-3 text-sm">
+              <span className="font-medium text-slate-100">{task.taskName}</span>
+              <span className="ml-2 text-slate-300">{task.entityName}</span>
+              <p className="mt-1 text-xs text-slate-400">{task.scheduleCron} - {task.emailLookbackLabel}</p>
+            </li>
+          ))}
+          {scheduledTasks.length === 0 && (
+            <li className="px-4 py-3 text-sm text-slate-400">No scheduled tasks configured yet.</li>
+          )}
+        </ul>
+      </section>
+
+      <section>
+        <h2 className="text-lg font-semibold text-slate-100">Recent Dispatches</h2>
+        <ul className="mt-2 divide-y divide-slate-800 overflow-hidden rounded-xl border border-slate-800 bg-slate-900/70 shadow-sm">
           {logs.slice(0, 10).map((log) => (
             <li key={log.id} className="px-4 py-3 text-sm">
-              <span className="font-medium">{log.emailSubject}</span>
-              <span className="ml-2 text-gray-400">{log.entityName}</span>
+              <span className="font-medium text-slate-100">{log.emailSubject}</span>
+              <span className="ml-2 text-slate-400">{log.entityName}</span>
             </li>
           ))}
           {logs.length === 0 && (
-            <li className="px-4 py-3 text-sm text-gray-400">No dispatches yet.</li>
+            <li className="px-4 py-3 text-sm text-slate-400">No dispatches yet.</li>
           )}
         </ul>
-      </div>
+      </section>
     </div>
   )
 }

frontend/src/pages/EntitiesPage.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import {
   getEntities,
@@ -8,6 +9,7 @@ import {
 } from '../api/entitiesApi'
 
 export default function EntitiesPage() {
+  const navigate = useNavigate()
   const queryClient = useQueryClient()
   const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
   const [dialogOpen, setDialogOpen] = useState(false)
@@ -22,10 +24,11 @@ export default function EntitiesPage() {
 
   const createMutation = useMutation({
     mutationFn: createEntity,
-    onSuccess: () => {
+    onSuccess: (createdEntity) => {
       queryClient.invalidateQueries({ queryKey: ['entities'] })
       setDialogOpen(false)
       setForm({ name: '', email: '', jobTitle: '', personality: '', scheduleCron: '', contextWindowDays: 3 })
+      navigate(`/entities/${createdEntity.id}`)
     },
   })
 
@@ -37,32 +40,40 @@ export default function EntitiesPage() {
   return (
     <div className="p-8">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900">Virtual Entities</h1>
+        <h1 className="text-2xl font-bold text-slate-100">Virtual Entities</h1>
         <button
           onClick={() => setDialogOpen(true)}
-          className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          className="rounded bg-cyan-500 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-cyan-400"
         >
           New Entity
         </button>
       </div>
 
-      <ul className="mt-6 divide-y divide-gray-100 rounded-lg border bg-white shadow-sm">
+      <ul className="mt-6 divide-y divide-slate-800 rounded-lg border border-slate-800 bg-slate-900/70 shadow-sm">
         {entities.map((entity) => (
           <li key={entity.id} className="flex items-center justify-between px-4 py-3">
             <div>
-              <p className="font-medium">{entity.name}</p>
-              <p className="text-sm text-gray-500">{entity.jobTitle} — {entity.email}</p>
+              <p className="font-medium text-slate-100">{entity.name}</p>
+              <p className="text-sm text-slate-300">{entity.jobTitle} - {entity.email}</p>
+            </div>
+            <div className="ml-4 flex items-center gap-2">
+              <Link
+                to={`/entities/${entity.id}`}
+                className="rounded border border-cyan-500 px-3 py-1 text-sm text-cyan-300 hover:bg-cyan-500/10"
+              >
+                Open details
+              </Link>
+              <button
+                onClick={() => deleteMutation.mutate(entity.id)}
+                className="rounded border border-red-400/60 px-3 py-1 text-sm text-red-300 hover:bg-red-400/10"
+              >
+                Delete
+              </button>
             </div>
-            <button
-              onClick={() => deleteMutation.mutate(entity.id)}
-              className="ml-4 rounded border border-red-300 px-3 py-1 text-sm text-red-600 hover:bg-red-50"
-            >
-              Delete
-            </button>
           </li>
         ))}
         {entities.length === 0 && (
-          <li className="px-4 py-3 text-sm text-gray-400">No entities yet.</li>
+          <li className="px-4 py-3 text-sm text-slate-400">No entities yet.</li>
         )}
       </ul>
 
@@ -71,10 +82,10 @@ export default function EntitiesPage() {
           role="dialog"
           aria-modal="true"
           aria-label="Create Entity"
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70"
         >
-          <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
-            <h2 className="mb-4 text-lg font-semibold">New Entity</h2>
+          <div className="w-full max-w-md rounded-lg border border-slate-800 bg-slate-950 p-6 shadow-lg">
+            <h2 className="mb-4 text-lg font-semibold text-slate-100">New Entity</h2>
             <form
               onSubmit={(e) => {
                 e.preventDefault()
@@ -86,7 +97,7 @@ export default function EntitiesPage() {
                 placeholder="Name"
                 value={form.name}
                 onChange={(e) => setForm({ ...form, name: e.target.value })}
-                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                 required
               />
               <input
@@ -94,27 +105,27 @@ export default function EntitiesPage() {
                 type="email"
                 value={form.email}
                 onChange={(e) => setForm({ ...form, email: e.target.value })}
-                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                 required
               />
               <input
                 placeholder="Job Title"
                 value={form.jobTitle}
                 onChange={(e) => setForm({ ...form, jobTitle: e.target.value })}
-                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                 required
               />
               <textarea
                 placeholder="Personality"
                 value={form.personality}
                 onChange={(e) => setForm({ ...form, personality: e.target.value })}
-                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
               />
               <input
                 placeholder="Schedule Cron (e.g. 0 9 * * 1)"
                 value={form.scheduleCron}
                 onChange={(e) => setForm({ ...form, scheduleCron: e.target.value })}
-                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                 required
               />
               <input
@@ -122,7 +133,7 @@ export default function EntitiesPage() {
                 placeholder="Context Window Days"
                 value={form.contextWindowDays}
                 onChange={(e) => setForm({ ...form, contextWindowDays: Number(e.target.value) })}
-                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
                 min={1}
                 required
               />
@@ -130,13 +141,13 @@ export default function EntitiesPage() {
                 <button
                   type="button"
                   onClick={() => setDialogOpen(false)}
-                  className="rounded border border-gray-300 px-4 py-2 text-sm"
+                  className="rounded border border-slate-700 px-4 py-2 text-sm text-slate-200"
                 >
                   Cancel
                 </button>
                 <button
                   type="submit"
-                  className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+                  className="rounded bg-cyan-500 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-cyan-400"
                 >
                   Create
                 </button>

frontend/src/pages/EntityDetailPage.tsx

@@ -0,0 +1,230 @@
+import { useMemo, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } 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',
+}
+
+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],
+    queryFn: () => getEntity(entityId),
+    enabled: Boolean(entityId),
+  })
+
+  const { data: tasks = [], isLoading: isLoadingTasks } = useQuery({
+    queryKey: ['entity-tasks', entityId],
+    queryFn: () => getTasksByEntity(entityId),
+    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>
+  }
+
+  if (isLoadingEntity || isLoadingTasks) {
+    return <div className="p-8 text-sm text-slate-300">Loading entity details...</div>
+  }
+
+  if (!entity) {
+    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">
+          Back to Entities
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-8 p-8">
+      <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-1 text-sm text-slate-400">Default scheduler: {entity.scheduleCron || 'Not configured'}</p>
+        </div>
+        <button
+          onClick={() => setDialogOpen(true)}
+          className="rounded-md bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-cyan-400"
+        >
+          New Task
+        </button>
+      </div>
+
+      <section>
+        <h2 className="text-lg font-semibold text-slate-100">Scheduled Tasks</h2>
+        <ul className="mt-3 divide-y divide-slate-800 overflow-hidden rounded-xl border border-slate-800 bg-slate-900/70">
+          {tasks.map((task) => (
+            <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>
+            </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>
+  )
+}