From d299a4221704beb26d39bf1e958259cf1a49db1e Mon Sep 17 00:00:00 2001
From: woohyun kim <whkim@kephas.kr>
Date: Thu, 2 Apr 2026 09:09:32 +0900
Subject: [PATCH] feat: apply select box to condition node enum parameters

- Add `options?: string[]` to ParamDefinition type
- Add options arrays to and-or (AND/OR), crossover (above/below),
  threshold operator (</>/<=/>==/==), market-order side (buy/sell),
  and rsi source (close/open/high/low) params
- ParamInput renders <select> dropdown when options are present,
  showing localized labels from PARAM_VALUE_LABELS

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 .../src/components/flows/node-inspector.tsx   | 23 +++++++++++++++++--
 packages/types/src/flow.ts                    | 11 +++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/flows/node-inspector.tsx b/apps/web/src/components/flows/node-inspector.tsx
index 711f288..4cfeb6f 100644
--- a/apps/web/src/components/flows/node-inspector.tsx
+++ b/apps/web/src/components/flows/node-inspector.tsx
@@ -40,11 +40,28 @@ function ParamInput({
   paramKey,
   value,
   onChange,
+  options,
 }: {
   paramKey: string;
   value: unknown;
   onChange: (val: unknown) => void;
+  options?: string[];
 }) {
+  if (options && options.length > 0) {
+    return (
+      <select
+        value={String(value)}
+        onChange={(e) => onChange(e.target.value)}
+        className="rounded border border-border bg-background px-2 py-1 text-xs text-foreground outline-none focus:border-primary"
+      >
+        {options.map((opt) => (
+          <option key={opt} value={opt}>
+            {PARAM_VALUE_LABELS[opt] ?? opt}
+          </option>
+        ))}
+      </select>
+    );
+  }
   if (typeof value === 'boolean') {
     return (
       <button
@@ -133,7 +150,7 @@ export function NodeInspector() {
         {params ? (
           <div className="flex flex-col gap-2">
             {/* Required params — always shown */}
-            {requiredParams.map(({ key }) => (
+            {requiredParams.map(({ key, options }) => (
               <label key={key} className="flex flex-col gap-0.5">
                 <span className="text-[10px] text-muted-foreground">
                   {PARAM_LABELS[key] ?? key}
@@ -142,6 +159,7 @@ export function NodeInspector() {
                   paramKey={key}
                   value={config[key] ?? registry.defaultConfig[key]}
                   onChange={(val) => updateNodeConfig(node.id, { [key]: val })}
+                  options={options}
                 />
               </label>
             ))}
@@ -154,7 +172,7 @@ export function NodeInspector() {
                     선택적 파라미터
                   </span>
                 </div>
-                {optionalParams.map(({ key }) => {
+                {optionalParams.map(({ key, options }) => {
                   const isEnabled = key in config;
                   const defaultVal = registry.defaultConfig[key];
                   return (
@@ -183,6 +201,7 @@ export function NodeInspector() {
                           paramKey={key}
                           value={config[key]}
                           onChange={(val) => updateNodeConfig(node.id, { [key]: val })}
+                          options={options}
                         />
                       ) : (
                         <span className="rounded border border-border/40 bg-muted/40 px-2 py-1 text-xs text-muted-foreground/40">
diff --git a/packages/types/src/flow.ts b/packages/types/src/flow.ts
index 2c8626c..213ceb7 100644
--- a/packages/types/src/flow.ts
+++ b/packages/types/src/flow.ts
@@ -36,6 +36,7 @@ export interface PortDefinition {
 export interface ParamDefinition {
   key: string;
   required: boolean;
+  options?: string[];
 }
 
 export interface NodeTypeInfo {
@@ -75,7 +76,7 @@ export const NODE_TYPE_REGISTRY: Record<string, NodeTypeInfo> = {
     defaultConfig: { period: 14, source: 'close' },
     params: [
       { key: 'period', required: true },
-      { key: 'source', required: false },
+      { key: 'source', required: false, options: ['close', 'open', 'high', 'low'] },
     ],
   },
   macd: {
@@ -128,7 +129,7 @@ export const NODE_TYPE_REGISTRY: Record<string, NodeTypeInfo> = {
     outputs: [{ name: 'result', type: 'boolean' }],
     defaultConfig: { operator: '<', threshold: 30 },
     params: [
-      { key: 'operator', required: true },
+      { key: 'operator', required: true, options: ['<', '>', '<=', '>=', '=='] },
       { key: 'threshold', required: true },
     ],
   },
@@ -142,7 +143,7 @@ export const NODE_TYPE_REGISTRY: Record<string, NodeTypeInfo> = {
     ],
     outputs: [{ name: 'result', type: 'boolean' }],
     defaultConfig: { direction: 'above' },
-    params: [{ key: 'direction', required: true }],
+    params: [{ key: 'direction', required: true, options: ['above', 'below'] }],
   },
   'and-or': {
     subtype: 'and-or',
@@ -154,7 +155,7 @@ export const NODE_TYPE_REGISTRY: Record<string, NodeTypeInfo> = {
     ],
     outputs: [{ name: 'result', type: 'boolean' }],
     defaultConfig: { operator: 'AND' },
-    params: [{ key: 'operator', required: true }],
+    params: [{ key: 'operator', required: true, options: ['AND', 'OR'] }],
   },
   'market-order': {
     subtype: 'market-order',
@@ -164,7 +165,7 @@ export const NODE_TYPE_REGISTRY: Record<string, NodeTypeInfo> = {
     outputs: [{ name: 'result', type: 'OrderResult' }],
     defaultConfig: { side: 'buy', amount: '0.001' },
     params: [
-      { key: 'side', required: true },
+      { key: 'side', required: true, options: ['buy', 'sell'] },
       { key: 'amount', required: true },
     ],
   },