feat(workflow): implement variable nodes and enhance workflow execution

- Add Variable node type with UI representation and configuration
- Implement variable value storage and processing in workflow context
- Clear preview node content before execution
- Add variable placeholder replacement (${variableName}) in inputs
- Improve loader icon visibility in right sidebar
- Remove content field from AccumulatorNode
- Bump version to 1.69.0+1

Author: PriNova

vscode/package.json

@@ -3,7 +3,7 @@
   "name": "cody-ai",
   "private": true,
   "displayName": "Cody: AI Code Assistant",
-  "version": "1.69.0+0",
+  "version": "1.69.0+1",
   "publisher": "sourcegraph",
   "license": "Apache-2.0",
   "icon": "resources/sourcegraph.png",

vscode/src/workflow/workflow-executor.ts

@@ -25,6 +25,7 @@ import {
     type WorkflowNode,
     type WorkflowNodes,
 } from '../../webviews/workflow/components/nodes/Nodes'
+import type { VariableNode } from '../../webviews/workflow/components/nodes/Variable_Node'
 import type { ExtensionToWorkflow } from '../../webviews/workflow/services/WorkflowProtocol'
 import { ChatController, type ChatSession } from '../chat/chat-view/ChatController'
 import { type ContextRetriever, toStructuredMentions } from '../chat/chat-view/ContextRetriever'
@@ -59,6 +60,8 @@ export interface IndexedExecutionContext {
             exitCode: string
         }
     >
+    variableValues?: Map<string, string>
+    ifelseSkipPaths?: Map<string, Set<string>>
 }
 
 /**
@@ -91,10 +94,10 @@ export async function executeWorkflow(
         loopStates: new Map(),
         accumulatorValues: new Map(),
         cliMetadata: new Map(),
+        variableValues: new Map(),
+        ifelseSkipPaths: new Map(),
     }
 
-    const skipNodes = new Set<string>()
-
     // Calculate all inactive nodes
     const allInactiveNodes = new Set<string>()
     for (const node of nodes) {
@@ -113,7 +116,11 @@ export async function executeWorkflow(
     } as ExtensionToWorkflow)
 
     for (const node of sortedNodes) {
-        if (skipNodes.has(node.id)) {
+        const shouldSkip = Array.from(context.ifelseSkipPaths?.values() ?? []).some(skipNodes =>
+            skipNodes.has(node.id)
+        )
+
+        if (shouldSkip) {
             continue
         }
 
@@ -293,7 +300,22 @@ export async function executeWorkflow(
                 }
 
                 case NodeType.IF_ELSE: {
-                    result = await executeIfElseNode(context, node, skipNodes)
+                    result = await executeIfElseNode(context, node)
+                    break
+                }
+                case NodeType.VARIABLE: {
+                    const inputs = combineParentOutputsByConnectionOrder(node.id, context)
+                    const inputValue = node.data.content
+                        ? replaceIndexedInputs(node.data.content, inputs, context)
+                        : ''
+                    const {
+                        data: { variableName, initialValue },
+                    } = node as VariableNode
+                    let variableValue = context.variableValues?.get(variableName) || initialValue || ''
+                    variableValue = inputValue
+                    context.variableValues?.set(variableName, variableValue)
+
+                    result = variableValue
                     break
                 }
 
@@ -414,6 +436,15 @@ export function replaceIndexedInputs(
                 context.accumulatorValues?.get(varName) || ''
             )
         }
+
+        // Only replace variable variables that are explicitly defined
+        const variableVars = context.variableValues ? Array.from(context.variableValues.keys()) : []
+        for (const varName of variableVars) {
+            result = result.replace(
+                new RegExp(`\\$\{${varName}}(?!\\w)`, 'g'),
+                context.variableValues?.get(varName) || ''
+            )
+        }
     }
 
     return result
@@ -758,8 +789,7 @@ async function executeCodyOutputNode(
 
 async function executeIfElseNode(
     context: IndexedExecutionContext,
-    node: WorkflowNode | IfElseNode,
-    skipNodes: Set<string>
+    node: WorkflowNode | IfElseNode
 ): Promise<string> {
     let result = ''
     const parentEdges = context.edgeIndex.byTarget.get(node.id) || []
@@ -793,10 +823,23 @@ async function executeIfElseNode(
     }
 
     // Get paths and mark nodes to skip
+    context.ifelseSkipPaths?.set(node.id, new Set<string>())
     const edges = context.edgeIndex.bySource.get(node.id) || []
     const nonTakenPath = edges.find(edge => edge.sourceHandle === (hasResult ? 'false' : 'true'))
     if (nonTakenPath) {
-        const nodesToSkip = getInactiveNodes(edges, nonTakenPath.target)
+        // Initialize ifelseSkipPaths if it's undefined
+        if (!context.ifelseSkipPaths) {
+            context.ifelseSkipPaths = new Map<string, Set<string>>()
+        }
+
+        // Get or create the set of nodes to skip for this IfElse node
+        let skipNodes = context.ifelseSkipPaths?.get(node.id)
+
+        skipNodes = new Set<string>()
+        context.ifelseSkipPaths?.set(node.id, skipNodes)
+
+        const allEdges = Array.from(context.edgeIndex.byId.values())
+        const nodesToSkip = getInactiveNodes(allEdges, nonTakenPath.target)
         for (const nodeId of nodesToSkip) {
             skipNodes.add(nodeId)
         }

vscode/webviews/workflow/components/PropertyEditor.tsx

@@ -21,6 +21,7 @@ import type { LLMNode } from './nodes/LLM_Node'
 import type { LoopStartNode } from './nodes/LoopStart_Node'
 import { NodeType, type WorkflowNodes } from './nodes/Nodes'
 import type { SearchContextNode } from './nodes/SearchContext_Node'
+import type { VariableNode } from './nodes/Variable_Node'
 
 interface PropertyEditorProps {
     node: WorkflowNodes
@@ -340,20 +341,6 @@ export const PropertyEditor: React.FC<PropertyEditorProps> = ({ node, onUpdate,
                             required // Make it required for clarity
                         />
                     </div>
-                    {/* Future: Accumulation Type Dropdown */}
-                    {/* <div>
-            <Label htmlFor="accumulator-type">Accumulation Type (Future)</Label>
-            <Select>
-                <SelectTrigger className="tw-w-full">
-                    <SelectValue placeholder="Concatenate (Default)" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectItem value="concatenate">Concatenate</SelectItem>
-                    <SelectItem value="sum">Sum (Numbers)</SelectItem>
-                    <SelectItem value="custom">Custom (Future)</SelectItem>
-                </SelectContent>
-            </Select>
-        </div> */}
                     <div>
                         <Label htmlFor="accumulator-initial-value">Input Text</Label>
                         <Textarea
