feat: [US-040] - Conditionals on choice options

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

prd.json

@@ -694,6 +694,59 @@
       "priority": 39,
       "passes": true,
       "notes": ""
+    },
+    {
+      "id": "US-040",
+      "title": "Conditionals on choice options",
+      "description": "As a user, I want individual choice options to have variable conditions so that options are only visible when certain conditions are met (e.g., affection > 10).",
+      "acceptanceCriteria": [
+        "Each ChoiceOption can have optional condition (variableName, operator, value)",
+        "Update ChoiceNode UI to show 'Add condition' button per option",
+        "Condition editor modal for each option",
+        "Visual indicator (icon/badge) on options with conditions",
+        "Update TypeScript types: ChoiceOption gets optional condition field",
+        "Export includes per-option conditions in Ren'Py JSON",
+        "Typecheck passes",
+        "Verify in browser using dev-browser skill"
+      ],
+      "priority": 40,
+      "passes": true,
+      "notes": "Dependencies: US-018, US-019, US-025. Complexity: M"
+    },
+    {
+      "id": "US-041",
+      "title": "Change password for logged-in user",
+      "description": "As a user, I want to change my own password from a settings/profile page so that I can keep my account secure.",
+      "acceptanceCriteria": [
+        "Settings/profile page accessible from dashboard header",
+        "Form with: current password, new password, confirm new password fields",
+        "Calls Supabase updateUser with new password",
+        "Requires current password verification (re-authenticate)",
+        "Shows success/error messages",
+        "Typecheck passes",
+        "Verify in browser using dev-browser skill"
+      ],
+      "priority": 41,
+      "passes": false,
+      "notes": "Dependencies: US-004. Complexity: S"
+    },
+    {
+      "id": "US-042",
+      "title": "Password reset modal on token arrival",
+      "description": "As a user, I want a modal to automatically appear when a password reset token is detected so that I can set my new password seamlessly.",
+      "acceptanceCriteria": [
+        "Detect password reset token in URL (from Supabase email link)",
+        "Show modal/dialog automatically when token present",
+        "Modal has: new password, confirm password fields",
+        "Calls Supabase updateUser with token to complete reset",
+        "On success, close modal and redirect to login",
+        "On error, show error message",
+        "Typecheck passes",
+        "Verify in browser using dev-browser skill"
+      ],
+      "priority": 42,
+      "passes": false,
+      "notes": "Dependencies: US-006. Complexity: S"
     }
   ]
 }

progress.txt

@@ -586,3 +586,20 @@
   - LoadingSpinner uses size prop ('sm' | 'md' | 'lg') for flexibility across different contexts
   - Link component from next/link is needed in server components for navigation (no useRouter in server components)
 ---
+
+## 2026-01-22 - US-040
+- What was implemented: Conditionals on choice options - per-option visibility conditions
+- Files changed:
+  - src/types/flowchart.ts - moved Condition type before ChoiceOption, added optional condition field to ChoiceOption
+  - src/components/editor/nodes/ChoiceNode.tsx - added condition button per option, condition badge display, condition editing state management
+  - src/components/editor/OptionConditionEditor.tsx - new modal component for editing per-option conditions (variable name, operator, value)
+  - src/app/editor/[projectId]/FlowchartEditor.tsx - updated Ren'Py export to include per-option conditions (option condition takes priority over edge condition)
+- **Learnings for future iterations:**
+  - Per-option conditions use the same Condition type as edge conditions
+  - Condition type needed to be moved above ChoiceOption in types file since ChoiceOption now references it
+  - Use `delete obj.property` pattern instead of destructuring with unused variable to avoid lint warnings
+  - OptionConditionEditor is separate from ConditionEditor because it operates on option IDs vs edge IDs
+  - In Ren'Py export, option-level condition takes priority over edge condition since it represents visibility
+  - Condition button uses amber color scheme (bg-amber-100) when condition is set, neutral when not
+  - Condition badge below option shows "if variableName operator value" text in compact format
+---

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -297,6 +297,11 @@ function convertToRenpyFormat(
           }
         }
 
+        // Per-option condition (visibility condition) takes priority over edge condition
+        if (option.condition) {
+          choice.condition = option.condition
+        }
+
         return choice
       })
 

src/components/editor/OptionConditionEditor.tsx

