From 4920c054e87f304876d0110a4dc067d1d12d2394 Mon Sep 17 00:00:00 2001
From: Kanhaiya Kumar <113596215+kanhaiyaXITE@users.noreply.github.com>
Date: Fri, 29 May 2026 13:30:58 +0200
Subject: [PATCH] Registry View: inline edit, rename, delete with success/error
 feedback

Builds on PR #808's Svelte 5 fix to make the Roku Registry side-panel
actually editable end-to-end.

UI:
- Double-click a value cell to edit; Enter or click-away commits;
  Escape cancels.
- Double-click a key name (depth >= 1) to rename. Section keys at
  depth 0 stay non-renamable since they're app namespaces.
- Trash icon visible on hover for every row: deletes a leaf key, a
  nested entry, or a whole section.

Correct nested writes:
- The registry is a 2-level store (section -> key -> string) but
  formatValues() recursively JSON.parses string values into a tree
  that often goes 3+ levels deep. Writing a leaf's local key at the
  top of the section creates a sibling instead of mutating the
  enclosing JSON blob, which is what the rewritten Registry View was
  doing before this change (you can repro on master by editing e.g.
  com.xite.Xite.staging.screen_show_counts.get_started).
- RegistryNode now threads `topLevelKey` + `pathInTopLevel` through
  the recursive svelte:self. RegistryTree branches on
  pathInTopLevel.length: depth-1 edits/renames/deletes use the
  existing merge-semantic writeRegistry; deeper edits deep-clone the
  parsed top-level object, apply the mutation, and write back the
  re-stringified blob under the original top-level key.
- coerceNestedValue preserves number/boolean/null primitives through
  the round-trip so re-stringification doesn't silently change types.

Feedback:
- A new ViewProviderCommand.showErrorMessage, routed in
  BaseWebviewViewProvider alongside setVscodeContext/getVscodeContext,
  lets the webview ask the host to show a vscode error toast. Used
  for all write failures and for the initial registry read.
- The two readRegistry callers in RokuRegistryView.svelte are wrapped
  in try/finally so the loader always clears -- previously a
  rejected read would leave the panel spinning forever.
- A Svelte context store from RegistryTree -> RegistryNode pushes an
  ack signal after each write; the matching cell briefly flashes
  green on success or red on failure (~1.6s CSS animation). On
  delete success the row disappears so no flash is fired.

No extension-host ODC pipeline changes. All edits go through the
existing writeRegistry / deleteRegistrySections merge semantics.
---
 src/viewProviders/BaseWebviewViewProvider.ts  |   2 +
 src/viewProviders/ViewProviderCommand.ts      |   1 +
 webviews/src/ExtensionIntermediary.ts         |   6 +
 .../RokuRegistryView/RegistryNode.svelte      | 264 ++++++++++++++----
 .../RokuRegistryView/RegistryTree.svelte      | 200 ++++++++++++-
 .../RokuRegistryView/RokuRegistryView.svelte  |  27 +-
 6 files changed, 427 insertions(+), 73 deletions(-)

