@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

package/src/modules/workflows/components/nodes/InvokeAgentNode.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import { useState } from 'react'
+import { Handle, Position, NodeProps } from '@xyflow/react'
+import { NODE_HANDLE_CLASS } from '../../lib/node-geometry'
+import { WorkflowNodeCard } from '../WorkflowNodeCard'
+import type { StepReason } from '../../lib/step-presentation'
+import { toWorkflowStatus } from '../../lib/status-colors'
+import { buildNodeConfigSummary } from '../../lib/node-config-summary'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { ErrorOutputHandle } from './ErrorOutputHandle'
+import { NodeOutcomeRows } from './NodeOutcomeRows'
+import {
+  buildAllAgentOutcomeRows,
+  buildDefaultRouteRow,
+  type NodeOutcomeRow,
+} from '../../lib/node-outcome-rows'
+import { DEFAULT_SOURCE_HANDLE_ID } from '../../lib/route-kinds'
+
+export interface InvokeAgentNodeData {
+  label: string
+  description?: string
+  agentId?: string
+  activities?: Array<{ activityType?: string; config?: { agentId?: string } }>
+  status?: 'pending' | 'running' | 'completed' | 'error' | 'not_started' | 'in_progress'
+  stepNumber?: number
+  badge?: string
+  tooltip?: string
+  executionStatus?: 'completed' | 'active' | 'pending' | 'failed' | 'skipped'
+  /**
+   * Run presentation (spec Part 2). Set at render time by the run detail
+   * page and the Studio last-run overlay from the SAME resolver, so the two
+   * surfaces can never disagree about what the step is doing.
+   */
+  runReason?: StepReason | null
+  runStartedAt?: Date | null
+  hasError?: boolean
+  hasCompensation?: boolean
+  errorCount?: number
+  /**
+   * Disposition outcome rows (spec §7.2), derived from the committed edges by
+   * `WorkflowGraphImpl` at RENDER time — never part of the saved definition.
+   */
+  outcomeRows?: NodeOutcomeRow[]
+}
+
+/**
+ * InvokeAgentNode - Runs an AI agent (area 02b).
+ *
+ * AI-accented (brand-violet via NODE_TYPE_COLORS.invokeAgent). Shows the target
+ * agent id plus a status chip (running / waiting / done) using the same
+ * status-badge token pattern as other status surfaces. The node compiles to an
+ * AUTOMATED step carrying a single INVOKE_AGENT activity (see NodeEditDialog +
+ * graph-utils); `agentId` here is for display only.
+ */
+export function InvokeAgentNode({ id, data, isConnectable, selected }: NodeProps) {
+  const t = useT()
+  const nodeData = data as unknown as InvokeAgentNodeData
+  const [showAllOutcomes, setShowAllOutcomes] = useState(false)
+  const availableOutcomeRows = buildAllAgentOutcomeRows()
+  const outcomeRows = showAllOutcomes ? availableOutcomeRows : (nodeData.outcomeRows ?? [])
+  const canRevealOutcomes = Boolean(
+    isConnectable && !showAllOutcomes && outcomeRows.length < availableOutcomeRows.length,
+  )
+  const hasOutcomeFooter = outcomeRows.length > 0
+  const defaultRouteRow = buildDefaultRouteRow()
+
+  const workflowStatus = toWorkflowStatus(nodeData.status)
+  const summary = buildNodeConfigSummary('invokeAgent', nodeData as never)
+
+  const agentId =
+    nodeData.agentId ||
+    nodeData.activities?.find((activity) => activity.activityType === 'INVOKE_AGENT')?.config?.agentId
+
+  const description =
+    nodeData.description ||
+    (agentId
+      ? t('workflows.invokeAgent.runsAgent', { agentId })
+      : t('workflows.invokeAgent.noAgent'))
+
+  // Status chip: running / waiting (parked for a human) / done.
+  const chip = (() => {
+    if (workflowStatus === 'completed') {
+      return {
+        label: t('workflows.invokeAgent.statusDone'),
+        className: 'bg-status-success-bg text-status-success-text',
+      }
+    }
+    if (workflowStatus === 'in_progress') {
+      return {
+        label: t('workflows.invokeAgent.statusRunning'),
+        className: 'bg-status-info-bg text-status-info-text',
+      }
+    }
+    if (nodeData.executionStatus === 'active') {
+      return {
+        label: t('workflows.invokeAgent.statusWaiting'),
+        className: 'bg-status-warning-bg text-status-warning-text',
+      }
+    }
+    return null
+  })()
+
+  return (
+    <div className="invoke-agent-node" title={nodeData.tooltip}>
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="target"
+        isConnectable={isConnectable}
+        className={`${NODE_HANDLE_CLASS} !bg-brand-violet`}
+      />
+
+      <div className="relative">
+        <WorkflowNodeCard
+          summary={summary}
+          title={nodeData.label}
+          description={description}
+          status={workflowStatus}
+          runReason={nodeData.runReason}
+          runStartedAt={nodeData.runStartedAt}
+          nodeType="invokeAgent"
+          selected={selected}
+          hasError={nodeData.hasError}
+        hasCompensation={nodeData.hasCompensation}
+          errorCount={nodeData.errorCount}
+          nodeId={id}
+          editable={isConnectable}
+          footer={
+            <NodeOutcomeRows
+              rows={outcomeRows}
+              defaultRow={hasOutcomeFooter ? defaultRouteRow : undefined}
+              isConnectable={isConnectable}
+              inheritanceNote={t(
+                'workflows.outcomes.inheritsErrorDirective',
+                'unhandled → error directive',
+              )}
+              revealLabel={
+                canRevealOutcomes
+                  ? t('workflows.outcomes.add', '+ outcome')
+                  : undefined
+              }
+              onReveal={canRevealOutcomes ? () => setShowAllOutcomes(true) : undefined}
+              testId="workflow-agent-outcome-rows"
+            />
+          }
+        />
+        {chip && (
+          <span
+            className={`absolute bottom-2 right-2 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${chip.className}`}
+          >
+            {chip.label}
+          </span>
+        )}
+      </div>
+
+      {/* The default route leaves from the footer's last row whenever there is
+          a footer, so it shares the outcome rows' x-position, size and rhythm
+          instead of floating over the first of them. Without a footer there is
+          nothing to hang it off, so it stays exactly where it always was. */}
+      {!hasOutcomeFooter && (
+        <Handle
+          type="source"
+          position={Position.Right}
+          id={DEFAULT_SOURCE_HANDLE_ID}
+          isConnectable={isConnectable}
+          className={`${NODE_HANDLE_CLASS} !bg-brand-violet`}
+        />
+      )}
+
+      {/* Like the default source handle above, the floating error handle only
+          belongs on a node WITHOUT an outcome footer. When the footer renders,
+          error routing is already expressed there (the `error` disposition row
+          plus the "unhandled → error directive" inheritance note), so a second
+          floating red handle pinned at top:75% only overlaps the revealed
+          rows. */}
+      {!hasOutcomeFooter && <ErrorOutputHandle isConnectable={isConnectable} />}
+    </div>
+  )
+}

