@taskforcehq/taskforce 0.3.326 → 0.3.328

package/dist/components/features/workflowManager/WorkflowManagerModule.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsDownUp, ChevronsUpDown, FilePlus2, Loader2, Pencil, Plus, Save, Trash2, Upload, Workflow, } from 'lucide-react';
+import taskforceStyles from '../../../Taskforce.module.css';
+import { ensureAssigneeOptionPresent, getAssigneeLabel, normalizeAssigneeOptions, } from '../../../utils/assignees.js';
+import { DiscardChangesDialog } from '../../ui/DiscardChangesDialog.js';
+import { AssigneeIdentity } from '../../ui/AssigneeIdentity.js';
+import { TaxonomyDropdown } from '../../ui/TaxonomyDropdown.js';
+import styles from './WorkflowManagerModule.module.css';
+import { useWorkflowManager } from './useWorkflowManager.js';
+import { WorkflowPublishDialog } from './WorkflowPublishDialog.js';
+const DRAFT_VERSION_KEY = 'draft';
+function summaryLabel(summary) {
+    if (summary.draftVersionId && summary.latestPublishedVersion?.versionNumber) {
+        return `Version ${summary.latestPublishedVersion.versionNumber} published`;
+    }
+    if (summary.draftVersionId)
+        return 'Unpublished';
+    if (summary.latestPublishedVersion?.versionNumber)
+        return `Version ${summary.latestPublishedVersion.versionNumber}`;
+    return 'No version';
+}
+function formatDate(value) {
+    if (!value)
+        return 'Not published';
+    const parsed = new Date(value);
+    return Number.isNaN(parsed.getTime()) ? 'Not published' : parsed.toLocaleDateString();
+}
+function fingerprint(name, description, steps) {
+    return JSON.stringify({
+        name,
+        description,
+        steps: steps.map(({ clientKey: _clientKey, ...step }) => step),
+    });
+}
+export function WorkflowManagerModule({ workspaceId, libraryTrayOpen = true, onCloseLibraryTray, assigneeOptions = [], theme, onUnsavedChangesChange, }) {
+    const { workflows, selectedWorkflowId, selectedWorkflow, loadingLibrary, loadingDetails, creatingWorkflow, savingWorkflow, publishingWorkflow, creatingDraft, error, setSelectedWorkflowId, retry, createWorkflow, saveDraft, publishDraft, createNextDraft, clearError, } = useWorkflowManager(workspaceId);
+    const [creating, setCreating] = useState(false);
+    const [metadataEditing, setMetadataEditing] = useState(false);
+    const [draftName, setDraftName] = useState('');
+    const [draftDescription, setDraftDescription] = useState('');
+    const [draftSteps, setDraftSteps] = useState([]);
+    const [savedFingerprint, setSavedFingerprint] = useState('');
+    const [validationAttempted, setValidationAttempted] = useState(false);
+    const [selectedVersionKey, setSelectedVersionKey] = useState('');
+    const [expandedStepKeys, setExpandedStepKeys] = useState(new Set());
+    const [pendingDiscardAction, setPendingDiscardAction] = useState(null);
+    const [publishDialogOpen, setPublishDialogOpen] = useState(false);
+    const workflowNameRef = useRef(null);
+    const stepNameRefs = useRef(new Map());
+    const expandedStepPositionsAfterSaveRef = useRef(null);
+    const displayedVersion = useMemo(() => {
+        if (!selectedWorkflow)
+            return null;
+        if (selectedVersionKey === DRAFT_VERSION_KEY && selectedWorkflow.draft)
+            return selectedWorkflow.draft;
+        const selectedPublished = selectedWorkflow.publishedVersions.find(({ version }) => version.id === selectedVersionKey);
+        return selectedPublished || selectedWorkflow.draft || selectedWorkflow.publishedVersions[0] || null;
+    }, [selectedVersionKey, selectedWorkflow]);
+    const displayedVersionKey = displayedVersion?.version.status === 'draft'
+        ? DRAFT_VERSION_KEY
+        : displayedVersion?.version.id || '';
+    const currentFingerprint = useMemo(() => fingerprint(draftName, draftDescription, draftSteps), [draftDescription, draftName, draftSteps]);
+    const canEdit = creating || displayedVersion?.version.status === 'draft';
+    const hasUnsavedChanges = canEdit && currentFingerprint !== savedFingerprint;
+    const busy = creatingWorkflow || savingWorkflow || publishingWorkflow || creatingDraft;
+    const nextVersionNumber = (selectedWorkflow?.publishedVersions[0]?.version.versionNumber || 0) + 1;
+    const activeAssigneeOptions = useMemo(() => assigneeOptions.filter(({ kind, archivedAt }) => kind !== 'unassigned' && !archivedAt), [assigneeOptions]);
+    const selectableOwnerOptions = useMemo(() => normalizeAssigneeOptions(activeAssigneeOptions), [activeAssigneeOptions]);
+    useEffect(() => {
+        setCreating(false);
+        setMetadataEditing(false);
+        setSelectedVersionKey('');
+        setExpandedStepKeys(new Set());
+        setPublishDialogOpen(false);
+        expandedStepPositionsAfterSaveRef.current = null;
+    }, [workspaceId]);
+    useEffect(() => {
+        if (!selectedWorkflow || creating)
+            return;
+        if (!displayedVersion)
+            return;
+        const nextName = displayedVersion.version.name || selectedWorkflow.template.name;
+        const nextDescription = displayedVersion.version.description ?? selectedWorkflow.template.description ?? '';
+        const nextSteps = displayedVersion.steps
+            .map((step) => ({ ...step, clientKey: step.id }));
+        setDraftName(nextName);
+        setDraftDescription(nextDescription);
+        setDraftSteps(nextSteps);
+        setSavedFingerprint(fingerprint(nextName, nextDescription, nextSteps));
+        const expandedPositionsAfterSave = expandedStepPositionsAfterSaveRef.current;
+        setMetadataEditing(false);
+        if (expandedPositionsAfterSave) {
+            setExpandedStepKeys(new Set(nextSteps
+                .filter((_step, index) => expandedPositionsAfterSave.has(index))
+                .map(({ clientKey }) => clientKey)));
+            expandedStepPositionsAfterSaveRef.current = null;
+        }
+        else {
+            setExpandedStepKeys(new Set());
+        }
+        setValidationAttempted(false);
+    }, [creating, displayedVersion, selectedWorkflow]);
+    useEffect(() => {
+        if (!hasUnsavedChanges)
+            return;
+        const warnBeforeUnload = (event) => {
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', warnBeforeUnload);
+        return () => window.removeEventListener('beforeunload', warnBeforeUnload);
+    }, [hasUnsavedChanges]);
+    useEffect(() => {
+        onUnsavedChangesChange?.(hasUnsavedChanges);
+        return () => onUnsavedChangesChange?.(false);
+    }, [hasUnsavedChanges, onUnsavedChangesChange]);
+    const runAfterDiscardCheck = (action) => {
+        if (!hasUnsavedChanges) {
+            action();
+            return;
+        }
+        setPendingDiscardAction(() => action);
+    };
+    const discardAndContinue = () => {
+        const action = pendingDiscardAction;
+        setPendingDiscardAction(null);
+        action?.();
+    };
+    const startCreating = () => {
+        runAfterDiscardCheck(() => {
+            clearError();
+            const emptySteps = [];
+            setCreating(true);
+            setMetadataEditing(true);
+            setDraftName('');
+            setDraftDescription('');
+            setDraftSteps(emptySteps);
+            setSavedFingerprint(fingerprint('', '', emptySteps));
+            setExpandedStepKeys(new Set());
+            setValidationAttempted(false);
+            window.setTimeout(() => workflowNameRef.current?.focus(), 0);
+        });
+    };
+    const cancelCreating = () => {
+        runAfterDiscardCheck(() => {
+            clearError();
+            setCreating(false);
+            setMetadataEditing(false);
+            if (selectedWorkflow) {
+                const nextName = selectedWorkflow.draft?.version.name || selectedWorkflow.template.name;
+                const nextDescription = selectedWorkflow.draft?.version.description
+                    ?? selectedWorkflow.publishedVersions[0]?.version.description
+                    ?? selectedWorkflow.template.description
+                    ?? '';
+                const nextSteps = (selectedWorkflow.draft?.steps || selectedWorkflow.publishedVersions[0]?.steps || [])
+                    .map((step) => ({ ...step, clientKey: step.id }));
+                setDraftName(nextName);
+                setDraftDescription(nextDescription);
+                setDraftSteps(nextSteps);
+                setSavedFingerprint(fingerprint(nextName, nextDescription, nextSteps));
+            }
+        });
+    };
+    const addStep = () => {
+        const clientKey = `new-step-${Date.now()}-${draftSteps.length}`;
+        setDraftSteps((current) => [...current, {
+                id: clientKey,
+                clientKey,
+                workflowVersionId: selectedWorkflow?.draft?.version.id || '',
+                position: current.length,
+                name: '',
+                instructions: '',
+                ownerType: null,
+                ownerId: null,
+                expectedArtifact: null,
+                requiresCommentEvidence: false,
+                isRequired: true,
+            }]);
+        setExpandedStepKeys((current) => new Set(current).add(clientKey));
+        window.setTimeout(() => stepNameRefs.current.get(clientKey)?.focus(), 0);
+    };
+    const updateStep = (clientKey, patch) => {
+        setDraftSteps((current) => current.map((step) => step.clientKey === clientKey ? { ...step, ...patch } : step));
+    };
+    const moveStep = (index, direction) => {
+        const target = index + direction;
+        if (target < 0 || target >= draftSteps.length)
+            return;
+        setDraftSteps((current) => {
+            const next = [...current];
+            [next[index], next[target]] = [next[target], next[index]];
+            return next.map((step, position) => ({ ...step, position }));
+        });
+    };
+    const persistedSteps = () => draftSteps.map((step) => {
+        const { clientKey: _clientKey, id: _id, workflowVersionId: _versionId, position: _position, ...persisted } = step;
+        return {
+            ...persisted,
+            name: step.name.trim(),
+            instructions: step.instructions,
+            ownerType: step.ownerType ?? null,
+            ownerId: step.ownerId ?? null,
+            expectedArtifact: step.expectedArtifact ?? null,
+            requiresCommentEvidence: step.requiresCommentEvidence === true,
+            isRequired: step.isRequired,
+        };
+    });
+    const submitDraft = async () => {
+        setValidationAttempted(true);
+        if (!draftName.trim()) {
+            setMetadataEditing(true);
+            window.setTimeout(() => workflowNameRef.current?.focus(), 0);
+            return;
+        }
+        const firstUnnamedStep = draftSteps.find((step) => !step.name.trim());
+        if (firstUnnamedStep) {
+            setExpandedStepKeys((current) => new Set(current).add(firstUnnamedStep.clientKey));
+            window.setTimeout(() => stepNameRefs.current.get(firstUnnamedStep.clientKey)?.focus(), 0);
+            return;
+        }
+        const input = {
+            name: draftName.trim(),
+            description: draftDescription.trim(),
+            steps: persistedSteps(),
+        };
+        expandedStepPositionsAfterSaveRef.current = new Set(draftSteps
+            .map((step, index) => expandedStepKeys.has(step.clientKey) ? index : -1)
+            .filter((index) => index >= 0));
+        const saved = creating ? await createWorkflow(input) : await saveDraft(input);
+        if (saved) {
+            setCreating(false);
+            setValidationAttempted(false);
+        }
+        else {
+            expandedStepPositionsAfterSaveRef.current = null;
+        }
+    };
+    const toggleStep = (clientKey) => {
+        setExpandedStepKeys((current) => {
+            const next = new Set(current);
+            if (next.has(clientKey))
+                next.delete(clientKey);
+            else
+                next.add(clientKey);
+            return next;
+        });
+    };
+    const selectVersion = (versionKey) => {
+        if (versionKey === displayedVersionKey)
+            return;
+        runAfterDiscardCheck(() => {
+            setMetadataEditing(false);
+            setSelectedVersionKey(versionKey);
+        });
+    };
+    const confirmPublish = async () => {
+        expandedStepPositionsAfterSaveRef.current = new Set(draftSteps
+            .map((step, index) => expandedStepKeys.has(step.clientKey) ? index : -1)
+            .filter((index) => index >= 0));
+        const published = await publishDraft();
+        if (published) {
+            setPublishDialogOpen(false);
+        }
+        else {
+            expandedStepPositionsAfterSaveRef.current = null;
+            setPublishDialogOpen(false);
+        }
+    };
+    const handleCreateNextDraft = async () => {
+        const previousVersionKey = selectedVersionKey;
+        setSelectedVersionKey(DRAFT_VERSION_KEY);
+        const created = await createNextDraft();
+        if (!created)
+            setSelectedVersionKey(previousVersionKey);
+    };
+    const selectWorkflow = (workflowId) => {
+        if (workflowId === selectedWorkflowId && !creating)
+            return;
+        runAfterDiscardCheck(() => {
+            setCreating(false);
+            setMetadataEditing(false);
+            setSelectedVersionKey('');
+            setPublishDialogOpen(false);
+            setSelectedWorkflowId(workflowId);
+        });
+    };
+    const libraryTray = (_jsxs("aside", { className: `${taskforceStyles.docTrayPanel} ${libraryTrayOpen ? taskforceStyles.docTrayPanelOpen : ''}`.trim(), "aria-hidden": !libraryTrayOpen, children: [_jsxs("div", { className: styles.libraryHeader, children: [_jsxs("span", { className: `${styles.libraryTitle} tf-label-micro`, children: [_jsx(Workflow, { size: 14 }), " Workflow Library"] }), loadingLibrary ? _jsx(Loader2, { size: 14, className: taskforceStyles.spinner }) : null, onCloseLibraryTray ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCloseLibraryTray, title: "Collapse workflow library", "aria-label": "Collapse workflow library", children: _jsx(ChevronLeft, { size: 16 }) })) : null] }), _jsx("div", { className: `${styles.libraryContent} tf-scrollbar tf-tray-scroll-viewport`, children: workflows.length > 0 ? (_jsx("div", { className: styles.libraryList, children: workflows.map((workflow) => (_jsxs("button", { type: "button", className: `${styles.libraryItem} ${workflow.template.id === selectedWorkflowId && !creating ? styles.libraryItemSelected : ''}`.trim(), disabled: busy, onClick: () => selectWorkflow(workflow.template.id), "aria-pressed": workflow.template.id === selectedWorkflowId && !creating, children: [_jsxs("span", { className: styles.libraryItemCopy, children: [_jsx("span", { className: styles.libraryItemName, children: workflow.template.name }), _jsx("span", { className: styles.libraryItemMeta, children: summaryLabel(workflow) })] }), _jsxs("span", { className: styles.libraryBadges, children: [workflow.draftVersionId ? _jsx("span", { className: "tf-chip-warning", children: "Draft" }) : null, workflow.latestPublishedVersion ? _jsx("span", { className: "tf-chip-success", children: "Published" }) : null] })] }, workflow.template.id))) })) : loadingLibrary ? null : _jsx("p", { className: "tf-text-helper", children: "No workflows configured yet." }) })] }));
+    const showEditor = creating || Boolean(selectedWorkflow);
+    return (_jsxs("div", { className: `${styles.root} ${libraryTrayOpen ? styles.trayOpen : ''}`.trim(), children: [libraryTray, _jsx("main", { className: `${styles.main} tf-scrollbar`, children: _jsxs("div", { className: styles.content, children: [_jsxs("header", { className: styles.pageHeader, children: [_jsxs("div", { className: styles.pageHeading, children: [_jsx("h2", { className: "tf-heading-section", children: "Workflow Manager" }), _jsx("p", { className: "tf-text-helper", children: "Design reusable workflows for Taskforce agents." })] }), _jsxs("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: startCreating, disabled: busy, children: [_jsx(Plus, { size: 15 }), " New Workflow"] })] }), error ? (_jsxs("div", { className: `${styles.errorBanner} tf-surface-inset tf-text-error`, role: "alert", children: [_jsxs("span", { className: styles.errorMessage, children: [_jsx(AlertTriangle, { size: 14 }), " ", error] }), _jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: retry, children: "Retry" })] })) : null, loadingDetails || (loadingLibrary && !selectedWorkflow && !creating) ? (_jsx("div", { className: styles.loadingState, "aria-live": "polite", children: _jsx(Loader2, { size: 20, className: taskforceStyles.spinner }) })) : error && selectedWorkflowId && !selectedWorkflow && !creating ? (_jsx("div", { className: styles.emptyState, children: _jsxs("div", { className: styles.emptyStateInner, children: [_jsx(AlertTriangle, { size: 24 }), _jsx("h3", { className: "tf-heading-card", children: "Workflow details unavailable" }), _jsx("p", { className: "tf-text-helper", children: "Retry the request to load this workflow." })] }) })) : showEditor ? (_jsxs("div", { className: styles.editor, children: [_jsxs("div", { className: styles.stickyToolbar, role: "toolbar", "aria-label": canEdit ? 'Workflow draft actions' : 'Workflow version actions', children: [canEdit ? (_jsxs("div", { className: styles.toolbarGroup, children: [_jsxs("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: addStep, disabled: busy, children: [_jsx(Plus, { size: 14 }), " Add Step"] }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setExpandedStepKeys(new Set(draftSteps.map(({ clientKey }) => clientKey))), disabled: draftSteps.length === 0, title: "Expand all steps", "aria-label": "Expand all steps", children: _jsx(ChevronsUpDown, { size: 15 }) }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setExpandedStepKeys(new Set()), disabled: draftSteps.length === 0, title: "Collapse all steps", "aria-label": "Collapse all steps", children: _jsx(ChevronsDownUp, { size: 15 }) })] })) : _jsx("span", {}), _jsxs("div", { className: styles.toolbarGroup, children: [!creating && selectedWorkflow ? (_jsxs("select", { className: `${styles.versionSelect} tf-field-shell`, "aria-label": "Workflow version", value: displayedVersionKey, onChange: (event) => selectVersion(event.target.value), disabled: busy, children: [selectedWorkflow.draft ? _jsx("option", { value: DRAFT_VERSION_KEY, children: "Draft" }) : null, selectedWorkflow.publishedVersions.map(({ version }) => (_jsxs("option", { value: version.id, children: ["Version ", version.versionNumber] }, version.id)))] })) : null, creating ? _jsx("span", { className: "tf-chip-warning", children: "Draft" }) : null, creating ? _jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: cancelCreating, disabled: busy, children: "Cancel" }) : null, canEdit ? (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.visuallyHidden, role: "status", "aria-live": "polite", children: hasUnsavedChanges ? 'Workflow has unsaved changes.' : 'Workflow draft is saved.' }), _jsxs("button", { type: "button", className: "tf-button-primary tf-button-compact", onClick: () => void submitDraft(), disabled: !hasUnsavedChanges || busy, children: [creatingWorkflow || savingWorkflow ? _jsx(Loader2, { size: 15, className: taskforceStyles.spinner }) : _jsx(Save, { size: 15 }), " Save Draft"] }), !creating ? (_jsxs("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: () => setPublishDialogOpen(true), disabled: hasUnsavedChanges || draftSteps.length === 0 || busy, title: hasUnsavedChanges ? 'Save the draft before publishing.' : draftSteps.length === 0 ? 'Add at least one step before publishing.' : 'Publish this workflow version', children: [_jsx(Upload, { size: 15 }), " Publish"] })) : null] })) : !selectedWorkflow?.draft ? (_jsxs("button", { type: "button", className: "tf-button-primary tf-button-compact", onClick: () => void handleCreateNextDraft(), disabled: busy, children: [creatingDraft ? _jsx(Loader2, { size: 15, className: taskforceStyles.spinner }) : _jsx(FilePlus2, { size: 15 }), " Create New Draft"] })) : null] })] }), _jsx("div", { className: styles.detailHeader, children: _jsx("div", { className: styles.metadataEditor, children: metadataEditing ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tf-field-stack", children: [_jsx("label", { className: "tf-field-label", htmlFor: "workflow-draft-name", children: "Workflow name" }), _jsx("input", { id: "workflow-draft-name", ref: workflowNameRef, className: "tf-field-shell", value: draftName, onChange: (event) => setDraftName(event.target.value), "aria-invalid": validationAttempted && !draftName.trim(), "aria-describedby": validationAttempted && !draftName.trim() ? 'workflow-draft-name-error' : undefined, readOnly: busy }), validationAttempted && !draftName.trim() ? _jsx("span", { id: "workflow-draft-name-error", className: "tf-text-error", children: "Workflow name is required." }) : null] }), _jsxs("div", { className: "tf-field-stack", children: [_jsx("label", { className: "tf-field-label", htmlFor: "workflow-draft-description", children: "Description" }), _jsx("textarea", { id: "workflow-draft-description", className: "tf-field-shell", rows: 3, value: draftDescription, onChange: (event) => setDraftDescription(event.target.value), readOnly: busy })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.titleRow, children: [_jsx("h3", { className: "tf-heading-card", children: draftName || 'Untitled workflow' }), _jsx("div", { className: styles.statusRow, children: canEdit && !creating ? _jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setMetadataEditing(true), title: "Edit workflow details", "aria-label": "Edit workflow details", children: _jsx(Pencil, { size: 14 }) }) : null })] }), draftDescription ? _jsx("p", { className: `${styles.description} tf-text-body`, children: draftDescription }) : null] })) }) }), !creating && selectedWorkflow ? (_jsxs("div", { className: styles.metrics, children: [_jsxs("div", { className: styles.metric, children: [_jsx("span", { className: "tf-label-micro", children: "Current version" }), _jsx("strong", { children: displayedVersion?.version.status === 'draft' ? 'Draft' : `Version ${displayedVersion?.version.versionNumber || 1}` })] }), _jsxs("div", { className: styles.metric, children: [_jsx("span", { className: "tf-label-micro", children: "Steps" }), _jsx("strong", { children: draftSteps.length })] }), _jsxs("div", { className: styles.metric, children: [_jsx("span", { className: "tf-label-micro", children: "Last published" }), _jsx("strong", { children: formatDate(selectedWorkflow.publishedVersions[0]?.version.publishedAt) })] })] })) : null, _jsxs("section", { className: styles.section, children: [_jsx("div", { className: styles.sectionHeader, children: _jsx("h4", { className: "tf-heading-card", children: "Workflow Steps" }) }), draftSteps.length > 0 ? (_jsx("div", { className: styles.stepList, children: draftSteps.map((step, index) => {
+                                                const expanded = expandedStepKeys.has(step.clientKey);
+                                                return (_jsxs("div", { className: styles.stepEditor, children: [_jsxs("div", { className: `${styles.stepToolbar} ${expanded ? styles.stepToolbarExpanded : ''}`.trim(), children: [_jsxs("button", { type: "button", className: styles.stepExpandButton, onClick: () => toggleStep(step.clientKey), "aria-expanded": expanded, "aria-controls": `workflow-step-fields-${step.clientKey}`, children: [expanded ? _jsx(ChevronDown, { size: 15 }) : _jsx(ChevronRight, { size: 15 }), _jsx("span", { className: styles.stepNumber, children: index + 1 }), _jsx("strong", { children: step.name.trim() || 'Untitled step' })] }), _jsxs("div", { className: styles.stepSummary, children: [_jsx("span", { children: getAssigneeLabel(step.ownerId, assigneeOptions) }), _jsx("span", { className: step.isRequired ? 'tf-chip-neutral' : 'tf-chip-warning', children: step.isRequired ? 'Required' : 'Optional' })] }), canEdit ? (_jsxs("div", { className: styles.stepActions, children: [_jsx("button", { type: "button", className: "tf-control-icon", title: "Move step up", "aria-label": `Move step ${index + 1} up`, onClick: () => moveStep(index, -1), disabled: busy || index === 0, children: _jsx(ArrowUp, { size: 14 }) }), _jsx("button", { type: "button", className: "tf-control-icon", title: "Move step down", "aria-label": `Move step ${index + 1} down`, onClick: () => moveStep(index, 1), disabled: busy || index === draftSteps.length - 1, children: _jsx(ArrowDown, { size: 14 }) }), _jsx("button", { type: "button", className: "tf-control-icon", title: "Remove step", "aria-label": `Remove step ${index + 1}`, onClick: () => setDraftSteps((current) => current.filter(({ clientKey }) => clientKey !== step.clientKey)), disabled: busy, children: _jsx(Trash2, { size: 14 }) })] })) : null] }), expanded ? (_jsxs("div", { id: `workflow-step-fields-${step.clientKey}`, className: styles.stepFields, children: [_jsxs("div", { className: "tf-field-stack", children: [_jsx("label", { className: "tf-field-label", htmlFor: `workflow-step-name-${step.clientKey}`, children: "Step name" }), _jsx("input", { id: `workflow-step-name-${step.clientKey}`, ref: (element) => {
+                                                                                if (element)
+                                                                                    stepNameRefs.current.set(step.clientKey, element);
+                                                                                else
+                                                                                    stepNameRefs.current.delete(step.clientKey);
+                                                                            }, className: "tf-field-shell", value: step.name, onChange: (event) => updateStep(step.clientKey, { name: event.target.value }), "aria-invalid": validationAttempted && !step.name.trim(), "aria-describedby": validationAttempted && !step.name.trim() ? `workflow-step-name-error-${step.clientKey}` : undefined, disabled: !canEdit, readOnly: busy }), validationAttempted && !step.name.trim() ? _jsx("span", { id: `workflow-step-name-error-${step.clientKey}`, className: "tf-text-error", children: "Step name is required." }) : null] }), _jsxs("div", { className: "tf-field-stack", children: [_jsx("label", { className: "tf-field-label", id: `workflow-step-owner-label-${step.clientKey}`, children: "Owner" }), (() => {
+                                                                            const ownerOptions = ensureAssigneeOptionPresent(selectableOwnerOptions, step.ownerId);
+                                                                            const selectedOwner = ownerOptions.find(({ value }) => (String(value) === String(step.ownerId || 'unassigned'))) || ownerOptions[0];
+                                                                            return (_jsx(TaxonomyDropdown, { value: step.ownerId || 'unassigned', options: ownerOptions, disabled: !canEdit || busy, ariaLabelledBy: `workflow-step-owner-label-${step.clientKey}`, portalPanel: true, panelMinWidth: 280, panelAlign: "start", searchable: true, searchPlaceholder: "Search owners...", noResultsText: "No owners found.", triggerContent: selectedOwner ? _jsx(AssigneeIdentity, { option: selectedOwner }) : undefined, renderOptionContent: (option) => {
+                                                                                    const owner = ownerOptions.find(({ value }) => String(value) === String(option.value));
+                                                                                    return owner ? _jsx(AssigneeIdentity, { option: owner }) : option.label;
+                                                                                }, onChange: (value) => {
+                                                                                    const ownerId = String(value);
+                                                                                    const option = ownerOptions.find(({ value: candidate }) => String(candidate) === ownerId);
+                                                                                    updateStep(step.clientKey, {
+                                                                                        ownerId: option?.kind === 'unassigned' ? null : ownerId,
+                                                                                        ownerType: option?.kind === 'agent' ? 'agent' : option?.kind === 'member' ? 'user' : null,
+                                                                                    });
+                                                                                } }));
+                                                                        })()] }), _jsxs("div", { className: `${styles.fullField} tf-field-stack`, children: [_jsx("label", { className: "tf-field-label", htmlFor: `workflow-step-instructions-${step.clientKey}`, children: "Instructions" }), _jsx("textarea", { id: `workflow-step-instructions-${step.clientKey}`, className: "tf-field-shell", rows: 4, value: step.instructions, onChange: (event) => updateStep(step.clientKey, { instructions: event.target.value }), placeholder: "Describe the work to complete in this step.", disabled: !canEdit, readOnly: busy })] }), _jsxs("div", { className: "tf-field-stack", children: [_jsx("label", { className: "tf-field-label", htmlFor: `workflow-step-artifact-${step.clientKey}`, children: "Output label" }), _jsx("input", { id: `workflow-step-artifact-${step.clientKey}`, className: "tf-field-shell", value: step.expectedArtifact || '', onChange: (event) => updateStep(step.clientKey, { expectedArtifact: event.target.value || null }), placeholder: "Optional output description", disabled: !canEdit, readOnly: busy })] }), _jsxs("div", { className: styles.stepToggles, children: [_jsxs("label", { className: styles.requiredToggle, title: "Requires the step owner to add a task comment before completing this step.", children: [_jsx("input", { type: "checkbox", checked: step.requiresCommentEvidence === true, onChange: (event) => updateStep(step.clientKey, { requiresCommentEvidence: event.target.checked }), disabled: !canEdit || busy }), "Require task comment"] }), _jsxs("label", { className: styles.requiredToggle, title: "Marks this step as mandatory when execution policy is enforced.", children: [_jsx("input", { type: "checkbox", checked: step.isRequired, onChange: (event) => updateStep(step.clientKey, { isRequired: event.target.checked }), disabled: !canEdit || busy }), "Required step"] })] })] })) : null] }, step.clientKey));
+                                            }) })) : (_jsx("div", { className: styles.stepsEmpty, children: _jsx("p", { className: "tf-text-helper", children: "No steps have been added yet." }) }))] })] })) : (_jsx("div", { className: styles.emptyState, children: _jsxs("div", { className: styles.emptyStateInner, children: [_jsx(Workflow, { size: 30 }), _jsx("h3", { className: "tf-heading-card", children: "No workflows yet" }), _jsx("p", { className: "tf-text-helper", children: "Create a workflow to begin defining a reusable process." }), _jsxs("button", { type: "button", className: "tf-button-primary", onClick: startCreating, children: [_jsx(Plus, { size: 15 }), " New Workflow"] })] }) }))] }) }), _jsx(DiscardChangesDialog, { isOpen: Boolean(pendingDiscardAction), onKeepEditing: () => setPendingDiscardAction(null), onDiscard: discardAndContinue, theme: theme }), _jsx(WorkflowPublishDialog, { isOpen: publishDialogOpen, workflowName: draftName, versionNumber: nextVersionNumber, busy: publishingWorkflow, onCancel: () => setPublishDialogOpen(false), onPublish: () => { void confirmPublish(); }, theme: theme })] }));
+}

