From d15c564427eaae724f7bcf02e1e32f9a5cff6758 Mon Sep 17 00:00:00 2001
From: justin tucker <129927578+jtuckerfubo@users.noreply.github.com>
Date: Mon, 7 Oct 2024 23:19:48 -0700
Subject: [PATCH 01/22] added controls to display, select, add, and remove
 automation configs

---
 .../RokuAutomationView/ConfigControls.svelte  | 141 ++++++++++++++++++
 .../RokuAutomationView.svelte                 |  40 +++--
 2 files changed, 165 insertions(+), 16 deletions(-)
 create mode 100644 webviews/src/views/RokuAutomationView/ConfigControls.svelte

diff --git a/webviews/src/views/RokuAutomationView/ConfigControls.svelte b/webviews/src/views/RokuAutomationView/ConfigControls.svelte
new file mode 100644
index 00000000..7b359f25
--- /dev/null
+++ b/webviews/src/views/RokuAutomationView/ConfigControls.svelte
@@ -0,0 +1,141 @@
+<script>
+    export let selectedConfig; // string
+    export let configs; // array of configs
+
+    let showModal;
+    let inputValue = '';
+    let _inputValue = inputValue;
+    let dialog;
+
+    $: if (inputValue !== '') {
+        let found = configs.find((c) => c.name === inputValue);
+        if (!found) configs.push({ name: inputValue, steps: [] });
+        selectedConfig = inputValue;
+        inputValue = '';
+        configs = configs;
+    }
+
+    const pressOK = () => {
+        if (typeof _inputValue === 'string' && _inputValue !== '') {
+            inputValue = _inputValue;
+            // @ts-ignore
+            _inputValue = '';
+            console.log(`***** Pressed OK and inputValue=${inputValue}`);
+            showModal = false;
+            dialog.close();
+        }
+    };
+
+    $: if (dialog && showModal) dialog.showModal();
+
+    function deleteConfig() {
+        configs = configs.filter((c) => c.name !== selectedConfig);
+        selectedConfig = configs[0].name;
+    }
+</script>
+
+<style>
+    .button-group {
+        display: inline;
+    }
+    .btn {
+        border: none;
+        color: black;
+        border: 1px solid lightgray;
+        font-size: 16px;
+        cursor: pointer;
+    }
+
+    .btn:hover {
+        background-color: RoyalBlue;
+    }
+    dialog {
+        max-width: 32em;
+        border-radius: 0.2em;
+        border: none;
+        padding: 0;
+    }
+    dialog::backdrop {
+        background: rgba(0, 0, 0, 0.3);
+    }
+    dialog > div {
+        padding: 1em;
+    }
+    dialog[open] {
+        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    @keyframes zoom {
+        from {
+            transform: scale(0.95);
+        }
+        to {
+            transform: scale(1);
+        }
+    }
+    dialog[open]::backdrop {
+        animation: fade 0.2s ease-out;
+    }
+    @keyframes fade {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+    button {
+        display: inline;
+    }
+</style>
+
+<link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+<span class="config-controls">
+    <span>
+        <select bind:value={selectedConfig} title="Automation configurations">
+            {#each configs ?? [] as config}
+                <option value={config.name}>{config.name}</option>
+            {/each}
+        </select>
+
+        <span class="button-group">
+            <button
+                on:click={() => (showModal = true)}
+                title="Create a new configuration"
+                class="btn"><i class="fa fa-plus"></i></button>
+            <button
+                on:click={deleteConfig}
+                title="Delete the current configuration"
+                class="btn"><i class="fa fa-minus"></i></button>
+        </span>
+    </span>
+</span>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+    bind:this={dialog}
+    on:close={() => (showModal = false)}
+    on:click|self={() => dialog.close()}>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click|stopPropagation>
+        <h2> Create a new configuration </h2>
+
+        <!-- svelte-ignore a11y-autofocus -->
+        <input
+            autofocus
+            type="text"
+            placeholder="Enter config name"
+            bind:value={_inputValue} />
+        <hr />
+        <ul class="definition-list">
+            <li>A configuration is a named set of autorun steps</li>
+            <li>Configurations are automatically saved</li>
+        </ul>
+
+        <hr />
+        <!-- svelte-ignore a11y-autofocus -->
+        <button autofocus on:click={() => pressOK()}>create</button>
+        <button on:click={() => dialog.close()}>close</button>
+    </div>
+</dialog>
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index 0b3a5c2e..51f5eae8 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -5,12 +5,25 @@
     import { ViewProviderEvent } from '../../../../src/viewProviders/ViewProviderEvent';
     import { ViewProviderCommand } from '../../../../src/viewProviders/ViewProviderCommand';
     import NumberField from '../../shared/NumberField.svelte';
+    import ConfigControls from './ConfigControls.svelte';
 
     window.vscode = acquireVsCodeApi();
 
+    let configs;
+    let selectedConfig;
     let loading = true;
     let currentRunningStep = -1;
 
+    $: if (!configs || configs.length === 0) {
+        selectedConfig = 'DEFAULT';
+        configs = [ { name: selectedConfig, steps: [{ type: 'sleep', value: '8' }] } ];
+    }
+
+    $: if (selectedConfig) {
+        steps = configs.find((c) => c.name === selectedConfig)?.steps ?? [];
+        storeConfigs(steps);
+    }
+
     const stepTypes = {
         sleep: {
             type: 'sleep',
@@ -54,11 +67,12 @@
 
     function storeConfigs(updatedSteps) {
         if(!loading) {
+            configs = [
+                { name: selectedConfig, steps: updatedSteps },
+                ...configs.filter((c) => c.name !== selectedConfig)
+            ]
             intermediary.sendCommand(ViewProviderCommand.storeRokuAutomationConfigs, {
-                configs: [{
-                    name: 'DEFAULT',
-                    steps: updatedSteps
-                }]
+                configs: configs
             });
         }
 
@@ -136,16 +150,9 @@
     }
 
     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'
-            }];
-        }
+        configs = message.context.configs;
+        selectedConfig = configs[0].name;
+        steps = configs[0].steps;
         loading = false;
     });
 
