apteva 0.4.32 → 0.4.44

package/src/web/components/tasks/TasksPage.tsx

@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { TasksIcon, CloseIcon, RecurringIcon, ScheduledIcon, TaskOnceIcon } from "../common/Icons";
+import { Select } from "../common/Select";
+import { useConfirm } from "../common/Modal";
 import { useAuth, useProjects } from "../../context";
 import { useTelemetry } from "../../context/TelemetryContext";
-import type { Task, TaskTrajectoryStep, ToolUseBlock, ToolResultBlock } from "../../types";
+import type { Task, TaskTrajectoryStep, ToolUseBlock, ToolResultBlock, Agent } from "../../types";
 
 interface TasksPageProps {
   onSelectAgent?: (agentId: string) => void;
@@ -14,8 +16,10 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<string>("all");
+  const [agentFilter, setAgentFilter] = useState<string>("all");
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
   const [loadingTask, setLoadingTask] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
   const lastProcessedEventRef = useRef<string | null>(null);
 
   // Subscribe to task telemetry events for real-time updates
@@ -87,9 +91,23 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
     }
   }, [authFetch]);
 
+  // Extract unique agents from tasks for the agent filter
+  const uniqueAgents = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const t of tasks) {
+      const id = t.agentId || (t as any).agent_id;
+      const name = t.agentName || (t as any).agent_name;
+      if (id && name && !map.has(id)) {
+        map.set(id, name);
+      }
+    }
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [tasks]);
+
   // Sort tasks: running first, then pending by next execution (soonest first), then completed/failed by date
   const sortedTasks = useMemo(() => {
-    return [...tasks].sort((a, b) => {
+    const filtered = agentFilter === "all" ? tasks : tasks.filter(t => (t.agentId || (t as any).agent_id) === agentFilter);
+    return [...filtered].sort((a, b) => {
       // Running tasks first
       if (a.status === "running" && b.status !== "running") return -1;
       if (b.status === "running" && a.status !== "running") return 1;
@@ -111,7 +129,7 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
       const bDate = b.completed_at || b.executed_at || b.created_at;
       return new Date(bDate).getTime() - new Date(aDate).getTime();
     });
-  }, [tasks]);
+  }, [tasks, agentFilter]);
 
   const statusColors: Record<string, string> = {
     pending: "bg-yellow-500/20 text-yellow-400",
@@ -135,36 +153,61 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
       <div className={`flex-1 p-4 md:p-6 overflow-auto ${selectedTask ? 'hidden md:block md:w-1/2 lg:w-2/3' : ''}`}>
         <div className="max-w-4xl">
           <div className="mb-6">
-            <div className="mb-4">
-              <h1 className="text-xl md:text-2xl font-semibold mb-1">Tasks</h1>
-              <p className="text-sm text-[#666]">
-                View tasks from all running agents
-              </p>
+            <div className="mb-4 flex items-start justify-between">
+              <div>
+                <h1 className="text-xl md:text-2xl font-semibold mb-1">Tasks</h1>
+                <p className="text-sm text-[var(--color-text-muted)]">
+                  View tasks from all running agents
+                </p>
+              </div>
+              <button
+                onClick={() => setShowCreateModal(true)}
+                className="px-3 py-1.5 rounded text-sm bg-[var(--color-accent)] text-black hover:opacity-90 transition flex items-center gap-1.5 flex-shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
+                Create Task
+              </button>
             </div>
-            <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
-              {filterOptions.map(opt => (
-                <button
-                  key={opt.value}
-                  onClick={() => setFilter(opt.value)}
-                  className={`px-3 py-1.5 rounded text-sm transition whitespace-nowrap ${
-                    filter === opt.value
-                      ? "bg-[#f97316] text-black"
-                      : "bg-[#1a1a1a] hover:bg-[#222]"
-                  }`}
-                >
-                  {opt.label}
-                </button>
-              ))}
+            <div className="flex items-center gap-3 flex-wrap pb-1">
+              <div className="flex gap-2 overflow-x-auto scrollbar-hide">
+                {filterOptions.map(opt => (
+                  <button
+                    key={opt.value}
+                    onClick={() => setFilter(opt.value)}
+                    className={`px-3 py-1.5 rounded text-sm transition whitespace-nowrap ${
+                      filter === opt.value
+                        ? "bg-[var(--color-accent)] text-black"
+                        : "bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)]"
+                    }`}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+              {uniqueAgents.length > 0 && (
+                <div className="w-48">
+                  <Select
+                    value={agentFilter}
+                    onChange={setAgentFilter}
+                    placeholder="All agents"
+                    compact
+                    options={[
+                      { value: "all", label: "All agents" },
+                      ...uniqueAgents.map(([id, name]) => ({ value: id, label: name })),
+                    ]}
+                  />
+                </div>
+              )}
             </div>
           </div>
 
           {loading ? (
-            <div className="text-center py-12 text-[#666]">Loading tasks...</div>
+            <div className="text-center py-12 text-[var(--color-text-muted)]">Loading tasks...</div>
           ) : sortedTasks.length === 0 ? (
             <div className="text-center py-12">
-              <TasksIcon className="w-12 h-12 mx-auto mb-4 text-[#333]" />
-              <p className="text-[#666]">No tasks found</p>
-              <p className="text-sm text-[#444] mt-1">
+              <TasksIcon className="w-12 h-12 mx-auto mb-4 text-[var(--color-border-light)]" />
+              <p className="text-[var(--color-text-muted)]">No tasks found</p>
+              <p className="text-sm text-[var(--color-text-faint)] mt-1">
                 Tasks will appear here when agents create them
               </p>
             </div>
@@ -174,16 +217,16 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
                 <div
                   key={`${task.agentId}-${task.id}`}
                   onClick={() => selectTask(task)}
-                  className={`bg-[#111] border rounded-lg p-4 cursor-pointer transition ${
+                  className={`bg-[var(--color-surface)] border rounded-lg p-4 cursor-pointer transition ${
                     selectedTask?.id === task.id && selectedTask?.agentId === task.agentId
-                      ? "border-[#f97316]"
-                      : "border-[#1a1a1a] hover:border-[#333]"
+                      ? "border-[var(--color-accent)]"
+                      : "border-[var(--color-border)] hover:border-[var(--color-border-light)]"
                   }`}
                 >
                   <div className="flex items-start justify-between mb-2">
                     <div className="flex-1">
                       <h3 className="font-medium">{task.title}</h3>
-                      <p className="text-sm text-[#666]">{task.agentName}</p>
+                      <p className="text-sm text-[var(--color-text-muted)]">{task.agentName}</p>
                     </div>
                     <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[task.status] || statusColors.pending}`}>
                       {task.status}
@@ -191,12 +234,12 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
                   </div>
 
                   {task.description && (
-                    <p className="text-sm text-[#888] mb-2 line-clamp-2">
+                    <p className="text-sm text-[var(--color-text-secondary)] mb-2 line-clamp-2">
                       {task.description}
                     </p>
                   )}
 
-                  <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-[#555]">
+                  <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-[var(--color-text-faint)]">
                     <span className="flex items-center gap-1">
                       {task.type === "recurring"
                         ? <RecurringIcon className="w-3.5 h-3.5" />
@@ -208,10 +251,10 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
                     </span>
                     <span>Priority: {task.priority}</span>
                     {task.next_run && (
-                      <span className="text-[#f97316]">{formatRelativeTime(task.next_run)}</span>
+                      <span className="text-[var(--color-accent)]">{formatRelativeTime(task.next_run)}</span>
                     )}
                     {!task.next_run && task.execute_at && (
-                      <span className="text-[#f97316]">{formatRelativeTime(task.execute_at)}</span>
+                      <span className="text-[var(--color-accent)]">{formatRelativeTime(task.execute_at)}</span>
                     )}
                     <span>Created: {new Date(task.created_at).toLocaleDateString()}</span>
                   </div>
@@ -230,6 +273,18 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
           onClose={() => setSelectedTask(null)}
           onSelectAgent={onSelectAgent}
           loading={loadingTask}
+          authFetch={authFetch}
+          onRefresh={() => { fetchTasks(); setSelectedTask(null); }}
+        />
+      )}
+
+      {/* Create Task Modal */}
+      {showCreateModal && (
+        <CreateTaskModal
+          authFetch={authFetch}
+          currentProjectId={currentProjectId}
+          onClose={() => setShowCreateModal(false)}
+          onCreated={() => { fetchTasks(); setShowCreateModal(false); }}
         />
       )}
     </div>
@@ -242,17 +297,78 @@ export interface TaskDetailPanelProps {
   onClose: () => void;
   onSelectAgent?: (agentId: string) => void;
   loading?: boolean;
+  authFetch?: (url: string, options?: RequestInit) => Promise<Response>;
+  onRefresh?: () => void;
 }
 
-export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, loading }: TaskDetailPanelProps) {
+export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, loading, authFetch, onRefresh }: TaskDetailPanelProps) {
+  const [executing, setExecuting] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const { confirm, ConfirmDialog } = useConfirm();
+
+  const handleExecute = async () => {
+    if (!authFetch || executing) return;
+    setExecuting(true);
+    try {
+      await authFetch(`/api/tasks/${task.agentId}/${task.id}/execute`, { method: "POST" });
+      onRefresh?.();
+    } catch (e) {
+      console.error("Failed to execute task:", e);
+    } finally {
+      setExecuting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!authFetch || deleting) return;
+    const ok = await confirm(`Are you sure you want to delete "${task.title}"?`, {
+      title: "Delete Task",
+      confirmText: "Delete",
+      confirmVariant: "danger",
+    });
+    if (!ok) return;
+    setDeleting(true);
+    try {
+      await authFetch(`/api/tasks/${task.agentId}/${task.id}`, { method: "DELETE" });
+      onRefresh?.();
+    } catch (e) {
+      console.error("Failed to delete task:", e);
+    } finally {
+      setDeleting(false);
+    }
+  };
+
   return (
-    <div className="w-full md:w-1/2 lg:w-1/3 border-l border-[#1a1a1a] bg-[#0a0a0a] flex flex-col overflow-hidden">
+    <div className="w-full md:w-1/2 lg:w-1/3 border-l border-[var(--color-border)] bg-[var(--color-bg)] flex flex-col overflow-hidden">
+      {ConfirmDialog}
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b border-[#1a1a1a]">
+      <div className="flex items-center justify-between p-4 border-b border-[var(--color-border)]">
         <h2 className="font-medium truncate pr-2">Task Details</h2>
-        <button onClick={onClose} className="text-[#666] hover:text-[#e0e0e0] transition">
-          <CloseIcon />
-        </button>
+        <div className="flex items-center gap-2">
+          {authFetch && (task.status === "pending" || task.status === "completed") && (
+            <button
+              onClick={handleExecute}
+              disabled={executing}
+              title="Execute now"
+              className="text-[var(--color-accent)] hover:opacity-80 transition disabled:opacity-50"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            </button>
+          )}
+          {authFetch && (
+            <button
+              onClick={handleDelete}
+              disabled={deleting}
+              title="Delete task"
+              className="text-red-400 hover:text-red-300 transition disabled:opacity-50"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+            </button>
+          )}
+          <button onClick={onClose} className="text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition">
+            <CloseIcon />
+          </button>
+        </div>
       </div>
 
       {/* Content */}
@@ -267,7 +383,7 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
           </div>
           <button
             onClick={() => onSelectAgent?.(task.agentId)}
-            className="text-sm text-[#f97316] hover:underline"
+            className="text-sm text-[var(--color-accent)] hover:underline"
           >
             {task.agentName}
           </button>
@@ -276,30 +392,30 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
         {/* Description */}
         {task.description && (
           <div>
-            <h4 className="text-xs text-[#666] uppercase tracking-wider mb-1">Description</h4>
-            <p className="text-sm text-[#888] whitespace-pre-wrap">{task.description}</p>
+            <h4 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1">Description</h4>
+            <p className="text-sm text-[var(--color-text-secondary)] whitespace-pre-wrap">{task.description}</p>
           </div>
         )}
 
         {/* Metadata */}
         <div className="grid grid-cols-2 gap-3 text-sm">
           <div>
-            <span className="text-[#666]">Type</span>
+            <span className="text-[var(--color-text-muted)]">Type</span>
             <p className="capitalize">{task.type}</p>
           </div>
           <div>
-            <span className="text-[#666]">Priority</span>
+            <span className="text-[var(--color-text-muted)]">Priority</span>
             <p>{task.priority}</p>
           </div>
           <div>
-            <span className="text-[#666]">Source</span>
+            <span className="text-[var(--color-text-muted)]">Source</span>
             <p className="capitalize">{task.source}</p>
           </div>
           {task.recurrence && (
             <div>
-              <span className="text-[#666]">Recurrence</span>
+              <span className="text-[var(--color-text-muted)]">Recurrence</span>
               <p>{formatCron(task.recurrence)}</p>
-              <p className="text-xs text-[#444] mt-0.5 font-mono">{task.recurrence}</p>
+              <p className="text-xs text-[var(--color-text-faint)] mt-0.5 font-mono">{task.recurrence}</p>
             </div>
           )}
         </div>
@@ -307,31 +423,31 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
         {/* Timestamps */}
         <div className="space-y-2 text-sm">
           <div className="flex justify-between">
-            <span className="text-[#666]">Created</span>
+            <span className="text-[var(--color-text-muted)]">Created</span>
             <span>{new Date(task.created_at).toLocaleString()}</span>
           </div>
           {task.execute_at && (
             <div className="flex justify-between">
-              <span className="text-[#666]">Scheduled</span>
-              <span className="text-[#f97316]">{formatRelativeTime(task.execute_at)}</span>
+              <span className="text-[var(--color-text-muted)]">Scheduled</span>
+              <span className="text-[var(--color-accent)]">{formatRelativeTime(task.execute_at)}</span>
             </div>
           )}
           {task.executed_at && (
             <div className="flex justify-between">
-              <span className="text-[#666]">Started</span>
+              <span className="text-[var(--color-text-muted)]">Started</span>
               <span>{new Date(task.executed_at).toLocaleString()}</span>
             </div>
           )}
           {task.completed_at && (
             <div className="flex justify-between">
-              <span className="text-[#666]">Completed</span>
+              <span className="text-[var(--color-text-muted)]">Completed</span>
               <span>{new Date(task.completed_at).toLocaleString()}</span>
             </div>
           )}
           {task.next_run && (
             <div className="flex justify-between">
-              <span className="text-[#666]">Next Run</span>
-              <span className="text-[#f97316]">{formatRelativeTime(task.next_run)}</span>
+              <span className="text-[var(--color-text-muted)]">Next Run</span>
+              <span className="text-[var(--color-accent)]">{formatRelativeTime(task.next_run)}</span>
             </div>
           )}
         </div>
@@ -361,13 +477,13 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
         {/* Trajectory */}
         {loading && !task.trajectory && (
           <div>
-            <h4 className="text-xs text-[#666] uppercase tracking-wider mb-2">Trajectory</h4>
-            <div className="text-sm text-[#555]">Loading trajectory...</div>
+            <h4 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-2">Trajectory</h4>
+            <div className="text-sm text-[var(--color-text-faint)]">Loading trajectory...</div>
           </div>
         )}
         {task.trajectory && task.trajectory.length > 0 && (
           <div>
-            <h4 className="text-xs text-[#666] uppercase tracking-wider mb-2">
+            <h4 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
               Trajectory ({task.trajectory.length} steps)
             </h4>
             <TrajectoryView trajectory={task.trajectory} />
@@ -409,13 +525,13 @@ export function TrajectoryView({ trajectory }: { trajectory: TaskTrajectoryStep[
 
       return (
         <div>
-          <p className={`text-sm text-[#ccc] whitespace-pre-wrap break-words ${!isExpanded && isLong ? 'line-clamp-4' : ''}`}>
+          <p className={`text-sm text-[var(--color-text)] whitespace-pre-wrap break-words ${!isExpanded && isLong ? 'line-clamp-4' : ''}`}>
             {content}
           </p>
           {isLong && (
             <button
               onClick={() => toggleStep(step.id)}
-              className="text-xs text-[#666] hover:text-[#888] mt-1"
+              className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] mt-1"
             >
               {isExpanded ? "Show less" : "Show more..."}
             </button>
@@ -439,15 +555,15 @@ export function TrajectoryView({ trajectory }: { trajectory: TaskTrajectoryStep[
                 <div className="flex items-center gap-2 mb-1">
                   <span className="text-orange-400">🔧</span>
                   <span className="text-xs font-medium text-orange-400">Tool Call</span>
-                  <span className="text-xs text-[#888]">{block.name}</span>
+                  <span className="text-xs text-[var(--color-text-secondary)]">{block.name}</span>
                 </div>
-                <pre className={`text-xs text-[#888] overflow-x-auto ${!isExpanded && isLong ? 'line-clamp-3' : ''}`}>
+                <pre className={`text-xs text-[var(--color-text-secondary)] overflow-x-auto ${!isExpanded && isLong ? 'line-clamp-3' : ''}`}>
                   {inputStr}
                 </pre>
                 {isLong && (
                   <button
                     onClick={() => toggleStep(blockId)}
-                    className="text-xs text-[#666] hover:text-[#888] mt-1"
+                    className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] mt-1"
                   >
                     {isExpanded ? "Show less" : "Show more..."}
                   </button>
@@ -473,13 +589,13 @@ export function TrajectoryView({ trajectory }: { trajectory: TaskTrajectoryStep[
                     Tool Result
                   </span>
                 </div>
-                <pre className={`text-xs text-[#888] overflow-x-auto whitespace-pre-wrap break-words ${!isExpanded && isLong ? 'line-clamp-3' : ''}`}>
+                <pre className={`text-xs text-[var(--color-text-secondary)] overflow-x-auto whitespace-pre-wrap break-words ${!isExpanded && isLong ? 'line-clamp-3' : ''}`}>
                   {block.content}
                 </pre>
                 {isLong && (
                   <button
                     onClick={() => toggleStep(blockId)}
-                    className="text-xs text-[#666] hover:text-[#888] mt-1"
+                    className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] mt-1"
                   >
                     {isExpanded ? "Show less" : "Show more..."}
                   </button>
@@ -502,15 +618,15 @@ export function TrajectoryView({ trajectory }: { trajectory: TaskTrajectoryStep[
         return (
           <div
             key={step.id}
-            className={`${style.bg} border border-[#1a1a1a] rounded overflow-hidden p-3`}
+            className={`${style.bg} border border-[var(--color-border)] rounded overflow-hidden p-3`}
           >
             <div className="flex items-center gap-2 mb-2">
               <span>{style.icon}</span>
               <span className={`text-xs font-medium ${style.text}`}>{style.label}</span>
               {step.model && (
-                <span className="text-xs text-[#555]">· {step.model}</span>
+                <span className="text-xs text-[var(--color-text-faint)]">· {step.model}</span>
               )}
-              <span className="text-xs text-[#555]">
+              <span className="text-xs text-[var(--color-text-faint)]">
                 · {new Date(step.created_at).toLocaleTimeString()}
               </span>
             </div>
@@ -522,6 +638,207 @@ export function TrajectoryView({ trajectory }: { trajectory: TaskTrajectoryStep[
   );
 }
 
+// --- Create Task Modal ---
+
+interface CreateTaskModalProps {
+  authFetch: (url: string, options?: RequestInit) => Promise<Response>;
+  currentProjectId: string | null;
+  onClose: () => void;
+  onCreated: () => void;
+}
+
+function CreateTaskModal({ authFetch, currentProjectId, onClose, onCreated }: CreateTaskModalProps) {
+  const [agents, setAgents] = useState<{ id: string; name: string }[]>([]);
+  const [agentId, setAgentId] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [type, setType] = useState<"once" | "recurring">("once");
+  const [priority, setPriority] = useState(5);
+  const [executeAt, setExecuteAt] = useState("");
+  const [recurrence, setRecurrence] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    authFetch("/api/agents").then(r => r.json()).then(data => {
+      const running = (data.agents || []).filter((a: Agent) => a.status === "running" && a.features?.tasks);
+      setAgents(running.map((a: Agent) => ({ id: a.id, name: a.name })));
+      if (running.length === 1) setAgentId(running[0].id);
+    }).catch(() => {});
+  }, [authFetch]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!agentId || !title.trim()) return;
+    setCreating(true);
+    setError("");
+
+    const body: Record<string, unknown> = {
+      title: title.trim(),
+      description: description.trim() || undefined,
+      type,
+      priority,
+    };
+    if (type === "once" && executeAt) {
+      body.execute_at = new Date(executeAt).toISOString();
+    }
+    if (type === "recurring" && recurrence.trim()) {
+      body.recurrence = recurrence.trim();
+    }
+
+    try {
+      const res = await authFetch(`/api/tasks/${agentId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error || `HTTP ${res.status}`);
+        return;
+      }
+      onCreated();
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onClose}>
+      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg w-full max-w-md" onClick={e => e.stopPropagation()}>
+        <div className="flex items-center justify-between p-4 border-b border-[var(--color-border)]">
+          <h2 className="font-medium">Create Task</h2>
+          <button onClick={onClose} className="text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition">
+            <CloseIcon />
+          </button>
+        </div>
+        <form onSubmit={handleSubmit} className="p-4 space-y-4">
+          {/* Agent */}
+          <div>
+            <label className="block text-sm text-[var(--color-text-muted)] mb-1">Agent</label>
+            {agents.length === 0 ? (
+              <p className="text-sm text-[var(--color-text-faint)]">No running agents with tasks enabled</p>
+            ) : (
+              <select
+                value={agentId}
+                onChange={e => setAgentId(e.target.value)}
+                className="w-full bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-3 py-2 text-sm"
+                required
+              >
+                <option value="">Select agent...</option>
+                {agents.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
+              </select>
+            )}
+          </div>
+
+          {/* Title */}
+          <div>
+            <label className="block text-sm text-[var(--color-text-muted)] mb-1">Title</label>
+            <input
+              type="text"
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              className="w-full bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-3 py-2 text-sm"
+              placeholder="e.g. Check email for new orders"
+              required
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-sm text-[var(--color-text-muted)] mb-1">Description</label>
+            <textarea
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+              className="w-full bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-3 py-2 text-sm resize-none"
+              rows={2}
+              placeholder="Optional instructions for the agent..."
+            />
+          </div>
+
+          {/* Type & Priority */}
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-sm text-[var(--color-text-muted)] mb-1">Type</label>
+              <select
+                value={type}
+                onChange={e => setType(e.target.value as "once" | "recurring")}
+                className="w-full bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-3 py-2 text-sm"
+              >
+                <option value="once">One-time</option>
+                <option value="recurring">Recurring</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm text-[var(--color-text-muted)] mb-1">Priority</label>
+              <input
+                type="number"
+                min={1}
+                max={10}
+                value={priority}
+                onChange={e => setPriority(Number(e.target.value))}
+                className="w-full bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-3 py-2 text-sm"
+              />
+            </div>
+          </div>
+
+          {/* Schedule */}
+          {type === "once" && (
+            <div>
+              <label className="block text-sm text-[var(--color-text-muted)] mb-1">Schedule (optional)</label>
+              <input
+                type="datetime-local"
+                value={executeAt}
+                onChange={e => setExecuteAt(e.target.value)}
+                className="w-full bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-3 py-2 text-sm"
+              />
+              <p className="text-xs text-[var(--color-text-faint)] mt-1">Leave empty to execute immediately</p>
+            </div>
+          )}
+
+          {type === "recurring" && (
+            <div>
+              <label className="block text-sm text-[var(--color-text-muted)] mb-1">Cron Schedule</label>
+              <input
+                type="text"
+                value={recurrence}
+                onChange={e => setRecurrence(e.target.value)}
+                className="w-full bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-3 py-2 text-sm font-mono"
+                placeholder="*/30 * * * *"
+                required
+              />
+              <p className="text-xs text-[var(--color-text-faint)] mt-1">e.g. */30 * * * * = every 30 min, 0 9 * * 1-5 = weekdays at 9am</p>
+            </div>
+          )}
+
+          {error && (
+            <p className="text-sm text-red-400">{error}</p>
+          )}
+
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 rounded text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-border)] transition"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={creating || !agentId || !title.trim() || agents.length === 0}
+              className="px-4 py-2 rounded text-sm bg-[var(--color-accent)] text-black hover:opacity-90 transition disabled:opacity-50"
+            >
+              {creating ? "Creating..." : "Create Task"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
 // --- Schedule formatting helpers ---
 
 const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];