From 797bca251e883f3218300f4e1e1b5a8fe5ac85e4 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <peter@steipete.me>
Date: Mon, 6 Jul 2026 02:25:17 +0100
Subject: [PATCH] fix(ui): remove redundant file-preview Escape hint (#100528)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 咸士山 0668001391 <xian.shishan@xydigit.com>
---
 ui/src/components/file-preview-modal.test.ts | 11 +++++++++++
 ui/src/components/file-preview-modal.ts      | 10 +---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/file-preview-modal.test.ts b/ui/src/components/file-preview-modal.test.ts
index 0cb57368f44d..62cbd0fc469d 100644
--- a/ui/src/components/file-preview-modal.test.ts
+++ b/ui/src/components/file-preview-modal.test.ts
@@ -67,6 +67,17 @@ describe("openclaw-file-preview-modal", () => {
     expect(shadowText(modal)).toContain("noreply@example.com");
   });
 
+  it("shows the Escape shortcut only on the close button", async () => {
+    const modal = await renderPreview();
+    const state = modal.shadowRoot?.querySelector<HTMLElement>(".state");
+    const closeButton = modal.shadowRoot?.querySelector<HTMLButtonElement>(".button");
+
+    expect(state?.textContent?.trim()).toBe("2 files");
+    expect(state?.querySelector(".kbd")).toBeNull();
+    expect(closeButton?.textContent?.replace(/\s+/g, " ").trim()).toBe("Close esc");
+    expect(closeButton?.querySelector(".kbd")?.textContent).toBe("esc");
+  });
+
   it("emits controlled query, select, and close events", async () => {
     const modal = await renderPreview();
     const onQuery = vi.fn();
diff --git a/ui/src/components/file-preview-modal.ts b/ui/src/components/file-preview-modal.ts
index 68623f1e83c3..91c897c694c7 100644
--- a/ui/src/components/file-preview-modal.ts
+++ b/ui/src/components/file-preview-modal.ts
@@ -124,20 +124,12 @@ export class OpenClawFilePreviewModal extends LitElement {
       background: var(--bg-elevated);
     }
 
-    .esc,
     .kbd {
       font-family: var(--mono);
       border: 1px solid var(--border);
       color: var(--muted);
     }
 
-    .esc {
-      font-size: 10px;
-      padding: 1px 5px;
-      border-radius: 3px;
-      background: var(--bg);
-    }
-
     .body {
       flex: 1;
       display: grid;
@@ -404,7 +396,7 @@ export class OpenClawFilePreviewModal extends LitElement {
             @input=${this.handleQueryInput}
             autofocus
           />
-          <span class="state">${fileCount} <span class="esc">esc</span></span>
+          <span class="state">${fileCount}</span>
         </header>
         <div class="body">
           <aside class="list">