diff --git a/src/viewProviders/RokuAutomationViewViewProvider.ts b/src/viewProviders/RokuAutomationViewViewProvider.ts
index de0fa885..71c723d5 100644
--- a/src/viewProviders/RokuAutomationViewViewProvider.ts
+++ b/src/viewProviders/RokuAutomationViewViewProvider.ts
@@ -17,6 +17,7 @@ export class RokuAutomationViewViewProvider extends BaseRdbViewProvider {
         super(context, dependencies);
 
         this.addMessageCommandCallback(ViewProviderCommand.storeRokuAutomationConfigs, async (message) => {
+            this.selectedConfig = message.context.selectedConfig;
             this.rokuAutomationConfigs = message.context.configs;
             // Make sure to use JSON.stringify or weird stuff happens
             await context.workspaceState.update(WorkspaceStateKey.rokuAutomationConfigs, JSON.stringify(message.context));
@@ -25,7 +26,12 @@ export class RokuAutomationViewViewProvider extends BaseRdbViewProvider {
 
         this.addMessageCommandCallback(ViewProviderCommand.runRokuAutomationConfig, async (message) => {
             const index = message.context.configIndex;
-            await this.runRokuAutomationConfig(index);
+            try {
+                await this.runRokuAutomationConfig(index);
+            } catch (e) {
+                this.updateCurrentRunningStep(-1);
+                throw e;
+            }
             return true;
         });
 
@@ -87,6 +93,7 @@ export class RokuAutomationViewViewProvider extends BaseRdbViewProvider {
     }
 
     private isRecording = false;
+    private selectedConfig: string;
     private rokuAutomationConfigs: {
         name: string;
         steps: {
@@ -153,10 +160,12 @@ export class RokuAutomationViewViewProvider extends BaseRdbViewProvider {
         const json = this.extensionContext.workspaceState.get(WorkspaceStateKey.rokuAutomationConfigs);
         if (typeof json === 'string') {
             const result = JSON.parse(json);
+            this.selectedConfig = result.selectedConfig;
             this.rokuAutomationConfigs = result.configs;
         }
 
         const message = this.createEventMessage(ViewProviderEvent.onRokuAutomationConfigsLoaded, {
+            selectedConfig: this.selectedConfig,
             configs: this.rokuAutomationConfigs
         });
 
diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
new file mode 100644
index 00000000..252a6fd2
--- /dev/null
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -0,0 +1,432 @@
+<script lang="ts">
+    import { Copy, DebugStart, DebugStop, Menu, Trash } from 'svelte-codicons';
+    import { dropzone, draggable } from './dnd';
+    import { intermediary } from '../../ExtensionIntermediary';
+    import { ViewProviderCommand } from '../../../../src/viewProviders/ViewProviderCommand';
+    import { ViewProviderEvent } from '../../../../src/viewProviders/ViewProviderEvent';
+
+    type Step = { type: string; value: string };
+    type Run = { name?: string; steps?: Step[] };
+    type Callback = (e: any) => void;
+
+    export let runs: Run[];
+    export let selectedRun: string;
+
+    let runTable: HTMLTableElement;
+    let nameInput: HTMLInputElement;
+    let nameInputDialog: HTMLDialogElement;
+    let nameInputDone: Callback;
+    let alertDialog: HTMLDialogElement;
+    let alertMessage: string;
+    let confirmDialog: HTMLDialogElement;
+    let confirmMessage: string;
+    let confirmDone: Callback;
+    let showContent: boolean = false;
+    let activeRun: string = null;
+
+    intermediary.observeEvent(ViewProviderEvent.onRokuAutomationConfigStepChange, (message) => {
+        if (message.context.step === -1) {
+            activeRun = null;
+        }
+    });
+
+    function toggleDropDown() {
+        showContent = !showContent;
+    }
+
+    function selectRun(e: MouseEvent) {
+        const run: string = getRunFromEvent(e);
+        selectedRun = run;
+    }
+
+    function startRun(e: MouseEvent) {
+        if (!activeRun) {
+            selectedRun = getRunFromEvent(e);
+            activeRun = selectedRun;
+            intermediary.sendCommand(ViewProviderCommand.runRokuAutomationConfig, {
+                configIndex: getRunIndex().toString()
+            });
+        }
+    }
+
+    function stopRun(e: MouseEvent) {
+        const run = getRunFromEvent(e);
+        if (activeRun === run) {
+            selectedRun = run;
+            intermediary.sendCommand(ViewProviderCommand.stopRokuAutomationConfig, {
+                configIndex: getRunIndex().toString()
+            });
+        }
+    }
+
+    function moveSelection(e: KeyboardEvent) {
+        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+            const index: number =
+                runs.findIndex((r) => r.name === selectedRun) +
+                (e.key === 'ArrowUp' ? -1 : 1);
+            selectedRun = runs[(index + runs.length) % runs.length].name;
+        }
+    }
+
+    async function copyRun(e: MouseEvent) {
+        const run: string = getRunFromEvent(e);
+        const runName: string = await showNameInputDialog(
+            run,
+            `Copy of ${run}`
+        );
+        if (runName) {
+            const steps: Step[] = runs.find((r) => r.name === run)?.steps ?? [];
+            selectedRun = runName;
+            runs = [
+                { name: runName, steps: structuredClone(steps) },
+                ...runs.filter((r) => r.name !== runName)
+            ];
+        }
+    }
+
+    async function deleteRun(e: MouseEvent) {
+        const run: string = getRunFromEvent(e);
+        if (await showConfirmDeleteDialog(run)) {
+            runs = runs.filter((r) => r.name !== run);
+        }
+        confirmDialog.close();
+    }
+
+    function moveRun(runName: string, index: number) {
+        let currIndex: number = runs.findIndex((r) => r.name === runName);
+        if (
+            currIndex < 0 ||
+            index < 0 ||
+            index > runs.length ||
+            currIndex === index
+        )
+            return;
+        const runToMove: Run = runs[currIndex];
+
+        const newRunList: Run[] = [
+            ...runs.slice(0, index),
+            runToMove,
+            ...runs.slice(index)
+        ];
+        newRunList.splice(currIndex < index ? currIndex : ++currIndex, 1);
+        runs = newRunList;
+    }
+
+    async function renameRun(e: Event) {
+        const run: string = getRunFromEvent(e);
+        const runName = await showNameInputDialog(run, run);
+        if (runName) {
+            runs.find((r) => r.name === run).name = runName;
+            runs = runs;
+            selectedRun = runName;
+        }
+    }
+
+    async function addNewRun() {
+        const runName = await showNameInputDialog();
+        if (runName) {
+            runs = [
+                { name: runName, steps: [] },
+                ...runs.filter((r) => r.name !== runName)
+            ];
+            selectedRun = runName;
+        }
+    }
+
+    async function showConfirmDeleteDialog(targetRun: string = ''): Promise<string> {
+        return new Promise((resolve) => {
+            selectedRun = targetRun;
+            confirmMessage = `Are you sure you want to delete '${targetRun}'?`;
+            confirmDialog.showModal();
+            confirmDone = resolve;
+        });
+    }
+
+    async function showNameInputDialog(
+        targetRun: string = '',
+        defaultText: string = ''
+    ): Promise<string> {
+        return new Promise((resolve) => {
+            selectedRun = targetRun;
+            nameInput.value = defaultText;
+            nameInputDialog.showModal();
+            nameInputDone = resolve;
+        });
+    }
+
+    function onNameChange(e: any) {
+        const name: string = nameInput.value;
+        const isValidName: boolean = name && !runs.find((r) => r.name === name);
+        const source: string = e.target.tagName;
+        let retval: string = null;
+
+        if (
+            (/BUTTON/i.test(source) && e.target.id === 'OK') ||
+            /INPUT/i.test(source)
+        ) {
+            if (!isValidName) {
+                alertMessage = `Sorry, cannot use '${name}', please choose another name`;
+                setTimeout(() => alertDialog.showModal()); // add to task queue
+                nameInput.focus();
+                return;
+            }
+            retval = name;
+        }
+
+        setTimeout(() => nameInputDialog.close()); // add to task queue
+        nameInputDone(retval);
+    }
+
+    function getRunFromEvent(e: any) {
+        e.stopPropagation();
+        return e.target.closest('tr').title;
+    }
+
+    function getRunIndex() {
+        return (runs ?? []).findIndex((r) => r.name === selectedRun)
+    };
+</script>
+
+<style>
+    #editor {
+        width: auto;
+        height: auto;
+        margin: 0px;
+        background-color: var(--vscode-editor-background);
+    }
+
+    #content-container {
+        background-color: var(--vscode-editor-background);
+        position: absolute;
+        z-index: 1;
+        width: calc(100% - 15px);
+        height: calc(100% - 65px);
+        display: flex;
+        color: var(--vscode-editor-foreground);
+        padding: 5px;
+    }
+
+    #run-list {
+        position: absolute;
+        width: 100%;
+        height: calc(100% - 35px);
+        display: flex;
+        overflow-y: auto;
+    }
+
+    #run-list:global(.droppable) {
+        box-shadow: inset 0 0 0 2px red;
+    }
+
+    #selected-tr {
+        color: var(--vscode-editor-foreground);
+        background-color: var(--vscode-button-background);
+    }
+
+    vscode-divider {
+        margin: 0px;
+    }
+
+    #selection {
+        display: flex;
+        width: auto;
+        height: 100%;
+        align-items: center;
+        padding: 5px;
+    }
+
+    #selection-text {
+        font-size: large;
+        white-space: nowrap;
+        width: 100%;
+        text-overflow: ellipsis;
+        display: inline-block;
+        overflow: hidden;
+        color: var(--vscode-editor-foreground);
+    }
+
+    #selection-button {
+        align-content: center;
+        font-size: xx-large;
+        height: 100%;
+        margin-bottom: auto;
+        margin-left: auto;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--vscode-editor-foreground);
+        margin-top: auto;
+    }
+
+    #selection-button:hover {
+        color: lightslategray;
+    }
+
+    #run-name:hover {
+        cursor: pointer;
+    }
+
+    #button-container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        margin-top: auto;
+    }
+
+    #button-container > * {
+        margin-left: 5px;
+    }
+
+    #close-button {
+        color: var(--vscode-editor-foreground);
+    }
+
+    #NameInput {
+        color: var(--vscode-editor-foreground);
+        background-color: var(--vscode-editor-background);
+        border-color: var(--vscode-button-background);
+        outline-color: var(--vscode-button-background);
+    }
+
+    #NameInputDialog {
+        color: var(--vscode-editor-foreground);
+        background-color: var(--vscode-editor-background);
+    }
+
+    .run-row *:global(.droppable) {
+        border-top: 5px solid red;
+    }
+</style>
+
+<div id="editor" tabindex="-1" on:keydown={moveSelection}>
+    <div id="selection">
+        <div id="selection-text" title={selectedRun}>{selectedRun}</div>
+        <vscode-button
+            id="selection-button"
+            title="Edit Runs"
+            on:click={toggleDropDown}><Menu /></vscode-button>
+    </div>
+    {#if showContent}
+        <div id="content-container">
+            <div
+                id="run-list"
+                use:dropzone={{
+                    onDropzone(runName) {
+                        moveRun(runName, runs.length);
+                    }
+                }}>
+                <table
+                    width="100%"
+                    cellspacing="0"
+                    style="margin-bottom: auto;"
+                    bind:this={runTable}>
+                    {#each runs as run, index}
+                        <tr>
+                            <td colspan="5">
+                                <vscode-divider />
+                            </td>
+                        </tr>
+                        <tr
+                            class="run-row"
+                            use:dropzone={{
+                                onDropzone(runName) {
+                                    moveRun(runName, index);
+                                }
+                            }}
+                            use:draggable={run.name}
+                            on:click={selectRun}
+                            on:dblclick={renameRun}
+                            title={run.name}
+                            id={run.name === selectedRun ? 'selected-tr' : ''}>
+                            <td>
+                                <span id="run-name">
+                                    {run.name}
+                                </span>
+                            </td>
+                            <td style="text-align: end;">
+                                <vscode-button
+                                    id="copy-button"
+                                    title={`Copy '${run.name}'`}
+                                    on:click={copyRun}
+                                    appearance="icon"
+                                    aria-label={run.name}>
+                                    <Copy />
+                                </vscode-button>
+                                <vscode-button
+                                    id="delete-button"
+                                    title={`Delete '${run.name}'`}
+                                    on:click={deleteRun}
+                                    appearance="icon"
+                                    aria-label={run.name}>
+                                    <Trash />
+                                </vscode-button>
+                            {#if !activeRun || activeRun !== run.name}
+                                <vscode-button
+                                    id="play-start-button"
+                                    title={`Start '${run.name}'`}
+                                    on:click={startRun}
+                                    appearance="icon"
+                                    disabled={activeRun && activeRun !== run.name}
+                                    aria-label={run.name}>
+                                    <DebugStart />
+                                </vscode-button>
+                            {:else}
+                                <vscode-button
+                                    id="play-stop-button"
+                                    title={`Stop '${run.name}'`}
+                                    on:click={stopRun}
+                                    appearance="icon"
+                                    aria-label={run.name}>
+                                    <DebugStop />
+                                </vscode-button>
+                            {/if}
+                            </td>
+                        </tr>
+                    {/each}
+                </table>
+            </div>
+            <div id="button-container">
+                <vscode-button id="add-button" on:click={addNewRun}
+                    >Add</vscode-button>
+                <vscode-button id="close-button" on:click={toggleDropDown}
+                    >Close</vscode-button>
+            </div>
+        </div>
+    {/if}
+</div>
+
+<dialog
+    id="NameInputDialog"
+    bind:this={nameInputDialog}
+    on:cancel={onNameChange}>
+    <h3 style="margin-top: -10px;">Enter Run Name</h3>
+    <div style="margin-bottom: 10px">
+        <input
+            id="NameInput"
+            bind:this={nameInput}
+            placeholder="Enter run name"
+            style="width: 100%;"
+            on:focus={() => nameInput.select()}
+            on:keydown={(e) => e.key === 'Enter' && onNameChange(e)} />
+    </div>
+    <div class="button-group horizontal-container">
+        <vscode-button id="OK" on:click={onNameChange}>OK</vscode-button>
+        <vscode-button id="Cancel" on:click={onNameChange}
+            >Cancel</vscode-button>
+    </div>
+</dialog>
+
+<dialog id="confirmDialog" bind:this={confirmDialog}>
+    <h3>{confirmMessage}</h3>
+    <div class="button-group horizontal-container">
+        <vscode-button id="YES" on:click={() => confirmDone(true)}>YES</vscode-button>
+        <vscode-button id="NO" on:click={() => confirmDone(false)}>NO</vscode-button>
+    </div>
+</dialog>
+
+<dialog id="alertDialog" bind:this={alertDialog}>
+    <h3>{alertMessage}</h3>
+    <div class="button-group horizontal-container">
+        <vscode-button id="OK" on:click={alertDialog.close()}>OK</vscode-button>
+    </div>
+</dialog>
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index 0b3a5c2e..73790bc1 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -1,15 +1,46 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <script lang="ts">
-    import { odc, intermediary } from '../../ExtensionIntermediary';
+    import { intermediary } from '../../ExtensionIntermediary';
     import { Trash, Add, ArrowUp, ArrowDown } from 'svelte-codicons';
     import { ViewProviderEvent } from '../../../../src/viewProviders/ViewProviderEvent';
     import { ViewProviderCommand } from '../../../../src/viewProviders/ViewProviderCommand';
     import NumberField from '../../shared/NumberField.svelte';
+    import AutoRunsEditor from './AutoRunsEditor.svelte';
 
     window.vscode = acquireVsCodeApi();
 
-    let loading = true;
-    let currentRunningStep = -1;
+    type Step = { type: string, value: string };
+    type Run = { name?: string, steps?: Step[] };
+
+    let runs: Run[];
+    let selectedRun: string;
+    let autoRunsEditor: any;
+    let loading: boolean = true;
+    let currentRunningStep: number = -1;
+
+    $: runs, selectedRun, updateRuns();
+
+    function getRunIndex() {
+        return (runs ?? []).findIndex((r) => r.name === selectedRun)
+    };
+
+    function updateRuns() {
+        if (!runs || runs.length === 0) {
+            runs = [{ }];
+        }
+        if (!selectedRun || getRunIndex() === -1) {
+            if (!runs[0].name) {
+                runs[0].name = 'DEFAULT';
+            }
+            selectedRun = runs[0].name;
+        }
+        let cfg: Run = runs.find((c) => c.name === selectedRun);
+        if (!cfg.steps) {
+            cfg.steps = [{ type: 'sleep', value: '8' }];
+        }
+        steps = cfg.steps;
+        storeConfigs(steps);
+    };
 
     const stepTypes = {
         sleep: {
@@ -27,7 +58,7 @@
         }
     };
 
-    const availableKeys = {
+    const availableKeys: any = {
         Back: 'Back',
         Backspace: 'Backspace',
         Down: 'Down',
@@ -53,12 +84,13 @@
     }[];
 
     function storeConfigs(updatedSteps) {
-        if(!loading) {
+        const targetRun: Run = runs.find((r) => r.name === selectedRun);
+
+        if(!loading && targetRun) {
+            targetRun.steps = updatedSteps
             intermediary.sendCommand(ViewProviderCommand.storeRokuAutomationConfigs, {
-                configs: [{
-                    name: 'DEFAULT',
-                    steps: updatedSteps
-                }]
+                selectedConfig: selectedRun,
+                configs: runs
             });
         }
 
@@ -67,7 +99,7 @@
     }
 
     function onStepTypeChange() {
-        const step = steps[this.id];
+        const step: Step = steps[this.id];
         step.type = this.value;
         delete step.value;
 
@@ -75,7 +107,7 @@
     }
 
     function onStepValueChange() {
-        const step = steps[this.id];
+        const step: Step = steps[this.id];
         step.value = this.value;
 
         storeConfigs(steps);
@@ -103,30 +135,31 @@
 
     function runConfig() {
         intermediary.sendCommand(ViewProviderCommand.runRokuAutomationConfig, {
-            configIndex: this.id
+            configIndex: getRunIndex().toString()
         });
     }
 
     function stopConfig() {
+        if (!this) return;
         intermediary.sendCommand(ViewProviderCommand.stopRokuAutomationConfig, {
-            configIndex: this.id
+            configIndex: getRunIndex().toString()
         });
     }
 
     function moveStepUp() {
-        const step = steps.splice(this.id, 1)[0];
+        const step: Step = steps.splice(this.id, 1)[0];
         steps.splice(this.id - 1, 0, step);
         storeConfigs(steps);
     }
 
     function moveStepDown() {
-        const step = steps.splice(this.id, 1)[0];
+        const step: Step = steps.splice(this.id, 1)[0];
         steps.splice(+this.id + 1, 0, step);
         storeConfigs(steps);
     }
 
     function onKeydown(event) {
-        const key = event.key;
+        const key: any = event.key;
 
         switch (key) {
             case 'Escape':
@@ -134,22 +167,14 @@
                 break;
         }
     }
-
     intermediary.observeEvent(ViewProviderEvent.onRokuAutomationConfigsLoaded, (message) => {
-        const configs = message.context.configs;
-        if (configs) {
-            const config = configs[0];
-            steps = config.steps;
-        } else {
-            steps = [{
-                type: 'sleep',
-                value: '8'
-            }];
-        }
+        runs = message.context.configs;
+        selectedRun = message.context.selectedConfig;
+        updateRuns();
         loading = false;
     });
 
-    let lastStepDate = Date.now();
+    let lastStepDate: number = Date.now();
     intermediary.observeEvent(ViewProviderEvent.onRokuAutomationConfigStepChange, (message) => {
         currentRunningStep = message.context.step;
         if (currentRunningStep === -1) {
@@ -160,7 +185,7 @@
 
     function addSleepStep() {
         // Figure out how long it has been since we last had a step
-        let elapsedTime = (Date.now() - lastStepDate) / 1000;
+        let elapsedTime: number = (Date.now() - lastStepDate) / 1000;
 
         // Round to the nearest tenth
         elapsedTime = (Math.round(elapsedTime * 10) / 10);
@@ -172,10 +197,10 @@
     }
 
     intermediary.observeEvent(ViewProviderEvent.onRokuAutomationKeyPressed, (message) => {
-        let {key, literalCharacter} = message.context;
+        let {key, literalCharacter}: any = message.context;
         if (literalCharacter) {
             // Check if we were typing somethign before and if so just add on to it
-            const lastStep = steps.at(-1);
+            const lastStep: Step = steps.at(-1);
             if (lastStep?.type === stepTypes.sendText.type) {
                 lastStep.value += key
             } else {
@@ -240,6 +265,10 @@
 <svelte:window on:keydown={onKeydown} />
 
 <div id="container">
+    <AutoRunsEditor
+        bind:this={autoRunsEditor}
+        bind:runs={runs}
+        bind:selectedRun={selectedRun}/>
     <table>
     {#each steps as step, index}
         <tr>
diff --git a/webviews/src/views/RokuAutomationView/dnd.ts b/webviews/src/views/RokuAutomationView/dnd.ts
new file mode 100644
index 00000000..c21561f9
--- /dev/null
+++ b/webviews/src/views/RokuAutomationView/dnd.ts
@@ -0,0 +1,81 @@
+/* eslint-disable object-shorthand */
+/* eslint-disable curly */
+export function draggable(node, data) {
+    let state: any = data;
+
+    node.draggable = true;
+    node.style.cursor = 'grab';
+
+    function handleDragstart(e) {
+        if (!e.dataTransfer) return;
+        e.dataTransfer.setData('text/plain', state);
+    }
+
+    node.addEventListener('dragstart', handleDragstart);
+
+    return {
+        update(data) {
+            state = data;
+        },
+
+        destroy() {
+            node.removeEventListener('dragstart', handleDragstart);
+        }
+    };
+}
+
+export function dropzone(node, options) {
+    let state: any = {
+        dropEffect: 'move',
+        dragoverClass: 'droppable',
+        ...options
+    };
+
+    function handleDragenter(e) {
+        if (!(e.target instanceof HTMLElement)) return;
+        e.target.classList.add(state.dragoverClass);
+    }
+
+    function handleDragleave(e) {
+        if (!(e.target instanceof HTMLElement)) return;
+        e.target.classList.remove(state.dragoverClass);
+    }
+
+    function handleDragover(e) {
+        e.preventDefault();
+        if (!e.dataTransfer) return;
+        e.dataTransfer.dropEffect = state.dropEffect;
+    }
+
+    function handleDrop(e) {
+        e.preventDefault();
+        if (!e.dataTransfer) return;
+        const data: any = e.dataTransfer.getData('text/plain');
+        if (!(e.target instanceof HTMLElement)) return;
+        e.target.classList.remove(state.dragoverClass);
+        state.onDropzone(data, e);
+        e.stopPropagation();
+    }
+
+    node.addEventListener('dragenter', handleDragenter);
+    node.addEventListener('dragleave', handleDragleave);
+    node.addEventListener('dragover', handleDragover);
+    node.addEventListener('drop', handleDrop);
+
+    return {
+        update(options) {
+            state = {
+                dropEffect: 'move',
+                dragoverClass: 'droppable',
+                ...options
+            };
+        },
+
+        destroy() {
+            node.removeEventListener('dragenter', handleDragenter);
+            node.removeEventListener('dragleave', handleDragleave);
+            node.removeEventListener('dragover', handleDragover);
+            node.removeEventListener('drop', handleDrop);
+        }
+    };
+}