package/dist/components/features/workflowManager/WorkflowPublishDialog.d.ts

@@ -0,0 +1,11 @@
+type WorkflowPublishDialogProps = {
+    isOpen: boolean;
+    workflowName: string;
+    versionNumber: number;
+    busy: boolean;
+    onCancel: () => void;
+    onPublish: () => void;
+    theme?: 'light' | 'dawn' | 'dark' | 'midnight';
+};
+export declare function WorkflowPublishDialog({ isOpen, workflowName, versionNumber, busy, onCancel, onPublish, theme, }: WorkflowPublishDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/features/workflowManager/WorkflowPublishDialog.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2, Workflow } from 'lucide-react';
+import taskforceStyles from '../../../Taskforce.module.css';
+import { Modal } from '../../ui/Modal.js';
+import styles from './WorkflowPublishDialog.module.css';
+export function WorkflowPublishDialog({ isOpen, workflowName, versionNumber, busy, onCancel, onPublish, theme, }) {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onCancel, title: _jsxs("span", { className: styles.title, children: [_jsx(Workflow, { size: 18 }), " Publish Workflow"] }), size: "sm", closeOnOverlayClick: false, closeDisabled: busy, theme: theme, footer: (_jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: "tf-button-secondary", onClick: onCancel, disabled: busy, "data-modal-initial-focus": true, children: "Cancel" }), _jsxs("button", { type: "button", className: "tf-button-primary", onClick: onPublish, disabled: busy, children: [busy ? _jsx(Loader2, { size: 15, className: taskforceStyles.spinner }) : _jsx(Workflow, { size: 15 }), "Publish Version ", versionNumber] })] })), children: _jsxs("p", { className: styles.message, children: ["Publish ", _jsx("strong", { children: workflowName }), " as Version ", versionNumber, "? Published versions are immutable. Future changes require a new draft."] }) }));
+}

