diff --git a/web/app/math/vec.js b/modules/math/vec.js
similarity index 98%
rename from web/app/math/vec.js
rename to modules/math/vec.js
index e0e15ea2..ab49a4f5 100644
--- a/web/app/math/vec.js
+++ b/modules/math/vec.js
@@ -193,6 +193,10 @@ export function polynomial(coefs, vectors) {
   return out;
 }
 
+export function fromXYZ({x, y, z}) {
+  return [x, y, z];
+}
+
 export const AXIS_X3 = [1,0,0];
 export const AXIS_Y3 = [0,1,0];
 export const AXIS_Z3 = [0,0,1];
diff --git a/modules/scene/objects/meshLine.js b/modules/scene/objects/meshLine.js
index d090c994..92342879 100644
--- a/modules/scene/objects/meshLine.js
+++ b/modules/scene/objects/meshLine.js
@@ -1,4 +1,4 @@
-import * as vec from '../../../web/app/math/vec';
+import * as vec from 'math/vec';
 import {perpendicularVector} from '../../../web/app/math/math';
 import {Face3, Geometry, Vector3} from 'three';
 
diff --git a/modules/scene/objects/scalableLine.js b/modules/scene/objects/scalableLine.js
index 21ecf465..285f1592 100644
--- a/modules/scene/objects/scalableLine.js
+++ b/modules/scene/objects/scalableLine.js
@@ -1,6 +1,6 @@
 import {Face3, FaceColors, Geometry, Mesh, MeshBasicMaterial, MeshPhongMaterial} from 'three';
 import {advancePseudoFrenetFrame, frenetFrame, pseudoFrenetFrame} from '../../../web/app/brep/geom/curves/frenetFrame';
-import * as vec from '../../../web/app/math/vec';
+import * as vec from 'math/vec';
 import {viewScaleFactor} from '../scaleHelper';
 import {arrToThree} from 'math/vectorAdapters';
 import {ORIGIN} from '../../../web/app/math/l3space';
diff --git a/modules/scene/sceneSetup.js b/modules/scene/sceneSetup.js
index 31db82de..ba7e156b 100644
--- a/modules/scene/sceneSetup.js
+++ b/modules/scene/sceneSetup.js
@@ -173,8 +173,11 @@ export default class SceneSetUp {
     return raycaster;
   }
   