diff --git a/src/viewProviders/BaseWebviewViewProvider.ts b/src/viewProviders/BaseWebviewViewProvider.ts
index 024e2dac2..b0d55ab9e 100644
--- a/src/viewProviders/BaseWebviewViewProvider.ts
+++ b/src/viewProviders/BaseWebviewViewProvider.ts
@@ -135,6 +135,8 @@ export abstract class BaseWebviewViewProvider implements vscode.WebviewViewProvi
                 } else if (command === ViewProviderCommand.sendMessageToWebviews) {
                     const context = message.context;
                     this.webviewViewProviderManager.sendMessageToWebviews(context.viewIds, context.message);
+                } else if (command === ViewProviderCommand.showErrorMessage) {
+                    void vscode.window.showErrorMessage(message.context.message);
                 } else if (command === ViewProviderCommand.updateWorkspaceState) {
                     const context = message.context;
                     await this.extensionContext.workspaceState.update(context.key, context.value);
diff --git a/src/viewProviders/ViewProviderCommand.ts b/src/viewProviders/ViewProviderCommand.ts
index a8e9aacfa..b512e1056 100644
--- a/src/viewProviders/ViewProviderCommand.ts
+++ b/src/viewProviders/ViewProviderCommand.ts
@@ -13,6 +13,7 @@ export enum ViewProviderCommand {
     sendReplRequest = 'sendReplRequest',
     setManualIpAddress = 'setManualIpAddress',
     setVscodeContext = 'setVscodeContext',
+    showErrorMessage = 'showErrorMessage',
     stopRokuAutomationConfig = 'stopRokuAutomationConfig',
     storeRokuAppOverlays = 'storeRokuAppOverlays',
     storeRokuAutomationConfigs = 'storeRokuAutomationConfigs',
diff --git a/webviews/src/ExtensionIntermediary.ts b/webviews/src/ExtensionIntermediary.ts
index 92475e9fc..611ef7e94 100644
--- a/webviews/src/ExtensionIntermediary.ts
+++ b/webviews/src/ExtensionIntermediary.ts
@@ -142,6 +142,12 @@ class ExtensionIntermediary {
         this.observedEvents.set(eventName, observedEvent);
     }
 
+    public showErrorMessage(message: string) {
+        this.postMessage(this.createCommandMessage(ViewProviderCommand.showErrorMessage, {
+            message: message
+        }));
+    }
+
     public sendMessageToWebviews(viewIds: string | string[], message) {
         if (!viewIds || (Array.isArray(viewIds) && viewIds.length === 0)) {
             return;
diff --git a/webviews/src/views/RokuRegistryView/RegistryNode.svelte b/webviews/src/views/RokuRegistryView/RegistryNode.svelte
index c38e8c50f..718c190cc 100644
--- a/webviews/src/views/RokuRegistryView/RegistryNode.svelte
+++ b/webviews/src/views/RokuRegistryView/RegistryNode.svelte
@@ -1,19 +1,27 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <script lang="ts">
-    import { Edit, Check, Close, Trash, Clippy, DebugBreakpointDataUnverified } from 'svelte-codicons';
+    import { Trash, DebugBreakpointDataUnverified } from 'svelte-codicons';
     import Chevron from '../../shared/Chevron.svelte';
     import { utils } from '../../utils';
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+    import type { Readable } from 'svelte/store';
     const dispatch = createEventDispatcher();
 
     export let nodeKey: string;
     export let nodeValue: any;
     export let depth = 0;
     export let sectionKey: string;
+    // Depth-1 ancestor key (the registry key that actually stores this subtree as a JSON string on the device).
+    // Empty for depth-0 section rows; equals nodeKey for depth-1 rows; inherited from parent for deeper rows.
+    export let topLevelKey: string = '';
+    // Path from the parsed top-level object root to this node, INCLUSIVE of this node's key.
+    // [] for depth 0 and depth 1; e.g. ['get_started'] for depth 2.
+    export let pathInTopLevel: string[] = [];
 
     $: isSection = typeof nodeValue === 'object' && nodeValue !== null;
     $: childKeys = isSection ? Object.keys(nodeValue) : [];
     $: displayValue = String(nodeValue ?? '');
+    $: keyRenamable = depth > 0;
 
     const expandedStorageKey = `registry:expanded:${sectionKey}:${nodeKey}`;
     let expanded = utils.getStorageBooleanValue(expandedStorageKey);
@@ -25,9 +33,50 @@
         }
     }
 
-    let editing = false;
+    let editingValue = false;
+    let editingKey = false;
+    $: editing = editingValue || editingKey;
+
     let savedValue = '';
+    let savedKey = '';
     let valueEl: HTMLSpanElement;
+    let keyEl: HTMLSpanElement;
+
+    // Listen for write-acknowledgement events from RegistryTree and flash the value or key cell
+    // briefly so the user gets immediate feedback that a write succeeded or failed.
+    type AckSignal = { id: string; status: 'success' | 'error'; field: 'value' | 'key' };
+    const ackStore = getContext<Readable<AckSignal | null>>('registryAck');
+    $: ackId = `${sectionKey}|${topLevelKey}|${(pathInTopLevel ?? []).join('/')}`;
+    let valueFlash: 'success' | 'error' | null = null;
+    let keyFlash: 'success' | 'error' | null = null;
+    let valueFlashTimer: ReturnType<typeof setTimeout> | undefined;
+    let keyFlashTimer: ReturnType<typeof setTimeout> | undefined;
+
+    const unsubscribeAck = ackStore?.subscribe((ack) => {
+        if (!ack || ack.id !== ackId) {
+            return;
+        }
+        if (ack.field === 'value') {
+            valueFlash = null;
+            requestAnimationFrame(() => {
+                valueFlash = ack.status;
+                clearTimeout(valueFlashTimer);
+                valueFlashTimer = setTimeout(() => { valueFlash = null; }, 1600);
+            });
+        } else {
+            keyFlash = null;
+            requestAnimationFrame(() => {
+                keyFlash = ack.status;
+                clearTimeout(keyFlashTimer);
+                keyFlashTimer = setTimeout(() => { keyFlash = null; }, 1600);
+            });
+        }
+    });
+    onDestroy(() => {
+        unsubscribeAck?.();
+        clearTimeout(valueFlashTimer);
+        clearTimeout(keyFlashTimer);
+    });
 
     function toggleExpand() {
         if (isSection) {
@@ -35,9 +84,13 @@
         }
     }
 
-    function startEdit() {
+    function startValueEdit(event: MouseEvent) {
+        if (isSection) {
+            return;
+        }
+        event.stopPropagation();
         savedValue = valueEl.textContent;
-        editing = true;
+        editingValue = true;
         requestAnimationFrame(() => {
             valueEl?.focus();
             const sel = window.getSelection();
@@ -46,41 +99,113 @@
         });
     }
 
-    function confirmEdit() {
+    function confirmValueEdit() {
+        if (!editingValue) {
+            return;
+        }
         const newValue = valueEl.textContent;
-        editing = false;
+        editingValue = false;
+        if (newValue === savedValue) {
+            return;
+        }
         dispatch('valueChanged', {
             sectionKey: sectionKey,
+            topLevelKey: topLevelKey,
+            pathInTopLevel: pathInTopLevel,
             itemKey: nodeKey,
             newValue: newValue
         });
     }
 
-    function cancelEdit() {
-        valueEl.textContent = savedValue;
-        editing = false;
+    function cancelValueEdit() {
+        if (!editingValue) {
+            return;
+        }
+        if (valueEl) {
+            valueEl.textContent = savedValue;
+        }
+        editingValue = false;
     }
 
-    function onEditKeydown(event: KeyboardEvent) {
+    function onValueKeydown(event: KeyboardEvent) {
         if (event.key === 'Enter') {
             event.preventDefault();
-            confirmEdit();
+            valueEl?.blur();
         } else if (event.key === 'Escape') {
             event.preventDefault();
-            cancelEdit();
+            cancelValueEdit();
+            valueEl?.blur();
         }
     }
 
-    function copyValue() {
-        const text = isSection ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? '');
-        navigator.clipboard.writeText(text);
+    function startKeyEdit(event: MouseEvent) {
+        if (!keyRenamable) {
+            return;
+        }
+        event.stopPropagation();
+        savedKey = keyEl.textContent;
+        editingKey = true;
+        requestAnimationFrame(() => {
+            keyEl?.focus();
+            const sel = window.getSelection();
+            sel.selectAllChildren(keyEl);
+            sel.collapseToEnd();
+        });
+    }
+
+    function confirmKeyEdit() {
+        if (!editingKey) {
+            return;
+        }
+        const newKey = keyEl.textContent.trim();
+        editingKey = false;
+        if (!newKey || newKey === savedKey) {
+            if (keyEl) {
+                keyEl.textContent = savedKey;
+            }
+            return;
+        }
+        dispatch('keyRenamed', {
+            sectionKey: sectionKey,
+            topLevelKey: topLevelKey,
+            pathInTopLevel: pathInTopLevel,
+            oldItemKey: nodeKey,
+            newItemKey: newKey,
+            currentValue: nodeValue
+        });
+    }
+
+    function cancelKeyEdit() {
+        if (!editingKey) {
+            return;
+        }
+        if (keyEl) {
+            keyEl.textContent = savedKey;
+        }
+        editingKey = false;
+    }
+
+    function onKeyKeydown(event: KeyboardEvent) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            keyEl?.blur();
+        } else if (event.key === 'Escape') {
+            event.preventDefault();
+            cancelKeyEdit();
+            keyEl?.blur();
+        }
     }
 
     function deleteNode() {
         if (depth === 0) {
             dispatch('deleteSection', { sectionKey: nodeKey });
         } else {
-            dispatch('deleteItem', { sectionKey, itemKey: nodeKey });
+            dispatch('deleteItem', {
+                sectionKey: sectionKey,
+                topLevelKey: topLevelKey,
+                pathInTopLevel: pathInTopLevel,
+                itemKey: nodeKey
+            });
         }
     }
 
@@ -88,6 +213,10 @@
         dispatch('valueChanged', event.detail);
     }
 
+    function forwardKeyRenamed(event) {
+        dispatch('keyRenamed', event.detail);
+    }
+
     function forwardDeleteItem(event) {
         dispatch('deleteItem', event.detail);
     }
@@ -111,7 +240,7 @@
         background-color: var(--vscode-list-hoverBackground);
     }
 
-    .row:hover .actions {
+    .row:hover .actions:not(.hide) {
         display: flex;
         background-color: var(--vscode-sideBar-background);
     }
@@ -144,6 +273,25 @@
         font-weight: bold;
         color: var(--vscode-symbolIcon-propertyForeground, #3faacb);
         white-space: nowrap;
+        flex-shrink: 0;
+        outline: none;
+        padding: 0 2px;
+        border: 1px solid transparent;
+        border-radius: 2px;
+    }
+
+    .key-name.renamable {
+        cursor: text;
+    }
+
+    .key-name.editing {
+        border-color: var(--vscode-focusBorder);
+        background: var(--vscode-input-background);
+    }
+
+    .key-colon {
+        font-weight: bold;
+        color: var(--vscode-symbolIcon-propertyForeground, #3faacb);
         margin-right: 6px;
         flex-shrink: 0;
     }
@@ -157,17 +305,35 @@
         padding: 0 2px;
         border: 1px solid transparent;
         border-radius: 2px;
+        cursor: text;
     }
 
     .value-text.editing {
         border-color: var(--vscode-focusBorder);
         background: var(--vscode-input-background);
-        cursor: text;
         opacity: 1;
     }
 
+    .flash-success {
+        animation: registryFlashSuccess 1.6s ease-out;
+    }
+
+    .flash-error {
+        animation: registryFlashError 1.6s ease-out;
+    }
+
+    @keyframes registryFlashSuccess {
+        0% { background-color: rgba(46, 160, 67, 0.55); }
+        100% { background-color: transparent; }
+    }
+
+    @keyframes registryFlashError {
+        0% { background-color: rgba(248, 81, 73, 0.55); }
+        100% { background-color: transparent; }
+    }
+
     .content.editing {
-        padding-right: 56px;
+        padding-right: 28px;
     }
 
     .actions {
@@ -180,10 +346,6 @@
         background-color: var(--vscode-sideBar-background);
     }
 
-    .actions.editing {
-        display: flex;
-    }
-
     .children {
         position: relative;
     }
@@ -207,39 +369,40 @@
                 <DebugBreakpointDataUnverified style="opacity: .2" />
             {/if}
         </span>
-        <span class="key-name">{nodeKey}:</span>
+        <span
+            class="key-name"
+            class:renamable={keyRenamable && !editingKey}
+            class:editing={editingKey}
+            class:flash-success={keyFlash === 'success'}
+            class:flash-error={keyFlash === 'error'}
+            bind:this={keyEl}
+            contenteditable={editingKey}
+            title={editingKey || !keyRenamable ? '' : 'Double-click to rename'}
+            on:dblclick={keyRenamable ? startKeyEdit : undefined}
+            on:keydown={editingKey ? onKeyKeydown : undefined}
+            on:blur={confirmKeyEdit}
+            on:click|stopPropagation
+        >{nodeKey}</span><span class="key-colon">:</span>
         {#if !isSection}
             <span
                 class="value-text"
-                class:editing
+                class:editing={editingValue}
+                class:flash-success={valueFlash === 'success'}
+                class:flash-error={valueFlash === 'error'}
                 bind:this={valueEl}
-                contenteditable={editing}
-                on:keydown={editing ? onEditKeydown : undefined}
+                contenteditable={editingValue}
+                title={editingValue ? '' : 'Double-click to edit'}
+                on:dblclick={startValueEdit}
+                on:keydown={editingValue ? onValueKeydown : undefined}
+                on:blur={confirmValueEdit}
                 on:click|stopPropagation
             >{displayValue}</span>
         {/if}
     </div>
-    <div class="actions" class:editing>
-        {#if editing}
-            <span title="Confirm" class="icon-button" on:click|stopPropagation={confirmEdit}>
-                <Check />
-            </span>
-            <span title="Cancel" class="icon-button" on:click|stopPropagation={cancelEdit}>
-                <Close />
-            </span>
-        {:else}
-            <span title="Copy Value" class="icon-button" on:click|stopPropagation={copyValue}>
-                <Clippy />
-            </span>
-            {#if !isSection}
-                <span title="Edit Value" class="icon-button" on:click|stopPropagation={startEdit}>
-                    <Edit />
-                </span>
-            {/if}
-            <span title="{isSection ? 'Delete Section' : 'Delete Item'}" class="icon-button" on:click|stopPropagation={deleteNode}>
-                <Trash />
-            </span>
-        {/if}
+    <div class="actions" class:hide={editing}>
+        <span title="{depth === 0 ? 'Delete Section' : 'Delete'}" class="icon-button" on:click|stopPropagation={deleteNode}>
+            <Trash />
+        </span>
     </div>
 </div>
 {#if isSection}
@@ -247,12 +410,15 @@
         {#each childKeys as childKey}
             <svelte:self
                 on:valueChanged={forwardValueChanged}
+                on:keyRenamed={forwardKeyRenamed}
                 on:deleteItem={forwardDeleteItem}
                 on:deleteSection={forwardDeleteSection}
                 nodeKey={childKey}
                 nodeValue={nodeValue[childKey]}
                 depth={depth + 1}
                 sectionKey={depth === 0 ? nodeKey : sectionKey}
+                topLevelKey={depth === 0 ? childKey : topLevelKey}
+                pathInTopLevel={depth === 0 ? [] : [...pathInTopLevel, childKey]}
             />
         {/each}
     </div>
diff --git a/webviews/src/views/RokuRegistryView/RegistryTree.svelte b/webviews/src/views/RokuRegistryView/RegistryTree.svelte
index 3077cdbcc..6f2de4c4b 100644
--- a/webviews/src/views/RokuRegistryView/RegistryTree.svelte
+++ b/webviews/src/views/RokuRegistryView/RegistryTree.svelte
@@ -1,45 +1,214 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <script lang="ts">
     import RegistryNode from './RegistryNode.svelte';
-    import { odc } from '../../ExtensionIntermediary';
+    import { odc, intermediary } from '../../ExtensionIntermediary';
     import { registryView } from './RokuRegistryView';
+    import { setContext, tick } from 'svelte';
+    import { writable } from 'svelte/store';
 
     export let registryValues: Record<string, any>;
 
+    // Ack store: RegistryNode subscribes via context. We push an entry after each write so the
+    // matching cell flashes green (success) or red (failure) for ~1.6s.
+    type AckSignal = { id: string; status: 'success' | 'error'; field: 'value' | 'key' };
+    const ackStore = writable<AckSignal | null>(null);
+    setContext('registryAck', ackStore);
+
+    function ackId(sectionKey: string, topLevelKey: string, pathInTopLevel: string[]): string {
+        return `${sectionKey}|${topLevelKey}|${(pathInTopLevel ?? []).join('/')}`;
+    }
+
     function sanitizeInput(values: Record<string, any>): Record<string, any> {
         const input = { ...values };
         for (const key of Object.keys(input)) {
-            if (typeof input[key] === 'object') {
+            if (typeof input[key] === 'object' && input[key] !== null) {
                 input[key] = JSON.stringify(input[key]);
             }
         }
         return input;
     }
 
-    async function onValueChanged(event: CustomEvent<{ sectionKey: string; itemKey: string; newValue: string }>) {
-        const { sectionKey, itemKey, newValue } = event.detail;
+    // For nested edits, try to preserve the value's original primitive shape so the re-stringified
+    // JSON blob round-trips cleanly. Strings that parse to number/boolean/null get the primitive type;
+    // everything else stays a string.
+    function coerceNestedValue(text: string): any {
+        try {
+            const parsed = JSON.parse(text);
+            const t = typeof parsed;
+            if (t === 'number' || t === 'boolean' || parsed === null) {
+                return parsed;
+            }
+        } catch {
+            // not parseable; fall through
+        }
+        return text;
+    }
+
+    function reportError(action: string, err: unknown) {
+        const detail = (err as any)?.message ?? String(err);
+        intermediary.showErrorMessage(`Failed to ${action}: ${detail}`);
+    }
+
+    // Clone the parsed object stored under `topLevelKey` so we can mutate it without affecting the
+    // local view state until refreshRegistry() reads the device's authoritative copy back.
+    function cloneTopLevel(sectionKey: string, topLevelKey: string): Record<string, any> {
         const section = registryValues[sectionKey] ?? {};
-        const updatedSection = { ...section, [itemKey]: newValue };
+        const original = section[topLevelKey];
+        return (typeof original === 'object' && original !== null)
+            ? JSON.parse(JSON.stringify(original))
+            : {};
+    }
+
+    function navigateToParent(root: Record<string, any>, pathInTopLevel: string[]): Record<string, any> {
+        let parent = root;
+        for (let i = 0; i < pathInTopLevel.length - 1; i++) {
+            const key = pathInTopLevel[i];
+            if (typeof parent[key] !== 'object' || parent[key] === null) {
+                parent[key] = {};
+            }
+            parent = parent[key];
+        }
+        return parent;
+    }
+
+    // Fire after the tree has re-rendered with the post-write data so the just-rendered cell
+    // receives the ack and runs its animation.
+    async function fireAck(id: string, status: 'success' | 'error', field: 'value' | 'key') {
+        await tick();
+        ackStore.set({ id, status, field });
+    }
+
+    async function onValueChanged(event: CustomEvent<{
+        sectionKey: string;
+        topLevelKey: string;
+        pathInTopLevel: string[];
+        itemKey: string;
+        newValue: string;
+    }>) {
+        const { sectionKey, topLevelKey, pathInTopLevel, itemKey, newValue } = event.detail;
+        const isNested = pathInTopLevel?.length > 0;
+
+        let sectionUpdate: Record<string, any>;
+        if (isNested) {
+            const clone = cloneTopLevel(sectionKey, topLevelKey);
+            const parent = navigateToParent(clone, pathInTopLevel);
+            const leafKey = pathInTopLevel[pathInTopLevel.length - 1];
+            parent[leafKey] = coerceNestedValue(newValue);
+            sectionUpdate = { [topLevelKey]: JSON.stringify(clone) };
+        } else {
+            sectionUpdate = { [itemKey]: newValue };
+        }
+
+        let status: 'success' | 'error' = 'success';
+        try {
+            await odc.writeRegistry({
+                values: { [sectionKey]: sectionUpdate }
+            });
+        } catch (err) {
+            status = 'error';
+            reportError('update registry value', err);
+        }
+        await refreshRegistry();
+        await fireAck(ackId(sectionKey, topLevelKey, pathInTopLevel), status, 'value');
+    }
 
-        await odc.writeRegistry({
-            values: { [sectionKey]: sanitizeInput(updatedSection) }
-        });
+    async function onKeyRenamed(event: CustomEvent<{
+        sectionKey: string;
+        topLevelKey: string;
+        pathInTopLevel: string[];
+        oldItemKey: string;
+        newItemKey: string;
+        currentValue: any;
+    }>) {
+        const { sectionKey, topLevelKey, pathInTopLevel, oldItemKey, newItemKey, currentValue } = event.detail;
+        const isNested = pathInTopLevel?.length > 0;
 
+        let sectionUpdate: Record<string, any>;
+        if (isNested) {
+            const clone = cloneTopLevel(sectionKey, topLevelKey);
+            const parent = navigateToParent(clone, pathInTopLevel);
+            const leafKey = pathInTopLevel[pathInTopLevel.length - 1];
+            const value = parent[leafKey];
+            delete parent[leafKey];
+            parent[newItemKey] = value;
+            sectionUpdate = { [topLevelKey]: JSON.stringify(clone) };
+        } else {
+            sectionUpdate = sanitizeInput({
+                [oldItemKey]: null,
+                [newItemKey]: currentValue
+            });
+        }
+
+        let status: 'success' | 'error' = 'success';
+        try {
+            await odc.writeRegistry({
+                values: { [sectionKey]: sectionUpdate }
+            });
+        } catch (err) {
+            status = 'error';
+            reportError('rename registry key', err);
+        }
         await refreshRegistry();
+
+        // On success, the new key now exists at the renamed location; flash that row.
+        // On failure, the old key still exists; flash the original location red.
+        const ackPath = (status === 'success' && isNested)
+            ? [...pathInTopLevel.slice(0, -1), newItemKey]
+            : (pathInTopLevel ?? []);
+        const ackTopLevel = (status === 'success' && !isNested) ? newItemKey : topLevelKey;
+        await fireAck(ackId(sectionKey, ackTopLevel, ackPath), status, 'key');
     }
 
     async function onDeleteSection(event: CustomEvent<{ sectionKey: string }>) {
         const { sectionKey } = event.detail;
-        await odc.deleteRegistrySections({ sections: [sectionKey] });
+        let status: 'success' | 'error' = 'success';
+        try {
+            await odc.deleteRegistrySections({ sections: [sectionKey] });
+        } catch (err) {
+            status = 'error';
+            reportError('delete registry section', err);
+        }
         await refreshRegistry();
+        // On error, the section still exists; flash its row red. On success, the row is gone.
+        if (status === 'error') {
+            await fireAck(ackId(sectionKey, '', []), status, 'key');
+        }
     }
 
-    async function onDeleteItem(event: CustomEvent<{ sectionKey: string; itemKey: string }>) {
-        const { sectionKey, itemKey } = event.detail;
-        await odc.writeRegistry({
-            values: { [sectionKey]: { [itemKey]: null } }
-        });
+    async function onDeleteItem(event: CustomEvent<{
+        sectionKey: string;
+        topLevelKey: string;
+        pathInTopLevel: string[];
+        itemKey: string;
+    }>) {
+        const { sectionKey, topLevelKey, pathInTopLevel, itemKey } = event.detail;
+        const isNested = pathInTopLevel?.length > 0;
+
+        let sectionUpdate: Record<string, any>;
+        if (isNested) {
+            const clone = cloneTopLevel(sectionKey, topLevelKey);
+            const parent = navigateToParent(clone, pathInTopLevel);
+            delete parent[pathInTopLevel[pathInTopLevel.length - 1]];
+            sectionUpdate = { [topLevelKey]: JSON.stringify(clone) };
+        } else {
+            sectionUpdate = { [itemKey]: null };
+        }
+
+        let status: 'success' | 'error' = 'success';
+        try {
+            await odc.writeRegistry({
+                values: { [sectionKey]: sectionUpdate }
+            });
+        } catch (err) {
+            status = 'error';
+            reportError('delete registry key', err);
+        }
         await refreshRegistry();
+        // On error, the row still exists; flash it red. On success, the row is gone so the
+        // disappearance is its own feedback.
+        if (status === 'error') {
+            await fireAck(ackId(sectionKey, topLevelKey, pathInTopLevel), status, 'key');
+        }
     }
 
     async function refreshRegistry() {
@@ -60,8 +229,9 @@
     {#each Object.keys(registryValues) as key (key)}
         <RegistryNode
             on:valueChanged={onValueChanged}
-            on:deleteSection={onDeleteSection}
+            on:keyRenamed={onKeyRenamed}
             on:deleteItem={onDeleteItem}
+            on:deleteSection={onDeleteSection}
             nodeKey={key}
             nodeValue={registryValues[key]}
             depth={0}
diff --git a/webviews/src/views/RokuRegistryView/RokuRegistryView.svelte b/webviews/src/views/RokuRegistryView/RokuRegistryView.svelte
index 606b9b860..2bd6fe899 100644
--- a/webviews/src/views/RokuRegistryView/RokuRegistryView.svelte
+++ b/webviews/src/views/RokuRegistryView/RokuRegistryView.svelte
@@ -13,23 +13,32 @@
 
     let odcAvailable = false;
 
-    intermediary.observeEvent(ViewProviderEvent.onDeviceAvailabilityChange, async (message) => {
-        odcAvailable = message.context.odcAvailable;
-        if (odcAvailable) {
-            loading = true;
+    async function loadRegistry() {
+        loading = true;
+        try {
             const { values } = await odc.readRegistry();
             registryValues = registryView.formatValues(values);
+        } catch (err) {
+            registryValues = {};
+            const detail = (err as any)?.message ?? String(err);
+            intermediary.showErrorMessage(`Failed to read registry: ${detail}`);
+        } finally {
             loading = false;
+        }
+    }
+
+    intermediary.observeEvent(ViewProviderEvent.onDeviceAvailabilityChange, async (message) => {
+        odcAvailable = message.context.odcAvailable;
+        if (odcAvailable) {
+            await loadRegistry();
         } else {
-            registryValues = {}
+            registryValues = {};
+            loading = false;
         }
     });
 
     intermediary.observeEvent(ViewProviderEvent.onRegistryUpdated, async (message) => {
-        loading = true;
-        const { values } = await odc.readRegistry();
-        registryValues = registryView.formatValues(values);
-        loading = false;
+        await loadRegistry();
     });
 
     // Required by any view so we can know that the view is ready to receive messages