diff --git a/DOCKER.md b/DOCKER.md
index 3cc94a44..9ff986af 100644
--- a/DOCKER.md
+++ b/DOCKER.md
@@ -21,7 +21,7 @@ docker run -it --device=/dev/ttyUSB0 --rm -p 8000:8000 laserweb4:dev
 ## Release
 You can run the current lw.comm-server version of the app in Docker using the commands below.
 
-**Warning:** This will bundle the current (head) [lw.comm-server head](https://github.com/LaserWeb/lw.comm-server/) Git version + the LW app bundled with that, it *does not* build the latest LW app from this repo! Use the 'dev' target for that.
+**Warning:** This will bundle the current (head) [lw.comm-server head](https://github.com/LaserWeb/lw.comm-server/) Git version + the LW app from this repo.
 
 - build release image:
 ```
diff --git a/Dockerfile b/Dockerfile
index a2d394f6..b35502ab 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,11 +1,11 @@
 #
 # ---- Base Node ----
-FROM node:16-bullseye AS base
+FROM node:22-bookworm AS base
 # set working directory
 WORKDIR /usr/src/app
 # Set up Apt, install build tooling and udev
 RUN apt update
-RUN apt install -y build-essential udev
+RUN apt install -y build-essential udev libudev-dev libusb-1.0-0-dev
 # Upgrade npm and set node options
 RUN npm install -g npm
 RUN npm set progress=false
@@ -19,12 +19,21 @@ FROM base AS comm-server
 #  (Currently use --force to allow for broken deps, this should be removed once the dep tree is fixed
 RUN npm install -g nodemon && npm install --force lw.comm-server@git+https://github.com/LaserWeb/lw.comm-server.git
 
-# ---- Release ----
-# This will use the git head version of lw.comm-server + the LW app version bundled with that.
-#  it DOES NOT build and serve the version of LaserWeb in this repo
 #
+# ---- build Laserweb ----
+FROM base as build-prod
+COPY package.json package-lock.json ./
+RUN npm ci --force
+COPY . .
+RUN npm run bundle-prod
+
+# ---- Release ----
+# This will use the git head version of lw.comm-server and Laserweb from the build stage
 FROM comm-server AS release
 WORKDIR /usr/src/app
+# Replace the bundled app with the freshly built Laserweb
+RUN rm -rf node_modules/lw.comm-server/app/
+COPY --from=build-prod /usr/src/app/dist /usr/src/app/node_modules/lw.comm-server/app/
 # define CMD
 CMD [ "node", "node_modules/lw.comm-server/server.js"]
 
diff --git a/src/components/com.js b/src/components/com.js
index a56c0641..a0fbfd74 100644
--- a/src/components/com.js
+++ b/src/components/com.js
@@ -4,12 +4,14 @@ import { connect } from 'react-redux';
 import { PanelGroup, Panel, Tooltip, OverlayTrigger, FormControl, InputGroup, ControlLabel, FormGroup, ButtonGroup, Label, Collapse, Badge, ButtonToolbar, Button, Glyphicon } from 'react-bootstrap';
 
 import { Input, TextField, NumberField, ToggleField, SelectField, Info } from './forms';
-import { runStatus } from './jog.js';
+import { runStatus, hasHomed } from './jog.js';
 import { setSettingsAttrs } from '../actions/settings';
 import { setComAttrs } from '../actions/com';
 import { setWorkspaceAttrs } from '../actions/workspace';
 // import { setGcode } from '../actions/gcode';
 import CommandHistory from './command-history';
+import { strftime } from '../lib/strftime.js'
+import { thumbnails } from './workspace.js'
 
 import { alert, prompt, confirm} from './laserweb';
 
@@ -17,20 +19,25 @@ import Icon from './font-awesome';
 
 import io from 'socket.io-client';
 var socket, connectVia, connectReset;
+var messageId = 1
+var feedOverrideVal = 100
+var spindleOverrideVal = 100
 var serverConnected = false;
 var machineConnected = false;
 var jobLines = 0;
+var jobProgress = 0;
 var jobStartTime = -1;
 var accumulatedJobTime = 0;
 var playing = false;
 var paused = false;
 var m0 = false;
 var laserTestOn = false;
+var laserTestOnCnt = 0;
 var firmware, fVersion, fDate;
 var xpos, ypos, zpos, apos;
 var xOffset, yOffset, zOffset, aOffset;
 
-export { xOffset, yOffset }
+export { xOffset, yOffset, serverConnected, socket }
 
 
 const formatPorts=(data)=>{
@@ -67,12 +74,16 @@ class Com extends React.Component {
         if (!serverConnected) {
             $('#connectS').removeClass('disabled');
             $('#disconnectS').addClass('disabled');
+            $('#restartKlippy').addClass('disabled');
+            $('#restartFirmware').addClass('disabled');
             if (!socket && !serverConnected) {
                 this.handleConnectServer();
             }
         } else {
             $('#connectS').addClass('disabled');
             $('#disconnectS').removeClass('disabled');
+            $('#restartKlippy').removeClass('disabled');
+            $('#restartFirmware').removeClass('disabled');
             if (!machineConnected) {
                 $('#connect').removeClass('disabled');
                 $('#disconnect').addClass('disabled');
@@ -81,6 +92,9 @@ class Com extends React.Component {
                 $('#disconnect').removeClass('disabled');
             }
         }
+        if (serverConnected && socket && socket.moonraker) {
+            socket.emit('getServerConfig');
+        }
     }
 
     handleConnectServer() {
@@ -89,12 +103,433 @@ class Com extends React.Component {
         let server = settings.comServerIP;
         CommandHistory.write('Connecting to Server @ ' + server, CommandHistory.INFO);
         //console.log('Connecting to Server ' + server);
-        socket = io('ws://' + server);
+        let addr = server.replace(/^((http|ws)s?:\/\/|)/, (w) => `ws${(w || location.protocol).indexOf('s') > -1 ? 's' : ''}://`);
+        if (settings.connectServerVia === 'Moonraker') {
+            if (socket) {
+                socket.disconnect();
+            }
+            addr = addr.replace(/^(wss?:\/\/[^\/]*)(.*)/, (_, ad, path) => `${ad}${ path || '/websocket'}`);
+            const moonraker = new WebSocket(addr);
+            const callbacks = new Map();
+            let statusInterval
+            let klipperState
+            const handle = {}
+            function send(method, params, callback) {
+                const id = `${method}:${messageId++}`;
+                if (typeof params === 'function') {
+                    callback = params;
+                    params = undefined;
+                }
+                moonraker.send(JSON.stringify({ jsonrpc: "2.0", method, params, id }));
+                if (callback) {
+                    callbacks.set(id, callback);
+                }
+            }
+            const recv = {
+                notify_proc_stat_update(data) {
+                    // console.log('notify_proc_stat_update', data);
+                },
+                notify_status_update(data) {
+                    if (!data || !data[0]) {
+                        return
+                    }
+                    const d = data[0]
+                    // console.log('notify_status_update',d);
+                    if (d.toolhead) {
+                        const t = d.toolhead
+                        if (t.homed_axes) {
+                            hasHomed(t.homed_axes === 'xyz' || (t.homed_axes === 'xy' && !that.props.settings.machineZEnabled))
+                        }
+                        if (t.axis_minimum && t.axis_maximum  && that.props.settings.machineSizeFromMachine) {
+                            const minX = t.axis_minimum[0]
+                            const minY = t.axis_minimum[1]
+                            const maxX = t.axis_maximum[0]
+                            const maxY = t.axis_maximum[1]
+                        
+                            dispatch(setSettingsAttrs({
+                                machineWidth: maxX - minX,
+                                machineHeight: maxY - minY,
+                                machineBottomLeftX: minX,
+                                machineBottomLeftY: minY,
+                            }));
+                        }
+                    }
+                    if (d.gcode_move) {
+                        const g = d.gcode_move
+                        if (g.speed_factor != null) {
+                            feedOverrideVal = Math.round(g.speed_factor * 100)
+                            handle.feedOverride(feedOverrideVal)
+                        }
+                        if (g.extrude_factor != null) {
+                            spindleOverrideVal = Math.round(g.extrude_factor * 100)
+                            handle.spindleOverride(spindleOverrideVal)
+                        }
+                        if (g.homing_origin) {
+                            const [x, y, z, a] = g.homing_origin
+                            handle.wOffset({ x, y, z, a })
+                        }
+                        if (g.gcode_position) {
+                            [xpos, ypos, zpos, apos] = g.gcode_position
+                            const x = parseFloat(xpos).toFixed(5).replace(/0{1,3}$/, '')
+                            const y = parseFloat(ypos).toFixed(5).replace(/0{1,3}$/, '')
+                            const z = parseFloat(zpos).toFixed(5).replace(/0{1,3}$/, '')
+                            const a = parseFloat(apos).toFixed(5).replace(/0{1,3}$/, '')
+                            $('#mX').html(x);
+                            $('#mY').html(y);
+                            $('#mZ').html(z);
+                            $('#mA').html(a);
+                        }
+                    }
+                    if (d.motion_report) {
+                        let [x, y, z] = d.motion_report.live_position
+                        dispatch(setWorkspaceAttrs({ cursorPos: [x-xOffset, y-yOffset, z-zOffset] }));
+                    }
+                    if (d.print_stats) {
+                        const p = d.print_stats
+                        if (klipperState === 'ready') {
+                            // standby  	The printer is standing by for a job to begin.
+                            // printing 	A job is currently printing.
+                            // paused   	The current print job is paused.
+                            // complete 	The last print job successfully finished.
+                            // error    	The last print job exited with an error.
+                            // cancelled 	THe last print job was cancelled by the user.
+                            const uStatus = p.state === 'standby' ? 'Idle' :
+                                p.state === 'printing' ? 'Run' :
+                                p.state === 'paused' ? 'Hold' :
+                                p.state === 'complete' ? 'Idle' :
+                                p.state === 'error' ? 'Alarm' :
+                                p.state === 'cancelled' ? 'Idle' :
+                                '';
+                            const rStatus = p.state === 'standby' ? 'stopped' :
+                                p.state === 'printing' ? 'running' :
+                                p.state === 'paused' ? 'm0' :
+                                p.state === 'complete' ? 'finished' :
+                                p.state === 'error' ? 'stopped' : // alert?
+                                p.state === 'cancelled' ? 'stopped' :
+                                '';
+                            updateStatus(`<${uStatus},`);
+                            ({ playing, paused, m0 } = runStatus(rStatus, true));
+                        }
+                        if (p.message) {
+                            CommandHistory.write(p.message, CommandHistory.INFO);
+                        }
+                    }
+                    if (d.virtual_sdcard) {
+                        const sd = d.virtual_sdcard
+                        if (sd.progress) {
+                            jobProgress = Math.floor(sd.progress*100+0.01)
+                            $('#queueCnt').html(`${jobProgress} %`);
+                        } else if (sd.progress == 0){
+                            $('#queueCnt').html('');
+                        }
+                    }
+                },
+                notify_klippy_ready() {
+                    console.log('notify_klippy_ready');
+                    emitter.getServerConfig();
+                },
+                notify_klippy_shutdown() {
+                    console.log('notify_klippy_shutdown');
+                    handle.connectStatus('Connect: shutdown');
+                    klipperState = 'shutdown'
+                    updateStatus('<Alarm,');
+                },
+                notify_klippy_disconnected() {
+                    console.log('notify_klippy_disconnected');
+                    handle.connectStatus('Connect: disconnected');
+                    klipperState = 'disconnected'
+                    updateStatus('<Alarm,');
+                },
+                notify_cpu_throttled() {
+                    console.log('notify_cpu_throttled');
+                },
+                notify_history_changed() {
+                    console.log('notify_history_changed');
+                },
+                notify_filelist_changed() {
+                    console.log('notify_filelist_changed');
+                },
+                notify_gcode_response(msgs) {
+                    for (let msg of msgs) {
+                        let color
+                        const type = msg.substring(0, 3)
+                        if (type === '!! ') {
+                            color = CommandHistory.DANGER
+                            msg = msg.substring(3)
+                        } else if (type === '// ') {
+                            color = CommandHistory.WARN
+                            msg = msg.substring(3)
+                        } else {
+                            color = CommandHistory.INFO
+                        }
+                        CommandHistory.write(msg, color);
+                    }
+                }
+            }
+            const emitter = {
+                getServerConfig() {
+                    send('server.info', (data) => {
+                        klipperState = data.klippy_state
+                        handle.serverConfig({ serverVersion: data.moonraker_version, apiVersion: data.api_version_string });
+                        send('printer.objects.subscribe', {
+                            objects: {
+                                gcode_move: ['gcode_position', 'homing_origin', 'speed_factor', 'extrude_factor'],
+                                motion_report: ['live_position'],
+                                print_stats: ['state', 'message'],
+                                toolhead: ['homed_axes', 'axis_minimum', 'axis_maximum'],
+                                virtual_sdcard: ['progress']
+                            }
+                        }, (data) => {
+                            recv.notify_status_update([data && data.status])
+                        });
+                        for (const msg of data.warnings) {
+                            CommandHistory.write(msg.message, CommandHistory.WARN);
+                        }
+                        for (const msg of data.missing_klippy_requirements) {
+                            CommandHistory.write(msg.message, CommandHistory.DANGER);
+                        }
+                        if (klipperState !== 'ready') {
+                            updateStatus('<Alarm,');
+                        }
+                    })
+                },
+                runCommand(script) {
+                    send('printer.gcode.script', { script });
+                },
+                jog(to) {
+                    const [axis,dist,feed] = to.split(',');
+                    const script = `SAVE_GCODE_STATE NAME=Laserweb\nG91\nG0 ${parseInt(feed) ? `F${feed} ` : ''}${axis}${dist}\nG90\nRESTORE_GCODE_STATE NAME=Laserweb`;
+                    send('printer.gcode.script', { script });
+                },
+                jogTo(data) {
+                    var xVal = (data.x !== undefined ? 'X' + parseFloat(data.x) : '');
+                    var yVal = (data.y !== undefined ? 'Y' + parseFloat(data.y) : '');
+                    var zVal = (data.z !== undefined ? 'Z' + parseFloat(data.z) : '');
+                    var mode = ((data.mode == 0) ? 0 : 1);
+                    var feed = (data.feed !== undefined ? 'F' + parseInt(data.feed) : '');
+                    const script = `SAVE_GCODE_STATE NAME=Laserweb\nG9${mode}\nG0 ${feed} ${xVal} ${yVal} ${zVal}\nG90\nRESTORE_GCODE_STATE NAME=Laserweb`;
+                    send('printer.gcode.script', { script });
+                },
+                feedOverride(data) {
+                    if (data === 0) {
+                        feedOverrideVal = 100;
+                    } else {
+                        if ((feedOverrideVal + data <= 200) && (feedOverrideVal + data >= 10)) {
+                            // valid range is 10..200, else ignore!
+                            feedOverrideVal += data;
+                        }
+                    }
+                    const script = `M220 S${feedOverrideVal}`;
+                    send('printer.gcode.script', { script });
+                },
+                spindleOverride(data) {
+                    if (data === 0) {
+                        spindleOverrideVal = 100;
+                    } else {
+                        if ((spindleOverrideVal + data <= 200) && (spindleOverrideVal + data >= 10)) {
+                            // valid range is 10..200, else ignore!
+                            spindleOverrideVal += data;
+                        }
+                    }
+                    const script = `M221 S${spindleOverrideVal}`;
+                    send('printer.gcode.script', { script });
+                },
+                runJob(data) {
+                    const thumbs = thumbnails();
+                    var form = new FormData();
+                    form.append('print', true)
+                    const filename = strftime(that.props.settings.gcodeFilename) + that.props.settings.gcodeExtension
+                    const blob = new Blob([data+thumbs], { type: 'text/plain' })
+                    form.append('file', blob, filename)
+                    fetch(addr.replace('ws', 'http').replace(/\/websocket|$/, '/server/files/upload'), { method: 'POST', body: form }).then((response) => {
+                        if (response.status > 201) {
+                            console.log(response)
+                            CommandHistory.error(`Job upload failed!`)
+                        }
+                    }, (error) =>  {
+                        console.log(error)
+                        CommandHistory.error(`Job upload failed!`)
+                    })
+                },
+                clearJob() {
+                    send('printer.gcode.script', { script: 'SDCARD_RESET_FILE' });
+                },
+                stop() {
+                    send('printer.print.cancel', () => {
+                        emitter.getServerConfig();
+                    });
+                },
+                pause() {
+                    send('printer.print.pause', () => {
+                        emitter.getServerConfig();
+                    });
+                },
+                resume() {
+                    send('printer.print.resume', () => {
+                        emitter.getServerConfig();
+                    });
+                },
+                clearAlarm(method) {
+                    if (method === 1) {
+                        send('printer.restart');
+                    } else if (method === 2) {
+                        send('printer.firmware_restart');
+                    }
+                },
+                resetMachine() {
+                    socket.send('printer.emergency_stop')
+                },
+                probe({ axis, offset }) {
+                    if (axis.indexOf('z') > -1) {
+                        send('printer.gcode.script', { script: 'PROBE' });
+                    } else {
+                        CommandHistory.error(`Can only probe Z axis!`)
+                    }
+                },
+                laserTest(data) {
+                    const [laserPower, duration, maxS] = data.split(',')
+                    const s = that.props.settings
+                    let laserOnS = s.gcodeLaserIntensity + (s.gcodeSMinValue + (s.gcodeSMaxValue - s.gcodeSMinValue) * laserPower / 100).toFixed(s.decimal || 4);
+                    const toolOn = s.gcodeToolOn.split('$INTENSITY').join(laserOnS) || laserOnS
+                    const laserOffS = s.gcodeLaserIntensity +                               0
+                    const toolOff = s.gcodeToolOff || (s.gcodeToolOn.indexOf('$INTENSITY') > -1 ? s.gcodeToolOn.split('$INTENSITY').join(laserOffS) : laserOffS)
+                    const script = `${toolOn}\nG4 P${duration}\n${toolOff}`
+                    handle.laserTest(1)
+                    laserTestOnCnt++
+                    send('printer.gcode.script', { script }, () => { setTimeout(() => { --laserTestOnCnt === 0 && handle.laserTest(0) }, 300); });
+                },
+                home(axis) {
+                    send('printer.gcode.script', { script: `G28 ${axis.toUpperCase()}` });
+                },
+                setPosition(data) {
+                    const { x, y, z} = data;
+                    let pos = ''
+                    if (isFinite(x)) {
+                        pos += ` X=${x}`
+                    }
+                    if (isFinite(y)) {
+                        pos += ` Y=${y}`
+                    }
+                    if (isFinite(z)) {
+                        pos += ` Z=${z}`
+                    }
+                    let script = `SET_GCODE_OFFSET MOVE=0 ${pos}\n`
+                    script += `SAVE_GCODE_STATE NAME=Laserweb\nG91\nG0 F10 X0.125\nG0 X-0.125\nG90\nRESTORE_GCODE_STATE NAME=Laserweb` // cause position update to apply offsets
+                    send('printer.gcode.script', { script });
+                },
+                setZero(axis, reset) {
+                    let pos = {}
+                    if (axis === 'all') {
+                        axis = 'xyz'
+                    }
+                    if (axis.indexOf('x') > -1) {
+                        pos.x = reset ? 0 : xpos + xOffset
+                    }
+                    if (axis.indexOf('y') > -1) {
+                        pos.y = reset ? 0 : ypos + yOffset
+                    }
+                    if (axis.indexOf('z') > -1) {
+                        pos.z = reset ? 0 : zpos + zOffset
+                    }
+                    emitter.setPosition(pos);
+                },
+                gotoZero(axis) {
+                    let pos = ''
+                    if (axis.indexOf('x') > -1) {
+                        pos += ` X0`
+                    }
+                    if (axis.indexOf('y') > -1) {
+                        pos += ` Y0`
+                    }
+                    if (axis.indexOf('z') > -1) {
+                        pos += ` Z0`
+                    }
+                    const script = `SAVE_GCODE_STATE NAME=Laserweb\nG90\nG0 ${pos}\nRESTORE_GCODE_STATE NAME=Laserweb`
+                    send('printer.gcode.script', { script });
+                },
+            }
+            socket = {
+                moonraker: true,
+                send,
+                on(name, fn) {
+                    handle[name] = fn
+                },
+                emit(name, ...args) {
+                    if (emitter[name]) {
+                        emitter[name](...args)
+                    } else {
+                        console.log('emitter missing', name, ...args);
+                    }
+                },
+                disconnect() {
+                    moonraker.close();
+                },
+            }
+            moonraker.onopen = function() {
+                console.log('onopen');
+                handle.connect()
+                clearInterval(statusInterval)
+                let printerState
+                let printerMsg
+                statusInterval = setInterval(function () {
+                    if (!machineConnected || printerState !== 'ready') {
+                        send('printer.info', (data, error) => {
+                            // console.log('printer.info', data, error)
+                            if (error) {
+                                return;
+                            }
+                            if (printerState !== data.state) {
+                                printerState = data.state;
+                                if (printerState === 'ready') {
+                                    handle.firmware({ firmware: 'Klipper', version: data.software_version, date: '' });
+                                }
+                            }
+                            if (printerMsg !== data.state_message) {
+                                printerMsg = data.state_message;
+                                if (printerState === 'ready') {
+                                    CommandHistory.write(printerMsg || 'Machine connected', CommandHistory.SUCCESS);
+                                } else {
+                                    CommandHistory.error(printerMsg || 'Machine disconnected: ' + klipperState);
+                                }
+                            }
+                        })
+                    }
+                }, 1000);
+            }
+            moonraker.onclose = function() {
+                console.log('onclose');
+                clearInterval(statusInterval)
+                handle.disconnect()
+            }
+            moonraker.onerror = function(err) {
+                console.log('onerror', err);
+            }
+            moonraker.onmessage = function(e) {
+                try {
+                    const data = JSON.parse(e.data)
+                    const cb = callbacks.get(data.id);
+                    if (cb) {
+                        cb(data.result, data.error);
+                        callbacks.delete(data.id);
+                    } else if (recv[data.method]) {
+                        recv[data.method](data.params, data.error)
+                    } else {
+                        console.warn('onmessage', data.id || data.method, e.data);
+                    }
+                } catch(err) {
+                    console.error('invalid message', e.data, err);
+                }
+            }
+        } else {
+            socket = io(addr);
+        }
 
         socket.on('connect', function(data) {
             serverConnected = true;
             $('#connectS').addClass('disabled');
             $('#disconnectS').removeClass('disabled');
+            $('#restartKlippy').removeClass('disabled');
+            $('#restartFirmware').removeClass('disabled');
             //socket.emit('firstLoad');
             socket.emit('getServerConfig');
             CommandHistory.write('Server connected', CommandHistory.SUCCESS);
@@ -108,7 +543,8 @@ class Com extends React.Component {
             $('#disconnectS').addClass('disabled');
             machineConnected = false;
             $('#connect').removeClass('disabled');
-            $('#disconnect').addClass('disabled');
+            $('#restartKlippy').addClass('disabled');
+            $('#restartFirmware').addClass('disabled');
             firmware = '';
             fVersion = '';
             fDate = '';
@@ -286,27 +722,11 @@ class Com extends React.Component {
         socket.on('runStatus', function (status) {
             //CommandHistory.write('runStatus: ' + status);
             console.log('runStatus: ' + status);
-            if (status === 'running') {
-                playing = true;
-                paused = false;
-            } else if (status === 'paused') {
-                paused = true;
-            } else if (status === 'm0') {
-                paused = true;
-                m0 = true;
-            } else if (status === 'resumed') {
-                paused = false;
-            } else if (status === 'stopped') {
-                playing = false;
-                paused = false;
-            } else if (status === 'finished') {
-                playing = false;
-                paused = false;
-            } else if (status === 'alarm') {
+            if (status === 'alarm') {
                 CommandHistory.error('ALARM!')
                 //socket.emit('clearAlarm', 2);
             }
-            runStatus(status);
+            ({ playing, paused, m0 } = runStatus(status, true));
         });
 
         socket.on('data', function (data) {
@@ -457,10 +877,8 @@ class Com extends React.Component {
             }
             $('#queueCnt').html(queueState);
             if (playing && data === 0) {
-                playing = false;
-                paused = false;
                 jobLines = 0;
-                runStatus('stopped');
+                ({ playing, paused, m0 } = runStatus('stopped'));
                 $('#playicon').removeClass('fa-pause');
                 $('#playicon').addClass('fa-play');
 
@@ -580,10 +998,8 @@ class Com extends React.Component {
             CommandHistory.write('Disconnecting Machine', CommandHistory.INFO);
             console.log('Machine Disconnected by user');
             socket.emit('closePort');
-            playing = false;
-            paused = false;
             jobLines = 0;
-            runStatus('stopped');
+            ({ playing, paused, m0 } = runStatus('stopped'));
             $("#machineStatus").removeClass('badge-ok');
             $("#machineStatus").addClass('badge-notify');
             $("#machineStatus").removeClass('badge-warn');
@@ -601,6 +1017,7 @@ class Com extends React.Component {
 
                 <PanelGroup>
                     <Panel collapsible header="Server Connection" bsStyle="primary" eventKey="1" defaultExpanded={(!serverConnected)}>
+                        <SelectField {...{ object: settings, field: 'connectServerVia', setAttrs: setSettingsAttrs, data: ['lw.comm-server', 'Moonraker'], defaultValue: 'lw.comm-server', description: 'Server', selectProps: { clearable: false } }} />
                         <TextField {...{ object: settings, field: 'comServerIP', setAttrs: setSettingsAttrs, description: 'Server IP' }} />
                         <ButtonGroup>
                             <Button id="connectS" bsClass="btn btn-xs btn-info" onClick={(e)=>{this.handleConnectServer(e)}}><Icon name="share" /> Connect</Button>
@@ -609,23 +1026,36 @@ class Com extends React.Component {
                     </Panel>
 
                     <Panel collapsible header="Machine Connection" bsStyle="primary" eventKey="2" defaultExpanded={(!machineConnected)}>
-                        <SelectField {...{ object: settings, field: 'connectVia', setAttrs: setSettingsAttrs, data: this.state.comInterfaces, defaultValue: '', description: 'Machine Connection', selectProps: { clearable: false } }} />
-                        <Collapse in={settings.connectVia == 'USB'}>
+                        <Collapse in={settings.connectServerVia != 'Moonraker'}>
                             <div>
-                                <SelectField {...{ object: settings, field: 'connectPort', setAttrs: setSettingsAttrs, data: formatPorts(this.state.comPorts), defaultValue: '', description: 'USB / Serial Port', selectProps: { clearable: false } }} />
-                                <SelectField {...{ object: settings, field: 'connectBaud', setAttrs: setSettingsAttrs, data: ['250000', '230400', '115200', '57600', '38400', '19200', '9600'], defaultValue: '115200', description: 'Baudrate', selectProps: { clearable: false } }} />
+                                <SelectField {...{ object: settings, field: 'connectVia', setAttrs: setSettingsAttrs, data: this.state.comInterfaces, defaultValue: '', description: 'Machine Connection', selectProps: { clearable: false } }} />
+
+                                <Collapse in={settings.connectVia == 'USB'}>
+                                    <div>
+                                        <SelectField {...{ object: settings, field: 'connectPort', setAttrs: setSettingsAttrs, data: formatPorts(this.state.comPorts), defaultValue: '', description: 'USB / Serial Port', selectProps: { clearable: false } }} />
+                                        <SelectField {...{ object: settings, field: 'connectBaud', setAttrs: setSettingsAttrs, data: ['250000', '230400', '115200', '57600', '38400', '19200', '9600'], defaultValue: '115200', description: 'Baudrate', selectProps: { clearable: false } }} />
+                                    </div>
+                                </Collapse>
+                                <Collapse in={settings.connectVia != 'USB' && settings.connectVia != 'Default'}>
+                                    <div>
+                                        <TextField {...{ object: settings, field: 'connectIP', setAttrs: setSettingsAttrs, description: 'Machine IP' }} />
+                                    </div>
+                                </Collapse>
+                                <SelectField {...{ object: settings, field: 'connectReset', setAttrs: setSettingsAttrs, data: ['true', 'false', 'default'], defaultValue: 'default', description: '^X on Connect', selectProps: { clearable: false } }} />
+                                <ButtonGroup>
+                                    <Button id="connect" bsClass="btn btn-xs btn-info disabled"   onClick={(e)=>{this.handleConnectMachine(e)}}><Icon name="share" /> Connect</Button>
+                                    <Button id="disconnect" bsClass="btn btn-xs btn-danger disabled" onClick={(e)=>{this.handleDisconnectMachine(e)}}><Glyphicon glyph="trash" /> Disconnect</Button>
+                                </ButtonGroup>
                             </div>
                         </Collapse>
-                        <Collapse in={settings.connectVia != 'USB' && settings.connectVia != 'Default'}>
+                        <Collapse in={settings.connectServerVia == 'Moonraker'}>
                             <div>
-                                <TextField {...{ object: settings, field: 'connectIP', setAttrs: setSettingsAttrs, description: 'Machine IP' }} />
+                                <ButtonGroup>
+                                    <Button id="restartKlippy" bsClass="btn btn-xs btn-info disabled"   onClick={(e)=>{clearAlarm(1)}}><Icon name="share" /> Restart </Button>
+                                    <Button id="restartFirmware" bsClass="btn btn-xs btn-danger disabled" onClick={(e)=>{clearAlarm(2)}}><Glyphicon glyph="trash" /> Firmware Restart</Button>
+                                </ButtonGroup>
                             </div>
                         </Collapse>
-                        <SelectField {...{ object: settings, field: 'connectReset', setAttrs: setSettingsAttrs, data: ['true', 'false', 'default'], defaultValue: 'default', description: '^X on Connect', selectProps: { clearable: false } }} />
-                        <ButtonGroup>
-                            <Button id="connect" bsClass="btn btn-xs btn-info disabled"   onClick={(e)=>{this.handleConnectMachine(e)}}><Icon name="share" /> Connect</Button>
-                            <Button id="disconnect" bsClass="btn btn-xs btn-danger disabled" onClick={(e)=>{this.handleDisconnectMachine(e)}}><Glyphicon glyph="trash" /> Disconnect</Button>
-                        </ButtonGroup>
                     </Panel>
 
                 </PanelGroup>
@@ -750,9 +1180,7 @@ export function runJob(job) {
                 if (job.length > 0) {
                     jobLines = job.split(/\r\n|\r|\n/).length
                     CommandHistory.write('Running Job; ' + jobLines + ' lines', CommandHistory.INFO);
-                    playing = true;
-                    jobLines = job.split(/\r\n|\r|\n/).length
-                    runStatus('running');
+                    ({ playing, paused, m0 } = runStatus('running'));
                     $('#playicon').removeClass('fa-play');
                     $('#playicon').addClass('fa-pause');
                     jobStartTime = new Date(Date.now());
@@ -775,8 +1203,7 @@ export function pauseJob() {
     console.log('pauseJob');
     if (serverConnected) {
         if (machineConnected){
-            paused = true;
-            runStatus('paused');
+            ({ playing, paused, m0 } = runStatus('paused'));
             $('#playicon').removeClass('fa-pause');
             $('#playicon').addClass('fa-play');
             socket.emit('pause');
@@ -792,9 +1219,7 @@ export function resumeJob() {
     console.log('resumeJob');
     if (serverConnected) {
         if (machineConnected){
-            paused = false;
-            m0 = false;
-            runStatus('running');
+            ({ playing, paused, m0 } = runStatus('running'));
             $('#playicon').removeClass('fa-play');
             $('#playicon').addClass('fa-pause');
             socket.emit('resume');
@@ -811,11 +1236,8 @@ export function abortJob() {
     if (serverConnected) {
         if (machineConnected){
             CommandHistory.write('Aborting job', CommandHistory.INFO);
-            playing = false;
-            paused = false;
-            m0 = false;
             jobLines = 0;
-            runStatus('stopped');
+            ({ playing, paused, m0 } = runStatus('stopped'));
             $('#playicon').removeClass('fa-pause');
             $('#playicon').addClass('fa-play');
             socket.emit('stop');
@@ -827,10 +1249,28 @@ export function abortJob() {
     }
 }
 
+export function clearJob() {
+    console.log('clearJob');
+    if (serverConnected) {
+        if (machineConnected){
+            if (!jobProgress || jobProgress === 100) {
+                CommandHistory.write('Clearing Finished job', CommandHistory.INFO);
+                socket.emit('clearJob');
+            } else {
+                CommandHistory.error('Job is still running!')
+            }
+        } else {
+            CommandHistory.error('Machine is not connected!')
+        }
+    } else {
+        CommandHistory.error('Server is not connected!')
+    }
+}
+
 export function clearAlarm(method) {
     console.log('clearAlarm');
     if (serverConnected) {
-        if (machineConnected){
+        if (machineConnected || (socket && socket.moonraker)){
             CommandHistory.write('Resetting alarm', CommandHistory.INFO);
             socket.emit('clearAlarm', method);
         } else {
@@ -841,11 +1281,11 @@ export function clearAlarm(method) {
     }
 }
 
-export function setZero(axis) {
+export function setZero(axis, reset) {
     if (serverConnected) {
         if (machineConnected){
             CommandHistory.write('Set ' + axis + ' Axis zero', CommandHistory.INFO);
-            socket.emit('setZero', axis);
+            socket.emit('setZero', axis, reset);
         } else {
             CommandHistory.error('Machine is not connected!')
         }
@@ -973,7 +1413,7 @@ export function spindleOverride(step) {
 
 export function resetMachine() {
     if (serverConnected) {
-        if (machineConnected){
+        if (machineConnected || (socket && socket.moonraker)){
             CommandHistory.error('Resetting Machine')
             socket.emit('resetMachine');
         } else {
@@ -995,8 +1435,7 @@ export function playpauseMachine() {
                         laseroncmd = 0;
                     }
                     socket.emit('resume', laseroncmd);
-                    paused = false;
-                    runStatus('running');
+                    ({ playing, paused, m0 } = runStatus('running'));
                     $('#playicon').removeClass('fa-play');
                     $('#playicon').addClass('fa-pause');
                     // end ifPaused
@@ -1007,8 +1446,7 @@ export function playpauseMachine() {
                         laseroffcmd = 0;
                     }
                     socket.emit('pause', laseroffcmd);
-                    paused = true;
-                    runStatus('paused');
+                    ({ playing, paused, m0 } = runStatus('paused'));
                     $('#playicon').removeClass('fa-pause');
                     $('#playicon').addClass('fa-play');
                 }
diff --git a/src/components/jog.js b/src/components/jog.js
index 58605870..fc9a6e4f 100644
--- a/src/components/jog.js
+++ b/src/components/jog.js
@@ -14,7 +14,7 @@ import { xOffset, yOffset } from './com';
 import CommandHistory from './command-history';
 
 import { Input, TextField, NumberField, ToggleField, SelectField } from './forms';
-import { runCommand, runJob, pauseJob, resumeJob, abortJob, clearAlarm, setZero, gotoZero, setPosition, home, probe, checkSize, laserTest, jog, jogTo, feedOverride, spindleOverride, resetMachine } from './com.js';
+import { runCommand, runJob, pauseJob, resumeJob, abortJob, clearJob, clearAlarm, setZero, gotoZero, setPosition, home, probe, checkSize, laserTest, jog, jogTo, feedOverride, spindleOverride, resetMachine, serverConnected, socket } from './com.js';
 import { MacrosBar } from './macros';
 
 import '../styles/index.css'
@@ -33,6 +33,7 @@ var ovLoop;
 var playing = false;
 var paused = false;
 var m0 = false;
+var thatComponent;
 
 $('body').on('keydown', function (ev) {
     if (ev.keyCode === 17) {
@@ -123,6 +124,7 @@ class Jog extends React.Component {
 
     componentDidMount()
     {
+        thatComponent = this;
         this.checkGcodeBounds(this.props.gcode);
 
         bindKeys(this.bindings);
@@ -176,9 +178,13 @@ class Jog extends React.Component {
             }
         }
 
+        if (serverConnected && socket && socket.moonraker) {
+            socket.emit('getServerConfig');
+        }
     }
 
     componentWillUnmount() {
+        thatComponent = undefined;
         liveJoggingState = this.state.liveJogging;
         //
         unbindKeys(this.bindings)
@@ -244,14 +250,16 @@ class Jog extends React.Component {
             let cmd = this.props.gcode;
             //alert(cmd);
             console.log('runJob(' + cmd.length + ')');
-            playing = true;
+            if (cmd.length > 0) {
+                playing = true;
 
-            this.setState({
-                isPlaying: true,
-                liveJogging: {
-                    ... this.state.liveJogging, disabled: true, hasHomed: false
-                }
-            })
+                this.setState({
+                    isPlaying: true,
+                    liveJogging: {
+                        ... this.state.liveJogging, disabled: true, hasHomed: false
+                    }
+                })
+            }    
 
             runJob(cmd);
         } else {
@@ -296,6 +304,18 @@ class Jog extends React.Component {
         }
     }
 
+    clearJob() {
+        if (!socket || !socket.moonraker) {
+            return;
+        }
+
+        if (playing) {
+            CommandHistory.log('clearJob ignored, because job is running');
+        } else {
+            clearJob();
+        }
+    }
+
     homeAll() {
         console.log('homeAll');
         let cmd = this.props.settings.gcodeHoming;
@@ -313,20 +333,21 @@ class Jog extends React.Component {
 
     probe(axis) {
         console.log('probe');
+        let offset
         if (axis.indexOf('z') === 0) {
-            let offset = this.props.settings.machineZProbeOffset;
+            offset = this.props.settings.machineZProbeOffset;
         } else  {
-            let offset = this.props.settings.machineXYProbeOffset;
+            offset = this.props.settings.machineXYProbeOffset;
         }
         probe(axis, offset);
     }
 
-    setZero(axis) {
+    setZero(axis, event) {
         if (!this.state.isPlaying)
             this.setState({ liveJogging: { ... this.state.liveJogging, hasHomed: true, disabled: false } })
 
-        console.log('setZero(' + axis + ')');
-        setZero(axis);
+        console.log('setZero(' + axis + ', ' + event.altKey + ')');
+        setZero(axis, event.altKey);
     }
 
     setPosition(pos) {
@@ -346,7 +367,11 @@ class Jog extends React.Component {
         if (units == 'mm/s') mult = 60;
         feedrate = jQuery('#jogfeedxy').val() * mult;
 
-        let bounds=this.getGcodeBounds(this.props.gcode)
+        let bounds = this.getGcodeBounds(this.props.gcode);
+        if (!bounds) {
+            CommandHistory.error('no gcode to check size of');
+            return;
+        }
         let power = this.props.settings.gcodeCheckSizePower / 100 * this.props.settings.gcodeSMaxValue;
         let moves = `
             G90\n
@@ -412,11 +437,9 @@ class Jog extends React.Component {
     }
 
     laserTest() {
-        console.log('laserTest');
         let power = this.props.settings.gcodeToolTestPower;
         let duration = this.props.settings.gcodeToolTestDuration;
         let maxS = this.props.settings.gcodeSMaxValue;
-        console.log('laserTest(' + power + ',' + duration + ',' + maxS + ')');
         laserTest(power, duration, maxS);
     }
 
@@ -523,7 +546,7 @@ class Jog extends React.Component {
         return (
             <div style={{ paddingTop: 6 }} >
                         <span className="badge badge-default badge-notify" title="Machine Status" id="machineStatus" style={{ marginRight: 5 }}>Not Connected</span>
-                        <span className="badge badge-default badge-notify" title="Job details, based on gcode lines completed and queued" id="queueCnt" style={{ marginRight: 5 }}>Queued: 0</span>
+                        <span className="badge badge-default badge-notify" onClick={(e) => { this.clearJob() }} title="Job details, based on gcode lines completed and queued" id="queueCnt" style={{ marginRight: 5 }}>Queued: 0</span>
                         <div id="mPosition" className="well well-sm" style={{ marginBottom: 7}}>
                             <div id="rX" className="drolabel">X:</div>
                             <div className="btn-group dropdown" style={{ marginLeft: -3 }}>
@@ -539,7 +562,7 @@ class Jog extends React.Component {
                                     <li role="separator" className="divider"></li>
                                     <li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-crop" aria-hidden="true"></i><b>Work Coordinates</b></li>
                                     <li id="homeX"><a href="#" onClick={(e) => { this.home('x') }}><i className="fa fa-fw fa-home" aria-hidden="true"></i>Home X Axis</a></li>
-                                    <li id="zeroX"><a href="#" onClick={(e) => { this.setZero('x') }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set X Axis Zero</a></li>
+                                    <li id="zeroX"><a href="#" onClick={(e) => { this.setZero('x', e) }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set X Axis Zero</a></li>
                                     <li role="separator" className="divider"></li>
                                     <li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-arrows" aria-hidden="true"></i><b>Move</b></li>
                                     <li id="gotoXZero"><a href="#" onClick={(e) => { this.gotoZero('x') }}><i className="fa fa-fw fa-play" aria-hidden="true"></i>G0 to X0</a></li>
@@ -562,7 +585,7 @@ class Jog extends React.Component {
                                     <li role="separator" className="divider"></li>
                                     <li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-crop" aria-hidden="true"></i><b>Work Coordinates</b></li>
                                     <li id="homeY"><a href="#" onClick={(e) => { this.home('y') }}><i className="fa fa-fw fa-home" aria-hidden="true"></i>Home Y Axis</a></li>
-                                    <li id="zeroY"><a href="#" onClick={(e) => { this.setZero('y') }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set Y Axis Zero</a></li>
+                                    <li id="zeroY"><a href="#" onClick={(e) => { this.setZero('y', e) }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set Y Axis Zero</a></li>
                                     <li role="separator" className="divider"></li>
                                     <li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-arrows" aria-hidden="true"></i><b>Move</b></li>
                                     <li id="gotoYZero"><a href="#" onClick={(e) => { this.gotoZero('y') }}><i className="fa fa-fw fa-play" aria-hidden="true"></i>G0 to Y0</a></li>
@@ -586,7 +609,7 @@ class Jog extends React.Component {
                                             <li role="separator" className="divider"></li>
                                             <li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-crop" aria-hidden="true"></i><b>Work Coordinates</b></li>
                                             <li id="homeZ"><a href="#" onClick={(e) => { this.home('z') }}><i className="fa fa-fw fa-home" aria-hidden="true"></i>Home Z Axis</a></li>
-                                            <li id="zeroZ"><a href="#" onClick={(e) => { this.setZero('z') }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set Z Axis Zero</a></li>
+                                            <li id="zeroZ"><a href="#" onClick={(e) => { this.setZero('z', e) }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set Z Axis Zero</a></li>
                                             <li role="separator" className="divider"></li>
                                             <li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-arrows" aria-hidden="true"></i><b>Move</b></li>
                                             <li id="gotoZZero"><a href="#" onClick={(e) => { this.gotoZero('z') }}><i className="fa fa-fw fa-play" aria-hidden="true"></i>G0 to Z0</a></li>
@@ -613,7 +636,7 @@ class Jog extends React.Component {
                                             <li role="separator" className="divider"></li>
                                             <li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-crop" aria-hidden="true"></i><b>Work Coordinates</b></li>
                                             <li id="homeA"><a href="#" onClick={(e) => { this.home('a') }}><i className="fa fa-fw fa-home" aria-hidden="true"></i>Home A Axis</a></li>
-                                            <li id="zeroA"><a href="#" onClick={(e) => { this.setZero('a') }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set A Axis Zero</a></li>
+                                            <li id="zeroA"><a href="#" onClick={(e) => { this.setZero('a', e) }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set A Axis Zero</a></li>
                                             <li role="separator" className="divider"></li>
                                             <li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-arrows" aria-hidden="true"></i><b>Move</b></li>
                                             <li id="gotoAZero"><a href="#" onClick={(e) => { this.gotoZero('a') }}><i className="fa fa-fw fa-play" aria-hidden="true"></i>G0 to A0</a></li>
@@ -706,7 +729,7 @@ class Jog extends React.Component {
                                       </button>
                                   </div>
                                   <div className="btn-group">
-                                      <button type='button' id="zeroAll" className="btn btn-ctl btn-default" onClick={(e) => { this.setZero('all') }}>
+                                      <button type='button' id="zeroAll" className="btn btn-ctl btn-default" onClick={(e) => { this.setZero('all', e) }}>
                                           <span className="fa-stack fa-1x">
                                               <i className="fa fa-crosshairs fa-stack-1x"></i>
                                               <strong className="fa-stack-1x icon-top-text">set</strong>
@@ -922,11 +945,20 @@ Jog = connect(
 // Exports
 export default Jog
 
+export function hasHomed(hasHomed) {
+    liveJoggingState.hasHomed = hasHomed
+    if (thatComponent) {
+        thatComponent.setState({
+            liveJogging: { ...thatComponent.state.liveJogging, hasHomed: hasHomed }
+        });
+    }
+}
 
-export function runStatus(status) {
+export function runStatus(status, applyState = true) {
     if (status === 'running') {
         playing = true;
         paused = false;
+        m0 = false;
         $('#playicon').removeClass('fa-play');
         $('#playicon').addClass('fa-pause');
         $('#xP').attr('disabled', true);
@@ -977,6 +1009,15 @@ export function runStatus(status) {
     } else if (status === 'alarm') {
         //socket.emit('clearAlarm', 2);
     }
+    if (applyState && thatComponent) {
+        thatComponent.setState({
+            isPlaying: playing,
+            isPaused: paused,
+            isM0: m0,
+            liveJogging: { ...thatComponent.state.liveJogging, disabled: (playing && !m0) }
+        });
+    }
+    return { playing, paused, m0 };
 };
 
 export class LiveJogging extends React.Component {
diff --git a/src/components/settings.js b/src/components/settings.js
index c09888bb..cae2c486 100644
--- a/src/components/settings.js
+++ b/src/components/settings.js
@@ -225,17 +225,20 @@ class Settings extends React.Component {
                     </Panel>
 
                     <SettingsPanel collapsible header="Machine" eventKey="1" bsStyle="info" errors={this.state.errors} >
+                        <ToggleField {...{ object: this.props.settings, field: 'machineSizeFromMachine', setAttrs: setSettingsAttrs, description: 'Size from firmware', info: Info(<p className="help-block">
+                            If enabled, machine dimensions and origin offsets will be automatically set from the machine's firmware limits.<br/>Only supported by machines connected via Moonraker.
+                            </p>,"Machine Size from firmware") }} />
                         <h5 className="header">Machine Dimensions</h5>
                         <NumberField {...{ object: this.props.settings, field: 'machineWidth', setAttrs: setSettingsAttrs, description: 'Width', units: 'mm', info: Info(<p className="help-block">
                                     The total width and height (X and Y) size of the machine work area
-                                    </p>,"Working Dimensions") }} />
-                        <NumberField {...{ object: this.props.settings, field: 'machineHeight', setAttrs: setSettingsAttrs, description: 'Height', units: 'mm' }} />
+                                    </p>,"Working Dimensions"), disabled: this.props.settings.machineSizeFromMachine }} />
+                        <NumberField {...{ object: this.props.settings, field: 'machineHeight', setAttrs: setSettingsAttrs, description: 'Height', units: 'mm', disabled: this.props.settings.machineSizeFromMachine }} />
 
                         <h5 className="header">Machine Origin offsets</h5>
                         <NumberField {...{ object: this.props.settings, field: 'machineBottomLeftX', setAttrs: setSettingsAttrs, description: 'Left X', units: 'mm', info: Info(<p className="help-block">
                                     X and Y offsets for the machine work area relative to the Home position.<br/>For a machine that homes to the top-right corner use negative values.
-                                    </p>,"Working Area Offset") }} />
-                        <NumberField {...{ object: this.props.settings, field: 'machineBottomLeftY', setAttrs: setSettingsAttrs, description: 'Bottom Y', units: 'mm' }} />
+                                    </p>,"Working Area Offset"), disabled: this.props.settings.machineSizeFromMachine }} />
+                        <NumberField {...{ object: this.props.settings, field: 'machineBottomLeftY', setAttrs: setSettingsAttrs, description: 'Bottom Y', units: 'mm', disabled: this.props.settings.machineSizeFromMachine }} />
                         <h5 className="header">Tool head</h5>
                         <NumberField {...{ object: this.props.settings, field: 'machineBeamDiameter', setAttrs: setSettingsAttrs, description: (<span>Beam <abbr title="Diameter">&Oslash;</abbr></span>), info: Info(<p className="help-block">
                                     The diameter of the laser spot when cutting and marking.<br/>Used for the suggested width in laser cut, fill and raster operations.
@@ -422,6 +425,23 @@ class Settings extends React.Component {
                             Increasing this can improve gcode generation performance when working with with lots of individual operations.<br/>
                             This is applied per operation, indvidual operations are <em>not</em> threaded and will not benefit from this option.<br/>
                             </p>,"Gcode Generation Threads"), units: '' }} />
+                        <h5 className="header">Thumbnails</h5>
+                        <TextField {...{ object: this.props.settings, field: 'gcodeThumbnailSizes', setAttrs: setSettingsAttrs, description: 'Sizes', info: Info(<p className="help-block">
+                            Comma separated list of thumbnail sizes and Grid Opacity, eg <em><strong>32x32,400x300</strong></em>.<br/>
+                            Be aware that Moonraker only parses thumbnails if it knows the gcode generator, to trick it put something like <em><strong>PrusaSlicer thumbnail hack on</strong></em> in the gcode header.<br/>
+                            </p>,"Thumbnail Sizes"), style: { resize: "vertical", fontFamily: "monospace, monospace" } }} />
+                        <NumberField {...{ object: this.props.settings, field: 'gcodeThumbnailGridMinSize', setAttrs: setSettingsAttrs, description: 'Hide Grid <', info: Info(<p className="help-block">
+                            Don't show grid in thumbnails smaller than this size.
+                            </p>,"Minimum Grid Size"), units: 'px' }} />
+                        <ToggleField {...{ object: this.props.settings, field: 'gcodeThumbnailLaser', setAttrs: setSettingsAttrs, description: 'Tool', info: Info(<p className="help-block">
+                            Include Tool preview in thumbnails.
+                            </p>,"Show Tool in Thumbnail") }} />
+                        <ToggleField {...{ object: this.props.settings, field: 'gcodeThumbnailGcode', setAttrs: setSettingsAttrs, description: 'Gcode', info: Info(<p className="help-block">
+                            Include Gcode preview in thumbnails.
+                            </p>,"Show Gcode in Thumbnail") }} />
+                        <ToggleField {...{ object: this.props.settings, field: 'gcodeThumbnailDocument', setAttrs: setSettingsAttrs, description: 'Document', info: Info(<p className="help-block">
+                            Include Document preview in thumbnails.
+                            </p>,"Show Document in Thumbnail") }} />
                         <hr />
                         <TextField {...{ object: this.props.settings, field: 'gcodeHeader', setAttrs: setSettingsAttrs, description: 'Gcode Header', info: Info(<p className="help-block">
                             Text here will be placed in a commented (;) block at the start of the gcode.<br/>
diff --git a/src/components/workspace.js b/src/components/workspace.js
index 0ff2c7a1..d9a260e1 100644
--- a/src/components/workspace.js
+++ b/src/components/workspace.js
@@ -23,13 +23,14 @@ import '../styles/simbar.css';
 
 import { GlobalStore } from '..';
 import { setCameraAttrs, zoomArea } from '../actions/camera'
+import { zoomArea as calcZoomArea } from  '../reducers/camera.js'
 import { selectDocument, toggleSelectDocument, transform2dSelectedDocuments, removeDocumentSelected, cloneDocumentSelected } from '../actions/document';
 import { setWorkspaceAttrs } from '../actions/workspace';
 import { setSettingsAttrs } from '../actions/settings';
 
 import { runCommand, jogTo } from './com.js';
 
-import { withDocumentCache } from './document-cache'
+import { DocumentCacheHolder, withDocumentCache } from './document-cache'
 import { Dom3d, Text3d } from './dom3d';
 import { DrawCommands } from '../draw-commands'
 import { GcodePreview } from '../draw-commands/GcodePreview'
@@ -104,7 +105,7 @@ class LightenMachineBounds {
 };
 
 class Grid {
-    draw(drawCommands, { perspective, view, width, height, major = MAJOR_GRID_SPACING, minor = MINOR_GRID_SPACING, xcolor, ycolor }) {
+    draw(drawCommands, { perspective, view, width, height, major = MAJOR_GRID_SPACING, minor = MINOR_GRID_SPACING, xcolor, ycolor, opacity = 1 }) {
         if (!this.maingrid || !this.origin || this.width !== width || this.height !== height) {
             this.width = width;
             this.height = height;
@@ -142,13 +143,13 @@ class Grid {
             this.origincount = c.length / 3
         }
 
-        drawCommands.basic({ perspective, view, position: this.maingrid, offset: 0, count: this.maincount, color: [0.7, 0.7, 0.7, 0.95], scale: [1, 1, 1], translate: [0, 0, 0], primitive: drawCommands.gl.LINES }); // Gray grid
-        drawCommands.basic({ perspective, view, position: this.darkgrid, offset: 0, count: this.darkcount, color: [0.5, 0.5, 0.5, 0.95], scale: [1, 1, 1], translate: [0, 0, 0], primitive: drawCommands.gl.LINES }); // dark grid
+        drawCommands.basic({ perspective, view, position: this.maingrid, offset: 0, count: this.maincount, color: [0.7, 0.7, 0.7, 0.95*opacity], scale: [1, 1, 1], translate: [0, 0, 0], primitive: drawCommands.gl.LINES }); // Gray grid
+        drawCommands.basic({ perspective, view, position: this.darkgrid, offset: 0, count: this.darkcount, color: [0.5, 0.5, 0.5, 0.95*opacity], scale: [1, 1, 1], translate: [0, 0, 0], primitive: drawCommands.gl.LINES }); // dark grid
 
         let rgbx = [...convert.hex.rgb(xcolor)];
         let rgby = [...convert.hex.rgb(ycolor)];
-        drawCommands.basic({ perspective, view, position: this.origin, offset: 0, count: 2, color: [rgbx[0]/255,rgbx[1]/255,rgbx[2]/255,1], scale: [1, 1, 1], translate: [0, 0, 0], primitive: drawCommands.gl.LINES });
-        drawCommands.basic({ perspective, view, position: this.origin, offset: 2, count: 2, color: [rgby[0]/255,rgby[1]/255,rgby[2]/255,1], scale: [1, 1, 1], translate: [0, 0, 0], primitive: drawCommands.gl.LINES });
+        drawCommands.basic({ perspective, view, position: this.origin, offset: 0, count: 2, color: [rgbx[0]/255,rgbx[1]/255,rgbx[2]/255,opacity], scale: [1, 1, 1], translate: [0, 0, 0], primitive: drawCommands.gl.LINES });
+        drawCommands.basic({ perspective, view, position: this.origin, offset: 2, count: 2, color: [rgby[0]/255,rgby[1]/255,rgby[2]/255,opacity], scale: [1, 1, 1], translate: [0, 0, 0], primitive: drawCommands.gl.LINES });
     }
 };
 
@@ -516,6 +517,178 @@ function cacheDrawing(fn, state, args) {
     });
 }
 
+var workspaceContext;
+var thumbnailContext; // = null; // to use a dedicated canvas for thumbnails
+var thumbnailDebug; // = true; // to show a debug canvas
+export function thumbnails(gcode) {
+    const settings = workspaceContext.props.settings;
+    if (!settings.gcodeThumbnailGcode && !settings.gcodeThumbnailLaser && !settings.gcodeThumbnailDocument) return '';
+
+    const sizes = (settings.gcodeThumbnailSizes || '').trim().split(/[ ,]+/).map(s => s.split(/x|g/))
+
+    if (thumbnailContext === null) {
+        const thumbnailCanvas = document.createElement('canvas');
+        const gl = thumbnailCanvas.getContext('webgl', { alpha: true, depth: true, antialias: true, preserveDrawingBuffer: true });
+        thumbnailContext = {
+            canvas: thumbnailCanvas,
+            drawCommands: new DrawCommands(gl),
+            grid: new Grid(),
+            gcodePreview: new GcodePreview(),
+            laserPreview: new LaserPreview(),
+            documentCacheHolder: new DocumentCacheHolder(),
+        }
+    }
+    const { canvas, drawCommands, grid, gcodePreview, laserPreview, documentCacheHolder } = thumbnailContext || {
+        canvas: workspaceContext.canvas,
+        drawCommands: workspaceContext.drawCommands,
+        grid: workspaceContext.grid,
+        gcodePreview: workspaceContext.props.gcodePreview,
+        laserPreview: workspaceContext.props.laserPreview,
+        documentCacheHolder: workspaceContext.props.documentCacheHolder,
+    }
+    let gl = canvas.getContext('webgl', { alpha: true, depth: true, antialias: true, preserveDrawingBuffer: true });
+
+    if (thumbnailDebug === true) {
+        thumbnailDebug = document.createElement('canvas');
+        thumbnailDebug.style.position = 'fixed'
+        thumbnailDebug.style.top = 0
+        thumbnailDebug.style.right = 0
+        thumbnailDebug.style.transformOrigin = 'top right'
+        thumbnailDebug.style.transform = `scale(${1/window.devicePixelRatio})`
+        document.body.append(thumbnailDebug)
+    }
+
+    if (canvas !== workspaceContext.canvas) {
+        if (gcode) {
+            const parsedGcode = parseGcode(gcode);
+            gcodePreview.setParsedGcode(parsedGcode);
+            laserPreview.setParsedGcode(parsedGcode);
+        } else {
+            gcodePreview.setParsedGcodeFromPreview(workspaceContext.props.gcodePreview);
+            laserPreview.setParsedGcodeFromPreview(workspaceContext.props.laserPreview);
+        }
+
+        documentCacheHolder.setDocuments(workspaceContext.props.documents);
+    }
+
+    const originalWidth = canvas.width;
+    const originalHeight = canvas.height;
+
+    let thumbs = '';
+    for (let [width, height, opacity] of sizes) {
+        if (!(width > 0 && height > 0)) continue;
+        if (opacity) {
+            opacity = +opacity / 100;
+        } else {
+            opacity = 1;
+        };
+
+        canvas.width = width;
+        canvas.height = height;
+        const workspace = { workOffsetX: 0, workOffsetY: 0, width, height };
+
+        const machineX = settings.machineBottomLeftX - workspace.workOffsetX;
+        const machineY = settings.machineBottomLeftY - workspace.workOffsetY;
+
+        let area;
+        if (settings.gcodeThumbnailGcode || settings.gcodeThumbnailLaser) {
+            area = WorkspaceClass.zoomGcodeArea(gcodePreview);
+        }
+        if (settings.gcodeThumbnailDocument) {
+            const docArea = WorkspaceClass.zoomDocArea(workspaceContext.props.documentCacheHolder, {}, true);
+            if (area && docArea) {
+                area = [Math.min(area[0], docArea[0]), Math.min(area[1], docArea[1]), Math.max(area[2], docArea[2]), Math.max(area[3], docArea[3])];
+            } else if (docArea) {
+                area = docArea;
+            }
+        }
+        if (!area) {
+            area = WorkspaceClass.zoomMachineArea(settings, workspace);
+        }
+        const zoom = calcZoomArea(null, settings, workspace, { x1: area[0], y1: area[1], x2: area[2], y2: area[3] });
+        const size = Math.min(area[2] - area[0], area[3] - area[1]);
+        const beamSize = Math.max(settings.machineBeamDiameter, size / Math.max(width, height) * 0.9)
+
+        const camera = calcCamera({
+            viewportWidth: width,
+            viewportHeight: height,
+            fovy: zoom.fovy,
+            near: .1,
+            far: 2000,
+            eye: zoom.eye,
+            center: zoom.center,
+            up: [0, 1, 0],
+            showPerspective: false,
+            machineX,
+            machineY,
+        });
+
+        gl.viewport(0, 0, width, height);
+
+        let rgbWorkSpace = [...convert.hex.rgb(settings.workBedColor)];
+        gl.clearColor(rgbWorkSpace[0]/255,rgbWorkSpace[1]/255,rgbWorkSpace[2]/255,1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.enable(gl.BLEND);
+
+        if (opacity > 0 && Math.min(width, height) >= settings.gcodeThumbnailGridMinSize) {
+            grid.draw(drawCommands, {
+                perspective: camera.perspective, view: camera.view,
+                width: settings.toolGridWidth, height: settings.toolGridHeight,
+                minor: Math.max(settings.toolGridMinorSpacing,0.1),
+                major: Math.max(settings.toolGridMajorSpacing,1),
+                xcolor: settings.toolGridXColor,
+                ycolor: settings.toolGridYColor,
+                opacity: opacity,
+            });
+        }
+
+        if (settings.gcodeThumbnailDocument) {
+            if (canvas === workspaceContext.canvas) {
+                drawDocuments({ perspective: camera.perspective, view: camera.view, drawCommands, documentCacheHolder });
+            } else {
+                for (let cachedDocument of documentCacheHolder.cache.values())
+                    if (cachedDocument.document.visible)
+                        drawDocument(camera.perspective, camera.view, drawCommands, cachedDocument, !cachedDocument.texture);
+            }
+        }
+
+        if (settings.gcodeThumbnailGcode) {
+            gcodePreview.draw(
+                drawCommands, camera.perspective, camera.view,
+                settings.simG0Rate, 1e10, settings.machineAAxisDiameter);
+        }
+
+        if (settings.gcodeThumbnailLaser) {
+            gl.blendEquation(drawCommands.EXT_blend_minmax.MIN_EXT);
+            gl.blendFunc(gl.ONE, gl.ONE);
+            laserPreview.draw(
+                drawCommands, camera.perspective, camera.view, beamSize,
+                settings.gcodeSMaxValue, settings.simG0Rate, 1e10, settings.machineAAxisDiameter);
+            gl.blendEquation(gl.FUNC_ADD);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        }
+
+        const base64 = canvas.toDataURL().replace(/^.*?,/, '');
+        const lines = base64.split(/(.{78})/).filter(Boolean).join('\n; ');
+        thumbs += `\n;\n; thumbnail begin ${width}x${height} ${base64.length}\n; ${lines}\n; thumbnail end\n;\n`;
+
+        if (thumbnailDebug) {
+            thumbnailDebug.width = width;
+            thumbnailDebug.height = height;
+            thumbnailDebug.getContext('2d').drawImage(canvas, 0, 0);
+        }
+    }
+
+    if (canvas === workspaceContext.canvas) {
+        canvas.width = originalWidth;
+        canvas.height = originalHeight;
+    }
+
+    return thumbs;
+}
+
+
 export function drawDocument(perspective, view, drawCommands, cachedDocument, createTextures) {
     let { document } = cachedDocument;
     if (document.rawPaths) {
@@ -682,6 +855,7 @@ class WorkspaceContent extends React.Component {
         this.drawDocsState = {};
         this.drawGcodeState = {};
         this.drawSelDocsState = {};
+        workspaceContext = this
     }
 
     UNSAFE_componentWillMount() {
@@ -1315,37 +1489,56 @@ class Workspace extends React.Component {
         this.showControls = true;
     }
 
-    zoomMachine() {
-        let x = this.props.settings.machineBottomLeftX;
-        let y = this.props.settings.machineBottomLeftY;
-        if (!this.props.settings.showMachine) {
+    static zoomMachineArea(settings, workspace) {
+        let x = settings.machineBottomLeftX;
+        let y = settings.machineBottomLeftY;
+        if (!settings.showMachine) {
             x = 0;
             y = 0;
-        }
-        this.props.dispatch(zoomArea(
-            x - 10 - this.props.workspace.workOffsetX,
-            y - 10 - this.props.workspace.workOffsetY,
-            x + this.props.settings.machineWidth + 10 - this.props.workspace.workOffsetX,
-            y + this.props.settings.machineHeight + 10 - this.props.workspace.workOffsetY
-        ));
+        }   
+        return [
+            x - 10 - workspace.workOffsetX,
+            y - 10 - workspace.workOffsetY,
+            x + settings.machineWidth + 10 - workspace.workOffsetX,
+            y + settings.machineHeight + 10 - workspace.workOffsetY
+        ];
     }
 
-    zoomDoc() {
+    zoomMachine() {
+        this.props.dispatch(zoomArea(...this.constructor.zoomMachineArea(this.props.settings, this.props.workspace)));
+    }
+
+    static zoomDocArea(documentCacheHolder, that, notSelected) {
         let found = false;
-        let bounds = this.bounds = { x1: Number.MAX_VALUE, y1: Number.MAX_VALUE, x2: -Number.MAX_VALUE, y2: -Number.MAX_VALUE };
-        for (let cache of this.props.documentCacheHolder.cache.values()) {
-            let doc = cache.document;
-            if (doc.selected && doc.transform2d && cache.bounds) {
-                found = true;
-                bounds.x1 = Math.min(bounds.x1, cache.bounds.x1 + doc.transform2d[4]);
-                bounds.y1 = Math.min(bounds.y1, cache.bounds.y1 + doc.transform2d[5]);
-                bounds.x2 = Math.max(bounds.x2, cache.bounds.x2 + doc.transform2d[4]);
-                bounds.y2 = Math.max(bounds.y2, cache.bounds.y2 + doc.transform2d[5]);
+        let bounds = that.bounds = { x1: Number.MAX_VALUE, y1: Number.MAX_VALUE, x2: -Number.MAX_VALUE, y2: -Number.MAX_VALUE };
+        if (!notSelected) {
+            for (let cache of documentCacheHolder.cache.values()) {
+                let doc = cache.document;
+                if (doc.selected && doc.transform2d && cache.bounds) {
+                    found = true;
+                    bounds.x1 = Math.min(bounds.x1, cache.bounds.x1 + doc.transform2d[4]);
+                    bounds.y1 = Math.min(bounds.y1, cache.bounds.y1 + doc.transform2d[5]);
+                    bounds.x2 = Math.max(bounds.x2, cache.bounds.x2 + doc.transform2d[4]);
+                    bounds.y2 = Math.max(bounds.y2, cache.bounds.y2 + doc.transform2d[5]);
+                }
             }
         }
 
         if (!found) {
-            for (let cache of this.props.documentCacheHolder.cache.values()) {
+            for (let cache of documentCacheHolder.cache.values()) {
+                let doc = cache.document;
+                if (doc.visible && doc.transform2d && cache.bounds) {
+                    found = true;
+                    bounds.x1 = Math.min(bounds.x1, cache.bounds.x1 + doc.transform2d[4]);
+                    bounds.y1 = Math.min(bounds.y1, cache.bounds.y1 + doc.transform2d[5]);
+                    bounds.x2 = Math.max(bounds.x2, cache.bounds.x2 + doc.transform2d[4]);
+                    bounds.y2 = Math.max(bounds.y2, cache.bounds.y2 + doc.transform2d[5]);
+                }
+            }
+        }
+
+        if (!found) {
+            for (let cache of documentCacheHolder.cache.values()) {
                 let doc = cache.document;
                 if (doc.transform2d && cache.bounds) {
                     found = true;
@@ -1360,15 +1553,29 @@ class Workspace extends React.Component {
         if (found) {
             let marginX = (bounds.x2 - bounds.x1) / 50;
             let marginY = (bounds.y2 - bounds.y1) / 50;
-            this.props.dispatch(zoomArea(bounds.x1 - marginX, bounds.y1 - marginY, bounds.x2 + marginX, bounds.y2 + marginY));
+            return [bounds.x1 - marginX, bounds.y1 - marginY, bounds.x2 + marginX, bounds.y2 + marginY];
+        }
+    }
+
+    zoomDoc() {
+        const found = this.constructor.zoomDocArea(this.props.documentCacheHolder, this, false);
+        if (found) {
+            this.props.dispatch(zoomArea(...found));
+        }
+    }
+
+    static zoomGcodeArea(gcodePreview) {
+        if (gcodePreview.array) {
+            let marginX = (gcodePreview.maxX - gcodePreview.minX) / 50;
+            let marginY = (gcodePreview.maxY - gcodePreview.minY) / 50;
+            return [gcodePreview.minX - marginX, gcodePreview.minY - marginY, gcodePreview.maxX + marginX, gcodePreview.maxY + marginY];
         }
     }
 
     zoomGcode() {
-        if (this.gcodePreview.array) {
-            let marginX = (this.gcodePreview.maxX - this.gcodePreview.minX) / 50;
-            let marginY = (this.gcodePreview.maxY - this.gcodePreview.minY) / 50;
-            this.props.dispatch(zoomArea(this.gcodePreview.minX - marginX, this.gcodePreview.minY - marginY, this.gcodePreview.maxX + marginX, this.gcodePreview.maxY + marginY));
+        const found = this.constructor.zoomGcodeArea(this.gcodePreview);
+        if (found) {
+            this.props.dispatch(zoomArea(...found));
         }
     }
 
@@ -1507,6 +1714,7 @@ class Workspace extends React.Component {
         )
     }
 }
+const WorkspaceClass = Workspace;
 Workspace = connect(
     state => ({ camera: state.camera, gcode: state.gcode.content, workspace: state.workspace, settings: state.settings, enableVideo: ((state.settings.toolVideoDevice !== null) || (!!state.settings.toolWebcamUrl)) }),
     dispatch => ({
diff --git a/src/draw-commands/GcodePreview.js b/src/draw-commands/GcodePreview.js
index fd8adfcf..abfa33e9 100644
--- a/src/draw-commands/GcodePreview.js
+++ b/src/draw-commands/GcodePreview.js
@@ -170,6 +170,42 @@ export class GcodePreview {
         }
     }
 
+    setParsedGcodeFromPreview(preview) {
+        if (this.array === preview.array)
+            return;
+
+        this.arrayChanged = true;
+        ++this.arrayVersion;
+        if (!preview.array) {
+            this.array = null;
+            this.g0Dist = 0;
+            this.g1Time = 0;
+            this.moves = 0;
+        } else {
+            this.array = preview.array;
+            this.g0Dist = preview.g0Dist;
+            this.g1Time = preview.g1Time;
+            this.moves = preview.moves;
+            this.minX = preview.minX;
+            this.maxX = preview.maxX;
+            this.minY = preview.minY;
+            this.maxY = preview.maxY;
+            this.minA = preview.minA;
+            this.maxA = preview.maxA;
+            console.log('setParsedGcodeFromPreviewG', {
+                g0Dist: this.g0Dist,
+                g1Time: this.g1Time,
+                moves: this.moves,
+                minX: this.minX,
+                maxX: this.maxX,
+                minY: this.minY,
+                maxY: this.maxY,
+                minA: this.minA,
+                maxA: this.maxA,
+            });
+        }
+    }
+
     draw(drawCommands, perspective, view, g0Rate, simTime, rotaryDiameter) {
         if (this.drawCommands !== drawCommands) {
             this.drawCommands = drawCommands;
diff --git a/src/draw-commands/LaserPreview.js b/src/draw-commands/LaserPreview.js
index 8dba5941..07a69b51 100644
--- a/src/draw-commands/LaserPreview.js
+++ b/src/draw-commands/LaserPreview.js
@@ -167,6 +167,18 @@ export class LaserPreview {
         }
     }
 
+    setParsedGcodeFromPreview(preview) {
+        if (this.array === preview.array)
+            return;
+
+        this.arrayChanged = true;
+        if (!preview.array) {
+            this.array = null;
+        } else {
+            this.array = preview.array;
+        }
+    }
+
     draw(drawCommands, perspective, view, diameter, gcodeSMaxValue, g0Rate, simTime, rotaryDiameter) {
         if (this.drawCommands !== drawCommands) {
             this.drawCommands = drawCommands;
diff --git a/src/lib/action2gcode/generators/abstract-generator.js b/src/lib/action2gcode/generators/abstract-generator.js
index 9e58f70b..9cafbe7c 100644
--- a/src/lib/action2gcode/generators/abstract-generator.js
+++ b/src/lib/action2gcode/generators/abstract-generator.js
@@ -8,12 +8,24 @@ class AbstractGenerator {
   }
 
   postProcessRaster(gcode){
-    if (this.settings.gcodeToolOn && this.settings.gcodeToolOff){
-      gcode = XRegExp.replace(gcode,new XRegExp("G0(.*?)G1","gis"),'G0$1\n'+this.settings.gcodeToolOn+'\nG1')
-      gcode = XRegExp.replace(gcode,new XRegExp("G1(.*?)G0","gis"),'G1$1\n'+this.settings.gcodeToolOff+'\nG0')
-      return gcode;
-      //return gcode.replace(new XRegExp("G0(.*?)G1","gis"),'G0$1\n'+this.settings.gcodeToolOn+'\nG1').replace(new XRegExp("G1(.*?)G0","gis"),'G1$1\n'+this.settings.gcodeToolOff+'\nG0')
-    }
+    // if (this.settings.gcodeToolOn && this.settings.gcodeToolOff){
+    //   if (this.settings.gcodeToolOn.indexOf('$INTENSITY') > -1) {
+    //     // FIXME in marlin mode this grabs the wrong intensity. the right one is in the line before the G1
+    //     gcode = XRegExp.replace(gcode,new XRegExp("G0(.*?)G1(?:(.*?)("+(this.settings.gcodeLaserIntensity||'S')+"[0-9.]+))?","gis"), (_,m1,m2,m3) => {
+    //       return 'G0'+m1+'\n'+this.settings.gcodeToolOn.split('$INTENSITY').join(m3)+'\nG1'+m2+m3 
+    //     })
+    //   } else {
+    //     gcode = XRegExp.replace(gcode,new XRegExp("G0(.*?)G1","gis"),'G0$1\n'+this.settings.gcodeToolOn+'\nG1')
+    //   }
+
+    //   if (this.settings.gcodeToolOff.indexOf('$INTENSITY') > -1) {
+    //     gcode = XRegExp.replace(gcode,new XRegExp("G1(.*?)G0(?:(.*?)("+(this.settings.gcodeLaserIntensity||'S')+"[0-9.]+))?","gis"), (_,m1,m2,m3) => {
+    //       return 'G1'+m1+'\n'+this.settings.gcodeToolOff.split('$INTENSITY').join(m3)+'\nG0'+m2+m3
+    //     })
+    //   } else {
+    //     gcode = XRegExp.replace(gcode,new XRegExp("G1(.*?)G0","gis"),'G1$1\n'+this.settings.gcodeToolOff+'\nG0')
+    //   }
+    // }
     return gcode;
   }
 
diff --git a/src/reducers/settings.js b/src/reducers/settings.js
index 03496b43..d5cbec40 100644
--- a/src/reducers/settings.js
+++ b/src/reducers/settings.js
@@ -83,6 +83,7 @@ export const SETTINGS_INITIALSTATE = {
     machineLaserHasIntensity: true,
     machineBottomLeftX: 0,
     machineBottomLeftY: 0,
+    machineSizeFromMachine: false,
 
     machineFeedRange: {
         XY: {min: 1, max:50000},
@@ -168,6 +169,11 @@ export const SETTINGS_INITIALSTATE = {
     gcodeConcurrency: 2,
     gcodeSegmentLength: 0,
     gcodeCurvePrecision: 0.1,
+    gcodeThumbnailSizes: "",
+    gcodeThumbnailGridMinSize: 128,
+    gcodeThumbnailLaser: true,
+    gcodeThumbnailGcode: false,
+    gcodeThumbnailDocument: false,
 
     comServerVersion: 'not connected',
     comApiVersion: 'N/A',
@@ -178,6 +184,7 @@ export const SETTINGS_INITIALSTATE = {
     comAccumulatedJobTime: 0,
 
     connectVia: '',
+    connectServerVia: 'lw.comm-server',
     connectPort: '',
     connectBaud: '115200',
     connectIP: '',