-  raycast(event, objects) {
-    let raycaster = this.createRaycaster(event.offsetX, event.offsetY);
+  raycast(event, objects, logInfoOut = null) {
+    const raycaster = this.createRaycaster(event.offsetX, event.offsetY);
+    if (logInfoOut !== null) {
+      logInfoOut.ray = raycaster.ray
+    }
     return raycaster.intersectObjects( objects, true );
   }
 
diff --git a/modules/ui/components/controls/Field.jsx b/modules/ui/components/controls/Field.jsx
index 58c77e97..5fe76d76 100644
--- a/modules/ui/components/controls/Field.jsx
+++ b/modules/ui/components/controls/Field.jsx
@@ -3,6 +3,6 @@ import React from 'react';
 import ls from './Field.less'
 import cx from 'classnames';
 
-export default function Field({active, ...props}) {
-  return <div className={cx(ls.root, active&&ls.active)} {...props} />
+export default function Field({active, name, ...props}) {
+  return <div className={cx(ls.root, active&&ls.active)} data-field-name={name} {...props} />
 }
diff --git a/modules/voxels/octree.js b/modules/voxels/octree.js
index 625d4130..3d721c52 100644
--- a/modules/voxels/octree.js
+++ b/modules/voxels/octree.js
@@ -1,4 +1,4 @@
-import * as vec from "../../web/app/math/vec";
+import * as vec from "math/vec";
 
 export class Node {
 
diff --git a/test/coreTests/subjects/modellerTPI.js b/test/coreTests/subjects/modellerTPI.js
index 9c1f1f07..132294ad 100644
--- a/test/coreTests/subjects/modellerTPI.js
+++ b/test/coreTests/subjects/modellerTPI.js
@@ -53,7 +53,7 @@ export default ctx => {
   }
   
   function select(from, to) {
-    ctx.services.pickControl.pickFromRay(from, to, ALL_EXCLUDING_SOLID_KINDS);
+    ctx.services.pickControl.simulatePickFromRay(from, to);
   }
 
   function selectFirst(type) {
diff --git a/test/coreTests/subjects/sketcherTPI.js b/test/coreTests/subjects/sketcherTPI.js
index d023fa86..6a7da9b6 100644
--- a/test/coreTests/subjects/sketcherTPI.js
+++ b/test/coreTests/subjects/sketcherTPI.js
@@ -1,26 +1,9 @@
 import * as sketcher_utils from '../utils/sketcherUtils'
-import {decapitalize} from '../../../modules/gems/capitalize';
 import {genSerpinskiImpl} from '../../../web/app/utils/genSerpinski';
 import {distance} from '../../../web/app/math/math';
 
 export function createSubjectFromInPlaceSketcher(ctx) {
-  let actions = {};
-  for (const actionId of Object.keys(ctx.streams.action.state)) {
-    if (actionId.startsWith('sketch')) {
-      let oldId = decapitalize(actionId.substring(6));
-      actions[oldId] = {
-        action: () =>  ctx.services.action.run(actionId)
-      };
-      actions.addBezierCurve = actions.addCubicBezierSpline;
-    }
-  }
-
-  const oldStyleSketcherApp = {
-    viewer: ctx.services.sketcher.inPlaceEditor.viewer,
-    actions
-  };
-  
-  return createSketcherTPI(oldStyleSketcherApp);
+  return createSketcherTPI(ctx.services.sketcher.inPlaceEditor.sketcherAppContext);
 }
 
 export function createSketcherTPI(context) {
diff --git a/test/coreTests/utils/sketcherUtils.js b/test/coreTests/utils/sketcherUtils.js
index 138e4229..4e98c6ea 100644
--- a/test/coreTests/utils/sketcherUtils.js
+++ b/test/coreTests/utils/sketcherUtils.js
@@ -73,7 +73,7 @@ export function addArc(ctx, cX, cY, aX, aY, bX, bY) {
   [bX, bY] = modelToScreen(ctx.viewer, bX, bY);
   [cX, cY] = modelToScreen(ctx.viewer, cX, cY);
 
-  ctx.actions['addArc'].action();
+  ctx.actions.ArcTool.invoke(ctx);
 
   moveAndClickXY(ctx, cX, cY);
   moveAndClickXY(ctx, aX, aY);
@@ -166,12 +166,12 @@ export class TestSegment {
   }
 }
 
-export function modelToScreen(x, y) {
-  if (this.screenToModelMatrix) {
-    let modelToScreenMx = this.screenToModelMatrix.invert();
+export function modelToScreen(viewer, x, y) {
+  if (viewer.screenToModelMatrix) {
+    let modelToScreenMx = viewer.screenToModelMatrix.invert();
     [x, y] = modelToScreenMx.apply3([x, y, 0]);
   }
-  x /= this.retinaPxielRatio;
-  y = (this.canvas.height - y) / this.retinaPxielRatio;
+  x /= viewer.retinaPxielRatio;
+  y = (viewer.canvas.height - y) / viewer.retinaPxielRatio;
   return [x, y];
 }
\ No newline at end of file
diff --git a/test/cypress/integration/part3d/wizards.spec.js b/test/cypress/integration/part3d/wizards.spec.js
index 1cc0d5a3..948b257d 100644
--- a/test/cypress/integration/part3d/wizards.spec.js
+++ b/test/cypress/integration/part3d/wizards.spec.js
@@ -16,13 +16,37 @@ import {defineCypressTests} from "../../../coreTests/defineCypress";
 describe("Wizrds", () => {
 
 
-  afterEach(() => {
-    cy.screenshot();
+  beforeEach(() => {
+    cy.openModeller();
   });
 
-  it("plane wizrd should open", () => {
-    createDatum();
+  // afterEach(() => {
+  //   cy.screenshot();
+  // });
 
+  it("plane wizard should open", () => {
+    cy.getActionButton('PLANE').click();
+    cy.get('.wizard').should('have.attr', 'data-operation-id', 'PLANE');
+    cy.getActiveWizardField('depth').find('input').type('100');
+    cy.get('.wizard .dialog-ok').click();
+    cy.selectRaycasting([-119, 29, 167], [23, -15, 33])
+  });
+
+  it("extrube wizard should work", () => {
+    cy.getActionButton('PLANE').click();
+    cy.get('.wizard').should('have.attr', 'data-operation-id', 'PLANE');
+    cy.getActiveWizardField('depth').find('input').type('100');
+    cy.get('.wizard .dialog-ok').click();
+    cy.selectRaycasting([-119, 29, 167], [23, -15, 33]);
+    cy.openSketcher().then(sketcher => {
+      sketcher.addRectangle(0, 0, 80, 100);
+      cy.commitSketch();
+    });
+    cy.getActionButton('EXTRUDE').click();
+    cy.get('.wizard .dialog-ok').click();
+    cy.selectRaycasting([-18, 67, 219], [120, 25, 81]);
+    cy.get('.float-view-btn[data-view="selection"]').click();
+    cy.get('.selection-view [data-entity="face"] li').should('have.text', 'S:1/F:5');
 
   });
 
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index ca4d256f..f69ae04e 100644
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -1,25 +1,38 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+import modellerUISubject from "../../coreTests/subjects/modellerTPI";
+
+
+Cypress.Commands.add("openModeller", () => {
+  return cy.visit("http://localhost:3000?test&LOG.PICK=true");;
+});
+
+
+Cypress.Commands.add("getActionButton", (actionId) => {
+  return cy.get(`[data-action-id='${actionId}']`);
+});
+
+
+Cypress.Commands.add("getActiveWizardField", (fieldName) => {
+
+  return cy.get(`.wizard [data-field-name='${fieldName}']`);
+
+});
+
+Cypress.Commands.add("selectRaycasting", (from, to) => {
+  return cy.window().then(win => {
+    win.__CAD_APP.services.pickControl.simulatePickFromRay(from, to);
+    win.__DEBUG__.AddSegment3(from, to);
+  });
+});
+
+Cypress.Commands.add("openSketcher", () => {
+  return cy.getModellerTPI().then(tpi => tpi.openSketcher());
+});
+
+Cypress.Commands.add("commitSketch", () => {
+  return cy.getModellerTPI().then(tpi => tpi.commitSketch());
+});
+
+
+Cypress.Commands.add("getModellerTPI", () => {
+  return cy.window().then(win => modellerUISubject(win.__CAD_APP));
+});
diff --git a/web/app/brep/geom/curves/bezierCubic.js b/web/app/brep/geom/curves/bezierCubic.js
index 79bd78a2..a23b95fd 100644
--- a/web/app/brep/geom/curves/bezierCubic.js
+++ b/web/app/brep/geom/curves/bezierCubic.js
@@ -1,4 +1,4 @@
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 
 export function cubicBezierPoint(p0, p1, p2, p3, t) {
   const mt = 1 - t;
diff --git a/web/app/brep/geom/curves/boundedCurve.js b/web/app/brep/geom/curves/boundedCurve.js
index 315a2735..a83f6639 100644
--- a/web/app/brep/geom/curves/boundedCurve.js
+++ b/web/app/brep/geom/curves/boundedCurve.js
@@ -1,4 +1,4 @@
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 import InvertedCurve from './invertedCurve';
 
 export default class BoundedCurve {
diff --git a/web/app/brep/geom/curves/closestPoint.js b/web/app/brep/geom/curves/closestPoint.js
index 4e14b13f..3a3fac0c 100644
--- a/web/app/brep/geom/curves/closestPoint.js
+++ b/web/app/brep/geom/curves/closestPoint.js
@@ -1,4 +1,4 @@
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 import newtonIterations, {newtonIterationsOnInterval} from './newtonIterations';
 import {curveTessParams} from '../impl/curve/curve-tess';
 
diff --git a/web/app/brep/geom/curves/cubicHermiteIntepolation.js b/web/app/brep/geom/curves/cubicHermiteIntepolation.js
index b608552b..0e540ea5 100644
--- a/web/app/brep/geom/curves/cubicHermiteIntepolation.js
+++ b/web/app/brep/geom/curves/cubicHermiteIntepolation.js
@@ -1,4 +1,4 @@
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 import {cubicBezierDer1, cubicBezierDer2, cubicBezierPoint} from './bezierCubic';
 import {closestToCurveParam} from './closestPoint';
 import InvertedCurve from './invertedCurve';
diff --git a/web/app/brep/geom/curves/frenetFrame.js b/web/app/brep/geom/curves/frenetFrame.js
index 6227f02c..10eee36a 100644
--- a/web/app/brep/geom/curves/frenetFrame.js
+++ b/web/app/brep/geom/curves/frenetFrame.js
@@ -1,4 +1,4 @@
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 import {perpendicularVector} from '../../../math/math';
 
 export function frenetFrame(D1, D2) {
diff --git a/web/app/brep/geom/curves/intersectionCurve.js b/web/app/brep/geom/curves/intersectionCurve.js
index c175d873..e455649a 100644
--- a/web/app/brep/geom/curves/intersectionCurve.js
+++ b/web/app/brep/geom/curves/intersectionCurve.js
@@ -1,6 +1,6 @@
 import {TOLERANCE, veq3} from '../tolerance';
 import {surfaceClosestParam} from '../impl/nurbs-ext';
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 import CubicHermiteInterpolation from './cubicHermiteIntepolation';
 import InvertedCurve from './invertedCurve';
 import {genericCurveSplit} from './boundedCurve';
diff --git a/web/app/brep/geom/curves/invertedCurve.js b/web/app/brep/geom/curves/invertedCurve.js
index c3e6c635..9685ffff 100644
--- a/web/app/brep/geom/curves/invertedCurve.js
+++ b/web/app/brep/geom/curves/invertedCurve.js
@@ -1,4 +1,4 @@
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 
 export default class InvertedCurve {
 
diff --git a/web/app/brep/geom/impl/curve/curve-tess.js b/web/app/brep/geom/impl/curve/curve-tess.js
index 235684d7..71bf5bef 100644
--- a/web/app/brep/geom/impl/curve/curve-tess.js
+++ b/web/app/brep/geom/impl/curve/curve-tess.js
@@ -1,4 +1,4 @@
-import * as vec from "../../../../math/vec";
+import * as vec from "math/vec";
 
 export default function curveTess(curve, min, max, tessTol, scale) {
   return curveTessParams(curve, min, max, tessTol, scale).map(u => curve.point(u));
diff --git a/web/app/brep/geom/impl/curve/curves-isec.js b/web/app/brep/geom/impl/curve/curves-isec.js
index 8af2b1cf..d5c4e7d4 100644
--- a/web/app/brep/geom/impl/curve/curves-isec.js
+++ b/web/app/brep/geom/impl/curve/curves-isec.js
@@ -1,4 +1,4 @@
-import * as vec from "../../../../math/vec";
+import * as vec from "math/vec";
 import {TOLERANCE, TOLERANCE_SQ} from '../../tolerance';
 import * as math from  '../../../../math/math'
 import {fmin_bfgs} from "../../../../math/optim";
diff --git a/web/app/brep/geom/impl/nurbs-ext.js b/web/app/brep/geom/impl/nurbs-ext.js
index 4ed9ac41..406a9c77 100644
--- a/web/app/brep/geom/impl/nurbs-ext.js
+++ b/web/app/brep/geom/impl/nurbs-ext.js
@@ -1,4 +1,4 @@
-import * as vec from "../../../math/vec";
+import * as vec from "math/vec";
 import * as math from  '../../../math/math'
 import {eqEps, TOLERANCE, TOLERANCE_01, TOLERANCE_SQ} from '../tolerance';
 import {fmin_bfgs} from "../../../math/optim";
diff --git a/web/app/brep/geom/intersection/surfaceSurface.js b/web/app/brep/geom/intersection/surfaceSurface.js
index 5b40c30a..dd07a91c 100644
--- a/web/app/brep/geom/intersection/surfaceSurface.js
+++ b/web/app/brep/geom/intersection/surfaceSurface.js
@@ -1,7 +1,7 @@
 import {NUMERICAL_SOLVE_TOL, TOLERANCE, TOLERANCE_01, TOLERANCE_SQ} from '../tolerance';
 import {curveDomain, curvePoint, meshesIntersect, surfaceMaxDegree} from '../impl/nurbs-ext';
 import {IntersectionCurve} from '../curves/intersectionCurve';
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 
 export function surfaceIntersect(surfaceA, surfaceB) {
   const tessA = verb.eval.Tess.rationalSurfaceAdaptive(surfaceA);
diff --git a/web/app/brep/io/brepIO.js b/web/app/brep/io/brepIO.js
index 0c49cba7..0a361794 100644
--- a/web/app/brep/io/brepIO.js
+++ b/web/app/brep/io/brepIO.js
@@ -1,7 +1,7 @@
 import BrepBuilder, {createBoundingSurfaceFrom2DPoints, createBoundingSurfaceFromBBox} from '../brep-builder';
 import VertexFactory from '../vertexFactory';
 import NurbsSurface from '../geom/surfaces/nurbsSurface';
-import * as vec from '../../math/vec';
+import * as vec from 'math/vec';
 import {BrepSurface} from '../geom/surfaces/brepSurface';
 import {Plane} from '../geom/impl/plane';
 import Vector from '../../../../modules/math/vector';
diff --git a/web/app/cad/actions/ActionButtonBehavior.jsx b/web/app/cad/actions/ActionButtonBehavior.jsx
index e8a9796d..a03e5ad0 100644
--- a/web/app/cad/actions/ActionButtonBehavior.jsx
+++ b/web/app/cad/actions/ActionButtonBehavior.jsx
@@ -18,6 +18,7 @@ export function ActionButtonBehavior({children, actionId}) {
   const actionService = ctx.services.action;
 
   return children({
+    'data-action-id': actionId,
     onClick: e => actionService.run(actionId, e),
     onMouseEnter: e => {
       updateCoords(e);
diff --git a/web/app/cad/craft/wizard/components/Wizard.jsx b/web/app/cad/craft/wizard/components/Wizard.jsx
index 7febdbca..8b09a206 100644
--- a/web/app/cad/craft/wizard/components/Wizard.jsx
+++ b/web/app/cad/craft/wizard/components/Wizard.jsx
@@ -60,6 +60,8 @@ export default class Wizard extends React.Component {
                    onClose={this.cancel}
                    onKeyDown={this.onKeyDown}
                    setFocus={this.focusFirstInput}
+                   className='Wizard'
+                   data-operation-id={operation.id}
                    controlButtons={<>
                      <WindowControlButton title='help' onClick={(e) => DocumentationTopic$.next({
                        topic: operation.id,
@@ -74,8 +76,8 @@ export default class Wizard extends React.Component {
       </FormContext.Provider>
       <Stack>
         <ButtonGroup>
-          <Button onClick={this.cancel}>Cancel</Button>
-          <Button type='accent' onClick={this.onOK}>OK</Button>
+          <Button className='dialog-cancel' onClick={this.cancel}>Cancel</Button>
+          <Button className='dialog-ok' type='accent' onClick={this.onOK}>OK</Button>
         </ButtonGroup>
         {this.state.hasError && <div className={ls.errorMessage}>
           {this.state.algorithmError && <span>
diff --git a/web/app/cad/craft/wizard/components/form/EntityList.jsx b/web/app/cad/craft/wizard/components/form/EntityList.jsx
index 7b9af5c7..b6477a5a 100644
--- a/web/app/cad/craft/wizard/components/form/EntityList.jsx
+++ b/web/app/cad/craft/wizard/components/form/EntityList.jsx
@@ -24,7 +24,7 @@ export default class EntityList extends React.Component {
     if (!Array.isArray(value)) {
       value = value ? asArray(value) : EMPTY_ARRAY;
     }
-    return <Field active={active} onClick={setActive}>
+    return <Field active={active} name={name} onClick={setActive}>
       <Label>{label||camelCaseSplitToStr(name)}:</Label> 
       <div>{value.length === 0 ? 
         <span className={ls.emptySelection}>{placeholder || '<not selected>'}</span> :
diff --git a/web/app/cad/craft/wizard/components/form/Form.jsx b/web/app/cad/craft/wizard/components/form/Form.jsx
index 8d36e7fc..c2bf685f 100644
--- a/web/app/cad/craft/wizard/components/form/Form.jsx
+++ b/web/app/cad/craft/wizard/components/form/Form.jsx
@@ -14,7 +14,7 @@ export function Group({children}) {
 
 export function formField(Control) {
   return function FormPrimitive({label, name, active, setActive, ...props}) {
-    return <Field active={active} onFocus={setActive} onClick={setActive}>
+    return <Field active={active} name={name} onFocus={setActive} onClick={setActive}>
       <Label>{label || camelCaseSplitToStr(name)}</Label>
       <Control {...props} />
     </Field>;
diff --git a/web/app/cad/debugPlugin.js b/web/app/cad/debugPlugin.js
index 1e01df96..e1c0248a 100644
--- a/web/app/cad/debugPlugin.js
+++ b/web/app/cad/debugPlugin.js
@@ -3,7 +3,7 @@ import {brepFaceToGeom, surfaceToThreeGeom} from './scene/wrappers/brepSceneObje
 import {createSolidMaterial} from './scene/wrappers/sceneObject';
 import DPR from 'dpr';
 import Vector from 'math/vector';
-import * as vec from '../math/vec';
+import * as vec from 'math/vec';
 import React from 'react';
 import {readSketchFloat} from './sketch/sketchReader';
 import {toLoops} from '../brep/io/brepLoopsFormat';
diff --git a/web/app/cad/dom/components/FloatView.jsx b/web/app/cad/dom/components/FloatView.jsx
index 651a5bbb..74fa766c 100644
--- a/web/app/cad/dom/components/FloatView.jsx
+++ b/web/app/cad/dom/components/FloatView.jsx
@@ -24,18 +24,26 @@ export default class FloatView extends React.Component {
 
   render() {
     let {views, getDescriptor} = this.props;
-    
+
+    function renderedIcon(icon) {
+      if (typeof icon === 'string') {
+        return <Fa fw icon={icon}/>;
+      }  else {
+        const I = icon;
+        return <I />;
+      }
+    }
+
     function view(id) {
       let {title, icon, Component} = getDescriptor(id);
-      return <Folder className={ls.folder} title={<span> <Fa fw icon={icon}/> {title}</span>}>
+
+
+      return <Folder className={ls.folder} title={<span> {renderedIcon(icon)} {title}</span>}>
         <div className={ls.folderContent}><Component/></div>
       </Folder>;
     }
 
-    function icon(id) {
-      let {Icon} = getDescriptor(id);
-      return <Icon />
-    }
+
 
     let selected = this.state.selected;
     
@@ -43,8 +51,10 @@ export default class FloatView extends React.Component {
       <div className={ls.tabs}>
         {views.map(tabId => <ToolButton pressed={selected === tabId} 
                                         key={tabId}
+                                        className='float-view-btn'
+                                        data-view={tabId}
                                         onClick={() => this.setState({selected: selected === tabId ? null : tabId})}>
-          {<Fa fw icon={getDescriptor(tabId).icon}/>}
+          {renderedIcon(getDescriptor(tabId).icon)}
         </ToolButton>)}
       </div>
       
diff --git a/web/app/cad/dom/components/FloatView.less b/web/app/cad/dom/components/FloatView.less
index f5d7d6c8..7b9262b4 100644
--- a/web/app/cad/dom/components/FloatView.less
+++ b/web/app/cad/dom/components/FloatView.less
@@ -2,6 +2,13 @@
 
 .root {
   display: flex;
+  svg {
+    path {
+      stroke: white;
+    }
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .tabs {
diff --git a/web/app/cad/dom/components/SelectionView.tsx b/web/app/cad/dom/components/SelectionView.tsx
new file mode 100644
index 00000000..ac9a9b38
--- /dev/null
+++ b/web/app/cad/dom/components/SelectionView.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {useStream} from "ui/effects";
+import {SELECTABLE_ENTITIES} from "../../scene/entityContextPlugin";
+
+
+export function SelectionView() {
+
+  const selections = [];
+  SELECTABLE_ENTITIES.forEach(entity => {
+    selections.push(useStream(ctx => ctx.streams.selection[entity]));
+  });
+
+
+  return <div className='selection-view'>
+
+    {SELECTABLE_ENTITIES.map((entity, i) => {
+
+      const selection = selections[i];
+
+      if (selection.length === 0) {
+        return null;
+      }
+
+
+      return <div>
+        <b>{entity}</b>
+        <ul data-entity={entity} key={entity} style={{marginLeft: 10}}>
+
+          {selection.map(id => <li>{id}</li>)}
+
+        </ul>
+      </div>
+
+    })}
+
+  </div>
+}
\ No newline at end of file
diff --git a/web/app/cad/exposure/exposure.js b/web/app/cad/exposure/exposure.js
index e607e067..6b2ac2f3 100644
--- a/web/app/cad/exposure/exposure.js
+++ b/web/app/cad/exposure/exposure.js
@@ -14,7 +14,7 @@ import BrepCurve from '../../brep/geom/curves/brepCurve';
 import {Plane} from '../../brep/geom/impl/plane';
 import pip from '../tess/pip';
 import {readShellEntityFromJson} from '../scene/wrappers/entityIO';
-import * as vec from '../../math/vec'
+import * as vec from 'math/vec'
 import NurbsSurface from '../../brep/geom/surfaces/nurbsSurface';
 
 
diff --git a/web/app/cad/part/uiConfigPlugin.js b/web/app/cad/part/uiConfigPlugin.js
index 7a0b447a..6b9e0993 100644
--- a/web/app/cad/part/uiConfigPlugin.js
+++ b/web/app/cad/part/uiConfigPlugin.js
@@ -7,6 +7,8 @@ import ObjectExplorer from '../craft/ui/ObjectExplorer';
 import React from 'react';
 import OperationHistory from '../craft/ui/OperationHistory';
 import Expressions from '../expressions/Expressions';
+import {SelectionView} from "../dom/components/SelectionView";
+import {GrSelect} from "react-icons/gr";
 
 export const STANDARD_MODE_HEADS_UP_TOOLBAR = ['DATUM_CREATE', 'PLANE', 'EditFace', 'EXTRUDE', 'CUT', 'REVOLVE', 'LOFT',
   '-', 'FILLET', '-', 'INTERSECTION', 'SUBTRACT', 'UNION'];
@@ -32,4 +34,5 @@ export function activate({services, streams}) {
   services.ui.registerFloatView('project', ObjectExplorer, 'Model', 'cubes');
   services.ui.registerFloatView('history', OperationHistory, 'Modifications', 'history');
   services.ui.registerFloatView('expressions', Expressions, 'Expressions', 'percent');
+  services.ui.registerFloatView('selection', SelectionView, 'Selection', GrSelect);
 }
\ No newline at end of file
diff --git a/web/app/cad/sandbox.js b/web/app/cad/sandbox.js
index 497fc44f..4af12548 100644
--- a/web/app/cad/sandbox.js
+++ b/web/app/cad/sandbox.js
@@ -1,5 +1,5 @@
 import {AXIS, Matrix3, ORIGIN} from '../math/l3space'
-import * as vec from '../math/vec'
+import * as vec from 'math/vec'
 import Vector from 'math/vector';
 import BrepBuilder from '../brep/brep-builder'
 import * as BREPPrimitives from '../brep/brep-primitives'
diff --git a/web/app/cad/scene/controls/pickControlPlugin.js b/web/app/cad/scene/controls/pickControlPlugin.js
index 41a43758..bf1290b1 100644
--- a/web/app/cad/scene/controls/pickControlPlugin.js
+++ b/web/app/cad/scene/controls/pickControlPlugin.js
@@ -2,6 +2,7 @@ import * as mask from 'gems/mask'
 import {getAttribute, setAttribute} from 'scene/objectData';
 import {FACE, EDGE, SKETCH_OBJECT, DATUM, SHELL, DATUM_AXIS, LOOP} from '../entites';
 import {LOG_FLAGS} from '../../logFlags';
+import * as vec from 'math/vec';
 
 export const PICK_KIND = {
   FACE: mask.type(1),
@@ -21,6 +22,8 @@ const DEFAULT_SELECTION_MODE = Object.freeze({
   datum: true  
 });
 
+let RayCastDebugInfo;
+
 export const ALL_EXCLUDING_SOLID_KINDS = PICK_KIND.FACE | PICK_KIND.SKETCH | PICK_KIND.EDGE | PICK_KIND.DATUM_AXIS | PICK_KIND.LOOP;
 
 export function activate(context) {
@@ -98,7 +101,7 @@ export function activate(context) {
   const deselectAll = () => services.marker.clear();
 
   function handlePick(event) {
-    let pickResults = services.viewer.raycast(event, services.cadScene.workGroup.children);
+    let pickResults = services.viewer.raycast(event, services.cadScene.workGroup.children, RayCastDebugInfo);
     traversePickResults(event, pickResults, ALL_EXCLUDING_SOLID_KINDS, pickHandler);
   }
 
@@ -107,6 +110,10 @@ export function activate(context) {
     return traversePickResults(event, pickResults, kind, pickHandler);
   }
 
+  function simulatePickFromRay(from3, to3, event = null) {
+    return pickFromRay(from3, to3, ALL_EXCLUDING_SOLID_KINDS, event);
+  }
+
   function pick(obj, event = null) {
     pickHandler(obj, event);
   }
@@ -136,8 +143,12 @@ export function activate(context) {
   }
   
   services.pickControl = {
-    setPickHandler, deselectAll, pick, pickFromRay
+    setPickHandler, deselectAll, pick, pickFromRay, simulatePickFromRay
   };
+
+  if (LOG_FLAGS.PICK) {
+    RayCastDebugInfo = {};
+  }
 }
 
 export function traversePickResults(event, pickResults, kind, visitor) {
@@ -210,5 +221,12 @@ function printPickInfo(model, rayCastData) {
     console.dir(rayCastData);
     let pt = rayCastData.point;
     console.log('POINT: ' + pt.x + ', ' + pt.y + ',' + pt.z);
+    if (RayCastDebugInfo && RayCastDebugInfo.ray) {
+      //generating test data
+      const BUFFER = 100;
+      const r = vec.fromXYZ(pt).map(Math.round);
+      const dir = vec._mul(vec.fromXYZ(RayCastDebugInfo.ray.direction), BUFFER);
+      console.log('cy.selectRaycasting(['+ vec.sub(r, dir).map(Math.round).join(', ') + '], [' + vec.add(r, dir).map(Math.round).join(', ') + '])');
+    }
   }
 }
\ No newline at end of file
diff --git a/web/app/cad/scene/viewer.js b/web/app/cad/scene/viewer.js
index a3a50f2c..5560b5ff 100644
--- a/web/app/cad/scene/viewer.js
+++ b/web/app/cad/scene/viewer.js
@@ -32,8 +32,8 @@ export default class Viewer {
     this.sceneSetup.lookAtObject(obj);
   }
   
-  raycast(event, objects) {
-    return this.sceneSetup.raycast(event, objects);
+  raycast(event, objects, logInfoOut) {
+    return this.sceneSetup.raycast(event, objects, logInfoOut);
   }
   
   customRaycast(from3, to3, objects) {
diff --git a/web/app/cad/scene/wrappers/brepSceneObject.js b/web/app/cad/scene/wrappers/brepSceneObject.js
index f4a010dc..92ace9bc 100644
--- a/web/app/cad/scene/wrappers/brepSceneObject.js
+++ b/web/app/cad/scene/wrappers/brepSceneObject.js
@@ -3,7 +3,7 @@ import {SceneEdge, SceneFace, SceneSolid} from './sceneObject';
 import brepTess from '../../tess/brep-tess';
 import tessellateSurface from '../../../brep/geom/surfaces/surfaceTess';
 import {setAttribute} from '../../../../../modules/scene/objectData';
-import * as vec from '../../../math/vec';
+import * as vec from 'math/vec';
 import {perpendicularVector} from '../../../math/math';
 
 const SMOOTH_RENDERING = true;
diff --git a/web/app/cad/sketch/sketchBoundaries.js b/web/app/cad/sketch/sketchBoundaries.js
index 4bdc7729..6d4faa66 100644
--- a/web/app/cad/sketch/sketchBoundaries.js
+++ b/web/app/cad/sketch/sketchBoundaries.js
@@ -1,5 +1,5 @@
 import {areEqual, circleFromPoints, distanceAB, radiusOfCurvature, TOLERANCE} from '../../math/math';
-import * as vec from '../../math/vec';
+import * as vec from 'math/vec';
 import {iteratePath} from '../cad-utils';
 import NurbsCurve from '../../brep/geom/curves/nurbsCurve';
 import {veqXYZ} from '../../brep/geom/tolerance';
diff --git a/web/app/math/math.js b/web/app/math/math.js
index 94e354bd..8ffc7376 100644
--- a/web/app/math/math.js
+++ b/web/app/math/math.js
@@ -1,7 +1,7 @@
 import Vector from 'math/vector';
 import BBox from './bbox'
-import * as vec from './vec';
-import {perp2d} from "./vec";
+import * as vec from 'math/vec';
+import {perp2d} from "math/vec";
 import {eqTol} from "../brep/geom/tolerance";
 
 export const TOLERANCE = 1E-6;
diff --git a/web/app/sketcher/constr/ANConstraints.js b/web/app/sketcher/constr/ANConstraints.js
index e0e5793e..8b8c5f82 100644
--- a/web/app/sketcher/constr/ANConstraints.js
+++ b/web/app/sketcher/constr/ANConstraints.js
@@ -5,7 +5,7 @@ import {COS_FN, Polynomial, POW_1_FN, POW_2_FN, POW_3_FN, SIN_FN} from "./polyno
 import {cubicBezierDer1, cubicBezierDer2, cubicBezierPoint} from "../../brep/geom/curves/bezierCubic";
 import {greaterThanConstraint, lessThanConstraint} from "./barriers";
 import {genericCurveStep} from "../../brep/geom/impl/nurbs-ext";
-import {_normalize} from "../../math/vec";
+import {_normalize} from "math/vec";
 import {
   AngleBetweenConstraintIcon,
   AngleConstraintIcon,
diff --git a/web/app/sketcher/constr/solver.js b/web/app/sketcher/constr/solver.js
index 2849e4df..0b2ece45 100644
--- a/web/app/sketcher/constr/solver.js
+++ b/web/app/sketcher/constr/solver.js
@@ -4,7 +4,7 @@ import QR from '../../math/qr'
 import LMOptimizer from '../../math/lm'
 import {ConstantWrapper, EqualsTo} from './solverConstraints'
 import {dog_leg} from '../../math/optim'
-import {newVector} from '../../math/vec';
+import {newVector} from 'math/vec';
 
 /** @constructor */
 function Param(value, objectParam) {
diff --git a/web/app/sketcher/shapes/dim.js b/web/app/sketcher/shapes/dim.js
index 8839488d..550aae65 100644
--- a/web/app/sketcher/shapes/dim.js
+++ b/web/app/sketcher/shapes/dim.js
@@ -1,5 +1,5 @@
 import * as math from '../../math/math'
-import * as vec from '../../math/vec'
+import * as vec from 'math/vec'
 import {DEG_RAD, lineLineIntersection2d, makeAngle0_360, pointToLineSignedDistance} from '../../math/math'
 import Vector from 'math/vector';
 import {Styles} from "../styles";
diff --git a/web/app/sketcher/shapes/nurbsObject.js b/web/app/sketcher/shapes/nurbsObject.js
index 3e9448e1..104b80ec 100644
--- a/web/app/sketcher/shapes/nurbsObject.js
+++ b/web/app/sketcher/shapes/nurbsObject.js
@@ -1,5 +1,5 @@
 import {SketchObject} from './sketch-object'
-import * as vec from '../../math/vec';
+import * as vec from 'math/vec';
 import {curveTessellate} from '../../brep/geom/impl/nurbs-ext';
 import {Ellipse} from "./ellipse";
 import {EndPoint} from "./point";
diff --git a/web/app/sketcher/shapes/textHelper.js b/web/app/sketcher/shapes/textHelper.js
index 925252c8..4ffab136 100644
--- a/web/app/sketcher/shapes/textHelper.js
+++ b/web/app/sketcher/shapes/textHelper.js
@@ -1,5 +1,5 @@
 import {_270, _90, makeAngle0_360, pointToLineSignedDistance} from "../../math/math";
-import {_negate} from "../../math/vec";
+import {_negate} from "math/vec";
 
 export class TextHelper {
 
diff --git a/web/app/sketcher/tools/dim.js b/web/app/sketcher/tools/dim.js
index a731efa5..6b20badd 100644
--- a/web/app/sketcher/tools/dim.js
+++ b/web/app/sketcher/tools/dim.js
@@ -13,7 +13,7 @@ import {isInstanceOf} from "../actions/matchUtils";
 import {Segment} from "../shapes/segment";
 import {DEFAULT_SEARCH_BUFFER} from "../viewer2d";
 import {distance} from "../../math/math";
-import {_negate, cross2d} from "../../math/vec";
+import {_negate, cross2d} from "math/vec";
 
 export class AddDimTool extends Tool {