@@ -300,7 +307,8 @@
     {#if currentRunningStep >= 0}
         <vscode-button id={0} on:click={stopConfig}>Stop</vscode-button>
     {:else}
-        <vscode-button id={0} on:click={runConfig}>Run</vscode-button>
-        <vscode-button id={0} on:click={clearConfig} appearance="secondary">Clear</vscode-button>
+            <vscode-button id={0} on:click={runConfig}>Run</vscode-button>
+            <vscode-button id={0} on:click={clearConfig} appearance="secondary">Clear</vscode-button>
+            <ConfigControls bind:selectedConfig={selectedConfig} bind:configs={configs} />
     {/if}
 </div>

From 7accd13342912f707e732697a585450fc105d3b8 Mon Sep 17 00:00:00 2001
From: justin tucker <129927578+jtuckerfubo@users.noreply.github.com>
Date: Tue, 8 Oct 2024 09:56:25 -0700
Subject: [PATCH 02/22] Update
 webviews/src/views/RokuAutomationView/ConfigControls.svelte

Co-authored-by: Bronley Plumb <bronley@gmail.com>
---
 webviews/src/views/RokuAutomationView/ConfigControls.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webviews/src/views/RokuAutomationView/ConfigControls.svelte b/webviews/src/views/RokuAutomationView/ConfigControls.svelte
index 7b359f25..7e50bf60 100644
--- a/webviews/src/views/RokuAutomationView/ConfigControls.svelte
+++ b/webviews/src/views/RokuAutomationView/ConfigControls.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     export let selectedConfig; // string
     export let configs; // array of configs
 

From e681ce32049f107c96dee0e3d831189b31eaa9c4 Mon Sep 17 00:00:00 2001
From: justin tucker <129927578+jtuckerfubo@users.noreply.github.com>
Date: Thu, 10 Oct 2024 19:29:11 -0700
Subject: [PATCH 03/22] Replaced ConfigControls with AutoRunsEditor, adding
 expanded set of autorun management functions in a dialog. Functions include
 adding, copying, removing, and managing order of autoruns.

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 223 ++++++++++++++++++
 .../RokuAutomationView/ConfigControls.svelte  | 141 -----------
 .../RokuAutomationView.svelte                 |  54 +++--
 3 files changed, 261 insertions(+), 157 deletions(-)
 create mode 100644 webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
 delete mode 100644 webviews/src/views/RokuAutomationView/ConfigControls.svelte

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
new file mode 100644
index 00000000..dd78e6e9
--- /dev/null
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+    let runs;
+    let selectedRun;
+    let dialog;
+    let getNameDialog;
+    let defaultName;
+    let callback;
+
+    $: {
+        if (!runs) runs = [];
+        if (runs.findIndex((r) => r.name === selectedRun) === -1)
+            selectedRun = runs[0]?.name;
+
+        // force reactivity to work around vscode-dropdown limitation
+        const temp = selectedRun;
+        selectedRun = null;
+        selectedRun = temp;
+    }
+
+    // entry point for the editor
+    export const show = async (params) => {
+        return new Promise((resolve, reject) => {
+            try {
+                dialog.addEventListener('close', (e) => {
+                    const ok = e.target.returnValue === 'ok';
+                    resolve({
+                        ok: ok,
+                        runs: ok ? runs : undefined,
+                        selectedRun: ok ? (selectedRun ?? '') : undefined
+                    });
+                });
+                runs = params?.runs ?? [];
+                selectedRun = params?.selectedRun ?? '';
+                dialog.showModal();
+            } catch (e) {
+                reject(e);
+            }
+        });
+    };
+
+    function createRun() {
+        defaultName = 'DEFAULT';
+        callback = (e) => {
+            const name = e.target.returnValue;
+            getNameDialog.removeEventListener('close', callback);
+            if (name) {
+                selectedRun = name;
+                runs = [
+                    { name: name, steps: [] },
+                    ...runs.filter((r) => r.name !== name)
+                ];
+            }
+        };
+        getNameDialog.addEventListener('close', callback);
+        getNameDialog.showModal();
+    }
+
+    function copyRun() {
+        if (!selectedRun || !runs || runs.length === 0) return;
+        defaultName = `Copy of ${selectedRun}`;
+        callback = (e) => {
+            const name = e.target.returnValue;
+            getNameDialog.removeEventListener('close', callback);
+            if (name) {
+                const steps = runs.find((r) => r.name === selectedRun)?.steps ?? [];
+                selectedRun = name;
+                runs = [
+                    { name: name, steps: structuredClone(steps) },
+                    ...runs.filter((r) => r.name !== name)
+                ];
+            }
+        };
+        getNameDialog.addEventListener('close', callback);
+        getNameDialog.showModal();
+    }
+
+    function deleteRun() {
+        if (!selectedRun || !runs || runs.length === 0) return;
+        runs = runs.filter((r) => r.name !== selectedRun);
+    }
+
+    function moveUp() {
+        if (!selectedRun || !runs || runs.length === 0) return;
+        const index = runs.findIndex((r) => r.name === selectedRun);
+        if (index > 0) {
+            const temp = runs[index - 1];
+            runs[index - 1] = runs[index];
+            runs[index] = temp;
+        }
+    }
+
+    function moveDown() {
+        if (!selectedRun || !runs || runs.length === 0) return;
+        const index = runs.findIndex((r) => r.name === selectedRun);
+        if (index < runs.length - 1) {
+            const temp = runs[index + 1];
+            runs[index + 1] = runs[index];
+            runs[index] = temp;
+        }
+    }
+
+    const commitName = () => {
+        const name = (document.getElementById('run-name') as HTMLInputElement)
+            .value;
+        getNameDialog.close(name);
+    };
+
+    const discardName = () => getNameDialog.close('');
+
+    const selectText = e => e.target.select();
+</script>
+
+<style>
+    .horizontal-container {
+        display: flex;
+        flex-flow: row;
+    }
+    .vertical-container {
+        display: flex;
+        flex-flow: column;
+    }
+    #dialog {
+        background-color: black;
+    }
+    #getNameDialog {
+        background-color: black;
+        border-style: solid;
+        border-color: skyblue;
+    }
+    .page {
+        border-style: solid;
+        border-color: dodgerblue;
+    }
+    .header {
+        padding: 5px;
+        align-items: center;
+        justify-content: center;
+    }
+    .body {
+        padding: 5px;
+    }
+    .footer {
+        margin-top: auto;
+        padding: 5px;
+    }
+    .vertical-container.long-panel {
+        margin-right: 25px;
+    }
+    .button-group {
+        gap: 12px;
+    }
+    vscode-button {
+        margin-top: 5px;
+    }
+    hr {
+        width: 100%;
+        height: 2px;
+        border-width: 0;
+        color: gray;
+        background-color: gray;
+    }
+    h2 {
+        color: white;
+    }
+    h3 {
+        color: white;
+        margin-top: -5px;
+    }
+</style>
+
+<dialog id="dialog" bind:this={dialog}>
+    <div class="page vertical-container">
+        <div class="header vertical-container">
+            <h2>Manage Autoruns</h2>
+        </div>
+        <div class="body vertical-container">
+            <div class="panels horizontal-container">
+                <div class="long-panel vertical-container">
+                    <vscode-dropdown size="10" value={selectedRun} on:change={(e) => selectedRun = e.target.value}>
+                        {#each runs as run}
+                            <vscode-option title={run.name} value={run.name}
+                                >{run.name}</vscode-option>
+                        {/each}
+                    </vscode-dropdown>
+                </div>
+                <div class="long-panel vertical-container">
+                    <div class="vertical-container">
+                        <vscode-button on:click={createRun}
+                            >Create</vscode-button>
+                        <vscode-button on:click={copyRun}>Copy</vscode-button>
+                        <vscode-button on:click={deleteRun}
+                            >Delete</vscode-button>
+                        <vscode-button on:click={moveUp}>Move up</vscode-button>
+                        <vscode-button on:click={moveDown}
+                            >Move down</vscode-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer vertical-container">
+            <hr />
+            <div class="button-group horizontal-container">
+                <button style="margin-left: auto;"
+                    on:click={() => dialog.close('ok')}
+                    value="cancel-button">OK</button>
+                <button
+                    on:click={() => dialog.close('cancel')}
+                    value="cancel-button">Cancel</button>
+            </div>
+        </div>
+    </div>
+</dialog>
+
+<dialog id="getNameDialog" bind:this={getNameDialog}>
+    <h3>Enter Run Name</h3>
+    <div style="margin-bottom: 6px;">
+        <input id="run-name" placeholder="Enter run name" bind:value={defaultName} on:focus={selectText} autofocus/>
+    </div>
+    <div class="button-group horizontal-container">
+        <button on:click={commitName}>OK</button>
+        <button on:click={discardName}>Cancel</button>
+    </div>
+</dialog>
diff --git a/webviews/src/views/RokuAutomationView/ConfigControls.svelte b/webviews/src/views/RokuAutomationView/ConfigControls.svelte
deleted file mode 100644
index 7e50bf60..00000000
--- a/webviews/src/views/RokuAutomationView/ConfigControls.svelte
+++ /dev/null
@@ -1,141 +0,0 @@
-<script lang="ts">
-    export let selectedConfig; // string
-    export let configs; // array of configs
-
-    let showModal;
-    let inputValue = '';
-    let _inputValue = inputValue;
-    let dialog;
-
-    $: if (inputValue !== '') {
-        let found = configs.find((c) => c.name === inputValue);
-        if (!found) configs.push({ name: inputValue, steps: [] });
-        selectedConfig = inputValue;
-        inputValue = '';
-        configs = configs;
-    }
-
-    const pressOK = () => {
-        if (typeof _inputValue === 'string' && _inputValue !== '') {
-            inputValue = _inputValue;
-            // @ts-ignore
-            _inputValue = '';
-            console.log(`***** Pressed OK and inputValue=${inputValue}`);
-            showModal = false;
-            dialog.close();
-        }
-    };
-
-    $: if (dialog && showModal) dialog.showModal();
-
-    function deleteConfig() {
-        configs = configs.filter((c) => c.name !== selectedConfig);
-        selectedConfig = configs[0].name;
-    }
-</script>
-
-<style>
-    .button-group {
-        display: inline;
-    }
-    .btn {
-        border: none;
-        color: black;
-        border: 1px solid lightgray;
-        font-size: 16px;
-        cursor: pointer;
-    }
-
-    .btn:hover {
-        background-color: RoyalBlue;
-    }
-    dialog {
-        max-width: 32em;
-        border-radius: 0.2em;
-        border: none;
-        padding: 0;
-    }
-    dialog::backdrop {
-        background: rgba(0, 0, 0, 0.3);
-    }
-    dialog > div {
-        padding: 1em;
-    }
-    dialog[open] {
-        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-    @keyframes zoom {
-        from {
-            transform: scale(0.95);
-        }
-        to {
-            transform: scale(1);
-        }
-    }
-    dialog[open]::backdrop {
-        animation: fade 0.2s ease-out;
-    }
-    @keyframes fade {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-    button {
-        display: inline;
-    }
-</style>
-
-<link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
-<span class="config-controls">
-    <span>
-        <select bind:value={selectedConfig} title="Automation configurations">
-            {#each configs ?? [] as config}
-                <option value={config.name}>{config.name}</option>
-            {/each}
-        </select>
-
-        <span class="button-group">
-            <button
-                on:click={() => (showModal = true)}
-                title="Create a new configuration"
-                class="btn"><i class="fa fa-plus"></i></button>
-            <button
-                on:click={deleteConfig}
-                title="Delete the current configuration"
-                class="btn"><i class="fa fa-minus"></i></button>
-        </span>
-    </span>
-</span>
-
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog
-    bind:this={dialog}
-    on:close={() => (showModal = false)}
-    on:click|self={() => dialog.close()}>
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div on:click|stopPropagation>
-        <h2> Create a new configuration </h2>
-
-        <!-- svelte-ignore a11y-autofocus -->
-        <input
-            autofocus
-            type="text"
-            placeholder="Enter config name"
-            bind:value={_inputValue} />
-        <hr />
-        <ul class="definition-list">
-            <li>A configuration is a named set of autorun steps</li>
-            <li>Configurations are automatically saved</li>
-        </ul>
-
-        <hr />
-        <!-- svelte-ignore a11y-autofocus -->
-        <button autofocus on:click={() => pressOK()}>create</button>
-        <button on:click={() => dialog.close()}>close</button>
-    </div>
-</dialog>
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index 51f5eae8..509aa0a2 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -1,11 +1,11 @@
 <!-- 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 ConfigControls from './ConfigControls.svelte';
+    import AutoRunsEditor from './AutoRunsEditor.svelte';
 
     window.vscode = acquireVsCodeApi();
 
@@ -13,15 +13,37 @@
     let selectedConfig;
     let loading = true;
     let currentRunningStep = -1;
+    let autoRunsEditor;
+
+    const editAutoRuns = async () => {
+        const retval = await autoRunsEditor.show({runs: configs, selectedRun: selectedConfig});
+        if (retval.ok) {
+            configs = retval.runs;
+            selectedConfig = retval.selectedRun;
+            validateState();
+            storeConfigs(steps);
+        }
+    };
 
-    $: if (!configs || configs.length === 0) {
-        selectedConfig = 'DEFAULT';
-        configs = [ { name: selectedConfig, steps: [{ type: 'sleep', value: '8' }] } ];
-    }
+    const validateState = () => {
+        if (!configs || configs.length === 0) {
+            configs = [{ }];
+        }
+        if (!selectedConfig || configs.findIndex((c) => c.name === selectedConfig) === -1) {
+            if (!configs[0].name) {
+                configs[0].name = 'DEFAULT';
+            }
+            selectedConfig = configs[0].name;
+        }
+        let cfg = configs.find((c) => c.name === selectedConfig);
+        if (!cfg.steps) {
+            cfg.steps = [{ type: 'sleep', value: '8' }];
+        }
+        steps = cfg.steps;
+    };
 
-    $: if (selectedConfig) {
-        steps = configs.find((c) => c.name === selectedConfig)?.steps ?? [];
-        storeConfigs(steps);
+    $: if (!configs || configs.length === 0) {
+        validateState();
     }
 
     const stepTypes = {
@@ -66,12 +88,11 @@
     }[];
 
     function storeConfigs(updatedSteps) {
+        configs.find((c) => c.name === selectedConfig).steps = updatedSteps;
+
         if(!loading) {
-            configs = [
-                { name: selectedConfig, steps: updatedSteps },
-                ...configs.filter((c) => c.name !== selectedConfig)
-            ]
             intermediary.sendCommand(ViewProviderCommand.storeRokuAutomationConfigs, {
+                selectedConfig: selectedConfig,
                 configs: configs
             });
         }
@@ -151,8 +172,8 @@
 
     intermediary.observeEvent(ViewProviderEvent.onRokuAutomationConfigsLoaded, (message) => {
         configs = message.context.configs;
-        selectedConfig = configs[0].name;
-        steps = configs[0].steps;
+        selectedConfig = message.context.selectedConfig;
+        validateState();
         loading = false;
     });
 
@@ -309,6 +330,7 @@
     {:else}
             <vscode-button id={0} on:click={runConfig}>Run</vscode-button>
             <vscode-button id={0} on:click={clearConfig} appearance="secondary">Clear</vscode-button>
-            <ConfigControls bind:selectedConfig={selectedConfig} bind:configs={configs} />
+	        <AutoRunsEditor bind:this={autoRunsEditor} />
+	        <vscode-button class="editAutoRuns" on:click={editAutoRuns}>Current run: {selectedConfig}</vscode-button>
     {/if}
 </div>

From 34ececea0178fd9a00553ed2b7ca6cbb7a17efa2 Mon Sep 17 00:00:00 2001
From: Bronley Plumb <bronley@gmail.com>
Date: Mon, 14 Oct 2024 16:02:54 -0400
Subject: [PATCH 04/22] Some UI tweaks

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 50 ++++++++++++++++---
 .../RokuAutomationView.svelte                 | 10 +++-
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index dd78e6e9..0bc4592d 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { allowedNodeEnvironmentFlags } from 'process';
+import { Trash, Copy, Edit } from 'svelte-codicons';
     let runs;
     let selectedRun;
     let dialog;
@@ -76,7 +78,9 @@
 
     function deleteRun() {
         if (!selectedRun || !runs || runs.length === 0) return;
-        runs = runs.filter((r) => r.name !== selectedRun);
+        if(confirm("Are you sure you want to delete this?")){
+            runs = runs.filter((r) => r.name !== selectedRun);
+        }
     }
 
     function moveUp() {
@@ -105,6 +109,10 @@
         getNameDialog.close(name);
     };
 
+    function closeDialog(){
+       console.log('closing dialog');
+    }
+
     const discardName = () => getNameDialog.close('');
 
     const selectText = e => e.target.select();
@@ -120,16 +128,19 @@
         flex-flow: column;
     }
     #dialog {
-        background-color: black;
+        color: var(--panel-view-foreground);
+        background-color: var(--panel-view-background);
+        border-color: var(--focus-border);
+        box-shadow: #00000052 7px 7px 5px;
+
     }
     #getNameDialog {
-        background-color: black;
+        background-color: red;
         border-style: solid;
         border-color: skyblue;
     }
     .page {
-        border-style: solid;
-        border-color: dodgerblue;
+        border: none;
     }
     .header {
         padding: 5px;
@@ -168,12 +179,39 @@
     }
 </style>
 
-<dialog id="dialog" bind:this={dialog}>
+<dialog id="dialog" bind:this={dialog} on:close={closeDialog}>
     <div class="page vertical-container">
         <div class="header vertical-container">
             <h2>Manage Autoruns</h2>
         </div>
         <div class="body vertical-container">
+            <table>
+                {#each runs as run}
+                <tr>
+                    <td>{run.name}</td>
+                    <td>
+                        <vscode-button appearance="icon" title="Add Step" aria-label="Add Step">
+                            <Edit />
+                        </vscode-button>
+                    </td>
+                    <td>
+                        <vscode-button appearance="icon" title="Add Step" aria-label="Add Step">
+                            <Copy />
+                        </vscode-button>
+                    </td>
+                    <td>
+                        <vscode-button appearance="icon" title="Add Step" aria-label="Add Step">
+                            <Trash />
+                        </vscode-button>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="4">
+                        <vscode-divider />
+                    </td>
+                </tr>
+                {/each}
+            </table>
             <div class="panels horizontal-container">
                 <div class="long-panel vertical-container">
                     <vscode-dropdown size="10" value={selectedRun} on:change={(e) => selectedRun = e.target.value}>
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index 509aa0a2..f199297b 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <script lang="ts">
     import { intermediary } from '../../ExtensionIntermediary';
-    import { Trash, Add, ArrowUp, ArrowDown } from 'svelte-codicons';
+    import { Trash, Add, ArrowUp, ArrowDown, ListSelection } from 'svelte-codicons';
     import { ViewProviderEvent } from '../../../../src/viewProviders/ViewProviderEvent';
     import { ViewProviderCommand } from '../../../../src/viewProviders/ViewProviderCommand';
     import NumberField from '../../shared/NumberField.svelte';
@@ -225,6 +225,10 @@
         lastStepDate = Date.now();
     });
 
+    function editName(){
+        prompt("What name");
+    }
+
     // Required by any view so we can know that the view is ready to receive messages
     intermediary.sendViewReady();
 </script>
@@ -268,6 +272,10 @@
 <svelte:window on:keydown={onKeydown} />
 
 <div id="container">
+   <h1 style="padding:0; margin: 0">Name of current run
+    <vscode-button  on:click={editAutoRuns}>
+        <ListSelection />
+    </vscode-button></h1>
     <table>
     {#each steps as step, index}
         <tr>

From 4becf751159687cb6cfb76e61475f825e8bf1551 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Mon, 28 Oct 2024 15:54:06 -0700
Subject: [PATCH 05/22] new ui per/BP, features a drop down style panel with an
 html table (includes a column of button actions), also no commit style
 semantics

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 536 +++++++++++-------
 .../RokuAutomationView.svelte                 |  74 +--
 2 files changed, 353 insertions(+), 257 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index 0bc4592d..dc4010f9 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -1,261 +1,373 @@
-<script lang="ts">
-    import { allowedNodeEnvironmentFlags } from 'process';
-import { Trash, Copy, Edit } from 'svelte-codicons';
-    let runs;
-    let selectedRun;
-    let dialog;
-    let getNameDialog;
-    let defaultName;
-    let callback;
+<script>
+    import { Trash, Copy, TriangleDown } from 'svelte-codicons';
 
-    $: {
-        if (!runs) runs = [];
-        if (runs.findIndex((r) => r.name === selectedRun) === -1)
-            selectedRun = runs[0]?.name;
+    export let runs;
+    export let selectedRun;
 
-        // force reactivity to work around vscode-dropdown limitation
-        const temp = selectedRun;
-        selectedRun = null;
-        selectedRun = temp;
-    }
+    let runs1 = [
+        { name: 'run1', steps: [] },
+        { name: 'run2', steps: [] },
+        { name: 'run3', steps: [] },
+        { name: 'run4', steps: [] },
+        { name: 'run5', steps: [] },
+        { name: 'run6', steps: [] },
+        { name: 'run7', steps: [] },
+        { name: 'run8', steps: [] },
+        { name: 'run9', steps: [] },
+        { name: 'run10', steps: [] },
+        { name: 'run11', steps: [] },
+        { name: 'run12', steps: [] },
+        { name: 'run13', steps: [] },
+        { name: 'run14', steps: [] },
+        { name: 'run15', steps: [] },
+        { name: 'run16', steps: [] },
+        { name: 'run17', steps: [] },
+        { name: 'run18', steps: [] },
+        { name: 'run19', steps: [] },
+        { name: 'run20', steps: [] },
+        { name: 'run21', steps: [] },
+        { name: 'run22', steps: [] },
+        { name: 'run23', steps: [] },
+        { name: 'run24', steps: [] },
+        { name: 'run25', steps: [] },
+        { name: 'run26', steps: [] },
+        { name: 'run27', steps: [] },
+        { name: 'run28', steps: [] },
+        { name: 'run29', steps: [] },
+        { name: 'run30', steps: [] },
+        { name: 'run31', steps: [] },
+        { name: 'run32', steps: [] },
+        { name: 'run33', steps: [] },
+        { name: 'run34', steps: [] },
+        { name: 'run35', steps: [] },
+        { name: 'run36', steps: [] },
+        { name: 'run37', steps: [] },
+        { name: 'run38', steps: [] },
+        { name: 'run39', steps: [] }
+    ];
+    let selectedRun1 =
+        'Titlelksdjflk;asdjf;lkasdjf;lksdjf;lkjsdf;lkjsdf;lkjsdfkljdsflkdjsafsjdf;lkasdjfkldsjflkdsjfkldjfkldjfkdjfk';
+    let selectedRun2 = 'run7';
 
-    // entry point for the editor
-    export const show = async (params) => {
-        return new Promise((resolve, reject) => {
-            try {
-                dialog.addEventListener('close', (e) => {
-                    const ok = e.target.returnValue === 'ok';
-                    resolve({
-                        ok: ok,
-                        runs: ok ? runs : undefined,
-                        selectedRun: ok ? (selectedRun ?? '') : undefined
-                    });
-                });
-                runs = params?.runs ?? [];
-                selectedRun = params?.selectedRun ?? '';
-                dialog.showModal();
-            } catch (e) {
-                reject(e);
-            }
-        });
+    let runTable;
+    let runNameInput;
+    let runNameDialog;
+    let runNameDialogValue;
+    let confirmDialog;
+    let showContent = false;
+
+    const toggleDropDown = () => {
+        showContent = !showContent;
     };
 
-    function createRun() {
-        defaultName = 'DEFAULT';
-        callback = (e) => {
-            const name = e.target.returnValue;
-            getNameDialog.removeEventListener('close', callback);
-            if (name) {
-                selectedRun = name;
-                runs = [
-                    { name: name, steps: [] },
-                    ...runs.filter((r) => r.name !== name)
-                ];
-            }
-        };
-        getNameDialog.addEventListener('close', callback);
-        getNameDialog.showModal();
-    }
+    const selectRun = (e) => {
+        const run = getRunFromEvent(e);
+        selectedRun = run;
+        console.log(`selectRun row ${run}`);
+    };
+
+    const copyRun = (e) => {
+        const run = getRunFromEvent(e);
+        selectedRun = run;
+        console.log(`copyRun row ${run}`);
 
-    function copyRun() {
-        if (!selectedRun || !runs || runs.length === 0) return;
-        defaultName = `Copy of ${selectedRun}`;
-        callback = (e) => {
-            const name = e.target.returnValue;
-            getNameDialog.removeEventListener('close', callback);
-            if (name) {
+        showRunNameDialog(`Copy of ${run}`)
+            .then((runName) => {
                 const steps = runs.find((r) => r.name === selectedRun)?.steps ?? [];
-                selectedRun = name;
+                selectedRun = runName;
                 runs = [
-                    { name: name, steps: structuredClone(steps) },
-                    ...runs.filter((r) => r.name !== name)
+                    { name: runName, steps: structuredClone(steps) },
+                    ...runs.filter((r) => r.name !== runName)
                 ];
-            }
-        };
-        getNameDialog.addEventListener('close', callback);
-        getNameDialog.showModal();
-    }
+            })
+            .catch((e) => {
+                // do nothing
+            });
+    };
 
-    function deleteRun() {
-        if (!selectedRun || !runs || runs.length === 0) return;
-        if(confirm("Are you sure you want to delete this?")){
-            runs = runs.filter((r) => r.name !== selectedRun);
-        }
-    }
+    const deleteRun = (e) => {
+        const run = getRunFromEvent(e);
+        selectedRun = run;
+        new Promise((resolve, reject) => {
+            let confirmDialogCallback;
+            confirmDialog.addEventListener(
+                'click',
+                (confirmDialogCallback = (e) => {
+                    const button = e?.target?.id;
+                    if (button === 'YES') {
+                        resolve();
+                    } else if (button === 'NO') {
+                        reject();
+                    } else {
+                        return;
+                    }
+                    e.stopPropagation();
+                    confirmDialog.removeEventListener('click', confirmDialogCallback);
+                    confirmDialog.close();
+                })
+            );
+            confirmDialog.showModal();
+        }).then(() => {
+            runs = runs.filter((r) => r.name !== run);
+        }).catch(() => {
+            // do nothing
+        });
+    };
 
-    function moveUp() {
-        if (!selectedRun || !runs || runs.length === 0) return;
-        const index = runs.findIndex((r) => r.name === selectedRun);
-        if (index > 0) {
-            const temp = runs[index - 1];
-            runs[index - 1] = runs[index];
-            runs[index] = temp;
-        }
-    }
+    const addNewRun = () => {
+        showRunNameDialog()
+            .then((runName) => {
+                console.log(`======== addNewRun function, name=${runName}`);
+                selectedRun = runName;
+                runs = [
+                    { name: runName, steps: [] },
+                    ...runs.filter((r) => r.name !== runName)
+                ];
+            })
+            .catch((e) => {
+                console.log(`======== addNewRun function, do nothing`);
+                // do nothing
+            });
+    };
 
-    function moveDown() {
-        if (!selectedRun || !runs || runs.length === 0) return;
-        const index = runs.findIndex((r) => r.name === selectedRun);
-        if (index < runs.length - 1) {
-            const temp = runs[index + 1];
-            runs[index + 1] = runs[index];
-            runs[index] = temp;
-        }
-    }
+    const showRunNameDialog = (defaultRunName = null) => {
+        runNameDialogValue = defaultRunName ?? '';
+        setTimeout(() => { runNameInput.setSelectionRange(0, runNameInput.value.length); }); // select text
+        return new Promise((resolve, reject) => {
+            let cancelCallback, clickCallback, keyupCallback;
+            const closeDialog = (e, runName = null) => {
+                if (runName === '' || runs.find((r) => r.name === runName)) return false; // name already exists
+                e.stopPropagation();
+                runNameDialog.close();
+                runNameDialog.removeEventListener('cancel', cancelCallback);
+                runNameDialog.removeEventListener('click', clickCallback);
+                runNameDialog.removeEventListener('keyup', keyupCallback);
+                return true;
+            };
 
-    const commitName = () => {
-        const name = (document.getElementById('run-name') as HTMLInputElement)
-            .value;
-        getNameDialog.close(name);
-    };
+            // ESC key
+            runNameDialog.addEventListener(
+                'cancel',
+                (cancelCallback = (e) => {
+                    closeDialog(e);
+                    reject('');
+                })
+            );
 
-    function closeDialog(){
-       console.log('closing dialog');
-    }
+            // Enter key
+            runNameDialog.addEventListener(
+                'keyup',
+                (keyupCallback = (e) => {
+                    if (e.key === 'Enter' && closeDialog(e, runNameDialogValue)) {
+                        resolve(runNameDialogValue);
+                    } else {
+                        return;
+                    }
+                })
+            );
 
-    const discardName = () => getNameDialog.close('');
+            // button press
+            runNameDialog.addEventListener(
+                'click',
+                (clickCallback = (e) => {
+                    const button = e?.target?.id;
+                    if (button === 'OK' && closeDialog(e, runNameDialogValue)) {
+                        resolve(runNameDialogValue);
+                    } else if (button === 'Cancel') {
+                        closeDialog(e);
+                        reject('');
+                    } else {
+                        return;
+                    }
+                })
+            );
+            runNameDialog.showModal();
+        });
+    };
 
-    const selectText = e => e.target.select();
+    const getRunFromEvent = (e) => {
+        e.stopPropagation();
+        return e.target.closest('tr').title;
+    };
 </script>
 
 <style>
-    .horizontal-container {
-        display: flex;
-        flex-flow: row;
+    #editor {
+        width: auto;
+        height: auto;
+        margin: 0px;
+        background-color: var(--vscode-editor-background);
     }
-    .vertical-container {
+
+    #content-container {
+        position: absolute;
+        z-index: 1;
+        width: calc(100% - 15px);
+        height: calc(100% - 65px);
         display: flex;
-        flex-flow: column;
+        color: var(--vscode-editor-foreground);
+        background: var(--vscode-editor-background);
+        background-color: var(--vscode-editor-background);
+        padding: 5px;
     }
-    #dialog {
-        color: var(--panel-view-foreground);
-        background-color: var(--panel-view-background);
-        border-color: var(--focus-border);
-        box-shadow: #00000052 7px 7px 5px;
 
+    #run-list {
+        position: absolute;
+        width: 100%;
+        height: calc(100% - 35px);
+        display: flex;
+        overflow-y: auto;
     }
-    #getNameDialog {
-        background-color: red;
-        border-style: solid;
-        border-color: skyblue;
+
+    #selected-tr {
+        color: var(--vscode-editor-foreground);
+        background-color: var(--vscode-button-background);
     }
-    .page {
-        border: none;
+
+    vscode-divider {
+        margin: 0px;
     }
-    .header {
-        padding: 5px;
+
+    #selection {
+        display: flex;
+        width: auto;
+        height: 100%;
         align-items: center;
-        justify-content: center;
-    }
-    .body {
         padding: 5px;
     }
-    .footer {
-        margin-top: auto;
-        padding: 5px;
+
+    #selection-text {
+        font-size: xx-large;
+        white-space: nowrap;
+        width: 100%;
+        text-overflow: ellipsis;
+        display: inline-block;
+        overflow: hidden;
+        color: var(--vscode-editor-foreground);
     }
-    .vertical-container.long-panel {
-        margin-right: 25px;
+
+    #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;
     }
-    .button-group {
-        gap: 12px;
+
+    #selection-button:hover {
+        color: lightslategray;
     }
-    vscode-button {
-        margin-top: 5px;
+
+    #run-name:hover {
+        cursor: pointer;
     }
-    hr {
+
+    #button-container {
+        display: flex;
+        justify-content: center;
         width: 100%;
-        height: 2px;
-        border-width: 0;
-        color: gray;
-        background-color: gray;
+        margin-top: auto;
+    }
+
+    #button-container > * {
+        margin-left: 5px;
     }
-    h2 {
-        color: white;
+
+    #close-button {
+        color: var(--vscode-editor-foreground);
     }
-    h3 {
-        color: white;
-        margin-top: -5px;
+
+    #RunNameDialog {
+        width: 100%;
     }
 </style>
 
-<dialog id="dialog" bind:this={dialog} on:close={closeDialog}>
-    <div class="page vertical-container">
-        <div class="header vertical-container">
-            <h2>Manage Autoruns</h2>
-        </div>
-        <div class="body vertical-container">
-            <table>
-                {#each runs as run}
-                <tr>
-                    <td>{run.name}</td>
-                    <td>
-                        <vscode-button appearance="icon" title="Add Step" aria-label="Add Step">
-                            <Edit />
-                        </vscode-button>
-                    </td>
-                    <td>
-                        <vscode-button appearance="icon" title="Add Step" aria-label="Add Step">
-                            <Copy />
-                        </vscode-button>
-                    </td>
-                    <td>
-                        <vscode-button appearance="icon" title="Add Step" aria-label="Add Step">
-                            <Trash />
-                        </vscode-button>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="4">
-                        <vscode-divider />
-                    </td>
-                </tr>
-                {/each}
-            </table>
-            <div class="panels horizontal-container">
-                <div class="long-panel vertical-container">
-                    <vscode-dropdown size="10" value={selectedRun} on:change={(e) => selectedRun = e.target.value}>
-                        {#each runs as run}
-                            <vscode-option title={run.name} value={run.name}
-                                >{run.name}</vscode-option>
-                        {/each}
-                    </vscode-dropdown>
-                </div>
-                <div class="long-panel vertical-container">
-                    <div class="vertical-container">
-                        <vscode-button on:click={createRun}
-                            >Create</vscode-button>
-                        <vscode-button on:click={copyRun}>Copy</vscode-button>
-                        <vscode-button on:click={deleteRun}
-                            >Delete</vscode-button>
-                        <vscode-button on:click={moveUp}>Move up</vscode-button>
-                        <vscode-button on:click={moveDown}
-                            >Move down</vscode-button>
-                    </div>
-                </div>
+<div id="editor">
+    <div id="selection">
+        <div id="selection-text">{selectedRun}</div>
+        <vscode-button
+            id="selection-button"
+            title="Edit Runs"
+            on:click={toggleDropDown}><TriangleDown /></vscode-button>
+    </div>
+    {#if showContent}
+        <div id="content-container">
+            <div id="run-list">
+                <table
+                    width="100%"
+                    cellspacing="0"
+                    style="margin-bottom: auto;"
+                    bind:this={runTable}>
+                    {#each runs as run}
+                        <tr>
+                            <td colspan="5">
+                                <vscode-divider />
+                            </td>
+                        </tr>
+                        <tr
+                            on:click={selectRun}
+                            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"
+                                    on:click={copyRun}
+                                    appearance="icon"
+                                    aria-label={run.name}>
+                                    <Copy />
+                                </vscode-button>
+                                <vscode-button
+                                    id="delete-button"
+                                    on:click={deleteRun}
+                                    appearance="icon"
+                                    aria-label={run.name}>
+                                    <Trash />
+                                </vscode-button>
+                            </td>
+                        </tr>
+                    {/each}
+                </table>
             </div>
-        </div>
-        <div class="footer vertical-container">
-            <hr />
-            <div class="button-group horizontal-container">
-                <button style="margin-left: auto;"
-                    on:click={() => dialog.close('ok')}
-                    value="cancel-button">OK</button>
-                <button
-                    on:click={() => dialog.close('cancel')}
-                    value="cancel-button">Cancel</button>
+            <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>
-    </div>
-</dialog>
+    {/if}
+</div>
 
-<dialog id="getNameDialog" bind:this={getNameDialog}>
+<dialog id="RunNameDialog" bind:this={runNameDialog}>
     <h3>Enter Run Name</h3>
     <div style="margin-bottom: 6px;">
-        <input id="run-name" placeholder="Enter run name" bind:value={defaultName} on:focus={selectText} autofocus/>
+        <input
+            bind:this={runNameInput}
+            placeholder="Enter run name"
+            style="width: 100%;"
+            bind:value={runNameDialogValue}
+        />
     </div>
     <div class="button-group horizontal-container">
-        <button on:click={commitName}>OK</button>
-        <button on:click={discardName}>Cancel</button>
+        <vscode-button id="OK" on:click={this.click}>OK</vscode-button>
+        <vscode-button id="Cancel" on:click={this.click}>Cancel</vscode-button>
+    </div>
+</dialog>
+
+<dialog id="confirmDialog" bind:this={confirmDialog}>
+    <h3>Are you sure you want to delete this run?</h3>
+    <div class="button-group horizontal-container">
+        <vscode-button id="YES" on:click={this.click}>YES</vscode-button>
+        <vscode-button id="NO" on:click={this.click}>NO</vscode-button>
     </div>
 </dialog>
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index f199297b..d4ad925b 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <script lang="ts">
     import { intermediary } from '../../ExtensionIntermediary';
-    import { Trash, Add, ArrowUp, ArrowDown, ListSelection } from 'svelte-codicons';
+    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';
@@ -9,43 +9,32 @@
 
     window.vscode = acquireVsCodeApi();
 
-    let configs;
-    let selectedConfig;
+    let runs;
+    let selectedRun;
+    let autoRunsEditor;
     let loading = true;
     let currentRunningStep = -1;
-    let autoRunsEditor;
 
-    const editAutoRuns = async () => {
-        const retval = await autoRunsEditor.show({runs: configs, selectedRun: selectedConfig});
-        if (retval.ok) {
-            configs = retval.runs;
-            selectedConfig = retval.selectedRun;
-            validateState();
-            storeConfigs(steps);
-        }
-    };
+    $: runs, selectedRun, updateRuns();
 
-    const validateState = () => {
-        if (!configs || configs.length === 0) {
-            configs = [{ }];
+    const updateRuns = () => {
+        if (!runs || runs.length === 0) {
+            runs = [{ }];
         }
-        if (!selectedConfig || configs.findIndex((c) => c.name === selectedConfig) === -1) {
-            if (!configs[0].name) {
-                configs[0].name = 'DEFAULT';
+        if (!selectedRun || runs.findIndex((c) => c.name === selectedRun) === -1) {
+            if (!runs[0].name) {
+                runs[0].name = 'DEFAULT';
             }
-            selectedConfig = configs[0].name;
+            selectedRun = runs[0].name;
         }
-        let cfg = configs.find((c) => c.name === selectedConfig);
+        let cfg = runs.find((c) => c.name === selectedRun);
         if (!cfg.steps) {
             cfg.steps = [{ type: 'sleep', value: '8' }];
         }
         steps = cfg.steps;
+        storeConfigs(steps);
     };
 
-    $: if (!configs || configs.length === 0) {
-        validateState();
-    }
-
     const stepTypes = {
         sleep: {
             type: 'sleep',
@@ -88,12 +77,13 @@
     }[];
 
     function storeConfigs(updatedSteps) {
-        configs.find((c) => c.name === selectedConfig).steps = updatedSteps;
+        const targetRun = runs.find((r) => r.name === selectedRun);
 
-        if(!loading) {
+        if(!loading && targetRun) {
+            targetRun.steps = updatedSteps
             intermediary.sendCommand(ViewProviderCommand.storeRokuAutomationConfigs, {
-                selectedConfig: selectedConfig,
-                configs: configs
+                selectedConfig: selectedRun,
+                configs: runs
             });
         }
 
@@ -143,6 +133,7 @@
     }
 
     function stopConfig() {
+        if (!this) return;
         intermediary.sendCommand(ViewProviderCommand.stopRokuAutomationConfig, {
             configIndex: this.id
         });
@@ -169,11 +160,10 @@
                 break;
         }
     }
-
     intermediary.observeEvent(ViewProviderEvent.onRokuAutomationConfigsLoaded, (message) => {
-        configs = message.context.configs;
-        selectedConfig = message.context.selectedConfig;
-        validateState();
+        runs = message.context.configs;
+        selectedRun = message.context.selectedConfig;
+        updateRuns();
         loading = false;
     });
 
@@ -225,10 +215,6 @@
         lastStepDate = Date.now();
     });
 
-    function editName(){
-        prompt("What name");
-    }
-
     // Required by any view so we can know that the view is ready to receive messages
     intermediary.sendViewReady();
 </script>
@@ -272,10 +258,10 @@
 <svelte:window on:keydown={onKeydown} />
 
 <div id="container">
-   <h1 style="padding:0; margin: 0">Name of current run
-    <vscode-button  on:click={editAutoRuns}>
-        <ListSelection />
-    </vscode-button></h1>
+    <AutoRunsEditor
+        bind:this={autoRunsEditor}
+        bind:runs={runs}
+        bind:selectedRun={selectedRun}/>
     <table>
     {#each steps as step, index}
         <tr>
@@ -336,9 +322,7 @@
     {#if currentRunningStep >= 0}
         <vscode-button id={0} on:click={stopConfig}>Stop</vscode-button>
     {:else}
-            <vscode-button id={0} on:click={runConfig}>Run</vscode-button>
-            <vscode-button id={0} on:click={clearConfig} appearance="secondary">Clear</vscode-button>
-	        <AutoRunsEditor bind:this={autoRunsEditor} />
-	        <vscode-button class="editAutoRuns" on:click={editAutoRuns}>Current run: {selectedConfig}</vscode-button>
+        <vscode-button id={0} on:click={runConfig}>Run</vscode-button>
+        <vscode-button id={0} on:click={clearConfig} appearance="secondary">Clear</vscode-button>
     {/if}
 </div>

From 015df4403d18bf210197eb3a465f5888a835ec84 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Mon, 28 Oct 2024 16:02:04 -0700
Subject: [PATCH 06/22] small usability improvements

---
 webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index dc4010f9..25bec3a8 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -289,7 +289,7 @@
 
 <div id="editor">
     <div id="selection">
-        <div id="selection-text">{selectedRun}</div>
+        <div id="selection-text" title={selectedRun}>{selectedRun}</div>
         <vscode-button
             id="selection-button"
             title="Edit Runs"
@@ -321,6 +321,7 @@
                             <td style="text-align: end;">
                                 <vscode-button
                                     id="copy-button"
+                                    title={`Copy '${run.name}'`}
                                     on:click={copyRun}
                                     appearance="icon"
                                     aria-label={run.name}>
@@ -328,6 +329,7 @@
                                 </vscode-button>
                                 <vscode-button
                                     id="delete-button"
+                                    title={`Delete '${run.name}'`}
                                     on:click={deleteRun}
                                     appearance="icon"
                                     aria-label={run.name}>

From 281cc4db2055259ae8366cfa2ad829a4c0bf38a9 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Tue, 29 Oct 2024 14:16:49 -0700
Subject: [PATCH 07/22] added dnd run reordering

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 81 +++++++++++++-----
 webviews/src/views/RokuAutomationView/dnd.js  | 85 +++++++++++++++++++
 2 files changed, 145 insertions(+), 21 deletions(-)
 create mode 100644 webviews/src/views/RokuAutomationView/dnd.js

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index 25bec3a8..a6d86dcd 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -1,5 +1,6 @@
 <script>
     import { Trash, Copy, TriangleDown } from 'svelte-codicons';
+    import { dropzone, draggable } from './dnd';
 
     export let runs;
     export let selectedRun;
@@ -63,17 +64,16 @@
     const selectRun = (e) => {
         const run = getRunFromEvent(e);
         selectedRun = run;
-        console.log(`selectRun row ${run}`);
     };
 
     const copyRun = (e) => {
         const run = getRunFromEvent(e);
         selectedRun = run;
-        console.log(`copyRun row ${run}`);
 
         showRunNameDialog(`Copy of ${run}`)
             .then((runName) => {
-                const steps = runs.find((r) => r.name === selectedRun)?.steps ?? [];
+                const steps =
+                    runs.find((r) => r.name === selectedRun)?.steps ?? [];
                 selectedRun = runName;
                 runs = [
                     { name: runName, steps: structuredClone(steps) },
@@ -102,22 +102,40 @@
                         return;
                     }
                     e.stopPropagation();
-                    confirmDialog.removeEventListener('click', confirmDialogCallback);
+                    confirmDialog.removeEventListener(
+                        'click',
+                        confirmDialogCallback
+                    );
                     confirmDialog.close();
                 })
             );
             confirmDialog.showModal();
-        }).then(() => {
-            runs = runs.filter((r) => r.name !== run);
-        }).catch(() => {
-            // do nothing
-        });
+        })
+            .then(() => {
+                runs = runs.filter((r) => r.name !== run);
+            })
+            .catch(() => {
+                // do nothing
+            });
+    };
+
+    const moveRun = (runName, index) => {
+        let currIndex = runs.findIndex((r) => r.name === runName);
+        if (currIndex < 0 || index < 0 || index > runs.length || currIndex === index) return;
+        const runToMove = runs[currIndex];
+
+        const newRunList = [
+            ...runs.slice(0, index),
+            runToMove,
+            ...runs.slice(index)
+        ];
+        newRunList.splice(currIndex < index ? currIndex : ++currIndex, 1);
+        runs = newRunList;
     };
 
     const addNewRun = () => {
         showRunNameDialog()
             .then((runName) => {
-                console.log(`======== addNewRun function, name=${runName}`);
                 selectedRun = runName;
                 runs = [
                     { name: runName, steps: [] },
@@ -125,18 +143,20 @@
                 ];
             })
             .catch((e) => {
-                console.log(`======== addNewRun function, do nothing`);
                 // do nothing
             });
     };
 
     const showRunNameDialog = (defaultRunName = null) => {
         runNameDialogValue = defaultRunName ?? '';
-        setTimeout(() => { runNameInput.setSelectionRange(0, runNameInput.value.length); }); // select text
+        setTimeout(() => {
+            runNameInput.setSelectionRange(0, runNameInput.value.length);
+        }); // select text
         return new Promise((resolve, reject) => {
             let cancelCallback, clickCallback, keyupCallback;
             const closeDialog = (e, runName = null) => {
-                if (runName === '' || runs.find((r) => r.name === runName)) return false; // name already exists
+                if (runName === '' || runs.find((r) => r.name === runName))
+                    return false; // name already exists
                 e.stopPropagation();
                 runNameDialog.close();
                 runNameDialog.removeEventListener('cancel', cancelCallback);
@@ -158,7 +178,10 @@
             runNameDialog.addEventListener(
                 'keyup',
                 (keyupCallback = (e) => {
-                    if (e.key === 'Enter' && closeDialog(e, runNameDialogValue)) {
+                    if (
+                        e.key === 'Enter' &&
+                        closeDialog(e, runNameDialogValue)
+                    ) {
                         resolve(runNameDialogValue);
                     } else {
                         return;
@@ -200,14 +223,13 @@
     }
 
     #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);
-        background: var(--vscode-editor-background);
-        background-color: var(--vscode-editor-background);
         padding: 5px;
     }
 
@@ -285,6 +307,11 @@
     #RunNameDialog {
         width: 100%;
     }
+
+    .run-row > *:global(.droppable) {
+        outline: 0.2em dashed red;
+        outline-offset: -2px;
+    }
 </style>
 
 <div id="editor">
@@ -297,23 +324,36 @@
     </div>
     {#if showContent}
         <div id="content-container">
-            <div id="run-list">
+            <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}
+                    {#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}
                             title={run.name}
                             id={run.name === selectedRun ? 'selected-tr' : ''}>
-                            <td>
+                            <td class="run-row-name">
                                 <span id="run-name">
                                     {run.name}
                                 </span>
@@ -357,8 +397,7 @@
             bind:this={runNameInput}
             placeholder="Enter run name"
             style="width: 100%;"
-            bind:value={runNameDialogValue}
-        />
+            bind:value={runNameDialogValue} />
     </div>
     <div class="button-group horizontal-container">
         <vscode-button id="OK" on:click={this.click}>OK</vscode-button>
diff --git a/webviews/src/views/RokuAutomationView/dnd.js b/webviews/src/views/RokuAutomationView/dnd.js
new file mode 100644
index 00000000..5d13dff1
--- /dev/null
+++ b/webviews/src/views/RokuAutomationView/dnd.js
@@ -0,0 +1,85 @@
+/* eslint-disable object-shorthand */
+/* eslint-disable curly */
+export function draggable(node, data) {
+    let state = 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 = {
+        dropEffect: 'move',
+        dragoverClass: 'droppable',
+        ...options
+    };
+
+    function handleDragenter(e) {
+        console.log(`handleDragenter: ${e.target}`);
+        if (!(e.target instanceof HTMLElement)) return;
+        console.log(`dragoverClass: ${state.dragoverClass}`);
+        e.target.classList.add(state.dragoverClass);
+    }
+
+    function handleDragleave(e) {
+        console.log(`handleDragleave: ${e.target}`);
+        if (!(e.target instanceof HTMLElement)) return;
+        e.target.classList.remove(state.dragoverClass);
+    }
+
+    function handleDragover(e) {
+        console.log(`handleDragover: ${e.target}`);
+        e.preventDefault();
+        if (!e.dataTransfer) return;
+        e.dataTransfer.dropEffect = state.dropEffect;
+    }
+
+    function handleDrop(e) {
+        e.preventDefault();
+        if (!e.dataTransfer) return;
+        const data = 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);
+        }
+    };
+}

From 49ef0ebc5c229fde7e92c292e1df687498c3484c Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Tue, 29 Oct 2024 14:38:59 -0700
Subject: [PATCH 08/22] adding double click run renaming

---
 .../RokuAutomationView/AutoRunsEditor.svelte    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index a6d86dcd..cbdc108f 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -133,6 +133,22 @@
         runs = newRunList;
     };
 
+    const renameRun = (e) => {
+        const run = getRunFromEvent(e);
+        console.log(`Renaming run: ${run}`);
+        selectedRun = run;
+
+        showRunNameDialog(selectedRun)
+            .then((runName) => {
+                runs.find((r) => r.name === run).name = runName;
+                runs = runs;
+                selectedRun = runName;
+            })
+            .catch((e) => {
+                // do nothing
+            });
+    };
+
     const addNewRun = () => {
         showRunNameDialog()
             .then((runName) => {
@@ -351,6 +367,7 @@
                             }}
                             use:draggable={run.name}
                             on:click={selectRun}
+                            on:dblclick={renameRun}
                             title={run.name}
                             id={run.name === selectedRun ? 'selected-tr' : ''}>
                             <td class="run-row-name">

From 8925e416113849eb15120ff3419a45297460064a Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Tue, 29 Oct 2024 15:19:26 -0700
Subject: [PATCH 09/22] add arrow key selection for usability

---
 .../src/views/RokuAutomationView/AutoRunsEditor.svelte   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index cbdc108f..d8ca3dff 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -66,6 +66,13 @@
         selectedRun = run;
     };
 
+    const moveSelection = (e) => {
+        if (["ArrowUp", "ArrowDown"].includes(e.key)) {
+            const index = runs.findIndex((r) => r.name === selectedRun) + (e.key === "ArrowUp" ? -1 : 1);
+            selectedRun = runs[(index + runs.length) % runs.length].name;
+        }
+    };
+
     const copyRun = (e) => {
         const run = getRunFromEvent(e);
         selectedRun = run;
@@ -330,7 +337,7 @@
     }
 </style>
 
-<div id="editor">
+<div id="editor" tabindex="-1" on:keydown={moveSelection}>
     <div id="selection">
         <div id="selection-text" title={selectedRun}>{selectedRun}</div>
         <vscode-button

From a59ee7338af5afb8deda4d2b8a337443910195bb Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Tue, 29 Oct 2024 17:28:39 -0700
Subject: [PATCH 10/22] modify drag over feedback for better usability

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 57 +++----------------
 webviews/src/views/RokuAutomationView/dnd.js  |  4 --
 2 files changed, 7 insertions(+), 54 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index d8ca3dff..b64527c3 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -5,51 +5,6 @@
     export let runs;
     export let selectedRun;
 
-    let runs1 = [
-        { name: 'run1', steps: [] },
-        { name: 'run2', steps: [] },
-        { name: 'run3', steps: [] },
-        { name: 'run4', steps: [] },
-        { name: 'run5', steps: [] },
-        { name: 'run6', steps: [] },
-        { name: 'run7', steps: [] },
-        { name: 'run8', steps: [] },
-        { name: 'run9', steps: [] },
-        { name: 'run10', steps: [] },
-        { name: 'run11', steps: [] },
-        { name: 'run12', steps: [] },
-        { name: 'run13', steps: [] },
-        { name: 'run14', steps: [] },
-        { name: 'run15', steps: [] },
-        { name: 'run16', steps: [] },
-        { name: 'run17', steps: [] },
-        { name: 'run18', steps: [] },
-        { name: 'run19', steps: [] },
-        { name: 'run20', steps: [] },
-        { name: 'run21', steps: [] },
-        { name: 'run22', steps: [] },
-        { name: 'run23', steps: [] },
-        { name: 'run24', steps: [] },
-        { name: 'run25', steps: [] },
-        { name: 'run26', steps: [] },
-        { name: 'run27', steps: [] },
-        { name: 'run28', steps: [] },
-        { name: 'run29', steps: [] },
-        { name: 'run30', steps: [] },
-        { name: 'run31', steps: [] },
-        { name: 'run32', steps: [] },
-        { name: 'run33', steps: [] },
-        { name: 'run34', steps: [] },
-        { name: 'run35', steps: [] },
-        { name: 'run36', steps: [] },
-        { name: 'run37', steps: [] },
-        { name: 'run38', steps: [] },
-        { name: 'run39', steps: [] }
-    ];
-    let selectedRun1 =
-        'Titlelksdjflk;asdjf;lkasdjf;lksdjf;lkjsdf;lkjsdf;lkjsdfkljdsflkdjsafsjdf;lkasdjfkldsjflkdsjfkldjfkldjfkdjfk';
-    let selectedRun2 = 'run7';
-
     let runTable;
     let runNameInput;
     let runNameDialog;
@@ -142,7 +97,6 @@
 
     const renameRun = (e) => {
         const run = getRunFromEvent(e);
-        console.log(`Renaming run: ${run}`);
         selectedRun = run;
 
         showRunNameDialog(selectedRun)
@@ -264,6 +218,10 @@
         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);
@@ -331,9 +289,8 @@
         width: 100%;
     }
 
-    .run-row > *:global(.droppable) {
-        outline: 0.2em dashed red;
-        outline-offset: -2px;
+    .run-row *:global(.droppable) {
+        border-top: 5px solid red;
     }
 </style>
 
@@ -377,7 +334,7 @@
                             on:dblclick={renameRun}
                             title={run.name}
                             id={run.name === selectedRun ? 'selected-tr' : ''}>
-                            <td class="run-row-name">
+                            <td>
                                 <span id="run-name">
                                     {run.name}
                                 </span>
diff --git a/webviews/src/views/RokuAutomationView/dnd.js b/webviews/src/views/RokuAutomationView/dnd.js
index 5d13dff1..7125d57d 100644
--- a/webviews/src/views/RokuAutomationView/dnd.js
+++ b/webviews/src/views/RokuAutomationView/dnd.js
@@ -32,20 +32,16 @@ export function dropzone(node, options) {
     };
 
     function handleDragenter(e) {
-        console.log(`handleDragenter: ${e.target}`);
         if (!(e.target instanceof HTMLElement)) return;
-        console.log(`dragoverClass: ${state.dragoverClass}`);
         e.target.classList.add(state.dragoverClass);
     }
 
     function handleDragleave(e) {
-        console.log(`handleDragleave: ${e.target}`);
         if (!(e.target instanceof HTMLElement)) return;
         e.target.classList.remove(state.dragoverClass);
     }
 
     function handleDragover(e) {
-        console.log(`handleDragover: ${e.target}`);
         e.preventDefault();
         if (!e.dataTransfer) return;
         e.dataTransfer.dropEffect = state.dropEffect;

From 630b37bcbe69ac8e19e832dbb7341ae44e3437d5 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Tue, 29 Oct 2024 17:57:03 -0700
Subject: [PATCH 11/22] ensure selected run is preserved between sessions

---
 src/viewProviders/RokuAutomationViewViewProvider.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/viewProviders/RokuAutomationViewViewProvider.ts b/src/viewProviders/RokuAutomationViewViewProvider.ts
index de0fa885..dabe2729 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));
@@ -87,6 +88,7 @@ export class RokuAutomationViewViewProvider extends BaseRdbViewProvider {
     }
 
     private isRecording = false;
+    private selectedConfig;
     private rokuAutomationConfigs: {
         name: string;
         steps: {
@@ -153,10 +155,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
         });
 

From 840b1a25f8450fc3e9a4b59226730f19142ed202 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Wed, 30 Oct 2024 16:15:41 -0700
Subject: [PATCH 12/22] ensure targeted run is executed when user presses run
 button also graceful exit when run execution fails (for example when rta is
 confused by disabled app/channel)

---
 src/viewProviders/RokuAutomationViewViewProvider.ts       | 7 ++++++-
 .../views/RokuAutomationView/RokuAutomationView.svelte    | 8 +++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/viewProviders/RokuAutomationViewViewProvider.ts b/src/viewProviders/RokuAutomationViewViewProvider.ts
index dabe2729..a9b0708f 100644
--- a/src/viewProviders/RokuAutomationViewViewProvider.ts
+++ b/src/viewProviders/RokuAutomationViewViewProvider.ts
@@ -26,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;
         });
 
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index d4ad925b..bdcad1b6 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -17,11 +17,13 @@
 
     $: runs, selectedRun, updateRuns();
 
+    const getRunIndex = () => (runs ?? []).findIndex((r) => r.name === selectedRun);
+
     const updateRuns = () => {
         if (!runs || runs.length === 0) {
             runs = [{ }];
         }
-        if (!selectedRun || runs.findIndex((c) => c.name === selectedRun) === -1) {
+        if (!selectedRun || getRunIndex() === -1) {
             if (!runs[0].name) {
                 runs[0].name = 'DEFAULT';
             }
@@ -128,14 +130,14 @@
 
     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()
         });
     }
 

From b8506b2280832e8dbead4037e7e572e57ac240ee Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Tue, 5 Nov 2024 15:30:02 -0800
Subject: [PATCH 13/22] strictly typed variables per review

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 78 ++++++++++---------
 .../RokuAutomationView.svelte                 | 42 +++++-----
 .../RokuAutomationView/{dnd.js => dnd.ts}     |  6 +-
 3 files changed, 67 insertions(+), 59 deletions(-)
 rename webviews/src/views/RokuAutomationView/{dnd.js => dnd.ts} (94%)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index b64527c3..1ad62227 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -1,40 +1,44 @@
-<script>
+<script lang="ts">
     import { Trash, Copy, TriangleDown } from 'svelte-codicons';
     import { dropzone, draggable } from './dnd';
 
-    export let runs;
-    export let selectedRun;
+    type Step = { type: string, value: string };
+    type Run = { name?: string, steps?: Step[] };
+    type Callback = (e: any) => void;
 
-    let runTable;
-    let runNameInput;
-    let runNameDialog;
-    let runNameDialogValue;
-    let confirmDialog;
-    let showContent = false;
+    export let runs: Run[];
+    export let selectedRun: string;
 
-    const toggleDropDown = () => {
+    let runTable: any;
+    let runNameInput: any;
+    let runNameDialog: any;
+    let runNameDialogValue: string;
+    let confirmDialog: any;
+    let showContent: boolean = false;
+
+    const toggleDropDown: () => void = () => {
         showContent = !showContent;
     };
 
-    const selectRun = (e) => {
-        const run = getRunFromEvent(e);
+    const selectRun: Callback = (e) => {
+        const run: string = getRunFromEvent(e);
         selectedRun = run;
     };
 
-    const moveSelection = (e) => {
+    const moveSelection: Callback = (e) => {
         if (["ArrowUp", "ArrowDown"].includes(e.key)) {
-            const index = runs.findIndex((r) => r.name === selectedRun) + (e.key === "ArrowUp" ? -1 : 1);
+            const index: number = runs.findIndex((r) => r.name === selectedRun) + (e.key === "ArrowUp" ? -1 : 1);
             selectedRun = runs[(index + runs.length) % runs.length].name;
         }
     };
 
-    const copyRun = (e) => {
-        const run = getRunFromEvent(e);
+    const copyRun: Callback = (e) => {
+        const run: string = getRunFromEvent(e);
         selectedRun = run;
 
         showRunNameDialog(`Copy of ${run}`)
-            .then((runName) => {
-                const steps =
+            .then((runName: string) => {
+                const steps: Step[] =
                     runs.find((r) => r.name === selectedRun)?.steps ?? [];
                 selectedRun = runName;
                 runs = [
@@ -47,17 +51,17 @@
             });
     };
 
-    const deleteRun = (e) => {
-        const run = getRunFromEvent(e);
+    const deleteRun: Callback = (e) => {
+        const run: string = getRunFromEvent(e);
         selectedRun = run;
         new Promise((resolve, reject) => {
-            let confirmDialogCallback;
+            let confirmDialogCallback: any;
             confirmDialog.addEventListener(
                 'click',
                 (confirmDialogCallback = (e) => {
-                    const button = e?.target?.id;
+                    const button: string = e?.target?.id;
                     if (button === 'YES') {
-                        resolve();
+                        resolve(e);
                     } else if (button === 'NO') {
                         reject();
                     } else {
@@ -81,12 +85,12 @@
             });
     };
 
-    const moveRun = (runName, index) => {
-        let currIndex = runs.findIndex((r) => r.name === runName);
+    const moveRun: (runName: string, index: number) => void = (runName, index) => {
+        let currIndex: number = runs.findIndex((r) => r.name === runName);
         if (currIndex < 0 || index < 0 || index > runs.length || currIndex === index) return;
-        const runToMove = runs[currIndex];
+        const runToMove: Run = runs[currIndex];
 
-        const newRunList = [
+        const newRunList: Run[] = [
             ...runs.slice(0, index),
             runToMove,
             ...runs.slice(index)
@@ -95,12 +99,12 @@
         runs = newRunList;
     };
 
-    const renameRun = (e) => {
-        const run = getRunFromEvent(e);
+    const renameRun: Callback = (e) => {
+        const run: string = getRunFromEvent(e);
         selectedRun = run;
 
         showRunNameDialog(selectedRun)
-            .then((runName) => {
+            .then((runName: string) => {
                 runs.find((r) => r.name === run).name = runName;
                 runs = runs;
                 selectedRun = runName;
@@ -110,9 +114,9 @@
             });
     };
 
-    const addNewRun = () => {
+    const addNewRun: () => void = () => {
         showRunNameDialog()
-            .then((runName) => {
+            .then((runName: string) => {
                 selectedRun = runName;
                 runs = [
                     { name: runName, steps: [] },
@@ -124,14 +128,14 @@
             });
     };
 
-    const showRunNameDialog = (defaultRunName = null) => {
+    const showRunNameDialog: (defaultRunName?: string) => any = (defaultRunName = null) => {
         runNameDialogValue = defaultRunName ?? '';
         setTimeout(() => {
             runNameInput.setSelectionRange(0, runNameInput.value.length);
         }); // select text
         return new Promise((resolve, reject) => {
-            let cancelCallback, clickCallback, keyupCallback;
-            const closeDialog = (e, runName = null) => {
+            let cancelCallback: Callback, clickCallback: Callback, keyupCallback: Callback;
+            const closeDialog: (e: any, runName?: string) => boolean = (e, runName = null) => {
                 if (runName === '' || runs.find((r) => r.name === runName))
                     return false; // name already exists
                 e.stopPropagation();
@@ -170,7 +174,7 @@
             runNameDialog.addEventListener(
                 'click',
                 (clickCallback = (e) => {
-                    const button = e?.target?.id;
+                    const button: string = e?.target?.id;
                     if (button === 'OK' && closeDialog(e, runNameDialogValue)) {
                         resolve(runNameDialogValue);
                     } else if (button === 'Cancel') {
@@ -185,7 +189,7 @@
         });
     };
 
-    const getRunFromEvent = (e) => {
+    const getRunFromEvent: (e: any) => string = (e) => {
         e.stopPropagation();
         return e.target.closest('tr').title;
     };
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index bdcad1b6..6399f3a5 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -9,17 +9,21 @@
 
     window.vscode = acquireVsCodeApi();
 
-    let runs;
-    let selectedRun;
-    let autoRunsEditor;
-    let loading = true;
-    let currentRunningStep = -1;
+    type Step = { type: string, value: string };
+    type Run = { name?: string, steps?: Step[] };
+    type Nullary = () => any;
+
+    let runs: Run[];
+    let selectedRun: string;
+    let autoRunsEditor: any;
+    let loading: boolean = true;
+    let currentRunningStep: number = -1;
 
     $: runs, selectedRun, updateRuns();
 
-    const getRunIndex = () => (runs ?? []).findIndex((r) => r.name === selectedRun);
+    const getRunIndex: Nullary = () => (runs ?? []).findIndex((r) => r.name === selectedRun);
 
-    const updateRuns = () => {
+    const updateRuns: Nullary = () => {
         if (!runs || runs.length === 0) {
             runs = [{ }];
         }
@@ -29,7 +33,7 @@
             }
             selectedRun = runs[0].name;
         }
-        let cfg = runs.find((c) => c.name === selectedRun);
+        let cfg: Run = runs.find((c) => c.name === selectedRun);
         if (!cfg.steps) {
             cfg.steps = [{ type: 'sleep', value: '8' }];
         }
@@ -53,7 +57,7 @@
         }
     };
 
-    const availableKeys = {
+    const availableKeys: any = {
         Back: 'Back',
         Backspace: 'Backspace',
         Down: 'Down',
@@ -79,7 +83,7 @@
     }[];
 
     function storeConfigs(updatedSteps) {
-        const targetRun = runs.find((r) => r.name === selectedRun);
+        const targetRun: Run = runs.find((r) => r.name === selectedRun);
 
         if(!loading && targetRun) {
             targetRun.steps = updatedSteps
@@ -94,7 +98,7 @@
     }
 
     function onStepTypeChange() {
-        const step = steps[this.id];
+        const step: Step = steps[this.id];
         step.type = this.value;
         delete step.value;
 
@@ -102,7 +106,7 @@
     }
 
     function onStepValueChange() {
-        const step = steps[this.id];
+        const step: Step = steps[this.id];
         step.value = this.value;
 
         storeConfigs(steps);
@@ -142,19 +146,19 @@
     }
 
     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':
@@ -169,7 +173,7 @@
         loading = false;
     });
 
-    let lastStepDate = Date.now();
+    let lastStepDate: number = Date.now();
     intermediary.observeEvent(ViewProviderEvent.onRokuAutomationConfigStepChange, (message) => {
         currentRunningStep = message.context.step;
         if (currentRunningStep === -1) {
@@ -180,7 +184,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);
@@ -192,10 +196,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 {
diff --git a/webviews/src/views/RokuAutomationView/dnd.js b/webviews/src/views/RokuAutomationView/dnd.ts
similarity index 94%
rename from webviews/src/views/RokuAutomationView/dnd.js
rename to webviews/src/views/RokuAutomationView/dnd.ts
index 7125d57d..c21561f9 100644
--- a/webviews/src/views/RokuAutomationView/dnd.js
+++ b/webviews/src/views/RokuAutomationView/dnd.ts
@@ -1,7 +1,7 @@
 /* eslint-disable object-shorthand */
 /* eslint-disable curly */
 export function draggable(node, data) {
-    let state = data;
+    let state: any = data;
 
     node.draggable = true;
     node.style.cursor = 'grab';
@@ -25,7 +25,7 @@ export function draggable(node, data) {
 }
 
 export function dropzone(node, options) {
-    let state = {
+    let state: any = {
         dropEffect: 'move',
         dragoverClass: 'droppable',
         ...options
@@ -50,7 +50,7 @@ export function dropzone(node, options) {
     function handleDrop(e) {
         e.preventDefault();
         if (!e.dataTransfer) return;
-        const data = e.dataTransfer.getData('text/plain');
+        const data: any = e.dataTransfer.getData('text/plain');
         if (!(e.target instanceof HTMLElement)) return;
         e.target.classList.remove(state.dragoverClass);
         state.onDropzone(data, e);

From adaa7b9458e374e676d3b12b5751999ac8131200 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Tue, 5 Nov 2024 18:21:55 -0800
Subject: [PATCH 14/22] replace arrow functions with declarative functions per
 review

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 22 +++++++++----------
 .../RokuAutomationView.svelte                 |  7 +++---
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index 1ad62227..bc43a62c 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -16,23 +16,23 @@
     let confirmDialog: any;
     let showContent: boolean = false;
 
-    const toggleDropDown: () => void = () => {
+    function toggleDropDown() {
         showContent = !showContent;
     };
 
-    const selectRun: Callback = (e) => {
+    function selectRun(e) {
         const run: string = getRunFromEvent(e);
         selectedRun = run;
     };
 
-    const moveSelection: Callback = (e) => {
+    function moveSelection(e) {
         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;
         }
     };
 
-    const copyRun: Callback = (e) => {
+    function copyRun(e) {
         const run: string = getRunFromEvent(e);
         selectedRun = run;
 
@@ -51,7 +51,7 @@
             });
     };
 
-    const deleteRun: Callback = (e) => {
+    function deleteRun(e) {
         const run: string = getRunFromEvent(e);
         selectedRun = run;
         new Promise((resolve, reject) => {
@@ -85,7 +85,7 @@
             });
     };
 
-    const moveRun: (runName: string, index: number) => void = (runName, index) => {
+    function moveRun(runName, index) {
         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];
@@ -99,7 +99,7 @@
         runs = newRunList;
     };
 
-    const renameRun: Callback = (e) => {
+    function renameRun(e) {
         const run: string = getRunFromEvent(e);
         selectedRun = run;
 
@@ -114,7 +114,7 @@
             });
     };
 
-    const addNewRun: () => void = () => {
+    function addNewRun() {
         showRunNameDialog()
             .then((runName: string) => {
                 selectedRun = runName;
@@ -128,14 +128,14 @@
             });
     };
 
-    const showRunNameDialog: (defaultRunName?: string) => any = (defaultRunName = null) => {
+    function showRunNameDialog(defaultRunName = null) {
         runNameDialogValue = defaultRunName ?? '';
         setTimeout(() => {
             runNameInput.setSelectionRange(0, runNameInput.value.length);
         }); // select text
         return new Promise((resolve, reject) => {
             let cancelCallback: Callback, clickCallback: Callback, keyupCallback: Callback;
-            const closeDialog: (e: any, runName?: string) => boolean = (e, runName = null) => {
+            function closeDialog(e, runName = null) {
                 if (runName === '' || runs.find((r) => r.name === runName))
                     return false; // name already exists
                 e.stopPropagation();
@@ -189,7 +189,7 @@
         });
     };
 
-    const getRunFromEvent: (e: any) => string = (e) => {
+    function getRunFromEvent(e) {
         e.stopPropagation();
         return e.target.closest('tr').title;
     };
diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
index 6399f3a5..73790bc1 100644
--- a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
+++ b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -11,7 +11,6 @@
 
     type Step = { type: string, value: string };
     type Run = { name?: string, steps?: Step[] };
-    type Nullary = () => any;
 
     let runs: Run[];
     let selectedRun: string;
@@ -21,9 +20,11 @@
 
     $: runs, selectedRun, updateRuns();
 
-    const getRunIndex: Nullary = () => (runs ?? []).findIndex((r) => r.name === selectedRun);
+    function getRunIndex() {
+        return (runs ?? []).findIndex((r) => r.name === selectedRun)
+    };
 
-    const updateRuns: Nullary = () => {
+    function updateRuns() {
         if (!runs || runs.length === 0) {
             runs = [{ }];
         }

From fe5741789a74e50489a24d0feef61d4bdcd9e40c Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Sat, 9 Nov 2024 11:54:57 -0800
Subject: [PATCH 15/22] replace explicit promise resolve/reject handling with
 async/await also added an alert dialog, shown when user input (for run name)
 is invalid

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 236 ++++++++----------
 1 file changed, 111 insertions(+), 125 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index bc43a62c..d6d2d3db 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -2,54 +2,53 @@
     import { Trash, Copy, TriangleDown } from 'svelte-codicons';
     import { dropzone, draggable } from './dnd';
 
-    type Step = { type: string, value: string };
-    type Run = { name?: string, steps?: Step[] };
+    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: any;
-    let runNameInput: any;
-    let runNameDialog: any;
-    let runNameDialogValue: string;
+    let nameInput: HTMLInputElement;
+    let nameInputDialog: HTMLDialogElement;
+    let nameInputDone: Callback;
+    let alertDialog: HTMLDialogElement;
+    let alertMessage: string;
     let confirmDialog: any;
     let showContent: boolean = false;
 
     function toggleDropDown() {
         showContent = !showContent;
-    };
+    }
 
     function selectRun(e) {
         const run: string = getRunFromEvent(e);
         selectedRun = run;
-    };
+    }
 
     function moveSelection(e) {
-        if (["ArrowUp", "ArrowDown"].includes(e.key)) {
-            const index: number = runs.findIndex((r) => r.name === selectedRun) + (e.key === "ArrowUp" ? -1 : 1);
+        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;
         }
-    };
+    }
 
-    function copyRun(e) {
+    async function copyRun(e) {
         const run: string = getRunFromEvent(e);
-        selectedRun = run;
-
-        showRunNameDialog(`Copy of ${run}`)
-            .then((runName: string) => {
-                const steps: Step[] =
-                    runs.find((r) => r.name === selectedRun)?.steps ?? [];
-                selectedRun = runName;
-                runs = [
-                    { name: runName, steps: structuredClone(steps) },
-                    ...runs.filter((r) => r.name !== runName)
-                ];
-            })
-            .catch((e) => {
-                // do nothing
-            });
-    };
+        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)
+            ];
+        }
+    }
 
     function deleteRun(e) {
         const run: string = getRunFromEvent(e);
@@ -83,11 +82,17 @@
             .catch(() => {
                 // do nothing
             });
-    };
+    }
 
     function moveRun(runName, index) {
         let currIndex: number = runs.findIndex((r) => r.name === runName);
-        if (currIndex < 0 || index < 0 || index > runs.length || currIndex === index) return;
+        if (
+            currIndex < 0 ||
+            index < 0 ||
+            index > runs.length ||
+            currIndex === index
+        )
+            return;
         const runToMove: Run = runs[currIndex];
 
         const newRunList: Run[] = [
@@ -97,102 +102,62 @@
         ];
         newRunList.splice(currIndex < index ? currIndex : ++currIndex, 1);
         runs = newRunList;
-    };
+    }
 
-    function renameRun(e) {
+    async function renameRun(e) {
         const run: string = getRunFromEvent(e);
-        selectedRun = run;
-
-        showRunNameDialog(selectedRun)
-            .then((runName: string) => {
-                runs.find((r) => r.name === run).name = runName;
-                runs = runs;
-                selectedRun = runName;
-            })
-            .catch((e) => {
-                // do nothing
-            });
-    };
-
-    function addNewRun() {
-        showRunNameDialog()
-            .then((runName: string) => {
-                selectedRun = runName;
-                runs = [
-                    { name: runName, steps: [] },
-                    ...runs.filter((r) => r.name !== runName)
-                ];
-            })
-            .catch((e) => {
-                // do nothing
-            });
-    };
-
-    function showRunNameDialog(defaultRunName = null) {
-        runNameDialogValue = defaultRunName ?? '';
-        setTimeout(() => {
-            runNameInput.setSelectionRange(0, runNameInput.value.length);
-        }); // select text
-        return new Promise((resolve, reject) => {
-            let cancelCallback: Callback, clickCallback: Callback, keyupCallback: Callback;
-            function closeDialog(e, runName = null) {
-                if (runName === '' || runs.find((r) => r.name === runName))
-                    return false; // name already exists
-                e.stopPropagation();
-                runNameDialog.close();
-                runNameDialog.removeEventListener('cancel', cancelCallback);
-                runNameDialog.removeEventListener('click', clickCallback);
-                runNameDialog.removeEventListener('keyup', keyupCallback);
-                return true;
-            };
-
-            // ESC key
-            runNameDialog.addEventListener(
-                'cancel',
-                (cancelCallback = (e) => {
-                    closeDialog(e);
-                    reject('');
-                })
-            );
+        const runName = await showNameInputDialog(run, `Copy of ${run}`);
+        if (runName) {
+            runs.find((r) => r.name === run).name = runName;
+            runs = runs;
+            selectedRun = runName;
+        }
+    }
 
-            // Enter key
-            runNameDialog.addEventListener(
-                'keyup',
-                (keyupCallback = (e) => {
-                    if (
-                        e.key === 'Enter' &&
-                        closeDialog(e, runNameDialogValue)
-                    ) {
-                        resolve(runNameDialogValue);
-                    } else {
-                        return;
-                    }
-                })
-            );
+    async function addNewRun() {
+        const runName = await showNameInputDialog();
+        if (runName) {
+            runs = [
+                { name: runName, steps: [] },
+                ...runs.filter((r) => r.name !== runName)
+            ];
+            selectedRun = runName;
+        }
+    }
 
-            // button press
-            runNameDialog.addEventListener(
-                'click',
-                (clickCallback = (e) => {
-                    const button: string = e?.target?.id;
-                    if (button === 'OK' && closeDialog(e, runNameDialogValue)) {
-                        resolve(runNameDialogValue);
-                    } else if (button === 'Cancel') {
-                        closeDialog(e);
-                        reject('');
-                    } else {
-                        return;
-                    }
-                })
-            );
-            runNameDialog.showModal();
+    async function showNameInputDialog(targetRun = "", defaultText = ""): Promise<string> {
+        return new Promise((resolve) => {
+            selectedRun = targetRun;
+            nameInput.value = defaultText;
+            nameInputDialog.showModal();
+            nameInputDone = resolve;
         });
-    };
+    }
+
+    function onNameChange(e) {
+        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) {
         e.stopPropagation();
         return e.target.closest('tr').title;
-    };
+    }
 </script>
 
 <style>
@@ -289,8 +254,16 @@
         color: var(--vscode-editor-foreground);
     }
 
-    #RunNameDialog {
-        width: 100%;
+    #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) {
@@ -375,18 +348,24 @@
     {/if}
 </div>
 
-<dialog id="RunNameDialog" bind:this={runNameDialog}>
-    <h3>Enter Run Name</h3>
-    <div style="margin-bottom: 6px;">
+<dialog
+    id="NameInputDialog"
+    bind:this={nameInputDialog}
+    on:cancel={onNameChange}>
+    <h3 style="margin-top: -10px;">Enter Run Name</h3>
+    <div style="margin-bottom: 10px">
         <input
-            bind:this={runNameInput}
+            id="NameInput"
+            bind:this={nameInput}
             placeholder="Enter run name"
             style="width: 100%;"
-            bind:value={runNameDialogValue} />
+            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={this.click}>OK</vscode-button>
-        <vscode-button id="Cancel" on:click={this.click}>Cancel</vscode-button>
+        <vscode-button id="OK" on:click={onNameChange}>OK</vscode-button>
+        <vscode-button id="Cancel" on:click={onNameChange}
+            >Cancel</vscode-button>
     </div>
 </dialog>
 
@@ -397,3 +376,10 @@
         <vscode-button id="NO" on:click={this.click}>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>

From dcb9f5b2f98b47dd95aa60580eafdba060ace975 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Sat, 9 Nov 2024 11:57:47 -0800
Subject: [PATCH 16/22] svelte/typescript auto formatting

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index d6d2d3db..32d2e4d7 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -38,10 +38,12 @@
 
     async function copyRun(e) {
         const run: string = getRunFromEvent(e);
-        const runName: string = await showNameInputDialog(run, `Copy of ${run}`);
+        const runName: string = await showNameInputDialog(
+            run,
+            `Copy of ${run}`
+        );
         if (runName) {
-            const steps: Step[] =
-                runs.find((r) => r.name === run)?.steps ?? [];
+            const steps: Step[] = runs.find((r) => r.name === run)?.steps ?? [];
             selectedRun = runName;
             runs = [
                 { name: runName, steps: structuredClone(steps) },
@@ -125,7 +127,10 @@
         }
     }
 
-    async function showNameInputDialog(targetRun = "", defaultText = ""): Promise<string> {
+    async function showNameInputDialog(
+        targetRun = '',
+        defaultText = ''
+    ): Promise<string> {
         return new Promise((resolve) => {
             selectedRun = targetRun;
             nameInput.value = defaultText;
@@ -140,10 +145,13 @@
         const source: string = e.target.tagName;
         let retval: string = null;
 
-        if ((/BUTTON/i.test(source) && e.target.id === 'OK') || (/INPUT/i.test(source))) {
+        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
+                setTimeout(() => alertDialog.showModal()); // add to task queue
                 nameInput.focus();
                 return;
             }

From 4944edb51ae1300bf1a8993818c191b35a3d97ff Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Sat, 9 Nov 2024 12:33:24 -0800
Subject: [PATCH 17/22] replaced direct observation of html events with svelte
 bindings per review

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 55 +++++++------------
 1 file changed, 20 insertions(+), 35 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index 32d2e4d7..7cc352d4 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -15,7 +15,9 @@
     let nameInputDone: Callback;
     let alertDialog: HTMLDialogElement;
     let alertMessage: string;
-    let confirmDialog: any;
+    let confirmDialog: HTMLDialogElement;
+    let confirmMessage: string;
+    let confirmDone: Callback;
     let showContent: boolean = false;
 
     function toggleDropDown() {
@@ -52,38 +54,12 @@
         }
     }
 
-    function deleteRun(e) {
+    async function deleteRun(e) {
         const run: string = getRunFromEvent(e);
-        selectedRun = run;
-        new Promise((resolve, reject) => {
-            let confirmDialogCallback: any;
-            confirmDialog.addEventListener(
-                'click',
-                (confirmDialogCallback = (e) => {
-                    const button: string = e?.target?.id;
-                    if (button === 'YES') {
-                        resolve(e);
-                    } else if (button === 'NO') {
-                        reject();
-                    } else {
-                        return;
-                    }
-                    e.stopPropagation();
-                    confirmDialog.removeEventListener(
-                        'click',
-                        confirmDialogCallback
-                    );
-                    confirmDialog.close();
-                })
-            );
-            confirmDialog.showModal();
-        })
-            .then(() => {
-                runs = runs.filter((r) => r.name !== run);
-            })
-            .catch(() => {
-                // do nothing
-            });
+        if (await showConfirmDeleteDialog(run)) {
+            runs = runs.filter((r) => r.name !== run);
+        }
+        confirmDialog.close();
     }
 
     function moveRun(runName, index) {
@@ -127,6 +103,15 @@
         }
     }
 
+    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 = '',
         defaultText = ''
@@ -378,10 +363,10 @@
 </dialog>
 
 <dialog id="confirmDialog" bind:this={confirmDialog}>
-    <h3>Are you sure you want to delete this run?</h3>
+    <h3>{confirmMessage}</h3>
     <div class="button-group horizontal-container">
-        <vscode-button id="YES" on:click={this.click}>YES</vscode-button>
-        <vscode-button id="NO" on:click={this.click}>NO</vscode-button>
+        <vscode-button id="YES" on:click={() => confirmDone(true)}>YES</vscode-button>
+        <vscode-button id="NO" on:click={() => confirmDone(false)}>NO</vscode-button>
     </div>
 </dialog>
 

From 176fd4456160713c9781b5592ef66224f1a82251 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Sat, 9 Nov 2024 12:41:24 -0800
Subject: [PATCH 18/22] reduce selected run display font size per review

---
 webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index 7cc352d4..2544db17 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -202,7 +202,7 @@
     }
 
     #selection-text {
-        font-size: xx-large;
+        font-size: large;
         white-space: nowrap;
         width: 100%;
         text-overflow: ellipsis;

From 2efbe6050243bae6fccedae470af5f114aac04c3 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Sat, 9 Nov 2024 12:44:05 -0800
Subject: [PATCH 19/22] replaced triangle-down with menu icon in selected run
 display per review

---
 webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index 2544db17..08105cd7 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Trash, Copy, TriangleDown } from 'svelte-codicons';
+    import { Trash, Copy, Menu } from 'svelte-codicons';
     import { dropzone, draggable } from './dnd';
 
     type Step = { type: string; value: string };
@@ -270,7 +270,7 @@
         <vscode-button
             id="selection-button"
             title="Edit Runs"
-            on:click={toggleDropDown}><TriangleDown /></vscode-button>
+            on:click={toggleDropDown}><Menu /></vscode-button>
     </div>
     {#if showContent}
         <div id="content-container">

From 41adcaefd6f7ce18390da0c827d3e51200d822eb Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Mon, 11 Nov 2024 10:52:21 -0800
Subject: [PATCH 20/22] added a play button to runs in the list of runs

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 56 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index 08105cd7..e37eb0c0 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
-    import { Trash, Copy, Menu } from 'svelte-codicons';
+    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[] };
@@ -19,6 +22,13 @@
     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;
@@ -29,6 +39,26 @@
         selectedRun = run;
     }
 
+    function startRun(e) {
+        if (!activeRun) {
+            selectedRun = getRunFromEvent(e);
+            activeRun = selectedRun;
+            intermediary.sendCommand(ViewProviderCommand.runRokuAutomationConfig, {
+                configIndex: getRunIndex().toString()
+            });
+        }
+    }
+
+    function stopRun(e) {
+        const run = getRunFromEvent(e);
+        if (activeRun === run) {
+            selectedRun = run;
+            intermediary.sendCommand(ViewProviderCommand.stopRokuAutomationConfig, {
+                configIndex: getRunIndex().toString()
+            });
+        }
+    }
+
     function moveSelection(e) {
         if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
             const index: number =
@@ -151,6 +181,10 @@
         e.stopPropagation();
         return e.target.closest('tr').title;
     }
+
+    function getRunIndex() {
+        return (runs ?? []).findIndex((r) => r.name === selectedRun)
+    };
 </script>
 
 <style>
@@ -326,6 +360,26 @@
                                     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}

From 17b3d8a0a4eeac93bb46e985901fe142ae507804 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Mon, 11 Nov 2024 12:01:09 -0800
Subject: [PATCH 21/22] adding function argument types to comply with review
 feedback request

---
 .../RokuAutomationView/AutoRunsEditor.svelte  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
index e37eb0c0..252a6fd2 100644
--- a/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
+++ b/webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte
@@ -12,7 +12,7 @@
     export let runs: Run[];
     export let selectedRun: string;
 
-    let runTable: any;
+    let runTable: HTMLTableElement;
     let nameInput: HTMLInputElement;
     let nameInputDialog: HTMLDialogElement;
     let nameInputDone: Callback;
@@ -34,12 +34,12 @@
         showContent = !showContent;
     }
 
-    function selectRun(e) {
+    function selectRun(e: MouseEvent) {
         const run: string = getRunFromEvent(e);
         selectedRun = run;
     }
 
-    function startRun(e) {
+    function startRun(e: MouseEvent) {
         if (!activeRun) {
             selectedRun = getRunFromEvent(e);
             activeRun = selectedRun;
@@ -49,7 +49,7 @@
         }
     }
 
-    function stopRun(e) {
+    function stopRun(e: MouseEvent) {
         const run = getRunFromEvent(e);
         if (activeRun === run) {
             selectedRun = run;
@@ -59,7 +59,7 @@
         }
     }
 
-    function moveSelection(e) {
+    function moveSelection(e: KeyboardEvent) {
         if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
             const index: number =
                 runs.findIndex((r) => r.name === selectedRun) +
@@ -68,7 +68,7 @@
         }
     }
 
-    async function copyRun(e) {
+    async function copyRun(e: MouseEvent) {
         const run: string = getRunFromEvent(e);
         const runName: string = await showNameInputDialog(
             run,
@@ -84,7 +84,7 @@
         }
     }
 
-    async function deleteRun(e) {
+    async function deleteRun(e: MouseEvent) {
         const run: string = getRunFromEvent(e);
         if (await showConfirmDeleteDialog(run)) {
             runs = runs.filter((r) => r.name !== run);
@@ -92,7 +92,7 @@
         confirmDialog.close();
     }
 
-    function moveRun(runName, index) {
+    function moveRun(runName: string, index: number) {
         let currIndex: number = runs.findIndex((r) => r.name === runName);
         if (
             currIndex < 0 ||
@@ -112,9 +112,9 @@
         runs = newRunList;
     }
 
-    async function renameRun(e) {
+    async function renameRun(e: Event) {
         const run: string = getRunFromEvent(e);
-        const runName = await showNameInputDialog(run, `Copy of ${run}`);
+        const runName = await showNameInputDialog(run, run);
         if (runName) {
             runs.find((r) => r.name === run).name = runName;
             runs = runs;
@@ -143,8 +143,8 @@
     }
 
     async function showNameInputDialog(
-        targetRun = '',
-        defaultText = ''
+        targetRun: string = '',
+        defaultText: string = ''
     ): Promise<string> {
         return new Promise((resolve) => {
             selectedRun = targetRun;
@@ -154,7 +154,7 @@
         });
     }
 
-    function onNameChange(e) {
+    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;
@@ -177,7 +177,7 @@
         nameInputDone(retval);
     }
 
-    function getRunFromEvent(e) {
+    function getRunFromEvent(e: any) {
         e.stopPropagation();
         return e.target.closest('tr').title;
     }

From 2df014b7b7b463897a3230ca70623612cf6964a7 Mon Sep 17 00:00:00 2001
From: justin tucker <jtuckermail@gmail.com>
Date: Mon, 11 Nov 2024 12:08:16 -0800
Subject: [PATCH 22/22] just in case we want this to be typed

---
 src/viewProviders/RokuAutomationViewViewProvider.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/viewProviders/RokuAutomationViewViewProvider.ts b/src/viewProviders/RokuAutomationViewViewProvider.ts
index a9b0708f..71c723d5 100644
--- a/src/viewProviders/RokuAutomationViewViewProvider.ts
+++ b/src/viewProviders/RokuAutomationViewViewProvider.ts
@@ -93,7 +93,7 @@ export class RokuAutomationViewViewProvider extends BaseRdbViewProvider {
     }
 
     private isRecording = false;
-    private selectedConfig;
+    private selectedConfig: string;
     private rokuAutomationConfigs: {
         name: string;
         steps: {