From 92d892fb73a4d3d000f9f7a00d674f1fae9589a1 Mon Sep 17 00:00:00 2001
From: Gustavo Henrique Santos Souza de Miranda <gustavohssmiranda@gmail.com>
Date: Fri, 23 Jan 2026 10:36:16 -0300
Subject: [PATCH] feat: [US-061] - Choice option condition variable dropdown

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../editor/[projectId]/FlowchartEditor.tsx    |  10 +-
 .../editor/OptionConditionEditor.tsx          | 315 ++++++++++++++++++
 src/components/editor/nodes/ChoiceNode.tsx    | 197 +++++++----
 src/types/flowchart.ts                        |  17 +-
 4 files changed, 470 insertions(+), 69 deletions(-)
 create mode 100644 src/components/editor/OptionConditionEditor.tsx

diff --git a/src/app/editor/[projectId]/FlowchartEditor.tsx b/src/app/editor/[projectId]/FlowchartEditor.tsx
index b1e4c8b..9edf400 100644
--- a/src/app/editor/[projectId]/FlowchartEditor.tsx
+++ b/src/app/editor/[projectId]/FlowchartEditor.tsx
@@ -124,7 +124,15 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
       const edgeCount = edges.filter(
         (e) => e.data?.condition?.variableId === variableId
       ).length
-      return nodeCount + edgeCount
+      const choiceOptionCount = nodes.filter(
+        (n) => n.type === 'choice'
+      ).reduce((count, n) => {
+        const options = n.data?.options || []
+        return count + options.filter(
+          (opt: { condition?: { variableId?: string } }) => opt.condition?.variableId === variableId
+        ).length
+      }, 0)
+      return nodeCount + edgeCount + choiceOptionCount
     },
     [nodes, edges]
   )
