@synergenius/flow-weaver-pack-weaver 0.9.200 → 0.9.201

package/src/ui/task-editor.tsx

@@ -6,16 +6,12 @@
  * - 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 {
+import React, { useState, useEffect, useCallback } from 'react';
+import {
   Flex, Typography, Input, Button, IconButton, Chip, Field,
   toast, usePackWorkspace,
-} = require('@fw/plugin-ui-kit');
+} from '@fw/plugin-ui-kit';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -319,11 +315,13 @@ function TaskEditor({ mode, taskId, onSave, onCancel, onDelete }: TaskEditorProp
 
   // --- 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...'),
+    return (
+      <Flex
+        variant="column-center-center-nowrap-12"
+        style={{ padding: '24px 16px' }}
+      >
+        <Typography variant="caption-regular" color="color-text-subtle">Loading task...</Typography>
+      </Flex>
     );
   }
 
@@ -334,267 +332,327 @@ function TaskEditor({ mode, taskId, onSave, onCancel, onDelete }: TaskEditorProp
   ];
 
   // --- 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(Chip, {
-          label: taskData.status,
-          size: 'small',
-          color: STATUS_COLOR[taskData.status] || 'color-brand-alt',
-        }),
-      ),
-
-      // -- 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 },
-        }),
-      ),
-
-      // -- 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),
-        }),
-      ),
-
-      // -- Notes --
-      React.createElement(Field, { label: 'Notes', align: 'start' },
-        React.createElement(Input, {
-          type: 'text', size: 'small',
-          multiline: true,
-          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' },
-          // File picker
-          React.createElement(Input, {
-            type: 'path', size: 'small',
-            placeholder: 'Click to browse files',
-            value: '',
-            onClick: async () => {
-              const selected = await ctx.browseFiles({ title: 'Select Files', multiple: true });
-              if (selected.length > 0) {
-                setFiles((prev: string[]) => {
-                  const unique = selected.filter((f: string) => !prev.includes(f));
-                  return [...prev, ...unique];
-                });
-              }
-            },
-            defaultBoxStyle: { flex: 1, minWidth: 0 },
-          }),
-          // 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' },
-            React.createElement(Input, {
-              type: 'select', size: 'small',
-              placeholder: 'Select a task',
-              options: availableTasks
-                .filter((t: { id: string }) => !dependsOn.includes(t.id) && t.id !== taskId)
-                .map((t: { id: string; title: string }) => ({ id: t.id, label: t.title })),
-              optionId: newDep,
-              onChange: (v: string) => setNewDep(v),
-              defaultBoxStyle: { flex: 1, minWidth: 0 },
-            }),
-            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 },
-                    }, (() => { const t = availableTasks.find((t: { id: string }) => t.id === dep); return t ? t.title : dep; })()),
-                    mode === 'create' && React.createElement(IconButton, {
-                      icon: 'close', size: 'xs', variant: 'clear', color: 'danger',
-                      onClick: () => handleRemoveDep(idx),
-                    }),
-                  ),
-                ),
+  return (
+    <Flex
+      variant="column-stretch-start-nowrap-0"
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+    >
+      {/* -- Header bar -- */}
+      <Flex
+        variant="row-center-space-between-nowrap-8"
+        style={{ padding: '8px 16px', flexShrink: 0, borderBottom: '1px solid var(--color-border-default)' }}
+      >
+        <Flex variant="row-center-start-nowrap-8">
+          <IconButton
+            icon="back"
+            size="xs"
+            variant="clear"
+            onClick={handleBack}
+            title="Back"
+          />
+          <Typography variant="caption-thick" color="color-text-high">
+            {mode === 'create' ? 'Create Task' : 'Edit Task'}
+          </Typography>
+        </Flex>
+        {mode === 'edit' && onDelete && (
+          <IconButton
+            icon="outlinedDelete"
+            size="sm"
+            variant="clear"
+            color="danger"
+            onClick={handleDelete}
+            title="Cancel task"
+          />
+        )}
+      </Flex>
+
+      {/* -- Scrollable form body -- */}
+      <Flex
+        variant="column-stretch-start-nowrap-10"
+        style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '12px 16px' }}
+      >
+        {/* -- Edit-only: Status tag -- */}
+        {mode === 'edit' && taskData && (
+          <Field label="Status">
+            <Chip
+              label={taskData.status}
+              size="small"
+              color={STATUS_COLOR[taskData.status] || 'color-brand-alt'}
+            />
+          </Field>
+        )}
+
+        {/* -- Title -- */}
+        <Field label="Title">
+          <Input
+            type="text"
+            size="small"
+            placeholder="Task title (required)"
+            value={title}
+            onChange={(v: string) => setTitle(v)}
+            defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+            inputBoxStyle={{ maxWidth: 'none' }}
+          />
+        </Field>
+
+        {/* -- Description -- */}
+        <Field label="Description">
+          <Input
+            type="text"
+            size="small"
+            placeholder="Detailed task description"
+            value={description}
+            onChange={(v: string) => setDescription(v)}
+            defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+            inputBoxStyle={{ maxWidth: 'none' }}
+          />
+        </Field>
+
+        {/* -- Priority -- */}
+        <Field label="Priority">
+          <Input
+            type="select"
+            size="small"
+            options={PRIORITY_OPTIONS}
+            optionId={priority}
+            onChange={(id: string) => setPriority(id)}
+            defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+          />
+        </Field>
+
+        {/* -- Complexity -- */}
+        <Field label="Complexity">
+          <Input
+            type="select"
+            size="small"
+            options={COMPLEXITY_OPTIONS}
+            optionId={complexity}
+            onChange={(id: string) => setComplexity(id)}
+            defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+          />
+        </Field>
+
+        {/* -- Assigned Profile -- */}
+        <Field label="Profile">
+          <Input
+            type="select"
+            size="small"
+            options={profileOptions}
+            optionId={assignedProfile}
+            onChange={(id: string) => setAssignedProfile(id)}
+            placeholder="Select profile"
+            defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+          />
+        </Field>
+
+        {/* -- Budget Cost -- */}
+        <Field label="Budget Cost">
+          <Input
+            type="number"
+            size="small"
+            placeholder="Optional cost limit (USD)"
+            value={budgetCost}
+            onChange={(v: string) => setBudgetCost(v)}
+          />
+        </Field>
+
+        {/* -- Notes -- */}
+        <Field label="Notes" align="start">
+          <Input
+            type="text"
+            size="small"
+            multiline={true}
+            placeholder="Optional notes for context"
+            value={notes}
+            onChange={(v: string) => setNotes(v)}
+            defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+            inputBoxStyle={{ maxWidth: 'none' }}
+          />
+        </Field>
+
+        {/* -- Files -- */}
+        <Field label="Files" align="start">
+          <Flex variant="column-stretch-start-nowrap-6">
+            <Input
+              type="path"
+              size="small"
+              placeholder="Click to browse files"
+              value=""
+              onClick={async () => {
+                const selected = await ctx.browseFiles({ title: 'Select Files', multiple: true });
+                if (selected.length > 0) {
+                  setFiles((prev: string[]) => {
+                    const unique = selected.filter((f: string) => !prev.includes(f));
+                    return [...prev, ...unique];
+                  });
+                }
+              }}
+              defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+            />
+            {files.map((file: string, idx: number) => (
+              <Flex
+                key={`file-${idx}`}
+                variant="row-center-start-nowrap-6"
+                style={{ paddingLeft: '4px' }}
+              >
+                <Typography
+                  variant="smallCaption-regular"
+                  color="color-text-high"
+                  style={{ flex: 1, minWidth: 0, fontFamily: 'var(--font-mono, monospace)' }}
+                >
+                  {file}
+                </Typography>
+                <IconButton
+                  icon="close"
+                  size="xs"
+                  variant="clear"
+                  color="danger"
+                  onClick={() => handleRemoveFile(idx)}
+                />
+              </Flex>
+            ))}
+          </Flex>
+        </Field>
+
+        {/* -- Dependencies -- */}
+        <Field label="Dependencies" align="start">
+          <Flex variant="column-stretch-start-nowrap-6">
+            {mode === 'create' && (
+              <Flex variant="row-center-start-nowrap-4">
+                <Input
+                  type="select"
+                  size="small"
+                  placeholder="Select a task"
+                  options={availableTasks
+                    .filter((t: { id: string }) => !dependsOn.includes(t.id) && t.id !== taskId)
+                    .map((t: { id: string; title: string }) => ({ id: t.id, label: t.title }))}
+                  optionId={newDep}
+                  onChange={(v: string) => setNewDep(v)}
+                  defaultBoxStyle={{ flex: 1, minWidth: 0 }}
+                />
+                <IconButton
+                  icon="add"
+                  size="sm"
+                  variant="outlined"
+                  color="primary"
+                  onClick={handleAddDep}
+                  disabled={!newDep.trim()}
+                />
+              </Flex>
+            )}
+            {dependsOn.length > 0
+              ? (
+                <Flex variant="column-stretch-start-nowrap-4">
+                  {dependsOn.map((dep: string, idx: number) => (
+                    <Flex
+                      key={`dep-${idx}`}
+                      variant="row-center-start-nowrap-6"
+                      style={{ paddingLeft: '4px' }}
+                    >
+                      <Typography
+                        variant="smallCaption-regular"
+                        color="color-text-high"
+                        style={{ flex: 1, minWidth: 0 }}
+                      >
+                        {(() => { const t = availableTasks.find((t: { id: string }) => t.id === dep); return t ? t.title : dep; })()}
+                      </Typography>
+                      {mode === 'create' && (
+                        <IconButton
+                          icon="close"
+                          size="xs"
+                          variant="clear"
+                          color="danger"
+                          onClick={() => handleRemoveDep(idx)}
+                        />
+                      )}
+                    </Flex>
+                  ))}
+                </Flex>
               )
-            : 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?.runHistory as Array<{ remainingWork?: string }> | undefined)?.slice(-1)?.[0]?.remainingWork && React.createElement(Field, { label: 'Remaining work', align: 'start' },
-          React.createElement(Typography, {
-            variant: 'smallCaption-regular', color: 'color-status-caution',
-            style: { fontFamily: 'var(--font-mono, monospace)', whiteSpace: 'pre-wrap' },
-          }, (taskData.context.runHistory as Array<{ remainingWork?: string }>).slice(-1)[0]?.remainingWork),
-        ),
-      ),
-
-    ),
-
-    // -- 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'),
-    ),
+              : (
+                <Typography
+                  variant="smallCaption-regular"
+                  color="color-text-subtle"
+                  style={{ paddingLeft: '4px' }}
+                >
+                  None
+                </Typography>
+              )}
+            {mode === 'edit' && (
+              <Typography
+                variant="smallCaption-regular"
+                color="color-text-subtle"
+                style={{ paddingLeft: '4px', fontStyle: 'italic' }}
+              >
+                Dependencies cannot be changed after creation
+              </Typography>
+            )}
+          </Flex>
+        </Field>
+
+        {/* -- Edit-only: read-only metadata -- */}
+        {mode === 'edit' && taskData && (
+          <Flex
+            variant="column-stretch-start-nowrap-10"
+            style={{ marginTop: 8, paddingTop: 12, borderTop: '1px solid var(--color-border-default)' }}
+          >
+            <Field label="Created by">
+              <Typography variant="smallCaption-regular" color="color-text-medium">
+                {taskData.createdBy || 'unknown'}
+              </Typography>
+            </Field>
+            <Field label="Created at">
+              <Typography variant="smallCaption-regular" color="color-text-medium">
+                {taskData.createdAt ? new Date(taskData.createdAt).toLocaleString() : '-'}
+              </Typography>
+            </Field>
+            <Field label="Updated at">
+              <Typography variant="smallCaption-regular" color="color-text-medium">
+                {taskData.updatedAt ? new Date(taskData.updatedAt).toLocaleString() : '-'}
+              </Typography>
+            </Field>
+            <Field label="Tokens used">
+              <Typography variant="smallCaption-regular" color="color-text-medium">
+                {(taskData.tokensUsed ?? 0).toLocaleString()}
+              </Typography>
+            </Field>
+            <Field label="Cost used">
+              <Typography variant="smallCaption-regular" color="color-text-medium">
+                {`$${(taskData.costUsed ?? 0).toFixed(3)}`}
+              </Typography>
+            </Field>
+            {(taskData.context?.runHistory as Array<{ remainingWork?: string }> | undefined)?.slice(-1)?.[0]?.remainingWork && (
+              <Field label="Remaining work" align="start">
+                <Typography
+                  variant="smallCaption-regular"
+                  color="color-status-caution"
+                  style={{ fontFamily: 'var(--font-mono, monospace)', whiteSpace: 'pre-wrap' }}
+                >
+                  {(taskData.context.runHistory as Array<{ remainingWork?: string }>).slice(-1)[0]?.remainingWork}
+                </Typography>
+              </Field>
+            )}
+          </Flex>
+        )}
+      </Flex>
+
+      {/* -- Footer bar with save button -- */}
+      <Flex
+        variant="row-center-end-nowrap-8"
+        style={{ padding: '8px 16px', flexShrink: 0, borderTop: '1px solid var(--color-border-default)' }}
+      >
+        <Button
+          size="xs"
+          variant="fill"
+          color="primary"
+          onClick={handleSave}
+          disabled={!title.trim()}
+        >
+          {mode === 'create' ? 'Create' : 'Save'}
+        </Button>
+      </Flex>
+    </Flex>
   );
 }
 
 export default TaskEditor;
-module.exports = TaskEditor;