apteva 0.4.44 → 0.4.51

package/src/web/components/settings/SettingsPage.tsx

@@ -3,7 +3,7 @@ import { CheckIcon, CloseIcon, PlusIcon } from "../common/Icons";
 import { Modal, useConfirm } from "../common/Modal";
 import { Select } from "../common/Select";
 import { useProjects, useAuth, useTheme, type Project } from "../../context";
-import type { ThemeMode } from "../../themes";
+import type { ThemeMode, ThemeStyle } from "../../themes";
 import type { Provider } from "../../types";
 
 type SettingsTab = "general" | "providers" | "projects" | "channels" | "api-keys" | "account" | "updates" | "data" | "assistant";
@@ -101,7 +101,7 @@ function SettingsNavItem({
 
 function GeneralSettings() {
   const { authFetch } = useAuth();
-  const { mode, setMode } = useTheme();
+  const { mode, style, setMode, setStyle } = useTheme();
   const [instanceUrl, setInstanceUrl] = useState("");
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -149,6 +149,11 @@ function GeneralSettings() {
     { value: "light", label: "Light", description: "Light background" },
   ];
 
+  const styleOptions: { value: ThemeStyle; label: string; description: string }[] = [
+    { value: "classic", label: "Classic", description: "Terminal-inspired, sharp" },
+    { value: "professional", label: "Professional", description: "Polished, enterprise" },
+  ];
+
   return (
     <div className="max-w-4xl w-full">
       <div className="mb-6">
@@ -156,22 +161,23 @@ function GeneralSettings() {
         <p className="text-[var(--color-text-muted)]">Instance configuration and appearance.</p>
       </div>
 
-      {/* Theme */}
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 mb-4">
-        <h3 className="font-medium mb-2">Theme</h3>
-        <p className="text-sm text-[var(--color-text-muted)] mb-4">
-          Choose your preferred color scheme. Auto follows your operating system setting.
-        </p>
-        <div className="flex gap-3">
+      {/* Appearance */}
+      <div className="bg-[var(--color-surface)] card p-4 mb-4">
+        <h3 className="font-medium mb-4">Appearance</h3>
+
+        {/* Color scheme */}
+        <p className="text-sm text-[var(--color-text-secondary)] mb-2">Color scheme</p>
+        <div className="flex gap-3 mb-5">
           {themeOptions.map(opt => (
             <button
               key={opt.value}
               onClick={() => setMode(opt.value)}
-              className={`flex-1 max-w-[160px] px-4 py-3 rounded-lg border text-left transition ${
+              className={`flex-1 max-w-[160px] px-4 py-3 border text-left transition ${
                 mode === opt.value
                   ? "border-[var(--color-accent)] bg-[var(--color-accent-10)]"
                   : "border-[var(--color-border-light)] bg-[var(--color-bg)] hover:border-[var(--color-scrollbar)]"
               }`}
+              style={{ borderRadius: "var(--radius-card)" }}
             >
               <div className="flex items-center gap-2 mb-1">
                 <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
@@ -185,9 +191,36 @@ function GeneralSettings() {
             </button>
           ))}
         </div>
+
+        {/* Style */}
+        <p className="text-sm text-[var(--color-text-secondary)] mb-2">Style</p>
+        <div className="flex gap-3">
+          {styleOptions.map(opt => (
+            <button
+              key={opt.value}
+              onClick={() => setStyle(opt.value)}
+              className={`flex-1 max-w-[200px] px-4 py-3 border text-left transition ${
+                style === opt.value
+                  ? "border-[var(--color-accent)] bg-[var(--color-accent-10)]"
+                  : "border-[var(--color-border-light)] bg-[var(--color-bg)] hover:border-[var(--color-scrollbar)]"
+              }`}
+              style={{ borderRadius: "var(--radius-card)" }}
+            >
+              <div className="flex items-center gap-2 mb-1">
+                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
+                  style === opt.value ? "border-[var(--color-accent)]" : "border-[var(--color-scrollbar)]"
+                }`}>
+                  {style === opt.value && <div className="w-2 h-2 rounded-full bg-[var(--color-accent)]" />}
+                </div>
+                <span className="text-sm font-medium">{opt.label}</span>
+              </div>
+              <p className="text-xs text-[var(--color-text-muted)] ml-6">{opt.description}</p>
+            </button>
+          ))}
+        </div>
       </div>
 
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+      <div className="bg-[var(--color-surface)] card p-4">
         <h3 className="font-medium mb-2">Instance URL</h3>
         <p className="text-sm text-[var(--color-text-muted)] mb-4">
           The public HTTPS URL for this instance. Used for webhook callbacks from external services like Composio.
@@ -548,7 +581,7 @@ function ProjectsSettings() {
           {projects.map(project => (
             <div
               key={project.id}
-              className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 flex items-center gap-4"
+              className="bg-[var(--color-surface)] card p-4 flex items-center gap-4"
             >
               <div
                 className="w-4 h-4 rounded-full flex-shrink-0"
@@ -818,7 +851,7 @@ function UpdatesSettings() {
           </div>
 
           {/* Current Version */}
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-5">
+          <div className="bg-[var(--color-surface)] card p-5">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <h3 className="font-medium text-lg">Current Version</h3>
@@ -881,7 +914,7 @@ function UpdatesSettings() {
           )}
 
           {/* Apteva App Version */}
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-5">
+          <div className="bg-[var(--color-surface)] card p-5">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <h3 className="font-medium text-lg">apteva</h3>
@@ -921,7 +954,7 @@ function UpdatesSettings() {
           </div>
 
           {/* Agent Binary Version */}
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-5">
+          <div className="bg-[var(--color-surface)] card p-5">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <h3 className="font-medium text-lg">Agent Binary</h3>
@@ -1783,7 +1816,7 @@ function ApiKeysSettings() {
 
       {/* Create Form */}
       {showCreate && !newKey && (
-        <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 mb-6">
+        <div className="bg-[var(--color-surface)] card p-4 mb-6">
           <h3 className="font-medium mb-4">Create new API key</h3>
           <div className="space-y-4 max-w-md">
             <div>
@@ -1880,7 +1913,7 @@ function ApiKeysSettings() {
 
       {/* Usage Info */}
       {keys.length > 0 && (
-        <div className="mt-6 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+        <div className="mt-6 bg-[var(--color-surface)] card p-4">
           <h3 className="font-medium mb-2 text-sm">Usage</h3>
           <code className="block bg-[var(--color-bg)] px-3 py-2 rounded font-mono text-xs text-[var(--color-text-secondary)]">
             curl -H "X-API-Key: apt_..." http://localhost:4280/api/agents
@@ -1953,7 +1986,7 @@ function AccountSettings() {
 
       {/* User Info */}
       {user && (
-        <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 mb-6">
+        <div className="bg-[var(--color-surface)] card p-4 mb-6">
           <h3 className="font-medium mb-3">Profile</h3>
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
@@ -1975,7 +2008,7 @@ function AccountSettings() {
       )}
 
       {/* Change Password */}
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+      <div className="bg-[var(--color-surface)] card p-4">
         <h3 className="font-medium mb-4">Change Password</h3>
 
         <div className="space-y-4 max-w-md">
@@ -2054,7 +2087,7 @@ function DataSettings() {
   }, []);
 
   const clearTelemetry = async () => {
-    const confirmed = await confirm("Are you sure you want to delete all telemetry data? This cannot be undone.", { confirmText: "Clear All", title: "Clear Telemetry Data" });
+    const confirmed = await confirm("Are you sure you want to delete all analytics data? This cannot be undone.", { confirmText: "Clear All", title: "Clear Analytics Data" });
     if (!confirmed) return;
 
     setClearing(true);
@@ -2083,11 +2116,11 @@ function DataSettings() {
     <div className="max-w-4xl w-full">
       <div className="mb-6">
         <h1 className="text-2xl font-semibold mb-1">Data Management</h1>
-        <p className="text-[var(--color-text-muted)]">Manage stored data and telemetry.</p>
+        <p className="text-[var(--color-text-muted)]">Manage stored data and analytics.</p>
       </div>
 
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
-        <h3 className="font-medium mb-2">Telemetry Data</h3>
+      <div className="bg-[var(--color-surface)] card p-4">
+        <h3 className="font-medium mb-2">Analytics Data</h3>
         <p className="text-sm text-[var(--color-text-muted)] mb-4">
           {eventCount !== null
             ? `${eventCount.toLocaleString()} events stored`
@@ -2109,7 +2142,7 @@ function DataSettings() {
           disabled={clearing || eventCount === 0}
           className="px-4 py-2 bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-50 disabled:cursor-not-allowed rounded text-sm font-medium transition"
         >
-          {clearing ? "Clearing..." : "Clear All Telemetry"}
+          {clearing ? "Clearing..." : "Clear All Analytics"}
         </button>
       </div>
     </div>
@@ -2272,7 +2305,7 @@ function ChannelsSettings() {
 
       {/* Create form */}
       {showForm && (
-        <div className="mb-6 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 space-y-3">
+        <div className="mb-6 bg-[var(--color-surface)] card p-4 space-y-3">
           <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-2">New Telegram Channel</h3>
 
           <div>
@@ -2339,7 +2372,7 @@ function ChannelsSettings() {
       ) : (
         <div className="space-y-3">
           {channels.map(channel => (
-            <div key={channel.id} className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+            <div key={channel.id} className="bg-[var(--color-surface)] card p-4">
               <div className="flex items-start justify-between">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">

package/src/web/components/skills/SkillsPage.tsx

@@ -316,7 +316,7 @@ export function SkillsPage() {
           </div>
 
           {/* Tabs */}
-          <div className="flex gap-1 mb-6 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-1 w-fit">
+          <div className="flex gap-1 mb-6 bg-[var(--color-surface)] card p-1 w-fit">
             <button
               onClick={() => setActiveTab("installed")}
               className={`px-4 py-2 rounded text-sm font-medium transition ${
@@ -366,7 +366,7 @@ export function SkillsPage() {
                   </button>
                 </div>
               ) : filteredSkills.length === 0 ? (
-                <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-6 text-center">
+                <div className="bg-[var(--color-surface)] card p-6 text-center">
                   <p className="text-[var(--color-text-muted)]">No skills match this filter.</p>
                 </div>
               ) : (
@@ -478,7 +478,7 @@ export function SkillsPage() {
 
               {/* Empty State */}
               {!githubLoading && !githubRepoInfo && !githubError && (
-                <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-8 text-center">
+                <div className="bg-[var(--color-surface)] card p-8 text-center">
                   <div className="text-4xl mb-4">📦</div>
                   <h3 className="text-lg font-medium mb-2">Browse Skills from GitHub</h3>
                   <p className="text-[var(--color-text-muted)] mb-6 max-w-md mx-auto">
@@ -563,7 +563,7 @@ export function SkillsPage() {
               )}
 
               {/* Info */}
-              <div className="p-4 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg text-sm text-[var(--color-text-muted)]">
+              <div className="p-4 bg-[var(--color-surface)] card text-sm text-[var(--color-text-muted)]">
                 <p>
                   Skills are sourced from GitHub repositories. Each skill should be in its own directory with a{" "}
                   <code className="text-[var(--color-text-secondary)] bg-[var(--color-bg)] px-1 rounded">SKILL.md</code> file containing instructions.
@@ -895,7 +895,7 @@ function CreateSkillModal({
   return (
     <div className="fixed inset-0 bg-black/60 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-2xl max-h-[90vh] overflow-auto"
+        className="bg-[var(--color-surface)] card w-full max-w-2xl max-h-[90vh] overflow-auto"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="p-6 border-b border-[var(--color-border)]">
@@ -1029,7 +1029,7 @@ function ImportSkillModal({
   return (
     <div className="fixed inset-0 bg-black/60 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-2xl max-h-[90vh] overflow-auto"
+        className="bg-[var(--color-surface)] card w-full max-w-2xl max-h-[90vh] overflow-auto"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="p-6 border-b border-[var(--color-border)]">
@@ -1129,7 +1129,7 @@ function ViewSkillModal({
   return (
     <div className="fixed inset-0 bg-black/60 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-3xl max-h-[90vh] overflow-auto"
+        className="bg-[var(--color-surface)] card w-full max-w-3xl max-h-[90vh] overflow-auto"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="p-6 border-b border-[var(--color-border)] flex items-center justify-between">

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

@@ -304,8 +304,63 @@ export interface TaskDetailPanelProps {
 export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, loading, authFetch, onRefresh }: TaskDetailPanelProps) {
   const [executing, setExecuting] = useState(false);
   const [deleting, setDeleting] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editForm, setEditForm] = useState({
+    title: task.title,
+    description: task.description || "",
+    type: task.type as "once" | "recurring",
+    priority: task.priority,
+    execute_at: task.execute_at ? new Date(task.execute_at).toISOString().slice(0, 16) : "",
+    recurrence: task.recurrence || "",
+  });
   const { confirm, ConfirmDialog } = useConfirm();
 
+  // Reset edit form when task changes
+  useEffect(() => {
+    setEditForm({
+      title: task.title,
+      description: task.description || "",
+      type: task.type as "once" | "recurring",
+      priority: task.priority,
+      execute_at: task.execute_at ? new Date(task.execute_at).toISOString().slice(0, 16) : "",
+      recurrence: task.recurrence || "",
+    });
+    setEditing(false);
+  }, [task.id, task.agentId]);
+
+  const handleSave = async () => {
+    if (!authFetch || saving) return;
+    setSaving(true);
+    try {
+      const body: Record<string, unknown> = {
+        title: editForm.title.trim(),
+        description: editForm.description.trim() || undefined,
+        type: editForm.type,
+        priority: editForm.priority,
+      };
+      if (editForm.type === "once" && editForm.execute_at) {
+        body.execute_at = new Date(editForm.execute_at).toISOString();
+      }
+      if (editForm.type === "recurring" && editForm.recurrence.trim()) {
+        body.recurrence = editForm.recurrence.trim();
+      }
+      const res = await authFetch(`/api/tasks/${task.agentId}/${task.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (res.ok) {
+        setEditing(false);
+        onRefresh?.();
+      }
+    } catch (e) {
+      console.error("Failed to update task:", e);
+    } finally {
+      setSaving(false);
+    }
+  };
+
   const handleExecute = async () => {
     if (!authFetch || executing) return;
     setExecuting(true);
@@ -338,14 +393,25 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
     }
   };
 
+  const inputClass = "w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-2 py-1.5 text-sm focus:outline-none focus:border-[var(--color-accent)] text-[var(--color-text)]";
+
   return (
     <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-[var(--color-border)]">
-        <h2 className="font-medium truncate pr-2">Task Details</h2>
+        <h2 className="font-medium truncate pr-2">{editing ? "Edit Task" : "Task Details"}</h2>
         <div className="flex items-center gap-2">
-          {authFetch && (task.status === "pending" || task.status === "completed") && (
+          {authFetch && !editing && (task.status === "pending" || task.status === "completed" || task.status === "failed") && (
+            <button
+              onClick={() => setEditing(true)}
+              title="Edit task"
+              className="text-[var(--color-text-muted)] hover:text-[var(--color-accent)] transition"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
+            </button>
+          )}
+          {authFetch && !editing && (task.status === "pending" || task.status === "completed") && (
             <button
               onClick={handleExecute}
               disabled={executing}
@@ -355,7 +421,7 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
               <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 && (
+          {authFetch && !editing && (
             <button
               onClick={handleDelete}
               disabled={deleting}
@@ -365,9 +431,38 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
               <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>
+          {editing && (
+            <>
+              <button
+                onClick={() => {
+                  setEditing(false);
+                  setEditForm({
+                    title: task.title,
+                    description: task.description || "",
+                    type: task.type as "once" | "recurring",
+                    priority: task.priority,
+                    execute_at: task.execute_at ? new Date(task.execute_at).toISOString().slice(0, 16) : "",
+                    recurrence: task.recurrence || "",
+                  });
+                }}
+                className="text-[var(--color-text-muted)] hover:text-[var(--color-text)] text-sm transition"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={saving || !editForm.title.trim()}
+                className="px-3 py-1 rounded text-sm bg-[var(--color-accent)] text-black hover:opacity-90 transition disabled:opacity-50"
+              >
+                {saving ? "Saving..." : "Save"}
+              </button>
+            </>
+          )}
+          {!editing && (
+            <button onClick={onClose} className="text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition">
+              <CloseIcon />
+            </button>
+          )}
         </div>
       </div>
 
@@ -376,51 +471,131 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
         {/* Title & Status */}
         <div>
           <div className="flex items-start justify-between gap-2 mb-2">
-            <h3 className="text-lg font-medium">{task.title}</h3>
-            <span className={`px-2 py-1 rounded text-xs font-medium flex-shrink-0 ${statusColors[task.status]}`}>
-              {task.status}
-            </span>
+            {editing ? (
+              <input
+                type="text"
+                value={editForm.title}
+                onChange={e => setEditForm({ ...editForm, title: e.target.value })}
+                className={`${inputClass} text-lg font-medium`}
+                placeholder="Task title"
+              />
+            ) : (
+              <h3 className="text-lg font-medium">{task.title}</h3>
+            )}
+            {!editing && (
+              <span className={`px-2 py-1 rounded text-xs font-medium flex-shrink-0 ${statusColors[task.status]}`}>
+                {task.status}
+              </span>
+            )}
           </div>
-          <button
-            onClick={() => onSelectAgent?.(task.agentId)}
-            className="text-sm text-[var(--color-accent)] hover:underline"
-          >
-            {task.agentName}
-          </button>
+          {!editing && (
+            <button
+              onClick={() => onSelectAgent?.(task.agentId)}
+              className="text-sm text-[var(--color-accent)] hover:underline"
+            >
+              {task.agentName}
+            </button>
+          )}
         </div>
 
         {/* Description */}
-        {task.description && (
+        {editing ? (
+          <div>
+            <h4 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1">Description</h4>
+            <textarea
+              value={editForm.description}
+              onChange={e => setEditForm({ ...editForm, description: e.target.value })}
+              className={`${inputClass} resize-none`}
+              rows={3}
+              placeholder="Task description..."
+            />
+          </div>
+        ) : task.description ? (
           <div>
             <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>
-        )}
+        ) : null}
 
         {/* Metadata */}
-        <div className="grid grid-cols-2 gap-3 text-sm">
-          <div>
-            <span className="text-[var(--color-text-muted)]">Type</span>
-            <p className="capitalize">{task.type}</p>
+        {editing ? (
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1 block">Type</label>
+              <select
+                value={editForm.type}
+                onChange={e => setEditForm({ ...editForm, type: e.target.value as "once" | "recurring" })}
+                className={inputClass}
+              >
+                <option value="once">One-time</option>
+                <option value="recurring">Recurring</option>
+              </select>
+            </div>
+            <div>
+              <label className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1 block">Priority</label>
+              <input
+                type="number"
+                min={1}
+                max={10}
+                value={editForm.priority}
+                onChange={e => setEditForm({ ...editForm, priority: Number(e.target.value) })}
+                className={inputClass}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <span className="text-[var(--color-text-muted)]">Type</span>
+              <p className="capitalize">{task.type}</p>
+            </div>
+            <div>
+              <span className="text-[var(--color-text-muted)]">Priority</span>
+              <p>{task.priority}</p>
+            </div>
+            <div>
+              <span className="text-[var(--color-text-muted)]">Source</span>
+              <p className="capitalize">{task.source}</p>
+            </div>
+            {task.recurrence && (
+              <div>
+                <span className="text-[var(--color-text-muted)]">Recurrence</span>
+                <p>{formatCron(task.recurrence)}</p>
+                <p className="text-xs text-[var(--color-text-faint)] mt-0.5 font-mono">{task.recurrence}</p>
+              </div>
+            )}
           </div>
+        )}
+
+        {/* Schedule (edit mode) */}
+        {editing && editForm.type === "once" && (
           <div>
-            <span className="text-[var(--color-text-muted)]">Priority</span>
-            <p>{task.priority}</p>
+            <label className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1 block">Schedule</label>
+            <input
+              type="datetime-local"
+              value={editForm.execute_at}
+              onChange={e => setEditForm({ ...editForm, execute_at: e.target.value })}
+              className={inputClass}
+            />
+            <p className="text-xs text-[var(--color-text-faint)] mt-1">Leave empty for manual execution</p>
           </div>
+        )}
+        {editing && editForm.type === "recurring" && (
           <div>
-            <span className="text-[var(--color-text-muted)]">Source</span>
-            <p className="capitalize">{task.source}</p>
+            <label className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1 block">Cron Schedule</label>
+            <input
+              type="text"
+              value={editForm.recurrence}
+              onChange={e => setEditForm({ ...editForm, recurrence: e.target.value })}
+              className={`${inputClass} font-mono`}
+              placeholder="*/30 * * * *"
+            />
+            <p className="text-xs text-[var(--color-text-faint)] mt-1">e.g. */30 * * * * = every 30 min</p>
           </div>
-          {task.recurrence && (
-            <div>
-              <span className="text-[var(--color-text-muted)]">Recurrence</span>
-              <p>{formatCron(task.recurrence)}</p>
-              <p className="text-xs text-[var(--color-text-faint)] mt-0.5 font-mono">{task.recurrence}</p>
-            </div>
-          )}
-        </div>
+        )}
 
-        {/* Timestamps */}
+        {/* Timestamps (view mode only) */}
+        {!editing && (
         <div className="space-y-2 text-sm">
           <div className="flex justify-between">
             <span className="text-[var(--color-text-muted)]">Created</span>
@@ -451,6 +626,7 @@ export function TaskDetailPanel({ task, statusColors, onClose, onSelectAgent, lo
             </div>
           )}
         </div>
+        )}
 
         {/* Error */}
         {task.status === "failed" && task.error && (
@@ -707,7 +883,7 @@ function CreateTaskModal({ authFetch, currentProjectId, onClose, onCreated }: Cr
 
   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="bg-[var(--color-surface)] card 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">