diff --git a/src/components/editor/OptionConditionEditor.tsx b/src/components/editor/OptionConditionEditor.tsx
new file mode 100644
index 0000000..b96b5c3
--- /dev/null
+++ b/src/components/editor/OptionConditionEditor.tsx
@@ -0,0 +1,315 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import Combobox from '@/components/editor/Combobox'
+import type { ComboboxItem } from '@/components/editor/Combobox'
+import { useEditorContext } from '@/components/editor/EditorContext'
+import type { Condition } from '@/types/flowchart'
+
+type OptionConditionEditorProps = {
+  condition: Condition | undefined
+  onChange: (condition: Condition | undefined) => void
+  onClose: () => void
+}
+
+export default function OptionConditionEditor({
+  condition,
+  onChange,
+  onClose,
+}: OptionConditionEditorProps) {
+  const { variables, onAddVariable } = useEditorContext()
+
+  const [showAddForm, setShowAddForm] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [newType, setNewType] = useState<'numeric' | 'string' | 'boolean'>('numeric')
+
+  const variableItems: ComboboxItem[] = useMemo(
+    () =>
+      variables.map((v) => ({
+        id: v.id,
+        label: v.name,
+        badge: v.type,
+      })),
+    [variables]
+  )
+
+  const selectedVariable = useMemo(() => {
+    if (!condition?.variableId) return undefined
+    return variables.find((v) => v.id === condition.variableId)
+  }, [condition?.variableId, variables])
+
+  const hasInvalidReference = useMemo(() => {
+    if (!condition?.variableId) return false
+    return !variables.some((v) => v.id === condition.variableId)
+  }, [condition?.variableId, variables])
+
+  const availableOperators = useMemo(() => {
+    if (!selectedVariable || selectedVariable.type === 'numeric') {
+      return [
+        { value: '==', label: '==' },
+        { value: '!=', label: '!=' },
+        { value: '>', label: '>' },
+        { value: '<', label: '<' },
+        { value: '>=', label: '>=' },
+        { value: '<=', label: '<=' },
+      ] as const
+    }
+    return [
+      { value: '==', label: '==' },
+      { value: '!=', label: '!=' },
+    ] as const
+  }, [selectedVariable])
+
+  const handleVariableSelect = useCallback(
+    (variableId: string) => {
+      const variable = variables.find((v) => v.id === variableId)
+      const defaultValue = variable
+        ? variable.type === 'numeric'
+          ? 0
+          : variable.type === 'boolean'
+            ? false
+            : ''
+        : 0
+      const validOperator =
+        variable && variable.type !== 'numeric' && condition?.operator && !['==', '!='].includes(condition.operator)
+          ? '=='
+          : condition?.operator || '=='
+
+      onChange({
+        variableName: variable?.name || '',
+        variableId,
+        operator: validOperator as Condition['operator'],
+        value: defaultValue,
+      })
+    },
+    [variables, condition?.operator, onChange]
+  )
+
+  const handleOperatorChange = useCallback(
+    (operator: string) => {
+      if (!condition) return
+      onChange({
+        ...condition,
+        operator: operator as Condition['operator'],
+      })
+    },
+    [condition, onChange]
+  )
+
+  const handleValueChange = useCallback(
+    (value: number | string | boolean) => {
+      if (!condition) return
+      onChange({
+        ...condition,
+        value,
+      })
+    },
+    [condition, onChange]
+  )
+
+  const handleRemoveCondition = useCallback(() => {
+    onChange(undefined)
+    onClose()
+  }, [onChange, onClose])
+
+  const handleAddNew = useCallback(() => {
+    setShowAddForm(true)
+    setNewName('')
+    setNewType('numeric')
+  }, [])
+
+  const handleSubmitNew = useCallback(() => {
+    if (!newName.trim()) return
+    const defaultValue = newType === 'numeric' ? 0 : newType === 'boolean' ? false : ''
+    const newId = onAddVariable(newName.trim(), newType, defaultValue)
+    onChange({
+      variableName: newName.trim(),
+      variableId: newId,
+      operator: '==',
+      value: defaultValue,
+    })
+    setShowAddForm(false)
+  }, [newName, newType, onAddVariable, onChange])
+
+  const handleCancelNew = useCallback(() => {
+    setShowAddForm(false)
+  }, [])
+
+  const renderValueInput = () => {
+    const varType = selectedVariable?.type || 'numeric'
+
+    if (varType === 'boolean') {
+      return (
+        <select
+          value={String(condition?.value ?? false)}
+          onChange={(e) => handleValueChange(e.target.value === 'true')}
+          className="w-full rounded border border-zinc-300 bg-white px-2 py-1 text-sm focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-white"
+        >
+          <option value="true">true</option>
+          <option value="false">false</option>
+        </select>
+      )
+    }
+
+    if (varType === 'string') {
+      return (
+        <input
+          type="text"
+          value={String(condition?.value ?? '')}
+          onChange={(e) => handleValueChange(e.target.value)}
+          placeholder="Value..."
+          className="w-full rounded border border-zinc-300 bg-white px-2 py-1 text-sm focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-white dark:placeholder-zinc-400"
+        />
+      )
+    }
+
+    return (
+      <input
+        type="number"
+        value={typeof condition?.value === 'number' ? condition.value : 0}
+        onChange={(e) => handleValueChange(parseFloat(e.target.value) || 0)}
+        className="w-full rounded border border-zinc-300 bg-white px-2 py-1 text-sm focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-white"
+      />
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative w-full max-w-sm rounded-lg border border-zinc-200 bg-white p-4 shadow-xl dark:border-zinc-700 dark:bg-zinc-800">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-zinc-800 dark:text-zinc-100">
+            Option Condition
+          </h3>
+          <button
+            onClick={onClose}
+            className="rounded p-0.5 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-700 dark:hover:text-zinc-300"
+          >
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Variable selector */}
+        <div className="mb-3">
+          <label className="mb-1 block text-xs font-medium text-zinc-600 dark:text-zinc-300">
+            Variable
+          </label>
+          <div className={hasInvalidReference ? 'rounded ring-2 ring-orange-500' : ''}>
+            <Combobox
+              items={variableItems}
+              value={condition?.variableId}
+              onChange={handleVariableSelect}
+              placeholder="Select variable..."
+              onAddNew={handleAddNew}
+            />
+          </div>
+          {hasInvalidReference && (
+            <div className="mt-1 text-xs text-orange-600 dark:text-orange-400">
+              Variable not found
+            </div>
+          )}
+        </div>
+
+        {/* Inline add form */}
+        {showAddForm && (
+          <div className="mb-3 rounded border border-zinc-300 bg-zinc-50 p-2 dark:border-zinc-600 dark:bg-zinc-900">
+            <div className="mb-1 text-xs font-medium text-zinc-600 dark:text-zinc-300">
+              New variable
+            </div>
+            <div className="flex items-center gap-1.5">
+              <input
+                type="text"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                placeholder="Name"
+                className="w-full rounded border border-zinc-300 bg-white px-2 py-0.5 text-sm focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-white dark:placeholder-zinc-400"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleSubmitNew()
+                  if (e.key === 'Escape') handleCancelNew()
+                }}
+                autoFocus
+              />
+            </div>
+            <div className="mt-1.5 flex items-center gap-1.5">
+              <select
+                value={newType}
+                onChange={(e) => setNewType(e.target.value as 'numeric' | 'string' | 'boolean')}
+                className="rounded border border-zinc-300 bg-white px-2 py-0.5 text-sm focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-white"
+              >
+                <option value="numeric">numeric</option>
+                <option value="string">string</option>
+                <option value="boolean">boolean</option>
+              </select>
+            </div>
+            <div className="mt-1.5 flex justify-end gap-1">
+              <button
+                onClick={handleCancelNew}
+                className="rounded px-2 py-0.5 text-xs text-zinc-500 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSubmitNew}
+                disabled={!newName.trim()}
+                className="rounded bg-blue-600 px-2 py-0.5 text-xs text-white hover:bg-blue-700 disabled:opacity-50"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Operator and value (shown when variable is selected) */}
+        {condition?.variableId && (
+          <>
+            <div className="mb-3">
+              <label className="mb-1 block text-xs font-medium text-zinc-600 dark:text-zinc-300">
+                Operator
+              </label>
+              <select
+                value={condition.operator || '=='}
+                onChange={(e) => handleOperatorChange(e.target.value)}
+                className="w-full rounded border border-zinc-300 bg-white px-2 py-1 text-sm focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-white"
+              >
+                {availableOperators.map((op) => (
+                  <option key={op.value} value={op.value}>
+                    {op.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="mb-3">
+              <label className="mb-1 block text-xs font-medium text-zinc-600 dark:text-zinc-300">
+                Value
+              </label>
+              {renderValueInput()}
+            </div>
+          </>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-between">
+          {condition?.variableId ? (
+            <button
+              onClick={handleRemoveCondition}
+              className="rounded px-2 py-1 text-xs text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+            >
+              Remove condition
+            </button>
+          ) : (
+            <div />
+          )}
+          <button
+            onClick={onClose}
+            className="rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/editor/nodes/ChoiceNode.tsx b/src/components/editor/nodes/ChoiceNode.tsx
index 7073d2d..1eb9e5a 100644
--- a/src/components/editor/nodes/ChoiceNode.tsx
+++ b/src/components/editor/nodes/ChoiceNode.tsx
@@ -1,12 +1,16 @@
 'use client'
 
-import { useCallback, ChangeEvent } from 'react'
+import { useCallback, useMemo, useState, ChangeEvent } from 'react'
 import { Handle, Position, NodeProps, useReactFlow } from 'reactflow'
 import { nanoid } from 'nanoid'
+import { useEditorContext } from '@/components/editor/EditorContext'
+import OptionConditionEditor from '@/components/editor/OptionConditionEditor'
+import type { Condition } from '@/types/flowchart'
 
 type ChoiceOption = {
   id: string
   label: string
+  condition?: Condition
 }
 
 type ChoiceNodeData = {
@@ -19,6 +23,8 @@ const MAX_OPTIONS = 6
 
 export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
   const { setNodes } = useReactFlow()
+  const { variables } = useEditorContext()
+  const [editingConditionOptionId, setEditingConditionOptionId] = useState<string | null>(null)
 
   const updatePrompt = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -54,6 +60,27 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
     [id, setNodes]
   )
 
+  const updateOptionCondition = useCallback(
+    (optionId: string, condition: Condition | undefined) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? {
+                ...node,
+                data: {
+                  ...node.data,
+                  options: node.data.options.map((opt: ChoiceOption) =>
+                    opt.id === optionId ? { ...opt, condition } : opt
+                  ),
+                },
+              }
+            : node
+        )
+      )
+    },
+    [id, setNodes]
+  )
+
   const addOption = useCallback(() => {
     if (data.options.length >= MAX_OPTIONS) return
     setNodes((nodes) =>
@@ -96,68 +123,118 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
     [id, data.options.length, setNodes]
   )
 
+  const editingOption = useMemo(() => {
+    if (!editingConditionOptionId) return null
+    return data.options.find((opt) => opt.id === editingConditionOptionId) || null
+  }, [editingConditionOptionId, data.options])
+
+  const hasInvalidConditionReference = useCallback(
+    (option: ChoiceOption) => {
+      if (!option.condition?.variableId) return false
+      return !variables.some((v) => v.id === option.condition!.variableId)
+    },
+    [variables]
+  )
+
   return (
-    <div className="min-w-[220px] rounded-lg border-2 border-green-500 bg-green-50 p-3 shadow-md dark:border-green-400 dark:bg-green-950">
-      <Handle
-        type="target"
-        position={Position.Top}
-        id="input"
-        className="!h-3 !w-3 !border-2 !border-green-500 !bg-white dark:!bg-zinc-800"
-      />
+    <>
+      <div className="min-w-[220px] rounded-lg border-2 border-green-500 bg-green-50 p-3 shadow-md dark:border-green-400 dark:bg-green-950">
+        <Handle
+          type="target"
+          position={Position.Top}
+          id="input"
+          className="!h-3 !w-3 !border-2 !border-green-500 !bg-white dark:!bg-zinc-800"
+        />
 
-      <div className="mb-2 text-xs font-semibold uppercase tracking-wide text-green-700 dark:text-green-300">
-        Choice
+        <div className="mb-2 text-xs font-semibold uppercase tracking-wide text-green-700 dark:text-green-300">
+          Choice
+        </div>
+
+        <input
+          type="text"
+          value={data.prompt || ''}
+          onChange={updatePrompt}
+          placeholder="What do you choose?"
+          className="mb-3 w-full rounded border border-green-300 bg-white px-2 py-1 text-sm focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-green-600 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-400"
+        />
+
+        <div className="space-y-2">
+          {data.options.map((option, index) => (
+            <div key={option.id}>
+              <div className="relative flex items-center gap-1">
+                <input
+                  type="text"
+                  value={option.label}
+                  onChange={(e) => updateOptionLabel(option.id, e.target.value)}
+                  placeholder={`Option ${index + 1}`}
+                  className="flex-1 rounded border border-green-300 bg-white px-2 py-1 text-sm focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-green-600 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-400"
+                />
+                <button
+                  type="button"
+                  onClick={() => setEditingConditionOptionId(option.id)}
+                  className={`flex h-6 w-6 items-center justify-center rounded text-xs ${
+                    option.condition?.variableId
+                      ? hasInvalidConditionReference(option)
+                        ? 'bg-orange-100 text-orange-600 ring-1 ring-orange-500 dark:bg-orange-900/30 dark:text-orange-400'
+                        : 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
+                      : 'text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-700'
+                  }`}
+                  title={option.condition?.variableId ? 'Edit condition' : 'Add condition'}
+                >
+                  <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                  </svg>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => removeOption(option.id)}
+                  disabled={data.options.length <= MIN_OPTIONS}
+                  className="flex h-6 w-6 items-center justify-center rounded text-red-500 hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-red-900/30"
+                  title="Remove option"
+                >
+                  ×
+                </button>
+                <Handle
+                  type="source"
+                  position={Position.Bottom}
+                  id={`option-${index}`}
+                  className="!h-3 !w-3 !border-2 !border-green-500 !bg-white dark:!bg-zinc-800"
+                  style={{
+                    left: `${((index + 1) / (data.options.length + 1)) * 100}%`,
+                  }}
+                />
+              </div>
+              {option.condition?.variableId && (
+                <div className={`mt-0.5 ml-1 text-[10px] ${
+                  hasInvalidConditionReference(option)
+                    ? 'text-orange-500 dark:text-orange-400'
+                    : 'text-zinc-500 dark:text-zinc-400'
+                }`}>
+                  if {option.condition.variableName} {option.condition.operator} {String(option.condition.value)}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <button
+          type="button"
+          onClick={addOption}
+          disabled={data.options.length >= MAX_OPTIONS}
+          className="mt-2 flex w-full items-center justify-center gap-1 rounded border border-dashed border-green-400 py-1 text-sm text-green-600 hover:bg-green-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:border-green-500 dark:text-green-400 dark:hover:bg-green-900/30"
+          title="Add option"
+        >
+          + Add Option
+        </button>
       </div>
 
-      <input
-        type="text"
-        value={data.prompt || ''}
-        onChange={updatePrompt}
-        placeholder="What do you choose?"
-        className="mb-3 w-full rounded border border-green-300 bg-white px-2 py-1 text-sm focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-green-600 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-400"
-      />
-
-      <div className="space-y-2">
-        {data.options.map((option, index) => (
-          <div key={option.id} className="relative flex items-center gap-1">
-            <input
-              type="text"
-              value={option.label}
-              onChange={(e) => updateOptionLabel(option.id, e.target.value)}
-              placeholder={`Option ${index + 1}`}
-              className="flex-1 rounded border border-green-300 bg-white px-2 py-1 text-sm focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-green-600 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-400"
-            />
-            <button
-              type="button"
-              onClick={() => removeOption(option.id)}
-              disabled={data.options.length <= MIN_OPTIONS}
-              className="flex h-6 w-6 items-center justify-center rounded text-red-500 hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-red-900/30"
-              title="Remove option"
-            >
-              ×
-            </button>
-            <Handle
-              type="source"
-              position={Position.Bottom}
-              id={`option-${index}`}
-              className="!h-3 !w-3 !border-2 !border-green-500 !bg-white dark:!bg-zinc-800"
-              style={{
-                left: `${((index + 1) / (data.options.length + 1)) * 100}%`,
-              }}
-            />
-          </div>
-        ))}
-      </div>
-
-      <button
-        type="button"
-        onClick={addOption}
-        disabled={data.options.length >= MAX_OPTIONS}
-        className="mt-2 flex w-full items-center justify-center gap-1 rounded border border-dashed border-green-400 py-1 text-sm text-green-600 hover:bg-green-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:border-green-500 dark:text-green-400 dark:hover:bg-green-900/30"
-        title="Add option"
-      >
-        + Add Option
-      </button>
-    </div>
+      {editingOption && (
+        <OptionConditionEditor
+          condition={editingOption.condition}
+          onChange={(condition) => updateOptionCondition(editingOption.id, condition)}
+          onClose={() => setEditingConditionOptionId(null)}
+        />
+      )}
+    </>
   )
 }
diff --git a/src/types/flowchart.ts b/src/types/flowchart.ts
index 0379054..4f4461c 100644
--- a/src/types/flowchart.ts
+++ b/src/types/flowchart.ts
@@ -21,6 +21,14 @@ export type Variable = {
   description?: string;
 };
 
+// Condition type for conditional edges and choice options
+export type Condition = {
+  variableName: string;
+  variableId?: string;
+  operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
+  value: number | string | boolean;
+};
+
 // DialogueNode type: represents character speech/dialogue
 export type DialogueNodeData = {
   speaker?: string;
@@ -39,6 +47,7 @@ export type DialogueNode = {
 export type ChoiceOption = {
   id: string;
   label: string;
+  condition?: Condition;
 };
 
 // ChoiceNode type: represents branching decisions
@@ -70,14 +79,6 @@ export type VariableNode = {
 // Union type for all node types
 export type FlowchartNode = DialogueNode | ChoiceNode | VariableNode;
 
-// Condition type for conditional edges
-export type Condition = {
-  variableName: string;
-  variableId?: string;
-  operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
-  value: number | string | boolean;
-};
-
 // FlowchartEdge type: represents connections between nodes
 export type FlowchartEdge = {
   id: string;