fix(vscode): restore focus after canceling history deletion

packages/kilo-vscode/tests/history-accessibility.spec.ts

@@ -31,21 +31,47 @@ test.describe("history session accessibility", () => {
     await expect(page.locator('[data-slot="selected-session"]')).toHaveText("s2")
   })
 
-  test("focuses and activates separate named rename and delete controls", async ({ page }) => {
+  test("focuses row actions without opening a session during rename", async ({ page }) => {
     await story(page, "history-sessionlist--with-items")
 
+    const selected = page.locator('[data-slot="selected-session"]')
     const rename = page.getByRole("button", { name: "Rename: Add screenshot test coverage" })
     await rename.focus()
     await expect(rename).toBeFocused()
     await page.keyboard.press("Enter")
-    await expect(page.getByRole("textbox", { name: "Rename" })).toBeFocused()
+    const input = page.getByRole("textbox", { name: "Rename" })
+    await expect(input).toBeFocused()
+    await expect(selected).toBeEmpty()
 
+    await input.fill("Updated screenshot test coverage")
+    await page.keyboard.press("Enter")
+    await expect(input).toBeHidden()
+    await expect(selected).toBeEmpty()
+
+    const renamed = page.getByRole("button", { name: "Rename: Add screenshot test coverage" })
+    await renamed.focus()
+    await page.keyboard.press("Enter")
+    await expect(input).toBeFocused()
+    await page.keyboard.press("Escape")
+    await expect(input).toBeHidden()
+    await expect(selected).toBeEmpty()
+  })
+
+  test("deleting does not open a session and restores focus after cancel", async ({ page }) => {
     await story(page, "history-sessionlist--with-items")
+
+    const selected = page.locator('[data-slot="selected-session"]')
     const remove = page.getByRole("button", { name: "Delete session: Add screenshot test coverage" })
     await remove.focus()
     await expect(remove).toBeFocused()
     await page.keyboard.press("Enter")
     await expect(page.getByRole("dialog", { name: "Delete session" })).toBeVisible()
+    await expect(selected).toBeEmpty()
+
+    await page.getByRole("button", { name: "Cancel" }).click()
+    await expect(page.getByRole("dialog", { name: "Delete session" })).toBeHidden()
+    await expect(remove).toBeFocused()
+    await expect(selected).toBeEmpty()
   })
 
   test("exposes Local and Cloud as keyboard navigable selected tabs", async ({ page }) => {

packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx

@@ -95,29 +95,36 @@ const SessionList: Component<SessionListProps> = (props) => {
     })
   }
 
-  function confirmDelete(s: SessionInfo) {
-    dialog.show(() => (
-      <Dialog title={language.t("session.delete.title")} fit>
-        <div class="dialog-confirm-body">
-          <span>{language.t("session.delete.confirm", { name: name(s) })}</span>
-          <div class="dialog-confirm-actions">
-            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
-              {language.t("common.cancel")}
-            </Button>
-            <Button
-              variant="primary"
-              size="large"
-              onClick={() => {
-                session.deleteSession(s.id)
-                dialog.close()
-              }}
-            >
-              {language.t("session.delete.button")}
-            </Button>
+  function confirmDelete(s: SessionInfo, restore?: HTMLElement) {
+    dialog.show(
+      () => (
+        <Dialog title={language.t("session.delete.title")} fit>
+          <div class="dialog-confirm-body">
+            <span>{language.t("session.delete.confirm", { name: name(s) })}</span>
+            <div class="dialog-confirm-actions">
+              <Button variant="ghost" size="large" onClick={() => dialog.close()}>
+                {language.t("common.cancel")}
+              </Button>
+              <Button
+                variant="primary"
+                size="large"
+                onClick={() => {
+                  session.deleteSession(s.id)
+                  dialog.close()
+                }}
+              >
+                {language.t("session.delete.button")}
+              </Button>
+            </div>
           </div>
-        </div>
-      </Dialog>
-    ))
+        </Dialog>
+      ),
+      () => {
+        queueMicrotask(() => {
+          if (restore?.isConnected) restore.focus()
+        })
+      },
+    )
   }
 
   function wrapItem(item: SessionInfo, node: JSX.Element): JSX.Element {
@@ -143,7 +150,7 @@ const SessionList: Component<SessionListProps> = (props) => {
                   size="small"
                   variant="ghost"
                   aria-label={label(language.t("session.delete.title"), item)}
-                  onClick={() => confirmDelete(item)}
+                  onClick={(event) => confirmDelete(item, event.currentTarget)}
                 />
               </>
             }