@synergenius/flow-weaver-pack-weaver 0.9.80 → 0.9.82

package/src/ui/swarm-dashboard.tsx

@@ -3,7 +3,7 @@
  *
  * Replaces bot-workspace.tsx as the primary center-dock workspace.
  * Composes: SwarmControls, BudgetBar, BotSlotCard, TaskPoolList,
- * TaskCreateForm, and TaskDetailView into a unified swarm dashboard.
+ * TaskEditor, and TaskDetailView into a unified swarm dashboard.
  *
  * Two-panel navigation:
  * - Default: full swarm dashboard (controls + budget + bots + task pool + create form)
@@ -29,8 +29,8 @@ import SwarmControls from './swarm-controls';
 import BudgetBar from './budget-bar';
 import BotSlotCard from './bot-slot-card';
 import TaskPoolList from './task-pool-list';
-import TaskCreateForm from './task-create-form';
 import TaskDetailView from './task-detail-view';
+import TaskEditor from './task-editor';
 import ProfileCard from './profile-card';
 import ProfileEditor from './profile-editor';
 import DecisionLog from './decision-log';
@@ -121,6 +121,8 @@ function SwarmDashboard() {
   const [editingBotId, setEditingBotId] = useState<string | null>(null);
   const [profileEditorMode, setProfileEditorMode] = useState<'create' | 'edit' | null>(null);
   const [editingProfileId, setEditingProfileId] = useState<string | null>(null);
+  const [taskEditorMode, setTaskEditorMode] = useState<'create' | 'edit' | null>(null);
+  const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
 
   // --- Data state ---
   const [swarmStatus, setSwarmStatus] = useState<SwarmStatus | null>(null);
@@ -283,9 +285,22 @@ function SwarmDashboard() {
     refreshAll();
   }, [refreshAll]);
 
-  const handleTaskCreated = useCallback(() => {
-    fetchTaskList();
-  }, [fetchTaskList]);
+  // --- Render: TaskEditor from detail view ---
+
+  const handleEditFromDetail = useCallback((tid: string) => {
+    setEditingTaskId(tid);
+    setTaskEditorMode('edit');
+  }, []);
+
+  if (selectedTaskId && taskEditorMode === 'edit' && editingTaskId) {
+    return React.createElement(TaskEditor, {
+      mode: 'edit',
+      taskId: editingTaskId,
+      onSave: () => { setTaskEditorMode(null); setEditingTaskId(null); },
+      onCancel: () => { setTaskEditorMode(null); setEditingTaskId(null); },
+      onDelete: () => { setTaskEditorMode(null); setEditingTaskId(null); setSelectedTaskId(null); fetchTaskList(); },
+    });
+  }
 
   // --- Render: TaskDetailView (when task is selected) ---
 
@@ -293,6 +308,7 @@ function SwarmDashboard() {
     return React.createElement(TaskDetailView, {
       taskId: selectedTaskId,
       onBack: handleBack,
+      onEdit: handleEditFromDetail,
     });
   }
 
@@ -355,8 +371,19 @@ function SwarmDashboard() {
       style: { flex: 1, minHeight: 0, overflow: 'auto' },
     },
 
-      // Tasks tab
-      activeTab === 'tasks' && React.createElement(Flex, {
+      // Tasks tab — when TaskEditor is open, render it INSTEAD of the list
+      activeTab === 'tasks' && taskEditorMode != null && React.createElement(TaskEditor, {
+        mode: taskEditorMode,
+        taskId: editingTaskId ?? undefined,
+        onSave: () => { setTaskEditorMode(null); setEditingTaskId(null); fetchTaskList(); },
+        onCancel: () => { setTaskEditorMode(null); setEditingTaskId(null); },
+        onDelete: taskEditorMode === 'edit'
+          ? () => { setTaskEditorMode(null); setEditingTaskId(null); fetchTaskList(); }
+          : undefined,
+      }),
+
+      // Tasks tab — default list view
+      activeTab === 'tasks' && taskEditorMode == null && React.createElement(Flex, {
         variant: 'column-stretch-start-nowrap-0',
         style: { flex: 1, minHeight: 0 },
       },
@@ -418,14 +445,16 @@ function SwarmDashboard() {
           }, 'Clear All'),
         ),
 
-        // Task create form (inside Tasks tab)
+        // New Task button (bottom bar)
         React.createElement(Flex, {
           variant: 'column-stretch-start-nowrap-0',
-          style: { padding: '8px 16px', flexShrink: 0, borderTop: '1px solid var(--color-border-default)' },
+          style: { flexShrink: 0, borderTop: '1px solid var(--color-border-default)', padding: '8px 16px' },
         },
-          React.createElement(TaskCreateForm, {
-            onTaskCreated: handleTaskCreated,
-          }),
+          React.createElement(Button, {
+            size: 'xs', variant: 'clear', color: 'primary',
+            leftIcon: 'add',
+            onClick: () => setTaskEditorMode('create'),
+          }, 'New Task'),
         ),
       ),
 

package/src/ui/task-detail-view.tsx

@@ -81,6 +81,7 @@ interface Subtask {
 interface TaskDetailViewProps {
   taskId: string;
   onBack: () => void;
+  onEdit?: (taskId: string) => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -201,7 +202,7 @@ function SubtaskRowItem({ sub, onBack }: { sub: Subtask; onBack: () => void }) {
 // Component
 // ---------------------------------------------------------------------------
 
-function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
+function TaskDetailView({ taskId, onBack, onEdit }: TaskDetailViewProps) {
   const ctx = usePackWorkspace();
   const { callTool } = ctx;
   const packId = ctx.packId;
@@ -500,21 +501,28 @@ function TaskDetailView({ taskId, onBack }: TaskDetailViewProps) {
       variant: 'column-stretch-start-nowrap-6',
       style: { ...headerStyle, padding: '12px 16px', borderBottom: '1px solid var(--color-border-default)' },
     },
-      // Top row: back + title + status
-      React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
-        React.createElement(IconButton, {
-          icon: 'back', size: 'xs', variant: 'clear',
-          onClick: onBack,
-        }),
-        React.createElement(StatusIcon, {
-          status: statusToIcon[task.status] || 'pending',
-          size: 'sm',
+      // Top row: back + title + status + edit
+      React.createElement(Flex, { variant: 'row-center-space-between-nowrap-8' },
+        React.createElement(Flex, { variant: 'row-center-start-nowrap-8', style: { flex: 1, minWidth: 0 } },
+          React.createElement(IconButton, {
+            icon: 'back', size: 'xs', variant: 'clear',
+            onClick: onBack,
+          }),
+          React.createElement(StatusIcon, {
+            status: statusToIcon[task.status] || 'pending',
+            size: 'sm',
+          }),
+          React.createElement(Typography, {
+            variant: 'caption-thick',
+            color: 'color-text-high',
+            style: { flex: 1, minWidth: 0, wordBreak: 'break-word' },
+          }, task.title || 'Untitled Task'),
+        ),
+        onEdit && React.createElement(IconButton, {
+          icon: 'edit', size: 'xs', variant: 'clear',
+          onClick: () => onEdit(taskId),
+          title: 'Edit task',
         }),
-        React.createElement(Typography, {
-          variant: 'caption-thick',
-          color: 'color-text-high',
-          style: { flex: 1, minWidth: 0, wordBreak: 'break-word' },
-        }, task.title || 'Untitled Task'),
       ),
 
       // Meta row: status tag, assigned profile, priority, attempts