@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/src/modules/workflows/components/AgentSelector.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Bot, Loader2, Plus } from 'lucide-react'
+
+/**
+ * Agent registry entry as returned by `/api/agent_orchestrator/agents`.
+ * agent_orchestrator is an optional peer module — when it is not installed the
+ * endpoint 404s and the list stays empty.
+ */
+export interface AgentListItem {
+  id: string
+  label: string
+  description: string
+  runtime?: string
+  resultKind?: string
+  /** Example agent input, when the agent ships one (Insert sample). */
+  sampleInput?: unknown
+  /** Declared OUTCOME JSON-Schema, when the agent declares one (typed mapping pickers). */
+  outcomeSchema?: unknown
+}
+
+type AgentsResponse = { items?: AgentListItem[] }
+
+export interface AgentSelectorProps {
+  isOpen: boolean
+  onClose: () => void
+  onSelect: (agentId: string, agent: AgentListItem) => void
+  title?: string
+  description?: string
+}
+
+function normalizeAgents(items: AgentListItem[] | undefined): AgentListItem[] {
+  if (!Array.isArray(items)) return []
+  return items.filter((item) => typeof item?.id === 'string' && item.id.length > 0)
+}
+
+/**
+ * AgentSelector - Searchable rail for picking an agent from the registry.
+ *
+ * Mirrors WorkflowSelector: client-side search over id, label and description,
+ * card list with runtime/result-kind badges, loading and empty states — a
+ * record browser rather than a tiny picker, hence a Drawer and not a Popover.
+ * Escape cancels; selection IS the primary action.
+ */
+export function AgentSelector({ isOpen, onClose, onSelect, title, description }: AgentSelectorProps) {
+  const t = useT()
+  const [agents, setAgents] = useState<AgentListItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  useEffect(() => {
+    if (!isOpen) return
+    let cancelled = false
+    setLoading(true)
+    apiCall<AgentsResponse>('/api/agent_orchestrator/agents', undefined, { fallback: { items: [] } })
+      .then((res) => {
+        if (cancelled) return
+        setAgents(res.ok ? normalizeAgents(res.result?.items) : [])
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [isOpen])
+
+  const handleClose = useCallback(() => {
+    setSearchQuery('')
+    onClose()
+  }, [onClose])
+
+  const query = searchQuery.trim().toLowerCase()
+  const filteredAgents = query
+    ? agents.filter((agent) =>
+        [agent.id, agent.label, agent.description]
+          .filter((part): part is string => typeof part === 'string')
+          .some((part) => part.toLowerCase().includes(query)),
+      )
+    : agents
+
+  return (
+    <Drawer open={isOpen} onOpenChange={(next) => { if (!next) handleClose() }}>
+      <DrawerContent
+        data-testid="workflow-agent-selector-drawer"
+        className="w-full max-w-none sm:w-3/5"
+        closeAriaLabel={t('workflows.selectors.agent.close')}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{title ?? t('workflows.fieldEditors.agentSelector.selectAgent')}</DrawerTitle>
+          <DrawerDescription>
+            {description ?? t('workflows.fieldEditors.agentSelector.selectAgentDescription')}
+          </DrawerDescription>
+        </DrawerHeader>
+
+        <div className="px-6">
+          <Input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder={t('workflows.fieldEditors.agentSelector.searchPlaceholder')}
+            autoFocus
+            disabled={loading}
+          />
+        </div>
+
+        <DrawerBody className="py-4">
+          {loading ? (
+            <div className="flex flex-col items-center justify-center py-12">
+              <Loader2 className="size-10 animate-spin text-primary mb-4" />
+              <p className="text-muted-foreground text-sm">{t('workflows.fieldEditors.agentSelector.loading')}</p>
+            </div>
+          ) : filteredAgents.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12">
+              <Bot className="size-12 text-muted-foreground mb-4" />
+              <p className="text-muted-foreground text-sm mb-2">
+                {query
+                  ? t('workflows.fieldEditors.agentSelector.noMatches')
+                  : t('workflows.fieldEditors.agentSelector.noAgents')}
+              </p>
+              {query ? (
+                <Button variant="link" size="sm" onClick={() => setSearchQuery('')}>
+                  {t('workflows.fieldEditors.agentSelector.clearSearch')}
+                </Button>
+              ) : (
+                <p className="text-muted-foreground text-xs">
+                  {t('workflows.fieldEditors.agentSelector.noAgentsHint')}
+                </p>
+              )}
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {filteredAgents.map((agent) => (
+                <button
+                  key={agent.id}
+                  type="button"
+                  onClick={() => {
+                    onSelect(agent.id, agent)
+                    setSearchQuery('')
+                  }}
+                  className="text-left p-4 border-2 border-border rounded-lg hover:border-primary hover:bg-accent transition-all group"
+                >
+                  <div className="flex items-start justify-between mb-2">
+                    <div className="flex-1 min-w-0">
+                      <h4 className="text-sm font-semibold group-hover:text-primary truncate">
+                        {agent.label || agent.id}
+                      </h4>
+                      <p className="text-xs text-muted-foreground font-mono mt-0.5 truncate">{agent.id}</p>
+                    </div>
+                    <Plus className="size-5 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0 ml-2" />
+                  </div>
+
+                  {(agent.runtime || agent.resultKind) && (
+                    <div className="flex items-center gap-2 mb-2 flex-wrap">
+                      {agent.runtime && (
+                        <Badge variant="secondary" className="text-xs">
+                          {agent.runtime}
+                        </Badge>
+                      )}
+                      {agent.resultKind && (
+                        <Badge variant="outline" className="text-xs">
+                          {agent.resultKind}
+                        </Badge>
+                      )}
+                    </div>
+                  )}
+
+                  {agent.description && (
+                    <p className="text-xs text-muted-foreground line-clamp-2">{agent.description}</p>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button type="button" variant="outline" onClick={handleClose}>
+            {t('workflows.common.cancel')}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

package/src/modules/workflows/components/AnnotationEditDialog.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import type { Node } from '@xyflow/react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  ANNOTATION_GROUP_NODE_TYPE,
+  ANNOTATION_NOTE_NODE_TYPE,
+  type WorkflowGroupNodeData,
+  type WorkflowNoteNodeData,
+} from '../lib/editor-annotations'
+
+export interface AnnotationEditDialogProps {
+  node: Node | null
+  isOpen: boolean
+  onClose: () => void
+  onSave: (nodeId: string, updates: Partial<WorkflowNoteNodeData & WorkflowGroupNodeData>) => void
+  onDelete: (nodeId: string) => void
+}
+
+/**
+ * Inspector for a sticky note or a named group (spec section 4.5).
+ *
+ * Notes and groups carry no step configuration, so they deliberately do not go
+ * through the step inspector: this panel edits the two fields an annotation
+ * actually has and nothing else.
+ *
+ * It is a Drawer, not a modal, for the same reason the step and route
+ * inspectors are rails: an annotation is written ABOUT a region of the canvas,
+ * so covering that region while it is edited hides the thing being described.
+ * Keyboard contract unchanged — Cmd/Ctrl+Enter saves, Escape cancels.
+ */
+export function AnnotationEditDialog({ node, isOpen, onClose, onSave, onDelete }: AnnotationEditDialogProps) {
+  const t = useT()
+  const isNote = node?.type === ANNOTATION_NOTE_NODE_TYPE
+  const isGroup = node?.type === ANNOTATION_GROUP_NODE_TYPE
+  const [markdown, setMarkdown] = React.useState('')
+  const [name, setName] = React.useState('')
+  const [collapsed, setCollapsed] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!node) return
+    const data = node.data as Partial<WorkflowNoteNodeData & WorkflowGroupNodeData> | undefined
+    setMarkdown(typeof data?.markdown === 'string' ? data.markdown : '')
+    setName(typeof data?.name === 'string' ? data.name : '')
+    setCollapsed(data?.collapsed === true)
+  }, [node])
+
+  const handleSave = React.useCallback(() => {
+    if (!node) return
+    onSave(node.id, isNote ? { markdown } : { name, collapsed })
+    onClose()
+  }, [node, onSave, onClose, isNote, markdown, name, collapsed])
+
+  const handleDelete = React.useCallback(() => {
+    if (!node) return
+    onClose()
+    onDelete(node.id)
+  }, [node, onClose, onDelete])
+
+  if (!node || (!isNote && !isGroup)) return null
+
+  return (
+    <Drawer open={isOpen} onOpenChange={(open) => { if (!open) onClose() }}>
+      <DrawerContent
+        data-testid="workflow-annotation-drawer"
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+            event.preventDefault()
+            handleSave()
+          }
+        }}
+        closeAriaLabel={t('workflows.annotations.close', 'Close annotation editor')}
+      >
+        <DrawerHeader>
+          <DrawerTitle>
+            {isNote
+              ? t('workflows.annotations.note.dialogTitle', 'Edit note')
+              : t('workflows.annotations.group.dialogTitle', 'Edit group')}
+          </DrawerTitle>
+          <DrawerDescription>
+            {isNote
+              ? t('workflows.annotations.note.dialogDescription', 'Notes document the workflow for the people editing it. They are never executed.')
+              : t('workflows.annotations.group.dialogDescription', 'Groups label a region of the canvas. Collapsing one changes nothing the engine runs.')}
+          </DrawerDescription>
+        </DrawerHeader>
+
+        <DrawerBody className="space-y-3 py-2">
+          {isNote ? (
+            <div className="space-y-1">
+              <Label htmlFor="annotation-markdown" className="text-xs">
+                {t('workflows.annotations.note.markdownLabel', 'Markdown')}
+              </Label>
+              <Textarea
+                id="annotation-markdown"
+                value={markdown}
+                onChange={(event) => setMarkdown(event.target.value)}
+                rows={8}
+                spellCheck={false}
+                className="font-mono text-sm"
+                placeholder={t('workflows.annotations.note.markdownPlaceholder', '## Why this branch exists')}
+              />
+            </div>
+          ) : (
+            <>
+              <div className="space-y-1">
+                <Label htmlFor="annotation-name" className="text-xs">
+                  {t('workflows.annotations.group.nameLabel', 'Group name')}
+                </Label>
+                <Input
+                  id="annotation-name"
+                  value={name}
+                  onChange={(event) => setName(event.target.value)}
+                  placeholder={t('workflows.annotations.group.namePlaceholder', 'Fulfillment')}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Switch id="annotation-collapsed" checked={collapsed} onCheckedChange={setCollapsed} />
+                <Label htmlFor="annotation-collapsed" className="cursor-pointer text-xs font-normal">
+                  {t('workflows.annotations.group.collapsedLabel', 'Collapsed (visual only)')}
+                </Label>
+              </div>
+            </>
+          )}
+        </DrawerBody>
+
+        <DrawerFooter leading={(
+          <Button type="button" variant="destructive-outline" onClick={handleDelete}>
+            {t('common.delete', 'Delete')}
+          </Button>
+        )}>
+          <Button type="button" variant="outline" onClick={onClose}>
+            {t('common.cancel', 'Cancel')}
+          </Button>
+          <Button type="button" onClick={handleSave}>
+            {t('workflows.common.save', 'Save')}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

package/src/modules/workflows/components/BusinessRuleUsagePanel.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import * as React from 'react'
+import { apiFetch } from '@open-mercato/ui/backend/utils/api'
+import { readJsonSafe } from '@open-mercato/ui/backend/utils/serverErrors'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+import type { BusinessRuleUsageReference } from '../lib/business-rule-usage'
+
+const logger = createLogger('workflows')
+
+export type BusinessRuleUsagePanelProps = {
+  ruleId: string | null
+  className?: string
+}
+
+type UsageResponse = {
+  workflowCount?: number
+  references?: BusinessRuleUsageReference[]
+}
+
+/**
+ * BusinessRuleUsagePanel — the workflows half of the inline-BR dependency
+ * visibility (#4236). `business_rules` exposes a slot on its `InlineRuleEditor`;
+ * this panel fills it by asking `GET /api/workflows/rule-usage`, so the upstream
+ * module never imports or queries workflows.
+ */
+export function BusinessRuleUsagePanel({ ruleId, className }: BusinessRuleUsagePanelProps) {
+  const t = useT()
+  const [usage, setUsage] = React.useState<UsageResponse | null>(null)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [failed, setFailed] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!ruleId) {
+      setUsage(null)
+      return
+    }
+    let cancelled = false
+    setIsLoading(true)
+    setFailed(false)
+    const load = async () => {
+      try {
+        const response = await apiFetch(`/api/workflows/rule-usage?ruleId=${encodeURIComponent(ruleId)}`)
+        if (!response.ok) {
+          if (!cancelled) setFailed(true)
+          return
+        }
+        const body = (await readJsonSafe<UsageResponse>(response)) ?? {}
+        if (!cancelled) setUsage(body)
+      } catch (error) {
+        logger.error('Failed to load business rule usage', { ruleId, err: error })
+        if (!cancelled) setFailed(true)
+      } finally {
+        if (!cancelled) setIsLoading(false)
+      }
+    }
+    void load()
+    return () => {
+      cancelled = true
+    }
+  }, [ruleId])
+
+  if (!ruleId) return null
+
+  const references = usage?.references ?? []
+  const workflowCount = usage?.workflowCount ?? 0
+
+  return (
+    <section className={`rounded-lg border border-border bg-card p-3 ${className ?? ''}`}>
+      <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {t('workflows.businessRules.usage.title')}
+      </h4>
+      {isLoading ? (
+        <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
+          <Spinner size="sm" />
+          <span>{t('workflows.common.loadingDetails')}</span>
+        </div>
+      ) : failed ? (
+        <p className="mt-2 text-xs text-muted-foreground">{t('workflows.businessRules.usage.unavailable')}</p>
+      ) : (
+        <>
+          <p className="mt-2 text-sm font-medium text-foreground">
+            {t('workflows.businessRules.usage.workflowCount', { count: workflowCount })}
+          </p>
+          {references.length === 0 ? (
+            <p className="mt-1 text-xs text-muted-foreground">{t('workflows.businessRules.usage.empty')}</p>
+          ) : (
+            <ul className="mt-2 space-y-1">
+              {references.map((reference) => (
+                <li
+                  key={`${reference.workflowId}:${reference.version}:${reference.kind}:${reference.locationId}`}
+                  className="text-xs text-muted-foreground"
+                >
+                  <span className="font-medium text-foreground">{reference.workflowName || reference.workflowId}</span>
+                  <span className="ml-1">{t(`workflows.businessRules.usage.kinds.${reference.kind}`)}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      )}
+    </section>
+  )
+}

package/src/modules/workflows/components/BusinessRulesSelector.tsx

@@ -2,12 +2,22 @@
 
 import { useState, useEffect } from 'react'
 import { apiFetch } from '@open-mercato/ui/backend/utils/api'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@open-mercato/ui/primitives/dialog'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Plus, Loader2, AlertCircle } from 'lucide-react'
 import { createLogger } from '@open-mercato/shared/lib/logger'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { InlineRuleEditor, type InlineRuleEditorSavedRule } from '@open-mercato/core/modules/business_rules/components/InlineRuleEditor'
 
 const logger = createLogger('workflows')
 
@@ -59,6 +69,12 @@ export interface BusinessRulesSelectorProps {
 
   /** Custom search placeholder */
   searchPlaceholder?: string
+
+  /**
+   * Hide the inline "New rule" affordance. The inline editor is on by default
+   * (#4236) so an author never has to leave the Studio to author a rule.
+   */
+  disableInlineCreate?: boolean
 }
 
 /**
@@ -85,11 +101,14 @@ export function BusinessRulesSelector({
   onlyEnabled = false,
   emptyMessage,
   searchPlaceholder = 'Search by name, ID, type, category, or description...',
+  disableInlineCreate = false,
 }: BusinessRulesSelectorProps) {
+  const t = useT()
   const [businessRules, setBusinessRules] = useState<BusinessRule[]>([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
+  const [isInlineEditorOpen, setIsInlineEditorOpen] = useState(false)
 
   // Fetch business rules on mount
   useEffect(() => {
@@ -98,7 +117,7 @@ export function BusinessRulesSelector({
     }
   }, [isOpen])
 
-  const fetchBusinessRules = async () => {
+  const fetchBusinessRules = async (): Promise<BusinessRule[]> => {
     setLoading(true)
     setError(null)
     try {
@@ -124,7 +143,9 @@ export function BusinessRulesSelector({
 
       if (response.ok) {
         const data = await response.json()
-        setBusinessRules(data.items || [])
+        const items: BusinessRule[] = data.items || []
+        setBusinessRules(items)
+        return items
       } else {
         let errorMessage = `Failed to load business rules (${response.status})`
         try {
@@ -150,6 +171,15 @@ export function BusinessRulesSelector({
     } finally {
       setLoading(false)
     }
+    return []
+  }
+
+  const handleInlineRuleSaved = async (saved: InlineRuleEditorSavedRule) => {
+    const refreshed = await fetchBusinessRules()
+    const created = refreshed.find((rule) => rule.ruleId === saved.ruleId)
+    if (created) {
+      handleSelect(created)
+    }
   }
 
   // Filter rules based on search query and exclusions
@@ -183,12 +213,17 @@ export function BusinessRulesSelector({
   const filteredRules = getFilteredRules()
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-5xl max-h-[85vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
+    <>
+    <Drawer open={isOpen} onOpenChange={(next) => { if (!next) handleClose() }}>
+      <DrawerContent
+        data-testid="workflow-business-rules-selector-drawer"
+        className="w-full max-w-none sm:w-3/5"
+        closeAriaLabel={t('workflows.selectors.businessRule.close')}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+          <DrawerDescription>{description}</DrawerDescription>
+        </DrawerHeader>
 
         {/* Search Input */}
         <div className="px-6">
@@ -203,7 +238,7 @@ export function BusinessRulesSelector({
         </div>
 
         {/* Rules List */}
-        <div className="flex-1 overflow-y-auto px-6 py-4 min-h-[400px]">
+        <DrawerBody className="py-4">
           {loading ? (
             <div className="flex flex-col items-center justify-center py-12">
               <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
@@ -320,18 +355,37 @@ export function BusinessRulesSelector({
               </div>
             </>
           )}
-        </div>
-
-        <DialogFooter>
+        </DrawerBody>
+
+        <DrawerFooter>
+          {!disableInlineCreate && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => setIsInlineEditorOpen(true)}
+            >
+              <Plus className="size-4 mr-1" />
+              {t('workflows.businessRules.newRule')}
+            </Button>
+          )}
           <Button
             type="button"
             variant="outline"
             onClick={handleClose}
           >
-            Cancel
+            {t('common.cancel', 'Cancel')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+    {!disableInlineCreate && (
+      <InlineRuleEditor
+        open={isInlineEditorOpen}
+        onOpenChange={setIsInlineEditorOpen}
+        defaultEntityType={filterEntityType}
+        onSaved={handleInlineRuleSaved}
+      />
+    )}
+    </>
   )
 }