package/src/modules/workflows/components/nodes/NodeOutcomeRows.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { Handle, Position } from '@xyflow/react'
+import { Check, CircleAlert, CornerDownLeft, Info, ShieldMinus, Slash, Dot } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { NodeOutcomeRow, NodeOutcomeRowGlyph, NodeOutcomeRowTone } from '../../lib/node-outcome-rows'
+import { NODE_HANDLE_CLASS, NODE_HANDLE_EDGE_OFFSET } from '../../lib/node-geometry'
+
+/**
+ * The node's outcome-row footer (fidelity gap #4, spec §7.2).
+ *
+ * A hairline rule, right-aligned rows, and a dot overhanging the right edge that
+ * IS the connection handle — so wiring a disposition is drawing a line from the
+ * row that names it.
+ *
+ * Accessibility (spec §4.6 acceptance criterion): the LABEL carries the meaning,
+ * never the dot colour. Two of these rows are red, which at 10px and at canvas
+ * zoom is not a distinction anyone can read — so each row also carries its own
+ * glyph, and each handle is named for assistive users. The labels are therefore
+ * not decorative and must never be dropped for a denser rendering.
+ */
+
+const TONE_DOT_CLASSES: Record<NodeOutcomeRowTone, string> = {
+  success: '!bg-status-success-icon',
+  warning: '!bg-status-warning-icon',
+  error: '!bg-status-error-icon',
+  info: '!bg-status-info-icon',
+  neutral: '!bg-muted-foreground',
+}
+
+const TONE_TEXT_CLASSES: Record<NodeOutcomeRowTone, string> = {
+  success: 'text-status-success-icon',
+  warning: 'text-status-warning-icon',
+  error: 'text-status-error-icon',
+  info: 'text-status-info-icon',
+  neutral: 'text-muted-foreground',
+}
+
+const GLYPH_COMPONENTS: Record<NodeOutcomeRowGlyph, typeof Check> = {
+  check: Check,
+  info: Info,
+  slash: Slash,
+  shield: ShieldMinus,
+  alert: CircleAlert,
+  dot: Dot,
+  corner: CornerDownLeft,
+}
+
+export interface NodeOutcomeRowsProps {
+  rows: NodeOutcomeRow[]
+  /**
+   * The step's ordinary output, rendered as the LAST row so every outgoing
+   * connection leaves the card from a footer row — one x-position, one dot
+   * size, one vertical rhythm. Passing it is what tells the node not to render
+   * its own floating source handle; omitting it keeps the node's handle where
+   * it always was.
+   */
+  defaultRow?: NodeOutcomeRow
+  isConnectable?: boolean
+  /**
+   * Announced when an outcome has no route: §7.2 requires the node face to
+   * state that unwired outcomes inherit the step's error directive.
+   */
+  inheritanceNote?: string
+  revealLabel?: string
+  onReveal?: () => void
+  testId?: string
+}
+
+export function NodeOutcomeRows({
+  rows,
+  defaultRow,
+  isConnectable,
+  inheritanceNote,
+  revealLabel,
+  onReveal,
+  testId,
+}: NodeOutcomeRowsProps) {
+  const t = useT()
+  if (rows.length === 0 && !defaultRow) return null
+
+  const allRows = defaultRow ? [...rows, defaultRow] : rows
+
+  return (
+    <div
+      className="border-t border-border px-2 py-1"
+      data-testid={testId ?? 'workflow-node-outcome-rows'}
+    >
+      <div className="grid gap-0.5">
+        {allRows.map((row) => {
+          const label = row.labelKey ? t(row.labelKey, row.labelFallback) : row.labelFallback
+          const Glyph = GLYPH_COMPONENTS[row.glyph]
+          return (
+            <div
+              key={row.handleId}
+              className="relative flex min-h-4 items-center justify-end gap-1 pr-2"
+              {...(row === defaultRow
+                ? { 'data-default-route-handle': row.handleId }
+                : { 'data-outcome-handle': row.handleId })}
+            >
+              <Glyph className={`h-3 w-3 shrink-0 ${TONE_TEXT_CLASSES[row.tone]}`} aria-hidden="true" />
+              <span className="truncate text-overline text-muted-foreground">{label}</span>
+              <Handle
+                type="source"
+                position={Position.Right}
+                id={row.handleId}
+                isConnectable={isConnectable}
+                title={label}
+                aria-label={label}
+                style={{ right: NODE_HANDLE_EDGE_OFFSET, top: '50%' }}
+                className={`${NODE_HANDLE_CLASS} ${TONE_DOT_CLASSES[row.tone]}`}
+              />
+            </div>
+          )
+        })}
+      </div>
+      {revealLabel && onReveal && (
+        <div className="mt-1 flex justify-end">
+          <Button
+            type="button"
+            variant="ghost"
+            size="2xs"
+            className="nodrag nopan"
+            onClick={(event) => {
+              // Reveal the remaining outcome rows in place. Without stopping
+              // propagation the click also bubbles to React Flow's onNodeClick,
+              // which opens the node edit dialog — the wrong surface for a
+              // canvas-local disclosure.
+              event.stopPropagation()
+              onReveal()
+            }}
+          >
+            {revealLabel}
+          </Button>
+        </div>
+      )}
+      {inheritanceNote && (
+        <p className="mt-0.5 text-right text-overline text-muted-foreground">{inheritanceNote}</p>
+      )}
+    </div>
+  )
+}