package/dist/components/features/workflowManager/types.d.ts

@@ -0,0 +1,74 @@
+export type WorkflowTemplateStatus = 'active' | 'retired';
+export type WorkflowVersionStatus = 'draft' | 'published';
+export type WorkflowExecutionStatus = 'pending' | 'running' | 'paused' | 'completed' | 'failed' | 'ended';
+export type WorkflowTemplateRecord = {
+    id: string;
+    workspaceId: string;
+    name: string;
+    description: string;
+    status: WorkflowTemplateStatus;
+    createdAt: string;
+    updatedAt: string;
+};
+export type WorkflowVersionRecord = {
+    id: string;
+    workflowTemplateId: string;
+    versionNumber?: number | null;
+    status: WorkflowVersionStatus;
+    name: string;
+    description: string;
+    createdAt: string;
+    updatedAt: string;
+    publishedAt?: string | null;
+};
+export type WorkflowStepRecord = {
+    id: string;
+    workflowVersionId: string;
+    position: number;
+    name: string;
+    instructions: string;
+    ownerType?: 'user' | 'agent' | null;
+    ownerId?: string | null;
+    expectedArtifact?: string | null;
+    requiresCommentEvidence?: boolean;
+    isRequired: boolean;
+};
+export type WorkflowVersionDetails = {
+    version: WorkflowVersionRecord;
+    steps: WorkflowStepRecord[];
+};
+export type WorkflowTemplateSummary = {
+    template: WorkflowTemplateRecord;
+    draftVersionId: string | null;
+    latestPublishedVersion: Pick<WorkflowVersionRecord, 'id' | 'versionNumber' | 'publishedAt'> | null;
+};
+export type WorkflowTemplateDetails = {
+    template: WorkflowTemplateRecord;
+    draft: WorkflowVersionDetails | null;
+    publishedVersions: WorkflowVersionDetails[];
+};
+export type WorkflowExecutionRecord = {
+    id: string;
+    taskId: string;
+    workflowTemplateId: string;
+    workflowVersionId: string;
+    status: WorkflowExecutionStatus;
+    currentStepId?: string | null;
+    createdAt: string;
+    updatedAt: string;
+    startedAt?: string | null;
+};
+export type WorkflowExecutionEventRecord = {
+    id: string;
+    sequenceNumber: number;
+    eventType: string;
+    stepId?: string | null;
+    createdAt: string;
+};
+export type WorkflowAssignmentDetails = {
+    execution: WorkflowExecutionRecord;
+    template: WorkflowTemplateRecord;
+    version: WorkflowVersionRecord;
+    steps: WorkflowStepRecord[];
+    events?: WorkflowExecutionEventRecord[];
+};

