From 2a9d4178cac5c925637bc0ca19429a089f1f6444 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 04:59:12 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=88=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C(Empty=20State)=EC=97=90=20=EB=8F=99=EC=9E=91?=
 =?UTF-8?q?=20=EA=B0=80=EB=8A=A5=ED=95=9C=20CTA(=EB=B2=84=ED=8A=BC)=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=9B=B9=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

- 대시보드 로드 전 빈 상태 화면에 파일을 쉽게 업로드할 수 있는 "Browse for file..." `<button>` 추가
- 필터 적용 후 결과가 없을 때, 검색어 및 필터를 초기화할 수 있는 "Clear filters" `<button>` 추가
- 접근성(A11y) 향상을 위해 검색 입력창 및 셀렉트 박스에 시각적으로 숨겨진(visually hidden) `<label>` 추가
- Palette UX 저널에 학습 내용(빈 상태 처리 시 직접적인 Call-To-Action의 필요성) 기록 추가
- 순수 HTML `<button>`과 기존 `.empty` 스타일을 재사용하여 외부 라이브러리 및 커스텀 CSS 의존성 제거
---
 .Jules/palette.md            | 3 +++
 scanner/dashboard/index.html | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 1c4b835..27bf1c0 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -27,3 +27,6 @@
 ## 2024-07-13 - CLI 출력의 영문법적 복수형 및 에러 메시지 힌트 개선
 **Learning:** CLI 출력에서 `file(s)`, `issue(s)`, `rule(s) excluded`와 같이 괄호를 사용한 복수형 표기법은 가독성을 떨어뜨리고 투박한(developer-centric) 느낌을 줍니다. 또한, 에러 발생 시 단순 예외 내용만 출력하는 것보다 즉시 실행 가능한 해결책(Hint)을 함께 제공하는 것이 CLI 사용자 경험(DX) 향상에 매우 효과적입니다.
 **Action:** 조건부 f-string(예: `s_suffix = "s" if count != 1 else ""`)을 활용하여 동적으로 정확한 복수형 단어(file/files)를 출력하도록 개선하고, 예외 발생 로직에는 항상 `💡 Hint:`를 포함하여 후속 액션을 안내하도록 표준화해야 합니다. (단, Python 3.12 환경의 `black` 포매터 호환성을 위해 백슬래시가 포함된 중첩 f-string 사용을 피하고 변수 추출을 권장합니다.)
+## 2024-05-19 - Actionable Empty States
+**Learning:** Empty states should act as helpful dead-ends with actionable Call-To-Actions (CTAs) rather than passive text. When users encounter an empty state (e.g., no findings loaded, or no search results), providing a direct action like "Browse for file..." or "Clear filters" reduces friction and cognitive load.
+**Action:** When designing or refactoring empty states, always ask "What is the most common action the user needs to take to escape this state?" and provide a native HTML `<button>` to facilitate it. Ensure form inputs are always accompanied by screen-reader accessible `<label>`s, using visually hidden CSS if visual labels are not permitted by design constraints.
diff --git a/scanner/dashboard/index.html b/scanner/dashboard/index.html
index 398ea8e..74d05a2 100644
--- a/scanner/dashboard/index.html
+++ b/scanner/dashboard/index.html
@@ -123,6 +123,7 @@
       <h1>No findings loaded</h1>
       <p>Generate a report-safe findings file, then load it above (or place it next to this page).</p>
       <p><code>appguardrail scan --findings-json reports/findings.json .</code></p>