package/src/modules/workflows/components/nodes/ParallelForkNode.tsx

@@ -1,8 +1,11 @@
 'use client'
 
 import { Handle, Position, NodeProps } from '@xyflow/react'
+import { DEFAULT_SOURCE_HANDLE_ID } from '../../lib/route-kinds'
+import { NODE_HANDLE_CLASS } from '../../lib/node-geometry'
 import { WorkflowNodeCard } from '../WorkflowNodeCard'
-import { WorkflowStatus } from '../../lib/status-colors'
+import type { StepReason } from '../../lib/step-presentation'
+import { toWorkflowStatus } from '../../lib/status-colors'
 
 /**
  * ParallelForkNode display data.
@@ -20,46 +23,56 @@ export interface ParallelForkNodeData {
   badge?: string
   tooltip?: string
   executionStatus?: 'completed' | 'active' | 'pending' | 'failed' | 'skipped'
-}
-
-function mapStatus(status?: string): WorkflowStatus {
-  if (!status || status === 'pending') return 'not_started'
-  if (status === 'running' || status === 'in_progress') return 'in_progress'
-  if (status === 'completed') return 'completed'
-  return 'not_started'
+  /**
+   * Run presentation (spec Part 2). Set at render time by the run detail
+   * page and the Studio last-run overlay from the SAME resolver, so the two
+   * surfaces can never disagree about what the step is doing.
+   */
+  runReason?: StepReason | null
+  runStartedAt?: Date | null
+  hasError?: boolean
+  hasCompensation?: boolean
+  errorCount?: number
 }
 
 /**
  * ParallelForkNode - splits the workflow into concurrent branches.
  * One target handle (in); one source handle (out) that fans out to each branch.
  */