@@ -380,6 +367,33 @@ export const PropertyEditor: React.FC<PropertyEditorProps> = ({ node, onUpdate,
                     />
                 </div>
             )}
+            {node.type === NodeType.VARIABLE && (
+                <div className="tw-flex tw-flex-col tw-gap-4">
+                    <div>
+                        <Label htmlFor="variable-name">Variable Name</Label>
+                        <Input
+                            id="variable-name"
+                            value={(node as VariableNode).data.variableName || ''}
+                            onChange={(e: { target: { value: any } }) =>
+                                onUpdate(node.id, { variableName: e.target.value })
+                            }
+                            placeholder="Unique variable name to access variable value (e.g., userInput)"
+                            required // Make it required for clarity
+                        />
+                    </div>
+                    <div>
+                        <Label htmlFor="variable-initial-value">Initial Value</Label>
+                        <Textarea
+                            id="node-input"
+                            value={node.data.content || ''}
+                            onChange={(e: { target: { value: any } }) =>
+                                onUpdate(node.id, { content: e.target.value })
+                            }
+                            placeholder="Enter input text... (use ${1}, ${2} and so on for positional inputs)"
+                        />
+                    </div>
+                </div>
+            )}
         </div>
     )
 }

vscode/webviews/workflow/components/RightSidebar.tsx