+      <p style="margin:20px 0;"><button type="button" onclick="document.getElementById('file').click()">Browse for file...</button></p>
       <p class="drop">Serve the repo (<code>python3 -m http.server</code>) and open <code>/dashboard/</code>, or drag a <code>findings.json</code> onto this window.</p>
     </div>`;
     return;
@@ -173,7 +174,9 @@ <h1>Dashboard</h1>
       <div class="panel"><h2>Findings by category</h2><div class="rowlist">${catRows||'<div class="r">—</div>'}</div></div>
       <div>
         <div class="toolbar">
+          <label for="q" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">Search findings</label>
           <input type="search" id="q" placeholder="Search message, file, rule, category" aria-label="Search findings" value="${esc(query)}">
+          <label for="sev" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">Filter by severity</label>
           <select id="sev" aria-label="Filter by severity">
             <option value="">All severities</option>
             ${SEV_ORDER.map(s=>`<option value="${s}" ${s===filterSev?'selected':''}>${s}</option>`).join('')}
@@ -181,7 +184,7 @@ <h1>Dashboard</h1>
         </div>
         <div class="panel"><table>
           <thead><tr><th>Severity</th><th>Finding</th><th>File</th><th>Category</th><th>Status</th></tr></thead>
-          <tbody>${rows||'<tr><td colspan="5" style="color:var(--muted);padding:24px">No findings match the filter.</td></tr>'}</tbody>
+          <tbody>${rows||`<tr><td colspan="5"><div class="empty">No findings match the filter.<br><br><button type="button" onclick="document.getElementById('q').value=''; document.getElementById('sev').value=''; query=''; filterSev=''; render();">Clear filters</button></div></td></tr>`}</tbody>
         </table></div>
       </div>
     </div>`;

From 65a85b813a6af6078165faff273f608b0e397657 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 05:39:23 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=88=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C(Empty=20State)=EC=97=90=20=EB=8F=99=EC=9E=91?=
 =?UTF-8?q?=20=EA=B0=80=EB=8A=A5=ED=95=9C=20CTA(=EB=B2=84=ED=8A=BC)=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=9B=B9=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

- 대시보드 로드 전 빈 상태 화면에 파일을 쉽게 업로드할 수 있는 "Browse for file..." `<button>` 추가
- 필터 적용 후 결과가 없을 때, 검색어 및 필터를 초기화할 수 있는 "Clear filters" `<button>` 추가
- 접근성(A11y) 향상을 위해 검색 입력창 및 셀렉트 박스에 시각적으로 숨겨진(visually hidden) `<label>` 추가
- Palette UX 저널에 학습 내용(빈 상태 처리 시 직접적인 Call-To-Action의 필요성) 기록 추가
- 순수 HTML `<button>`과 기존 `.empty` 스타일을 재사용하여 외부 라이브러리 및 커스텀 CSS 의존성 제거

From 22d3b014a3d398e29bd6db19f71fd093904535fd Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 06:14:11 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=88=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C(Empty=20State)=EC=97=90=20=EB=8F=99=EC=9E=91?=
 =?UTF-8?q?=20=EA=B0=80=EB=8A=A5=ED=95=9C=20CTA(=EB=B2=84=ED=8A=BC)=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=9B=B9=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

- 대시보드 로드 전 빈 상태 화면에 파일을 쉽게 업로드할 수 있는 "Browse for file..." `<button>` 추가
- 필터 적용 후 결과가 없을 때, 검색어 및 필터를 초기화할 수 있는 "Clear filters" `<button>` 추가
- 접근성(A11y) 향상을 위해 검색 입력창 및 셀렉트 박스에 시각적으로 숨겨진(visually hidden) `<label>` 추가
- Palette UX 저널에 학습 내용(빈 상태 처리 시 직접적인 Call-To-Action의 필요성) 기록 추가
- 순수 HTML `<button>`과 기존 `.empty` 스타일을 재사용하여 외부 라이브러리 및 커스텀 CSS 의존성 제거

From 0ddcd1e1c9f40557c5bee540fa9e5e960cf88d2f Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 06:51:28 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=88=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C(Empty=20State)=EC=97=90=20=EB=8F=99=EC=9E=91?=
 =?UTF-8?q?=20=EA=B0=80=EB=8A=A5=ED=95=9C=20CTA(=EB=B2=84=ED=8A=BC)=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=9B=B9=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0=20(=EC=9E=AC=EC=8B=9C=EB=8F=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 대시보드 로드 전 빈 상태 화면에 파일을 쉽게 업로드할 수 있는 "Browse for file..." `<button>` 추가
- 필터 적용 후 결과가 없을 때, 검색어 및 필터를 초기화할 수 있는 "Clear filters" `<button>` 추가
- 접근성(A11y) 향상을 위해 검색 입력창 및 셀렉트 박스에 시각적으로 숨겨진(visually hidden) `<label>` 추가
- Palette UX 저널에 학습 내용(빈 상태 처리 시 직접적인 Call-To-Action의 필요성) 기록 추가
- 순수 HTML `<button>`과 기존 `.empty` 스타일을 재사용하여 외부 라이브러리 및 커스텀 CSS 의존성 제거