-export function ParallelForkNode({ data, isConnectable, selected }: NodeProps) {
+export function ParallelForkNode({ id, data, isConnectable, selected }: NodeProps) {
   const nodeData = data as unknown as ParallelForkNodeData
 
   return (
     <div className="parallel-fork-node" title={nodeData.tooltip}>
       <Handle
         type="target"
-        position={Position.Top}
+        position={Position.Left}
         id="target"
         isConnectable={isConnectable}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-background"
+        className={`${NODE_HANDLE_CLASS} !bg-primary`}
       />
 
       <WorkflowNodeCard
         title={nodeData.label}
         description={nodeData.description}
-        status={mapStatus(nodeData.status)}
+        status={toWorkflowStatus(nodeData.status)}
+        runReason={nodeData.runReason}
+        runStartedAt={nodeData.runStartedAt}
         nodeType="parallelFork"
         selected={selected}
+        hasError={nodeData.hasError}
+        hasCompensation={nodeData.hasCompensation}
+        errorCount={nodeData.errorCount}
+        nodeId={id}
+        editable={isConnectable}
       />
 
       <Handle
         type="source"
-        position={Position.Bottom}
-        id="source"
+        position={Position.Right}
+        id={DEFAULT_SOURCE_HANDLE_ID}
         isConnectable={isConnectable}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-background"
+        className={`${NODE_HANDLE_CLASS} !bg-primary`}
       />
     </div>
   )

package/src/modules/workflows/components/nodes/ParallelJoinNode.tsx

@@ -1,8 +1,11 @@
 'use client'
 
 import { Handle, Position, NodeProps } from '@xyflow/react'
+import { DEFAULT_SOURCE_HANDLE_ID } from '../../lib/route-kinds'
+import { NODE_HANDLE_CLASS } from '../../lib/node-geometry'
 import { WorkflowNodeCard } from '../WorkflowNodeCard'
-import { WorkflowStatus } from '../../lib/status-colors'
+import type { StepReason } from '../../lib/step-presentation'
+import { toWorkflowStatus } from '../../lib/status-colors'
 
 /**
  * ParallelJoinNode display data.
@@ -20,46 +23,56 @@ export interface ParallelJoinNodeData {
   badge?: string
   tooltip?: string
   executionStatus?: 'completed' | 'active' | 'pending' | 'failed' | 'skipped'
-}
-
-function mapStatus(status?: string): WorkflowStatus {
-  if (!status || status === 'pending') return 'not_started'
-  if (status === 'running' || status === 'in_progress') return 'in_progress'
-  if (status === 'completed') return 'completed'
-  return 'not_started'
+  /**
+   * Run presentation (spec Part 2). Set at render time by the run detail
+   * page and the Studio last-run overlay from the SAME resolver, so the two
+   * surfaces can never disagree about what the step is doing.
+   */
+  runReason?: StepReason | null
+  runStartedAt?: Date | null
+  hasError?: boolean
+  hasCompensation?: boolean
+  errorCount?: number
 }
 
 /**
  * ParallelJoinNode - synchronizes concurrent branches (wait-all).
  * One target handle (in) collecting all branches; one source handle (out).
  */
-export function ParallelJoinNode({ data, isConnectable, selected }: NodeProps) {
+export function ParallelJoinNode({ id, data, isConnectable, selected }: NodeProps) {
   const nodeData = data as unknown as ParallelJoinNodeData
 
   return (
     <div className="parallel-join-node" title={nodeData.tooltip}>
       <Handle
         type="target"
-        position={Position.Top}
+        position={Position.Left}
         id="target"
         isConnectable={isConnectable}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-background"
+        className={`${NODE_HANDLE_CLASS} !bg-primary`}
       />
 
       <WorkflowNodeCard
         title={nodeData.label}
         description={nodeData.description}
-        status={mapStatus(nodeData.status)}
+        status={toWorkflowStatus(nodeData.status)}
+        runReason={nodeData.runReason}
+        runStartedAt={nodeData.runStartedAt}
         nodeType="parallelJoin"
         selected={selected}
+        hasError={nodeData.hasError}
+        hasCompensation={nodeData.hasCompensation}
+        errorCount={nodeData.errorCount}
+        nodeId={id}
+        editable={isConnectable}
       />
 
       <Handle
         type="source"
-        position={Position.Bottom}
-        id="source"
+        position={Position.Right}
+        id={DEFAULT_SOURCE_HANDLE_ID}
         isConnectable={isConnectable}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-background"
+        className={`${NODE_HANDLE_CLASS} !bg-primary`}
       />
     </div>
   )

package/src/modules/workflows/components/nodes/StartNode.tsx

@@ -1,8 +1,14 @@
 'use client'
 
 import { Handle, Position, NodeProps } from '@xyflow/react'
-import { WorkflowNodeCard } from '../WorkflowNodeCard'
-import { WorkflowStatus } from '../../lib/status-colors'
+import { DEFAULT_SOURCE_HANDLE_ID } from '../../lib/route-kinds'
+import { NODE_HANDLE_CLASS } from '../../lib/node-geometry'
+import { WorkflowNodeCard, WORKFLOW_NODE_TITLE_SLOT } from '../WorkflowNodeCard'
+import { STATUS_COLORS, toWorkflowStatus } from '../../lib/status-colors'
+import { NODE_TYPE_COLORS, NODE_TYPE_ICONS } from '../../lib/node-type-icons'
+import { TriggerCap } from './TriggerCap'
+import type { TriggerNodeModel } from '../../lib/trigger-node'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 
 export interface StartNodeData {
   label: string
@@ -11,43 +17,97 @@ export interface StartNodeData {
   badge?: string
   tooltip?: string
   executionStatus?: 'completed' | 'active' | 'pending' | 'failed' | 'skipped'
+  hasError?: boolean
+  hasCompensation?: boolean
+  errorCount?: number
+  /**
+   * The definition's triggers, folded onto the START node as a clickable cap
+   * (fidelity gap #5, Direction A). Injected at render time by
+   * `WorkflowGraphImpl`; absent in read-only viewers, which then render no cap.
+   */
+  trigger?: TriggerNodeModel
+  onOpenTriggers?: () => void
 }
 
 /**
- * StartNode - Starting point of a workflow
- * Uses WorkflowNodeCard for consistent styling
+ * StartNode — the workflow's entry point.
+ *
+ * Without triggers it is a terminal pill (`WorkflowNodeCard`). WITH triggers it
+ * becomes ONE unified card: the trigger cap as an attached header row above the
+ * Start row (mockup #9), rather than two detached pills. The source handle is
+ * nested in the Start row so it stays centred on "Start" even though the card is
+ * taller — and the card is not `overflow-hidden`, so the handle can overhang.
  */
-export function StartNode({ data, isConnectable, selected }: NodeProps) {
+export function StartNode({ id, data, isConnectable, selected }: NodeProps) {
   const nodeData = data as unknown as StartNodeData
+  const t = useT()
+  const workflowStatus = toWorkflowStatus(nodeData.status)
 
-  // Map old status values to new WorkflowStatus types
-  const mapStatus = (status?: string): WorkflowStatus => {
-    if (!status || status === 'pending') return 'not_started'
-    if (status === 'running' || status === 'in_progress') return 'in_progress'
-    if (status === 'completed') return 'completed'
-    if (status === 'error') return 'not_started'
-    return 'not_started'
-  }
+  if (nodeData.trigger) {
+    const colors = STATUS_COLORS[workflowStatus]
+    const isEditMode = workflowStatus === 'not_started'
+    const StartIcon = NODE_TYPE_ICONS.start
+    const statusLabel = t(`workflows.nodeStatus.${workflowStatus}`, workflowStatus)
+    const bodyBackground = isEditMode ? 'bg-card' : colors.bg
+    const borderClass = selected ? 'border-primary' : isEditMode ? 'border-border' : colors.border
+    const elevationClass = selected ? 'ring-2 ring-primary' : 'shadow-sm hover:shadow-md'
 
-  const workflowStatus = mapStatus(nodeData.status)
+    return (
+      <div
+        role="group"
+        aria-label={`${nodeData.label || 'Start'} — ${statusLabel}`}
+        data-node-status={workflowStatus}
+        data-node-variant="start-card"
+        title={nodeData.tooltip}
+        className={`start-node w-fit rounded-lg border ${borderClass} ${bodyBackground} transition-all duration-200 ${elevationClass}`}
+      >
+        <TriggerCap model={nodeData.trigger} onOpen={nodeData.onOpenTriggers} variant="header" />
+        <div className="relative flex items-center gap-2 px-4 py-2">
+          <span className="sr-only">{statusLabel}</span>
+          <StartIcon className={`h-4 w-4 shrink-0 ${NODE_TYPE_COLORS.start}`} aria-hidden="true" />
+          <span
+            data-slot={WORKFLOW_NODE_TITLE_SLOT}
+            className={`truncate text-sm font-semibold leading-snug ${colors.text}`}
+          >
+            {nodeData.label || 'Start'}
+          </span>
+          {/* Nested in the Start row so React Flow centres it on "Start", not on
+              the taller cap+row card. */}
+          <Handle
+            type="source"
+            position={Position.Right}
+            id={DEFAULT_SOURCE_HANDLE_ID}
+            isConnectable={isConnectable}
+            className={`${NODE_HANDLE_CLASS} !bg-primary`}
+          />
+        </div>
+      </div>
+    )
+  }
 
   return (
-    <div className="start-node" title={nodeData.tooltip}>
+    <div className="start-node relative" title={nodeData.tooltip}>
       <WorkflowNodeCard
         title={nodeData.label || 'Start'}
         description={nodeData.description}
         status={workflowStatus}
         nodeType="start"
         selected={selected}
+        hasError={nodeData.hasError}
+        hasCompensation={nodeData.hasCompensation}
+        errorCount={nodeData.errorCount}
+        nodeId={id}
+        editable={isConnectable}
+        variant="pill"
       />
 
       {/* Source Handle */}
       <Handle
         type="source"
-        position={Position.Bottom}
-        id="source"
+        position={Position.Right}
+        id={DEFAULT_SOURCE_HANDLE_ID}
         isConnectable={isConnectable}
-        className="!w-3 !h-3 !bg-[#0080FE] !border-2 !border-white"
+        className={`${NODE_HANDLE_CLASS} !bg-primary`}
       />
     </div>
   )