@@ -0,0 +1,171 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import type { Condition } from '@/types/flowchart'
+
+type OptionConditionEditorProps = {
+  optionId: string
+  optionLabel: string
+  condition?: Condition
+  onSave: (optionId: string, condition: Condition) => void
+  onRemove: (optionId: string) => void
+  onCancel: () => void
+}
+
+const OPERATORS: Condition['operator'][] = ['>', '<', '==', '>=', '<=', '!=']
+
+export default function OptionConditionEditor({
+  optionId,
+  optionLabel,
+  condition,
+  onSave,
+  onRemove,
+  onCancel,
+}: OptionConditionEditorProps) {
+  const [variableName, setVariableName] = useState(condition?.variableName ?? '')
+  const [operator, setOperator] = useState<Condition['operator']>(condition?.operator ?? '==')
+  const [value, setValue] = useState(condition?.value ?? 0)
+
+  // Close on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onCancel()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onCancel])
+
+  const handleSave = useCallback(() => {
+    if (!variableName.trim()) return
+    onSave(optionId, {
+      variableName: variableName.trim(),
+      operator,
+      value,
+    })
+  }, [optionId, variableName, operator, value, onSave])
+
+  const handleRemove = useCallback(() => {
+    onRemove(optionId)
+  }, [optionId, onRemove])
+
+  const hasExistingCondition = !!condition
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div
+        className="w-full max-w-md rounded-lg border border-zinc-200 bg-white p-6 shadow-xl dark:border-zinc-700 dark:bg-zinc-800"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 className="mb-1 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          {hasExistingCondition ? 'Edit Option Condition' : 'Add Option Condition'}
+        </h3>
+        <p className="mb-4 text-sm text-zinc-500 dark:text-zinc-400">
+          Option: {optionLabel || '(unnamed)'}
+        </p>
+
+        <div className="space-y-4">
+          {/* Variable Name Input */}
+          <div>
+            <label
+              htmlFor="optionVariableName"
+              className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+            >
+              Variable Name
+            </label>
+            <input
+              type="text"
+              id="optionVariableName"
+              value={variableName}
+              onChange={(e) => setVariableName(e.target.value)}
+              placeholder="e.g., affection, score, health"
+              autoFocus
+              className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100 dark:placeholder-zinc-500"
+            />
+          </div>
+
+          {/* Operator Dropdown */}
+          <div>
+            <label
+              htmlFor="optionOperator"
+              className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+            >
+              Operator
+            </label>
+            <select
+              id="optionOperator"
+              value={operator}
+              onChange={(e) => setOperator(e.target.value as Condition['operator'])}
+              className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100"
+            >
+              {OPERATORS.map((op) => (
+                <option key={op} value={op}>
+                  {op === '==' ? '== (equals)' : op === '!=' ? '!= (not equals)' : op === '>' ? '> (greater than)' : op === '<' ? '< (less than)' : op === '>=' ? '>= (greater or equal)' : '<= (less or equal)'}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Value Number Input */}
+          <div>
+            <label
+              htmlFor="optionValue"
+              className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+            >
+              Value
+            </label>
+            <input
+              type="number"
+              id="optionValue"
+              value={value}
+              onChange={(e) => setValue(parseFloat(e.target.value) || 0)}
+              className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100"
+            />
+          </div>
+
+          {/* Preview */}
+          {variableName.trim() && (
+            <div className="rounded-md border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-600 dark:bg-zinc-700">
+              <span className="text-sm text-zinc-600 dark:text-zinc-300">
+                Show option when: <code className="font-mono text-amber-600 dark:text-amber-400">{variableName.trim()} {operator} {value}</code>
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Action Buttons */}
+        <div className="mt-6 flex justify-between">
+          <div>
+            {hasExistingCondition && (
+              <button
+                type="button"
+                onClick={handleRemove}
+                className="rounded-md border border-red-300 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
+              >
+                Remove
+              </button>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={!variableName.trim()}
+              className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/editor/nodes/ChoiceNode.tsx

@@ -1,12 +1,15 @@
 'use client'
 
-import { useCallback, ChangeEvent } from 'react'
+import { useCallback, useState, ChangeEvent } from 'react'
 import { Handle, Position, NodeProps, useReactFlow } from 'reactflow'
 import { nanoid } from 'nanoid'
+import type { Condition } from '@/types/flowchart'
+import OptionConditionEditor from '@/components/editor/OptionConditionEditor'
 
 type ChoiceOption = {
   id: string
   label: string
+  condition?: Condition
 }
 
 type ChoiceNodeData = {
@@ -19,6 +22,7 @@ const MAX_OPTIONS = 6
 
 export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
   const { setNodes } = useReactFlow()
+  const [editingConditionOptionId, setEditingConditionOptionId] = useState<string | null>(null)
 
   const updatePrompt = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -96,6 +100,57 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
     [id, data.options.length, setNodes]
   )
 
+  const handleSaveCondition = useCallback(
+    (optionId: string, condition: Condition) => {
+      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
+        )
+      )
+      setEditingConditionOptionId(null)
+    },
+    [id, setNodes]
+  )
+
+  const handleRemoveCondition = useCallback(
+    (optionId: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? {
+                ...node,
+                data: {
+                  ...node.data,
+                  options: node.data.options.map((opt: ChoiceOption) => {
+                    if (opt.id !== optionId) return opt
+                    const updated = { ...opt }
+                    delete updated.condition
+                    return updated
+                  }),
+                },
+              }
+            : node
+        )
+      )
+      setEditingConditionOptionId(null)
+    },
+    [id, setNodes]
+  )
+
+  const editingOption = editingConditionOptionId
+    ? data.options.find((opt) => opt.id === editingConditionOptionId)
+    : null
+
   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
@@ -119,32 +174,61 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
 
       <div className="space-y-2">
         {data.options.map((option, index) => (
-          <div key={option.id} className="relative flex items-center gap-1">
+          <div key={option.id}>
-            <input
+            <div className="relative flex items-center gap-1">
-              type="text"
+              <input
-              value={option.label}
+                type="text"
-              onChange={(e) => updateOptionLabel(option.id, e.target.value)}
+                value={option.label}
-              placeholder={`Option ${index + 1}`}
+                onChange={(e) => updateOptionLabel(option.id, e.target.value)}
-              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"
+                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"
+              <button
-              onClick={() => removeOption(option.id)}
+                type="button"
-              disabled={data.options.length <= MIN_OPTIONS}
+                onClick={() => setEditingConditionOptionId(option.id)}
-              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"
+                className={`flex h-6 w-6 items-center justify-center rounded text-xs ${
-              title="Remove option"
+                  option.condition
-            >
+                    ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/50 dark:text-amber-300 dark:hover:bg-amber-900/70'
-              ×
+                    : 'text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:text-zinc-500 dark:hover:bg-zinc-700 dark:hover:text-zinc-300'
-            </button>
+                }`}
-            <Handle
+                title={option.condition ? `Condition: ${option.condition.variableName} ${option.condition.operator} ${option.condition.value}` : 'Add condition'}
-              type="source"
+              >
-              position={Position.Bottom}
+                {option.condition ? (
-              id={`option-${index}`}
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
-              className="!h-3 !w-3 !border-2 !border-green-500 !bg-white dark:!bg-zinc-800"
+                    <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
-              style={{
+                  </svg>
-                left: `${((index + 1) / (data.options.length + 1)) * 100}%`,
+                ) : (
-              }}
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
-            />
+                    <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
+                  </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"
+              >
+                &times;
+              </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 && (
+              <div className="ml-1 mt-0.5 flex items-center gap-1">
+                <span className="inline-flex items-center rounded-sm bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-800 dark:bg-amber-900/40 dark:text-amber-300">
+                  if {option.condition.variableName} {option.condition.operator} {option.condition.value}
+                </span>
+              </div>
+            )}
           </div>
         ))}
       </div>
@@ -158,6 +242,17 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
       >
         + Add Option
       </button>
+
+      {editingOption && (
+        <OptionConditionEditor
+          optionId={editingOption.id}
+          optionLabel={editingOption.label}
+          condition={editingOption.condition}
+          onSave={handleSaveCondition}
+          onRemove={handleRemoveCondition}
+          onCancel={() => setEditingConditionOptionId(null)}
+        />
+      )}
     </div>
   )
 }

src/types/flowchart.ts

@@ -4,6 +4,13 @@ export type Position = {
   y: number;
 };
 
+// Condition type for conditional edges and choice options
+export type Condition = {
+  variableName: string;
+  operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
+  value: number;
+};
+
 // DialogueNode type: represents character speech/dialogue
 export type DialogueNode = {
   id: string;
@@ -19,6 +26,7 @@ export type DialogueNode = {
 export type ChoiceOption = {
   id: string;
   label: string;
+  condition?: Condition;
 };
 
 // ChoiceNode type: represents branching decisions
@@ -47,13 +55,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;
-  operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
-  value: number;
-};
-
 // FlowchartEdge type: represents connections between nodes
 export type FlowchartEdge = {
   id: string;