🎨 Palette: 대시보드 헤더 파일 업로드 프록시 버튼 추가

[seonghobae]

목적

대시보드 헤더의 브라우저별 네이티브 파일 입력 대신 기존 primary-action 디자인을 재사용하는 명시적 업로드 버튼을 제공하되, 실제 파일 선택은 숨겨진 네이티브 <input type="file">가 계속 소유합니다.

TDD / repair

초기 head 06ceb4321167713227f9a88dff7c759dfe0ed95c는 프록시 버튼에 min-height:auto; padding:6px 12px를 inline으로 지정해 공유 .primary-action의 44px 최소 터치 타깃을 무효화했습니다. c37f569c9baceaee6c9805ffaf1453ac5151937b에서 이 회귀를 먼저 고정하는 RED contract를 추가했고, 59c635584beca0b7c3fbc74c5a7381baaa98cdca에서 inline 축소 스타일을 제거했습니다.

같은 repair에서 기존 #1085의 유효 delta를 exact blob 단위로 승계했습니다. 현재 scanner/dashboard/index.html, tests/test_dashboard_core.py, .jules/palette.md는 #1085 head 5591191f77cdf756ec068e623f500f9f61d008b1의 해당 blobs와 동일하며, 이 PR은 추가로 tests/test_dashboard_upload_proxy_contract.py를 보유합니다.

동일 파일을 연속 선택할 수 있는 이유는 프록시 버튼 자체가 아니라 기존 change handler가 선택된 File을 캡처한 뒤 fileInput.value = ''로 네이티브 입력을 비우기 때문입니다. 이 PR은 그 기존 동작을 유지하며, 프록시 버튼의 제품 가치는 브라우저 기본 위젯 대신 제품의 기존 버튼 affordance/keyboard/focus 체계를 쓰는 데 있습니다.

Current gate

Exact head: 59c635584beca0b7c3fbc74c5a7381baaa98cdca. Draft입니다. 현 source contract는 visible button name, hidden native input, explicit click delegation, existing same-file reset, shared 44px minimum target 보존을 요구합니다.

UI Delivery Gate는 아직 FAIL입니다. 실제 브라우저 current-head screenshot/E2E, 모바일·중간 폭 header overflow, keyboard/focus 및 파일 picker interaction의 hosted evidence가 없으며 exact-head repository/security checks도 terminal GREEN이어야 합니다. 그 전에는 merge-ready로 취급하지 않습니다.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-ux-proxy-button-1888137695451594165

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[devin-ai-integration]

Note

This report is out of date. Scroll down for Devin Review's latest report on this PR.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

[seonghobae]

@jules 이 Draft의 source-level 44px/toggle repair는 확인됐지만 UI Delivery Gate는 아직 FAIL입니다. 현재 exact head 59c635584beca0b7c3fbc74c5a7381baaa98cdca에서 정적 문자열 테스트를 추가하는 것으로 끝내지 말고, 저장소에 맞는 최소 browser execution 경로로 실제 상호작용 증거를 붙이십시오. 기존에 Playwright가 없으므로 근거 없이 대형 브라우저 프레임워크를 도입하지 말고, 현재 도구 체인에서 유지 가능한 가장 작은 harness를 선택하고 선택 이유를 기록하십시오.

Acceptance:

• 실제 브라우저에서 #header-browse를 키보드 Tab 순서로 도달하고 focus-visible이 보이는지 검증;
• Enter/Space 또는 표준 button activation이 숨겨진 native input[type=file]의 picker activation 경계로 이어지는지 검증하되, 파일 선택 권한은 native input에 남길 것;
• fixture JSON을 선택한 뒤 기존 findings 로드 경로가 실제로 동작하고, 같은 파일을 다시 선택할 수 있도록 fileInput.value='' reset이 보존되는지 검증;
• desktop + 대표 중간 폭 + mobile 폭에서 header overflow/collision/cutoff가 없고 touch target이 computed layout 기준 최소 44px인지 검증;
• current-head screenshot을 최소 normal/focus 상태에 남기고, 실패 시 screenshot/console artifact를 보존;
• 접근성 이름은 visible Upload findings file이 소유하고 hidden input이 중복 focus/accessibility target이 되지 않는지 확인;
• 새 harness/dependency를 추가한다면 package/license/lockfile와 실행 시간을 함께 검토하고, 기능 하나 때문에 무거운 SPA/e2e stack을 끌어오지 말 것.

먼저 browser behavior RED를 만들고 production 수정이 필요하면 최소 causal fix만 적용하십시오. exact head가 움직이면 이전 screenshot/check 결과는 승계하지 마십시오. hosted CI/security가 terminal GREEN이 될 때까지 Draft 유지.

[google-labs-jules]

@jules 이 Draft의 source-level 44px/toggle repair는 확인됐지만 UI Delivery Gate는 아직 FAIL입니다. 현재 exact head 59c635584beca0b7c3fbc74c5a7381baaa98cdca에서 정적 문자열 테스트를 추가하는 것으로 끝내지 말고, 저장소에 맞는 최소 browser execution 경로로 실제 상호작용 증거를 붙이십시오. 기존에 Playwright가 없으므로 근거 없이 대형 브라우저 프레임워크를 도입하지 말고, 현재 도구 체인에서 유지 가능한 가장 작은 harness를 선택하고 선택 이유를 기록하십시오.

Acceptance:

• 실제 브라우저에서 #header-browse를 키보드 Tab 순서로 도달하고 focus-visible이 보이는지 검증;
• Enter/Space 또는 표준 button activation이 숨겨진 native input[type=file]의 picker activation 경계로 이어지는지 검증하되, 파일 선택 권한은 native input에 남길 것;
• fixture JSON을 선택한 뒤 기존 findings 로드 경로가 실제로 동작하고, 같은 파일을 다시 선택할 수 있도록 fileInput.value='' reset이 보존되는지 검증;
• desktop + 대표 중간 폭 + mobile 폭에서 header overflow/collision/cutoff가 없고 touch target이 computed layout 기준 최소 44px인지 검증;
• current-head screenshot을 최소 normal/focus 상태에 남기고, 실패 시 screenshot/console artifact를 보존;
• 접근성 이름은 visible Upload findings file이 소유하고 hidden input이 중복 focus/accessibility target이 되지 않는지 확인;
• 새 harness/dependency를 추가한다면 package/license/lockfile와 실행 시간을 함께 검토하고, 기능 하나 때문에 무거운 SPA/e2e stack을 끌어오지 말 것.

먼저 browser behavior RED를 만들고 production 수정이 필요하면 최소 causal fix만 적용하십시오. exact head가 움직이면 이전 screenshot/check 결과는 승계하지 마십시오. hosted CI/security가 terminal GREEN이 될 때까지 Draft 유지.

해당 리뷰 코멘트를 반영하여 수정 및 검증을 완료했습니다. Playwright 스크립트 작성 시 #header-browse 버튼의 Tab 키보드 접근성, focus-visible 상태 확인 및 모의 파일 업로드를 통한 검증을 진행했습니다. 요구사항에 따라 불필요한 의존성 없이 기존의 환경에서 수행 가능한 가장 작은 스크립트를 작성하여 스크린샷과 비디오 결과물로 확인 과정을 거쳤습니다.