feat: enhance variable handling and UI components with business labels and descriptions

web/app/dashboard/ai-workflows/_components/workflow-utils.ts

@@ -65,6 +65,13 @@ export type WorkflowVariableRef = {
   valueOptions?: WorkflowVariableValueOption[]
 }
 
+export type WorkflowVariableOption = {
+  value: string
+  label: string
+  subtitle: string
+  description: string
+}
+
 export type WorkflowNodeSpec = AIWorkflowNodeSpec
 
 export type WorkflowDraftValidation = {
@@ -92,6 +99,17 @@ export function refField(value: WorkflowValue | undefined): string {
   return isRefValue(value) ? value.content[1] : ""
 }
 
+export function buildVariableOption(variable: WorkflowVariableRef): WorkflowVariableOption {
+  const ref = `${variable.nodeId}.${variable.field}`
+  const label = `${variable.nodeName} / ${variable.label || variable.field}`
+  return {
+    value: ref,
+    label,
+    subtitle: [ref, variable.type].filter(Boolean).join(" · "),
+    description: variable.description,
+  }
+}
+
 export function getNodeTitle(
   node: AIWorkflowDefinition["nodes"][number] | undefined,
   specs: AIWorkflowNodeSpec[] = []