@@ -103,8 +103,9 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({
                                             <div className="tw-w-4 tw-mr-2">
                                                 {node.id === executingNodeId && (
                                                     <Loader2Icon
-                                                        strokeWidth={1.5}
-                                                        size={16}
+                                                        stroke="#33ffcc"
+                                                        strokeWidth={3}
+                                                        size={24}
                                                         className="tw-h-4 tw-w-4 tw-animate-spin"
                                                     />
                                                 )}

vscode/webviews/workflow/components/WorkflowSidebar.tsx

@@ -150,6 +150,13 @@ export const WorkflowSidebar: React.FC<WorkflowSidebarProps> = ({
                             >
                                 Accumulator
                             </Button>
+                            <Button
+                                onClick={() => onNodeAdd('Variable', NodeType.VARIABLE)} // ADD VARIABLE BUTTON
+                                className="tw-w-full"
+                                variant="outline"
+                            >
+                                Variable
+                            </Button>
                         </div>
                     </AccordionContent>
                 </AccordionItem>

vscode/webviews/workflow/components/hooks/workflowExecution.ts

@@ -59,6 +59,22 @@ export const useWorkflowExecution = (
             return
         }
 
+        const updatedNodes = nodes.map(node => {
+            if (node.type === NodeType.PREVIEW) {
+                return {
+                    ...node,
+                    data: {
+                        ...node.data,
+                        content: '',
+                        tokenCount: 0,
+                    },
+                }
+            }
+            return node
+        })
+        setNodes(updatedNodes)
+        setNodeResults(new Map())
+
         setNodeErrors(new Map())
         const controller = new AbortController()
         setAbortController(controller)
@@ -67,9 +83,9 @@ export const useWorkflowExecution = (
 
         vscodeAPI.postMessage({
             type: 'execute_workflow',
-            data: { nodes, edges },
+            data: { nodes: updatedNodes, edges },
         })
-    }, [nodes, edges, vscodeAPI])
+    }, [nodes, edges, setNodes, vscodeAPI])
 
     const onAbort = useCallback(() => {
         if (abortController) {

vscode/webviews/workflow/components/nodes/Accumulator_Node.tsx

@@ -13,7 +13,6 @@ export type AccumulatorNode = Omit<WorkflowNode, 'data'> & {
     data: BaseNodeData & {
         variableName: string
         initialValue?: string
-        content?: string
     }
 }
 

vscode/webviews/workflow/components/nodes/Nodes.tsx

@@ -12,6 +12,7 @@ import { LoopStartNode } from './LoopStart_Node'
 import { PreviewNode } from './Preview_Node'
 import { SearchContextNode } from './SearchContext_Node'
 import { TextNode } from './Text_Node'
+import { VariableNode } from './Variable_Node'
 
 // Core type definitions
 export enum NodeType {
@@ -24,6 +25,7 @@ export enum NodeType {
     LOOP_START = 'loop-start',
     LOOP_END = 'loop-end',
     ACCUMULATOR = 'accumulator',
+    VARIABLE = 'variable',
     IF_ELSE = 'if-else',
 }
 
@@ -84,6 +86,7 @@ export type WorkflowNodes =
     | LoopStartNode
     | LoopEndNode
     | AccumulatorNode
+    | VariableNode
     | IfElseNode
 
 /**
@@ -298,4 +301,5 @@ export const nodeTypes = {
     [NodeType.LOOP_END]: LoopEndNode,
     [NodeType.ACCUMULATOR]: AccumulatorNode,
     [NodeType.IF_ELSE]: IfElseNode,
+    [NodeType.VARIABLE]: VariableNode,
 }

vscode/webviews/workflow/components/nodes/Variable_Node.tsx

@@ -0,0 +1,58 @@
+import { Handle, Position } from '@xyflow/react'
+import {
+    type BaseNodeData,
+    type BaseNodeProps,
+    NodeType,
+    type WorkflowNode,
+    getBorderColor,
+    getNodeStyle,
+} from './Nodes'
+
+export type VariableNode = Omit<WorkflowNode, 'data'> & {
+    type: NodeType.VARIABLE
+    data: BaseNodeData & {
+        variableName: string
+        initialValue?: string
+    }
+}
+
+export const VariableNode: React.FC<BaseNodeProps> = ({ data, selected }) => (
+    <div
+        style={getNodeStyle(
+            NodeType.INPUT,
+            data.moving,
+            selected,
+            data.executing,
+            data.error,
+            data.active,
+            data.interrupted
+        )}
+    >
+        <Handle type="target" position={Position.Top} />
+        <div className="tw-flex tw-flex-col">
+            <div
+                className="tw-text-center tw-py-1 tw-mb-2 tw-rounded-t-sm tw-font-bold"
+                style={{
+                    background: `linear-gradient(to top, #1e1e1e, ${getBorderColor(NodeType.INPUT, {
+                        error: data.error,
+                        executing: data.executing,
+                        moving: data.moving,
+                        selected,
+                        interrupted: data.interrupted,
+                        active: data.active,
+                    })})`,
+                    color: '#1e1e1e',
+                    marginLeft: '-0.5rem',
+                    marginRight: '-0.5rem',
+                    marginTop: '-0.5rem',
+                }}
+            >
+                VARIABLE
+            </div>
+            <div className="tw-flex tw-items-center tw-justify-center">
+                <span>{data.title}</span>
+            </div>
+        </div>
+        <Handle type="source" position={Position.Bottom} />
+    </div>
+)