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

package/src/ui/task-editor.tsx

@@ -12,6 +12,7 @@ import {
   Flex, Typography, Input, Button, IconButton, Chip, Field,
   toast, usePackWorkspace,
 } from '@fw/plugin-ui-kit';
+import { TaskStatus, TASK_STATUS_COLOR } from './task-status';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -23,10 +24,10 @@ interface TaskEditorProps {
   onSave: () => void;
   onCancel: () => void;
   onDelete?: () => void;
+  /** When true, hides the header bar and footer — just renders the form body. */
+  embedded?: boolean;
 }
 
-type TaskStatus = 'open' | 'in-progress' | 'done' | 'cancelled';
-
 interface TaskData {
   id: string;
   title: string;
@@ -70,18 +71,11 @@ const COMPLEXITY_OPTIONS = [
   { id: 'complex', label: 'Complex' },
 ];
 
-const STATUS_COLOR: Record<string, string> = {
-  'open': 'color-brand-alt',
-  'in-progress': 'color-status-info',
-  'done': 'color-status-positive',
-  'cancelled': 'color-status-negative',
-};
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 
-function TaskEditor({ mode, taskId, onSave, onCancel, onDelete }: TaskEditorProps) {
+function TaskEditor({ mode, taskId, onSave, onCancel, onDelete, embedded }: TaskEditorProps) {
   const ctx = usePackWorkspace();
   const { callTool } = ctx;
 
@@ -337,34 +331,36 @@ function TaskEditor({ mode, taskId, onSave, onCancel, onDelete }: TaskEditorProp
       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>
+      {/* -- Header bar (hidden when embedded) -- */}
+      {!embedded && (
+        <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>
-        {mode === 'edit' && onDelete && (
-          <IconButton
-            icon="outlinedDelete"
-            size="sm"
-            variant="clear"
-            color="danger"
-            onClick={handleDelete}
-            title="Cancel task"
-          />
-        )}
-      </Flex>
+      )}
 
       {/* -- Scrollable form body -- */}
       <Flex
@@ -377,7 +373,7 @@ function TaskEditor({ mode, taskId, onSave, onCancel, onDelete }: TaskEditorProp
             <Chip
               label={taskData.status}
               size="small"
-              color={STATUS_COLOR[taskData.status] || 'color-brand-alt'}
+              color={TASK_STATUS_COLOR[taskData.status] || 'color-brand-alt'}
             />
           </Field>
         )}
@@ -590,67 +586,40 @@ function TaskEditor({ mode, taskId, onSave, onCancel, onDelete }: TaskEditorProp
           </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()}
+      {/* -- Footer bar with save button (hidden when embedded — save inline) -- */}
+      {!embedded ? (
+        <Flex
+          variant="row-center-end-nowrap-8"
+          style={{ padding: '8px 16px', flexShrink: 0, borderTop: '1px solid var(--color-border-default)' }}
         >
-          {mode === 'create' ? 'Create' : 'Save'}
-        </Button>
-      </Flex>
+          <Button
+            size="xs"
+            variant="fill"
+            color="primary"
+            onClick={handleSave}
+            disabled={!title.trim()}
+          >
+            {mode === 'create' ? 'Create' : 'Save'}
+          </Button>
+        </Flex>
+      ) : (
+        <Flex
+          variant="row-center-end-nowrap-8"
+          style={{ padding: '8px 16px', flexShrink: 0 }}
+        >
+          <Button
+            size="xs"
+            variant="fill"
+            color="primary"
+            onClick={handleSave}
+            disabled={!title.trim()}
+          >
+            Save
+          </Button>
+        </Flex>
+      )}
     </Flex>
   );
 }

package/src/ui/task-pool-list.tsx

@@ -7,11 +7,10 @@
  */
 import React, { useState } from 'react';
 import { Flex, Typography, Icon, StatusIcon, Chip, ScrollArea, Badge, EmptyState } from '@fw/plugin-ui-kit';
+import { TaskStatus, TASK_STATUS_ICON, TASK_STATUS_ICON_OVERRIDE } from './task-status';
 
 // --- Types ---
 
-type TaskStatus = 'open' | 'in-progress' | 'done' | 'cancelled';
-
 interface Task {
   id: string;
   title: string;
@@ -28,15 +27,6 @@ interface TaskPoolListProps {
   onTaskClick: (taskId: string) => void;
 }
 
-// --- Status mapping ---
-
-const statusToIcon: Record<TaskStatus, string> = {
-  'open': 'pending',
-  'in-progress': 'running',
-  'done': 'completed',
-  'cancelled': 'failed',
-};
-
 // --- Row styles ---
 
 const rowBaseStyle: React.CSSProperties = {
@@ -118,7 +108,8 @@ function TaskRowItem({ task, indent, onClick }: { key?: string; task: Task; inde
       onMouseLeave={() => setHovered(false)}
     >
       <StatusIcon
-        status={statusToIcon[task.status] || 'pending'}
+        status={TASK_STATUS_ICON[task.status] || 'pending'}
+        icon={TASK_STATUS_ICON_OVERRIDE[task.status]}
         size="sm"
       />
 

package/src/ui/task-status.ts

@@ -0,0 +1,60 @@
+/**
+ * Centralized task status mappings — icons, labels, colors, chip variants.
+ *
+ * Import from here instead of duplicating in every UI file.
+ */
+
+export type TaskStatus = 'open' | 'in-progress' | 'done' | 'cancelled';
+
+/** StatusIcon `status` prop value for each task state. */
+export const TASK_STATUS_ICON: Record<TaskStatus, string> = {
+  'open': 'pending',
+  'in-progress': 'running',
+  'done': 'completed',
+  'cancelled': 'failed',
+};
+
+/** Override the default icon rendered by StatusIcon (e.g. replace playArrow). */
+export const TASK_STATUS_ICON_OVERRIDE: Partial<Record<TaskStatus, string>> = {
+  'in-progress': 'pendingActions',
+};
+
+/** Human-readable labels. */
+export const TASK_STATUS_LABEL: Record<TaskStatus, string> = {
+  'open': 'Open',
+  'in-progress': 'In Progress',
+  'done': 'Done',
+  'cancelled': 'Cancelled',
+};
+
+/** StatusChip variant for each task state. */
+export const TASK_STATUS_CHIP: Record<TaskStatus, 'info' | 'warning' | 'error' | 'success'> = {
+  'open': 'info',
+  'in-progress': 'warning',
+  'done': 'success',
+  'cancelled': 'error',
+};
+
+/** Semantic color token for each task state. */
+export const TASK_STATUS_COLOR: Record<TaskStatus, string> = {
+  'open': 'color-brand-alt',
+  'in-progress': 'color-status-info',
+  'done': 'color-status-positive',
+  'cancelled': 'color-status-negative',
+};
+
+/** Kanban board column color (used in swarm dashboard). */
+export const TASK_STATUS_BOARD_COLOR: Record<TaskStatus, string> = {
+  'open': 'color-text-subtle',
+  'in-progress': 'color-brand-main',
+  'done': 'color-status-positive',
+  'cancelled': 'color-status-negative',
+};
+
+/** Kanban board column label (may differ from status label). */
+export const TASK_STATUS_BOARD_LABEL: Record<TaskStatus, string> = {
+  'open': 'Ready',
+  'in-progress': 'In Progress',
+  'done': 'Done',
+  'cancelled': 'Cancelled',
+};