package/dist/components/features/workflowManager/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/features/workflowManager/useWorkflowManager.d.ts

@@ -0,0 +1,30 @@
+import { type WorkflowDraftStepInput } from './workflowManagerApi.js';
+import type { WorkflowTemplateDetails, WorkflowTemplateSummary } from './types.js';
+export declare function useWorkflowManager(workspaceId: string): {
+    workflows: WorkflowTemplateSummary[];
+    selectedWorkflowId: string;
+    selectedWorkflow: WorkflowTemplateDetails | null;
+    loadingLibrary: boolean;
+    loadingDetails: boolean;
+    creatingWorkflow: boolean;
+    savingWorkflow: boolean;
+    publishingWorkflow: boolean;
+    creatingDraft: boolean;
+    error: string | null;
+    setSelectedWorkflowId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    refreshLibrary: () => Promise<void>;
+    retry: () => void;
+    createWorkflow: (input: {
+        name: string;
+        description?: string;
+        steps?: WorkflowDraftStepInput[];
+    }) => Promise<boolean>;
+    saveDraft: (input: {
+        name: string;
+        description?: string;
+        steps: WorkflowDraftStepInput[];
+    }) => Promise<boolean>;
+    publishDraft: () => Promise<boolean>;
+    createNextDraft: () => Promise<boolean>;
+    clearError: () => void;
+};