feat(gui): make usage chart details keyboard and touch accessible

[yansigit]

Summary

Expose weekly bars and activity cells as labelled controls. Heatmap arrow navigation keeps a single tab stop; focus and touch expose the same details as pointer input. Portal tooltips stay within viewport gutters. This extraction preserves upstream calendar/custom-range computation and excludes fork dashboard panels.

Updated the dashboard guide and all nine locale modules. The screenshot below uses synthetic usage data.

Verification

Root bun run typecheck, GUI bun run lint, bun run lint:i18n, and bun run build passed. Focused chart and custom-range tests: 27 passed. Final complete GUI test run: 1924 passed, zero failures (243 files). Existing custom-range assertions were adapted for portaled tooltips and localized dates. Documentation frozen install and build passed. Browser preview checked against synthetic data.

All runtime checks used a fresh temporary OPENCODEX_HOME and alternate port; production config fingerprint and backup inventory remained unchanged. Full root-suite and review-readiness gates have not been completed for this head; this is intentionally a draft.

Checklist

• Scope stays focused and avoids unrelated cleanup.
• Added/updated regression coverage or verified existing coverage for the affected behavior.
• Docs or release notes were updated when needed.
• Security-sensitive changes were reviewed for secrets, auth, and unsafe defaults.

Review readiness

• Local CI green.
• Branch on the latest dev commit.
• All correct Codex and CodeRabbit findings fixed.
• Ready-for-review confirmation.

Co-authored-by: SB Yoon 44089734+yansigit@users.noreply.github.com
Co-authored-by: Yumi automation@sbyoon.com

Review readiness checklist

This PR stays in draft until every box below is ticked. Tick all four boxes once the requirements are met:

• All CI tests are green on my local testing.

• I pushed my PR to the latest dev commit.

• I resolved all correct Codex and CodeRabbit findings.

• My PR is ready for review.

[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

---

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.}

[github-actions]

✅ Deterministic PR hygiene checks passed.

[github-actions]

⏳ DRAFT

• review readiness checklist open (0/4 boxes ticked).

What to do

• Tick all four boxes in the PR description once you're done (currently 0/4).

Review readiness checklist

• ⬜ All CI tests are green on my local testing.
• ⬜ I pushed my PR to the latest dev commit.
• ⬜ I resolved all correct Codex and CodeRabbit findings.
• ⬜ My PR is ready for review.

0/4 boxes ticked.

This PR stays in draft until every box above is ticked.

[lidge-jun]

리뷰 · 우선순위 53 / 80

이 PR은 대시보드 Usage 페이지의 주간 막대와 히트맵 칸을 키보드·터치로도 같은 상세를 보게 만듭니다. 지금 dev HEAD c15662855의 gui/src/pages/Usage.tsx는 daybar/heatmap이 div + mouse enter/leave 중심이라, 포인터 없는 환경에서는 tooltip 상세가 거의 안 열립니다. 이 변경은 daybar를 button으로 바꾸고, aria-label·focus/blur·pointerDown으로 상세를 열며, 히트맵은 화살표로 한 칸씩 옮기되 탭 정지점은 하나로 유지합니다. tooltip은 portal로 옮겨 viewport gutter 안에 두도록 CSS도 손봅니다. i18n 9개 로케일·docs-site/.../web-dashboard.md·새 gui/tests/usage-chart-interactions.test.tsx·기존 custom-range 테스트 적응까지 한 세트입니다. fork dashboard 패널은 제외했다고 본문에 명시되어 범위가 깔끔합니다. types/config 분할과 무관합니다.

라인 gui/src/pages/Usage.tsx · WeekDayBars button - div+hover만 쓰던 막대를 labelled control로 바꿉니다. 키보드 focus와 터치 pointerDown이 같은 상세를 엽니다.
라인 gui/src/pages/Usage.tsx · heatmap 화살표 네비 - 단일 tab stop을 유지한 채 roving이 필요합니다. 스크린리더/키보드 사용자가 칸마다 Tab으로 빠지지 않게 하는 핵심 UX입니다.
라인 gui/src/styles.css · portal tooltip gutter - 화면 가장 잘리던 tip을 viewport 안으로 밉니다. 포인터 좌표만 믿던 이전 가정과의 차이입니다.
경로 gui/tests/usage-chart-interactions.test.tsx - focus/touch/키보드 경로를 새로 잠급니다. GUI 변경이라 이 파일 없으면 hygiene에 걸릴 수 있습니다.
경로 gui/src/i18n/*.ts · docs web-dashboard - 라벨·가이드가 코드와 같이 움직입니다. 로케일 누락 없는지 lint:i18n 증거가 본문에 있습니다.
경로 draft - 본문 기준 GUI 1924 tests 통과·typecheck/lint 통과를 보고했지만 review-readiness 체크리스트는 아직입니다. 스크린샷은 synthetic data입니다.

메인테이너의 판단이 필요한 지점

• portal tooltip이 모바일 사파리/임베디드 webview에서 focus 유지와 맞는지 실기기 스모크를 Mer지 전에 요구할지
• fork dashboard 패널 a11y를 후속 이슈로 바로 열지
• Usage 페이지 외 다른 hover-only tip(Models 등)을 같은 패턴으로 묶을지

너의 추천
접근성 방향이 명확하고 테스트·i18n·docs가 동반됩니다. draft 체크리스트와 CI만 채우면 머지 후보입니다. 터치 blur/포커스 잔존 이슈만 실기기에서 한 번 보고 ready로 올리세요.

이 댓글은 grok-bot이 작성했습니다