From 59367b057463955259a9ae85b3672031929c04ab Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 4 Oct 2026 21:51:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=84=B8=EC=85=98=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A0=A5=20=EC=A7=80=EC=9A=B0=EA=B8=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=9D=98=20UX=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md                             |  3 +++
 .../viewer/controller/ViewerUiController.java |  2 +-
 .../resources/static/assets/viewer/demo.js    | 21 ++++++++++++-------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index a34ea59b2..42e2d3a99 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -13,3 +13,6 @@
 ## 2026-07-13 - Async Table Actions UX
 **Learning:** Adding explicit loading and disabled states to table action buttons that invoke asynchronous processes helps prevent redundant API calls and visually assures the user that their request is being handled.
 **Action:** Consistently apply `disabled` state and `Loading...` text changes to inline table action buttons linked to async workflows, and carefully preserve underlying DOM structures with `Array.from(btn.childNodes)` during the loading cycle to avoid rendering regressions.
+## 2024-10-04 - 세션 이력 지우기 버튼 비동기 및 접근성 상태 반영
+**Learning:** 비동기 동작을 수행하는 UI 요소(예: 기록 삭제 등)에 적절한 시각적/접근성 피드백이 없으면 사용자가 작업 상태를 파악하기 어렵습니다.
+**Action:** 비동기 작업을 트리거하는 버튼은 `aria-label`로 기능을 명확히 하고, 동작 중일 때 명시적인 로딩(Clearing...) 및 비활성화 상태를 보여주는 것이 필수적입니다.
diff --git a/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java b/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
index 3e5ee0710..54fd4377a 100644
--- a/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
+++ b/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
@@ -284,7 +284,7 @@ private static String demoShellHtml() {
                             <h2 id="history-title" class="panel__title">Session history</h2>
                             <p class="panel__caption">Open status JSON for diligence or launch the preview when conversion is ready.</p>
                           </div>
-                          <button type="button" class="btn btn-secondary btn-compact" id="clear-history-btn">Clear</button>
+                          <button type="button" class="btn btn-secondary btn-compact" id="clear-history-btn" aria-label="Clear session history">Clear</button>
                         </div>
 
                         <div class="table-wrap" id="session-history">
diff --git a/src/main/resources/static/assets/viewer/demo.js b/src/main/resources/static/assets/viewer/demo.js
index 42998be56..5d5303a3f 100644
--- a/src/main/resources/static/assets/viewer/demo.js
+++ b/src/main/resources/static/assets/viewer/demo.js
@@ -546,17 +546,22 @@ function init() {
   el.loadDemoDataBtn.addEventListener("click", () => {
     void loadDemoData();
   });
-  el.clearHistoryBtn.addEventListener("click", () => {
+  el.clearHistoryBtn.addEventListener("click", async () => {
     if (!window.confirm("Are you sure you want to clear all session history?")) {
       return;
     }
-    saveHistory([]);
-    renderHistory([]);
-    activeJobDetail = null;
-    el.jobDetail.hidden = true;
-    void refreshKpis();
-    void refreshKpiEvidence();
-    setStatus("Session history cleared.");
+    const restore = setBusyState(el.clearHistoryBtn, "Clearing...");
+    try {
+      saveHistory([]);
+      renderHistory([]);
+      activeJobDetail = null;
+      el.jobDetail.hidden = true;
+      await refreshKpis();
+      await refreshKpiEvidence();
+      setStatus("Session history cleared.");
+    } finally {
+      restore();
+    }
   });
   el.retryJobBtn.addEventListener("click", () => {
     void retryActiveJob();