Storing connection typing and styling changes before implementation in state

app/w/[id]/workflow.tsx

@@ -96,7 +96,8 @@ const edgeTypes: EdgeTypes = { custom: CustomEdge }
  */
 function WorkflowCanvas() {
   const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null)
-  const { isExecuting, executionResult, handleRunWorkflow } = useWorkflowExecution()
+  const { isExecuting, executionResult, handleRunWorkflow } =
+    useWorkflowExecution()
 
   const {
     blocks,
@@ -222,9 +223,9 @@ function WorkflowCanvas() {
     setSelectedBlockId(null)
   }, [])
 
-  // useEffect(() => {
-  //   initializeStateLogger()
-  // }, [])
+  useEffect(() => {
+    initializeStateLogger()
+  }, [])
 
   /**
    * CSS keyframe animation for the dashed line effect

app/w/components/workflow-block/components/sub-block/components/short-input.tsx

@@ -66,7 +66,7 @@ export function ShortInput({
       ref={inputRef}
       className={cn(
         'w-full placeholder:text-muted-foreground/50 allow-scroll',
-        isConnecting && 'border-blue-500'
+        isConnecting && 'ring-2 ring-blue-500 ring-offset-2'
       )}
       placeholder={placeholder ?? ''}
       type="text"

stores/workflow/types.ts

@@ -15,10 +15,19 @@ export interface BlockState {
   outputType: OutputType
 }
 
+export interface Connection {
+  id: string
+  blockId: string
+  outputType: string
+  startIndex: number
+  endIndex: number
+}
+
 export interface SubBlockState {
   id: string
   type: SubBlockType
   value: string | number | string[][] | null
+  connections?: Connection[]
 }
 
 export interface WorkflowState {