@synergenius/flow-weaver-pack-weaver 0.9.81 → 0.9.83

package/src/ui/task-editor.tsx

@@ -0,0 +1,628 @@
+/**
+ * TaskEditor — unified component for creating and editing tasks.
+ *
+ * Handles both modes:
+ * - Create: all fields start empty/default, saves via fw_weaver_task_create.
+ * - Edit: loads task by ID on mount, saves via fw_weaver_task_update.
+ *
+ * Calls tool functions internally via usePackWorkspace.
+ *
+ * Pattern: CommonJS require for platform deps, ESM import for local files,
+ * React.createElement throughout, module.exports at end.
+ */
+const React = require('react');
+const { useState, useEffect, useCallback } = React;
+const {
+  Flex, Typography, Input, Button, IconButton, Tag, Field,
+  toast, usePackWorkspace,
+} = require('@fw/plugin-ui-kit');
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface TaskEditorProps {
+  mode: 'create' | 'edit';
+  taskId?: string;
+  onSave: () => void;
+  onCancel: () => void;
+  onDelete?: () => void;
+}
+
+type TaskStatus = 'pending' | 'in-progress' | 'blocked' | 'done' | 'failed' | 'cancelled';
+
+interface TaskData {
+  id: string;
+  title: string;
+  description: string;
+  status: TaskStatus;
+  priority: number;
+  complexity?: 'trivial' | 'simple' | 'moderate' | 'complex';
+  assignedProfile?: string;
+  maxAttempts: number;
+  budgetTokens?: number;
+  budgetCost?: number;
+  dependsOn: string[];
+  context: {
+    files: string[];
+    notes: string;
+    lastError?: string;
+    runSummaries: unknown[];
+  };
+  tokensUsed: number;
+  costUsed: number;
+  createdBy: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const PRIORITY_OPTIONS = [
+  { id: '0', label: '0 - None' },
+  { id: '1', label: '1 - Low' },
+  { id: '2', label: '2 - Medium' },
+  { id: '3', label: '3 - High' },
+  { id: '4', label: '4 - Critical' },
+];
+
+const COMPLEXITY_OPTIONS = [
+  { id: '', label: 'Not set' },
+  { id: 'trivial', label: 'Trivial' },
+  { id: 'simple', label: 'Simple' },
+  { id: 'moderate', label: 'Moderate' },
+  { id: 'complex', label: 'Complex' },
+];
+
+const STATUS_COLOR: Record<string, string> = {
+  'pending': 'secondary',
+  'in-progress': 'info',
+  'blocked': 'caution',
+  'done': 'positive',
+  'failed': 'negative',
+  'cancelled': 'negative',
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function TaskEditor({ mode, taskId, onSave, onCancel, onDelete }: TaskEditorProps) {
+  const ctx = usePackWorkspace();
+  const { callTool } = ctx;
+
+  // --- Field state ---
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [priority, setPriority] = useState('0');
+  const [complexity, setComplexity] = useState('');
+  const [assignedProfile, setAssignedProfile] = useState('');
+  const [maxAttempts, setMaxAttempts] = useState('3');
+  const [budgetTokens, setBudgetTokens] = useState('');
+  const [budgetCost, setBudgetCost] = useState('');
+  const [notes, setNotes] = useState('');
+  const [files, setFiles] = useState<string[]>([]);
+  const [newFile, setNewFile] = useState('');
+  const [dependsOn, setDependsOn] = useState<string[]>([]);
+  const [newDep, setNewDep] = useState('');
+
+  // --- Edit-only read-only state ---
+  const [taskData, setTaskData] = useState<TaskData | null>(null);
+
+  // --- Profiles for select ---
+  const [profiles, setProfiles] = useState<Array<{ id: string; name: string }>>([]);
+
+  const [loading, setLoading] = useState(mode === 'edit');
+
+  // --- Load profiles ---
+  useEffect(() => {
+    (async () => {
+      try {
+        const raw = await callTool('fw_weaver_profile_list', {});
+        const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+        if (Array.isArray(data)) {
+          setProfiles(data.map((p: Record<string, unknown>) => ({
+            id: p.id as string,
+            name: (p.name as string) || (p.id as string),
+          })));
+        }
+      } catch { /* non-fatal */ }
+    })();
+  }, [callTool]);
+
+  // --- Load task for edit mode ---
+  useEffect(() => {
+    if (mode !== 'edit' || !taskId) return;
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const raw = await callTool('fw_weaver_task_get', { id: taskId });
+        if (cancelled) return;
+        const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+        const t = (data?.task ?? data) as TaskData;
+        if (!t || !t.id) {
+          toast('Task not found', { type: 'error' });
+          onCancel();
+          return;
+        }
+        setTaskData(t);
+        setTitle(t.title || '');
+        setDescription(t.description || '');
+        setPriority(String(t.priority ?? 0));
+        setComplexity(t.complexity || '');
+        setAssignedProfile(t.assignedProfile || '');
+        setMaxAttempts(String(t.maxAttempts ?? 3));
+        setBudgetTokens(t.budgetTokens != null ? String(t.budgetTokens) : '');
+        setBudgetCost(t.budgetCost != null ? String(t.budgetCost) : '');
+        setNotes(t.context?.notes || '');
+        setFiles(t.context?.files || []);
+        setDependsOn(t.dependsOn || []);
+      } catch {
+        toast('Failed to load task', { type: 'error' });
+        onCancel();
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+
+    return () => { cancelled = true; };
+  }, [mode, taskId, callTool]);
+
+  // --- Dirty-form check on back/cancel ---
+  const isDirty = useCallback(() => {
+    if (mode === 'create') {
+      return !!(title.trim() || description.trim() || notes.trim() || files.length > 0 || dependsOn.length > 0
+        || priority !== '0' || complexity || assignedProfile || maxAttempts !== '3' || budgetTokens || budgetCost);
+    }
+    // Edit mode: compare against loaded data
+    if (!taskData) return false;
+    return title.trim() !== (taskData.title || '')
+      || description.trim() !== (taskData.description || '')
+      || notes.trim() !== (taskData.context?.notes || '')
+      || JSON.stringify(files) !== JSON.stringify(taskData.context?.files || [])
+      || priority !== String(taskData.priority ?? 0)
+      || complexity !== (taskData.complexity || '')
+      || assignedProfile !== (taskData.assignedProfile || '')
+      || maxAttempts !== String(taskData.maxAttempts ?? 3)
+      || budgetTokens !== (taskData.budgetTokens != null ? String(taskData.budgetTokens) : '')
+      || budgetCost !== (taskData.budgetCost != null ? String(taskData.budgetCost) : '');
+  }, [mode, title, description, notes, files, dependsOn, priority, complexity, assignedProfile, maxAttempts, budgetTokens, budgetCost, taskData]);
+
+  const handleBack = useCallback(async () => {
+    if (isDirty()) {
+      const ok = await ctx.confirm('Discard unsaved changes?', {
+        title: 'Unsaved Changes',
+        state: 'warning',
+      });
+      if (!ok) return;
+    }
+    onCancel();
+  }, [isDirty, ctx, onCancel]);
+
+  // --- Files list ---
+  const handleAddFile = useCallback(() => {
+    const trimmed = newFile.trim();
+    if (!trimmed) return;
+    setFiles((prev: string[]) => [...prev, trimmed]);
+    setNewFile('');
+  }, [newFile]);
+
+  const handleRemoveFile = useCallback((index: number) => {
+    setFiles((prev: string[]) => prev.filter((_: string, i: number) => i !== index));
+  }, []);
+
+  // --- Dependencies list ---
+  const handleAddDep = useCallback(() => {
+    const trimmed = newDep.trim();
+    if (!trimmed) return;
+    setDependsOn((prev: string[]) => [...prev, trimmed]);
+    setNewDep('');
+  }, [newDep]);
+
+  const handleRemoveDep = useCallback((index: number) => {
+    setDependsOn((prev: string[]) => prev.filter((_: string, i: number) => i !== index));
+  }, []);
+
+  // --- Save ---
+  const handleSave = useCallback(async () => {
+    if (!title.trim()) {
+      toast('Title is required', { type: 'error' });
+      return;
+    }
+
+    try {
+      if (mode === 'create') {
+        const args: Record<string, unknown> = {
+          title: title.trim(),
+          description: description.trim(),
+          priority: parseInt(priority, 10) || 0,
+          maxAttempts: parseInt(maxAttempts, 10) || 3,
+        };
+        if (complexity) args.complexity = complexity;
+        if (assignedProfile) args.assignedProfile = assignedProfile;
+        if (budgetTokens) args.budgetTokens = parseInt(budgetTokens, 10);
+        if (budgetCost) args.budgetCost = parseFloat(budgetCost);
+        if (dependsOn.length > 0) args.dependsOn = dependsOn;
+
+        const result = await callTool('fw_weaver_task_create', args);
+        const createData = typeof result === 'string' ? JSON.parse(result) : result;
+        const createdId = createData?.task?.id;
+
+        // task_create doesn't support context fields — follow up with an update
+        if (createdId && (notes.trim() || files.length > 0)) {
+          await callTool('fw_weaver_task_update', {
+            id: createdId,
+            context: {
+              notes: notes.trim(),
+              files,
+              runSummaries: [],
+            },
+          });
+        }
+
+        toast('Task created', { type: 'success' });
+      } else {
+        // Edit mode — build patch
+        const patch: Record<string, unknown> = {
+          id: taskId,
+          title: title.trim(),
+          description: description.trim(),
+          priority: parseInt(priority, 10) || 0,
+          maxAttempts: parseInt(maxAttempts, 10) || 3,
+          complexity: complexity || undefined,
+          assignedProfile: assignedProfile || null,
+        };
+        if (budgetTokens) {
+          patch.budgetTokens = parseInt(budgetTokens, 10);
+        } else {
+          patch.budgetTokens = undefined;
+        }
+        if (budgetCost) {
+          patch.budgetCost = parseFloat(budgetCost);
+        } else {
+          patch.budgetCost = undefined;
+        }
+
+        // Update context (preserve runSummaries and lastError from existing data)
+        patch.context = {
+          files,
+          notes: notes.trim(),
+          runSummaries: taskData?.context?.runSummaries || [],
+          lastError: taskData?.context?.lastError,
+        };
+
+        await callTool('fw_weaver_task_update', patch);
+        toast('Task updated', { type: 'success' });
+      }
+      onSave();
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : `Failed to ${mode} task`, { type: 'error' });
+    }
+  }, [mode, taskId, title, description, priority, complexity, assignedProfile, maxAttempts, budgetTokens, budgetCost, notes, files, dependsOn, taskData, callTool, onSave]);
+
+  // --- Delete (cancel task) ---
+  const handleDelete = useCallback(async () => {
+    if (!taskId) return;
+    const ok = await ctx.confirm('Are you sure you want to cancel this task?', {
+      title: 'Cancel Task',
+      confirmLabel: 'Cancel Task',
+      state: 'danger',
+    });
+    if (!ok) return;
+    try {
+      await callTool('fw_weaver_task_cancel', { id: taskId });
+      toast('Task cancelled', { type: 'success' });
+      if (onDelete) onDelete();
+    } catch (err: unknown) {
+      toast(err instanceof Error ? err.message : 'Failed to cancel task', { type: 'error' });
+    }
+  }, [taskId, callTool, onDelete, ctx]);
+
+  // --- Loading state ---
+  if (loading) {
+    return React.createElement(Flex, {
+      variant: 'column-center-center-nowrap-12',
+      style: { padding: '24px 16px' },
+    },
+      React.createElement(Typography, { variant: 'caption-regular', color: 'color-text-subtle' }, 'Loading task...'),
+    );
+  }
+
+  // --- Profile select options ---
+  const profileOptions = [
+    { id: '', label: 'Not assigned' },
+    ...profiles.map((p: { id: string; name: string }) => ({ id: p.id, label: p.name })),
+  ];
+
+  // --- Render ---
+  return React.createElement(Flex, {
+    variant: 'column-stretch-start-nowrap-0',
+    style: { width: '100%', height: '100%', overflow: 'hidden' },
+  },
+    // -- Header bar --
+    React.createElement(Flex, {
+      variant: 'row-center-space-between-nowrap-8',
+      style: { padding: '8px 16px', flexShrink: 0, borderBottom: '1px solid var(--color-border-default)' },
+    },
+      React.createElement(Flex, { variant: 'row-center-start-nowrap-8' },
+        React.createElement(IconButton, {
+          icon: 'back', size: 'xs', variant: 'clear',
+          onClick: handleBack,
+          title: 'Back',
+        }),
+        React.createElement(Typography, { variant: 'caption-thick', color: 'color-text-high' },
+          mode === 'create' ? 'Create Task' : 'Edit Task',
+        ),
+      ),
+      mode === 'edit' && onDelete && React.createElement(IconButton, {
+        icon: 'outlinedDelete', size: 'sm', variant: 'clear', color: 'danger',
+        onClick: handleDelete,
+        title: 'Cancel task',
+      }),
+    ),
+
+    // -- Scrollable form body --
+    React.createElement(Flex, {
+      variant: 'column-stretch-start-nowrap-10',
+      style: { flex: 1, minHeight: 0, overflow: 'auto', padding: '12px 16px' },
+    },
+
+      // -- Edit-only: Status tag --
+      mode === 'edit' && taskData && React.createElement(Field, { label: 'Status' },
+        React.createElement(Tag, {
+          size: 'small',
+          color: STATUS_COLOR[taskData.status] || 'secondary',
+        }, taskData.status),
+      ),
+
+      // -- Title --
+      React.createElement(Field, { label: 'Title' },
+        React.createElement(Input, {
+          type: 'text', size: 'small',
+          placeholder: 'Task title (required)',
+          value: title,
+          onChange: (v: string) => setTitle(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // -- Description --
+      React.createElement(Field, { label: 'Description' },
+        React.createElement(Input, {
+          type: 'text', size: 'small',
+          placeholder: 'Detailed task description',
+          value: description,
+          onChange: (v: string) => setDescription(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // -- Priority --
+      React.createElement(Field, { label: 'Priority' },
+        React.createElement(Input, {
+          type: 'select', size: 'small',
+          options: PRIORITY_OPTIONS,
+          optionId: priority,
+          onChange: (id: string) => setPriority(id),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+        }),
+      ),
+
+      // -- Complexity --
+      React.createElement(Field, { label: 'Complexity' },
+        React.createElement(Input, {
+          type: 'select', size: 'small',
+          options: COMPLEXITY_OPTIONS,
+          optionId: complexity,
+          onChange: (id: string) => setComplexity(id),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+        }),
+      ),
+
+      // -- Assigned Profile --
+      React.createElement(Field, { label: 'Profile' },
+        React.createElement(Input, {
+          type: 'select', size: 'small',
+          options: profileOptions,
+          optionId: assignedProfile,
+          onChange: (id: string) => setAssignedProfile(id),
+          placeholder: 'Select profile',
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+        }),
+      ),
+
+      // -- Max Attempts --
+      React.createElement(Field, { label: 'Max Attempts' },
+        React.createElement(Input, {
+          type: 'number', size: 'small',
+          placeholder: '3',
+          value: maxAttempts,
+          onChange: (v: string) => setMaxAttempts(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // -- Budget Tokens --
+      React.createElement(Field, { label: 'Budget Tokens' },
+        React.createElement(Input, {
+          type: 'number', size: 'small',
+          placeholder: 'Optional token limit',
+          value: budgetTokens,
+          onChange: (v: string) => setBudgetTokens(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // -- Budget Cost --
+      React.createElement(Field, { label: 'Budget Cost' },
+        React.createElement(Input, {
+          type: 'number', size: 'small',
+          placeholder: 'Optional cost limit (USD)',
+          value: budgetCost,
+          onChange: (v: string) => setBudgetCost(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // -- Notes --
+      React.createElement(Field, { label: 'Notes' },
+        React.createElement(Input, {
+          type: 'text', size: 'small',
+          placeholder: 'Optional notes for context',
+          value: notes,
+          onChange: (v: string) => setNotes(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: 'none' },
+        }),
+      ),
+
+      // -- Files --
+      React.createElement(Field, { label: 'Files', align: 'start' },
+        React.createElement(Flex, { variant: 'column-stretch-start-nowrap-6' },
+          // Add file row
+          React.createElement(Flex, { variant: 'row-center-start-nowrap-4', style: { overflow: 'hidden' } },
+            React.createElement(Input, {
+              type: 'text', size: 'small',
+              placeholder: 'File path',
+              value: newFile,
+              onChange: (v: string) => setNewFile(v),
+              onEnter: handleAddFile,
+              defaultBoxStyle: { flex: 1, minWidth: 0 },
+              inputBoxStyle: { maxWidth: 'none' },
+            }),
+            React.createElement(IconButton, {
+              icon: 'add', size: 'sm', variant: 'outlined', color: 'primary',
+              onClick: handleAddFile,
+              disabled: !newFile.trim(),
+            }),
+          ),
+          // File list
+          ...files.map((file: string, idx: number) =>
+            React.createElement(Flex, {
+              key: `file-${idx}`,
+              variant: 'row-center-start-nowrap-6',
+              style: { paddingLeft: '4px' },
+            },
+              React.createElement(Typography, {
+                variant: 'smallCaption-regular', color: 'color-text-high',
+                style: { flex: 1, minWidth: 0, fontFamily: 'var(--font-mono, monospace)' },
+              }, file),
+              React.createElement(IconButton, {
+                icon: 'close', size: 'xs', variant: 'clear', color: 'danger',
+                onClick: () => handleRemoveFile(idx),
+              }),
+            ),
+          ),
+        ),
+      ),
+
+      // -- Dependencies --
+      React.createElement(Field, { label: 'Dependencies', align: 'start' },
+        React.createElement(Flex, { variant: 'column-stretch-start-nowrap-6' },
+          // Add dependency row (create mode only)
+          mode === 'create' && React.createElement(Flex, { variant: 'row-center-start-nowrap-4', style: { overflow: 'hidden' } },
+            React.createElement(Input, {
+              type: 'text', size: 'small',
+              placeholder: 'Task ID',
+              value: newDep,
+              onChange: (v: string) => setNewDep(v),
+              onEnter: handleAddDep,
+              defaultBoxStyle: { flex: 1, minWidth: 0 },
+              inputBoxStyle: { maxWidth: 'none' },
+            }),
+            React.createElement(IconButton, {
+              icon: 'add', size: 'sm', variant: 'outlined', color: 'primary',
+              onClick: handleAddDep,
+              disabled: !newDep.trim(),
+            }),
+          ),
+          // Dependency list
+          dependsOn.length > 0
+            ? React.createElement(Flex, { variant: 'column-stretch-start-nowrap-4' },
+                ...dependsOn.map((dep: string, idx: number) =>
+                  React.createElement(Flex, {
+                    key: `dep-${idx}`,
+                    variant: 'row-center-start-nowrap-6',
+                    style: { paddingLeft: '4px' },
+                  },
+                    React.createElement(Typography, {
+                      variant: 'smallCaption-regular', color: 'color-text-high',
+                      style: { flex: 1, minWidth: 0, fontFamily: 'var(--font-mono, monospace)' },
+                    }, dep),
+                    mode === 'create' && React.createElement(IconButton, {
+                      icon: 'close', size: 'xs', variant: 'clear', color: 'danger',
+                      onClick: () => handleRemoveDep(idx),
+                    }),
+                  ),
+                ),
+              )
+            : React.createElement(Typography, {
+                variant: 'smallCaption-regular', color: 'color-text-subtle',
+                style: { paddingLeft: '4px' },
+              }, 'None'),
+          mode === 'edit' && React.createElement(Typography, {
+            variant: 'smallCaption-regular', color: 'color-text-subtle',
+            style: { paddingLeft: '4px', fontStyle: 'italic' },
+          }, 'Dependencies cannot be changed after creation'),
+        ),
+      ),
+
+      // -- Edit-only: read-only metadata --
+      mode === 'edit' && taskData && React.createElement(Flex, {
+        variant: 'column-stretch-start-nowrap-10',
+        style: { marginTop: 8, paddingTop: 12, borderTop: '1px solid var(--color-border-default)' },
+      },
+        React.createElement(Field, { label: 'Created by' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-medium' },
+            taskData.createdBy || 'unknown'),
+        ),
+        React.createElement(Field, { label: 'Created at' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-medium' },
+            taskData.createdAt ? new Date(taskData.createdAt).toLocaleString() : '-'),
+        ),
+        React.createElement(Field, { label: 'Updated at' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-medium' },
+            taskData.updatedAt ? new Date(taskData.updatedAt).toLocaleString() : '-'),
+        ),
+        React.createElement(Field, { label: 'Tokens used' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-medium' },
+            (taskData.tokensUsed ?? 0).toLocaleString()),
+        ),
+        React.createElement(Field, { label: 'Cost used' },
+          React.createElement(Typography, { variant: 'smallCaption-regular', color: 'color-text-medium' },
+            `$${(taskData.costUsed ?? 0).toFixed(3)}`),
+        ),
+        taskData.context?.lastError && React.createElement(Field, { label: 'Last error', align: 'start' },
+          React.createElement(Typography, {
+            variant: 'smallCaption-regular', color: 'color-status-negative',
+            style: { fontFamily: 'var(--font-mono, monospace)', whiteSpace: 'pre-wrap' },
+          }, taskData.context.lastError),
+        ),
+      ),
+
+    ),
+
+    // -- Footer bar with save button --
+    React.createElement(Flex, {
+      variant: 'row-center-end-nowrap-8',
+      style: { padding: '8px 16px', flexShrink: 0, borderTop: '1px solid var(--color-border-default)' },
+    },
+      React.createElement(Button, {
+        size: 'xs', variant: 'fill', color: 'primary',
+        onClick: handleSave,
+        disabled: !title.trim(),
+      }, mode === 'create' ? 'Create' : 'Save'),
+    ),
+  );
+}
+
+export default TaskEditor;
+module.exports = TaskEditor;