@startsimpli/ui 0.4.22 → 0.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/workflows/WorkflowListComposer.tsx

@@ -0,0 +1,644 @@
+'use client';
+
+import { useMemo, useState, type ReactNode } from 'react';
+import {
+  Plus,
+  MoreVertical,
+  Play,
+  Copy,
+  Trash2,
+  GitBranch,
+  Cpu,
+  Activity,
+  Search,
+} from 'lucide-react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Textarea } from '../ui/textarea';
+import { Badge } from '../ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/table';
+import { Tabs, TabsList, TabsTrigger } from '../ui/tabs';
+import { cn } from '../../lib/utils';
+
+/**
+ * Minimal, in-package shape of a workflow list row. Mirrors the subset of the
+ * backend list item this composer reads — kept local so the component carries
+ * no app type coupling.
+ */
+export interface WorkflowListItem {
+  uuid: string;
+  name: string;
+  description?: string | null;
+  isBrain?: boolean;
+  isTemplate?: boolean;
+  nodeCount: number;
+  version: number | string;
+  lastExecutionStatus?: string | null;
+  lastExecutionAt?: string | null;
+  lastMod: string;
+  executionCount?: number | null;
+}
+
+/** Payload for creating a new workflow. */
+export interface WorkflowCreateInput {
+  name: string;
+  description?: string;
+  isBrain?: boolean;
+}
+
+export interface WorkflowListComposerProps {
+  /** Workflow rows to render. */
+  workflows: WorkflowListItem[];
+  /** Whether the list is loading (drives skeleton/empty messaging). */
+  isLoading?: boolean;
+  /** Error message to surface, if any. */
+  error?: string | null;
+  /** Navigate to a workflow's detail/canvas view. */
+  onNavigateToDetail: (uuid: string) => void;
+  /** Navigate to a workflow's executions view. Falls back to detail when omitted. */
+  onNavigateToExecutions?: (uuid: string) => void;
+  /** Delete a workflow by id. */
+  onDelete: (uuid: string) => void | Promise<void>;
+  /** Create a workflow from the inline create dialog. */
+  onCreate: (input: WorkflowCreateInput) => void | Promise<void>;
+  /** Execute a workflow by id (optional — Execute action hidden when omitted). */
+  onExecute?: (uuid: string) => void | Promise<void>;
+  /** Duplicate a workflow by id (optional — Duplicate action hidden when omitted). */
+  onClone?: (uuid: string) => void | Promise<void>;
+  /** Re-fetch the list (e.g. after search/filter/tab changes). */
+  onRefresh?: (params: {
+    tab: 'workflows' | 'brains';
+    search: string;
+    status: string;
+  }) => void;
+  /** Formats an ISO timestamp for display. Defaults to the raw string. */
+  formatTimestamp?: (timestamp: string) => string;
+}
+
+const STATUS_OPTIONS = [
+  { label: 'All', value: 'all' },
+  { label: 'Active', value: 'active' },
+  { label: 'Inactive', value: 'inactive' },
+  { label: 'Templates', value: 'template' },
+] as const;
+
+/**
+ * Inline status badge — substitute for the app's `StatusBadge` primitive
+ * (not part of @startsimpli/ui). Maps common execution status slugs to a
+ * theme-aware Badge color.
+ */
+function StatusBadge({ status }: { status: string }) {
+  const tone: Record<string, string> = {
+    completed:
+      'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950/30 dark:text-green-400',
+    success:
+      'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950/30 dark:text-green-400',
+    running:
+      'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-400',
+    failed:
+      'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-400',
+    error:
+      'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-400',
+    pending:
+      'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400',
+    waiting:
+      'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400',
+  };
+  return (
+    <Badge
+      variant="outline"
+      className={cn('capitalize', tone[status.toLowerCase()])}
+    >
+      {status}
+    </Badge>
+  );
+}
+
+export function WorkflowListComposer({
+  workflows,
+  isLoading = false,
+  error = null,
+  onNavigateToDetail,
+  onNavigateToExecutions,
+  onDelete,
+  onCreate,
+  onExecute,
+  onClone,
+  onRefresh,
+  formatTimestamp,
+}: WorkflowListComposerProps) {
+  const [activeTab, setActiveTab] = useState<'workflows' | 'brains'>(
+    'workflows'
+  );
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+
+  // Create dialog state
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [createForm, setCreateForm] = useState<WorkflowCreateInput>({
+    name: '',
+  });
+  const [creating, setCreating] = useState(false);
+  const [createNameError, setCreateNameError] = useState<string | null>(null);
+
+  // Delete dialog state
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [workflowToDelete, setWorkflowToDelete] =
+    useState<WorkflowListItem | null>(null);
+
+  const isBrains = activeTab === 'brains';
+  const formatTime = formatTimestamp ?? ((t: string) => t);
+
+  // Client-side filtering over the controlled `workflows` prop. The consumer
+  // may also refetch via onRefresh; this keeps the UI responsive in between.
+  const visibleWorkflows = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    return workflows.filter((w) => {
+      if (isBrains ? w.isBrain !== true : w.isBrain === true) return false;
+      if (statusFilter === 'template' && !w.isTemplate) return false;
+      if (q) {
+        const haystack = `${w.name} ${w.description ?? ''}`.toLowerCase();
+        if (!haystack.includes(q)) return false;
+      }
+      return true;
+    });
+  }, [workflows, isBrains, statusFilter, searchQuery]);
+
+  const notifyRefresh = (
+    next: Partial<{
+      tab: 'workflows' | 'brains';
+      search: string;
+      status: string;
+    }>
+  ) => {
+    onRefresh?.({
+      tab: next.tab ?? activeTab,
+      search: next.search ?? searchQuery,
+      status: next.status ?? statusFilter,
+    });
+  };
+
+  const handleTabChange = (v: string) => {
+    const tab = v as 'workflows' | 'brains';
+    setActiveTab(tab);
+    setSearchQuery('');
+    setStatusFilter('all');
+    notifyRefresh({ tab, search: '', status: 'all' });
+  };
+
+  const handleSearch = (value: string) => {
+    setSearchQuery(value);
+    notifyRefresh({ search: value });
+  };
+
+  const handleStatusChange = (value: string) => {
+    setStatusFilter(value);
+    notifyRefresh({ status: value });
+  };
+
+  const handleCreate = async () => {
+    if (!createForm.name.trim()) {
+      setCreateNameError('Name is required');
+      return;
+    }
+    setCreateNameError(null);
+    try {
+      setCreating(true);
+      await onCreate({ ...createForm, isBrain: isBrains });
+      setCreateDialogOpen(false);
+      setCreateForm({ name: '' });
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!workflowToDelete) return;
+    try {
+      await onDelete(workflowToDelete.uuid);
+    } finally {
+      setDeleteDialogOpen(false);
+      setWorkflowToDelete(null);
+    }
+  };
+
+  const emptyMessage = searchQuery
+    ? `No ${isBrains ? 'brains' : 'workflows'} match your search`
+    : `No ${isBrains ? 'brains' : 'workflows'} yet. Create your first ${isBrains ? 'brain' : 'workflow'} to get started.`;
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Page header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold flex items-center gap-2">
+            {isBrains ? (
+              <Cpu className="h-7 w-7" />
+            ) : (
+              <GitBranch className="h-7 w-7" />
+            )}
+            {isBrains ? 'Brains' : 'Workflows'}
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            {isBrains
+              ? 'Self-contained think/decide/act loops that run inside workflows'
+              : 'Top-level execution loops that orchestrate your agents'}
+          </p>
+        </div>
+        <Button
+          onClick={() => setCreateDialogOpen(true)}
+          data-testid={isBrains ? 'new-brain-button' : 'new-workflow-button'}
+          aria-label={isBrains ? 'New brain' : 'New workflow'}
+        >
+          <Plus className="mr-2 h-4 w-4" />
+          {isBrains ? 'New Brain' : 'New Workflow'}
+        </Button>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={handleTabChange}>
+        <TabsList>
+          <TabsTrigger
+            value="workflows"
+            className="gap-2"
+            data-testid="workflows-tab"
+          >
+            <GitBranch className="h-4 w-4" />
+            Workflows
+          </TabsTrigger>
+          <TabsTrigger value="brains" className="gap-2" data-testid="brains-tab">
+            <Cpu className="h-4 w-4" />
+            Brains
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      {/* Search + status filter (inline substitute for SearchFilterBar) */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative w-full sm:max-w-sm">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(e) => handleSearch(e.target.value)}
+            placeholder={
+              isBrains
+                ? 'Search brains by name or description...'
+                : 'Search workflows by name or description...'
+            }
+            className="pl-9"
+          />
+        </div>
+        <div className="flex items-center gap-1 rounded-lg border bg-muted/50 p-0.5">
+          {STATUS_OPTIONS.map((opt) => (
+            <Button
+              key={opt.value}
+              variant="ghost"
+              size="sm"
+              className={cn(
+                'h-7 px-3 text-xs font-medium',
+                statusFilter === opt.value
+                  ? 'bg-background shadow-sm text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+              onClick={() => handleStatusChange(opt.value)}
+            >
+              {opt.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* Data table (inline substitute for DataTable) */}
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Workflow</TableHead>
+              <TableHead className="text-center w-20">Nodes</TableHead>
+              <TableHead className="text-center w-20">Version</TableHead>
+              <TableHead className="w-24">Status</TableHead>
+              <TableHead>Last Run</TableHead>
+              <TableHead>Last Edit</TableHead>
+              <TableHead>Executions</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell
+                  colSpan={8}
+                  className="py-12 text-center text-muted-foreground"
+                >
+                  Loading…
+                </TableCell>
+              </TableRow>
+            ) : error ? (
+              <TableRow>
+                <TableCell
+                  colSpan={8}
+                  className="py-12 text-center text-destructive"
+                >
+                  {error}
+                </TableCell>
+              </TableRow>
+            ) : visibleWorkflows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={8}
+                  className="py-12 text-center text-muted-foreground"
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            ) : (
+              visibleWorkflows.map((row) => (
+                <TableRow
+                  key={row.uuid}
+                  className="cursor-pointer"
+                  onClick={() => onNavigateToDetail(row.uuid)}
+                >
+                  <TableCell>
+                    <div>
+                      <div className="font-medium flex items-center gap-1.5">
+                        {row.isBrain && (
+                          <Cpu className="h-3.5 w-3.5 text-teal-500 shrink-0" />
+                        )}
+                        {row.name}
+                      </div>
+                      {row.description && (
+                        <div className="text-xs text-muted-foreground line-clamp-1 mt-0.5">
+                          {row.description}
+                        </div>
+                      )}
+                      {row.isTemplate && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-indigo-100 text-indigo-800 dark:bg-indigo-800/20 dark:text-indigo-300 mt-1">
+                          template
+                        </span>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-center w-20">
+                    <span className="text-sm">{row.nodeCount}</span>
+                  </TableCell>
+                  <TableCell className="text-center w-20">
+                    <span className="text-sm font-mono">v{row.version}</span>
+                  </TableCell>
+                  <TableCell className="w-24">
+                    {row.lastExecutionStatus ? (
+                      <StatusBadge status={row.lastExecutionStatus} />
+                    ) : (
+                      <span className="text-sm text-muted-foreground">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {row.lastExecutionAt ? (
+                      <span className="text-sm text-muted-foreground">
+                        {formatTime(row.lastExecutionAt)}
+                      </span>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-sm text-muted-foreground">
+                      {formatTime(row.lastMod)}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 px-2.5 text-xs rounded-full"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        (onNavigateToExecutions ?? onNavigateToDetail)(
+                          row.uuid
+                        );
+                      }}
+                    >
+                      <Activity className="mr-1 h-3 w-3" />
+                      {row.executionCount ?? 0}
+                    </Button>
+                  </TableCell>
+                  <TableCell>
+                    <RowActions
+                      row={row}
+                      onExecute={onExecute}
+                      onClone={onClone}
+                      onDeleteClick={() => {
+                        setWorkflowToDelete(row);
+                        setDeleteDialogOpen(true);
+                      }}
+                    />
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Create Workflow Dialog */}
+      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {isBrains ? 'Create Brain' : 'Create Workflow'}
+            </DialogTitle>
+            <DialogDescription>
+              Create a new workflow definition. You can add nodes on the canvas
+              after creation.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <Label htmlFor="workflow-name">Name *</Label>
+              <Input
+                id="workflow-name"
+                name="workflow-name"
+                data-testid="workflow-name-input"
+                placeholder="Login Flow Automation"
+                value={createForm.name}
+                onChange={(e) => {
+                  setCreateForm((prev) => ({ ...prev, name: e.target.value }));
+                  if (createNameError) setCreateNameError(null);
+                }}
+                aria-invalid={createNameError ? 'true' : 'false'}
+                aria-describedby={
+                  createNameError ? 'workflow-name-error' : undefined
+                }
+                className={
+                  createNameError
+                    ? 'border-red-500 focus-visible:ring-red-500'
+                    : ''
+                }
+              />
+              {createNameError && (
+                <p
+                  id="workflow-name-error"
+                  role="alert"
+                  className="text-sm text-red-600"
+                >
+                  {createNameError}
+                </p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="workflow-desc">Description</Label>
+              <Textarea
+                id="workflow-desc"
+                name="workflow-desc"
+                data-testid="workflow-description-input"
+                placeholder="Logs in users and navigates to dashboard"
+                value={createForm.description || ''}
+                onChange={(e) =>
+                  setCreateForm((prev) => ({
+                    ...prev,
+                    description: e.target.value,
+                  }))
+                }
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setCreateDialogOpen(false)}
+              data-testid="workflow-create-cancel"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreate}
+              disabled={creating}
+              data-testid="workflow-create-submit"
+            >
+              {creating
+                ? 'Creating...'
+                : isBrains
+                  ? 'Create Brain'
+                  : 'Create Workflow'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete confirmation dialog (inline substitute for AlertDialog) */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Workflow</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete{' '}
+              <strong>{workflowToDelete?.name}</strong>?
+              <br />
+              This action cannot be undone. All associated versions and execution
+              history will be permanently deleted.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleDeleteConfirm}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function RowActions({
+  row,
+  onExecute,
+  onClone,
+  onDeleteClick,
+}: {
+  row: WorkflowListItem;
+  onExecute?: (uuid: string) => void | Promise<void>;
+  onClone?: (uuid: string) => void | Promise<void>;
+  onDeleteClick: () => void;
+}): ReactNode {
+  return (
+    <div className="flex items-center gap-1">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {onExecute && (
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                void onExecute(row.uuid);
+              }}
+            >
+              <Play className="mr-2 h-4 w-4" />
+              Execute
+            </DropdownMenuItem>
+          )}
+          {onClone && (
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                void onClone(row.uuid);
+              }}
+            >
+              <Copy className="mr-2 h-4 w-4" />
+              Duplicate
+            </DropdownMenuItem>
+          )}
+          {!row.isTemplate && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDeleteClick();
+                }}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}