Dashboard: admin token dialog shows an empty red error notice before validation

[juzijia]

Client or integration

OpenCodex dashboard

Area

Dashboard

Summary

The admin token dialog displays an empty red error notice immediately when it opens, before any token validation has failed.

Expected behavior: no error notice should be visible until the submitted admin token is rejected or cannot be verified.

Reproduction

1. Start OpenCodex 2.42.0.
2. Open the dashboard in a situation where the admin token prompt is required.
3. Wait for the OpenCodex admin token (OPENCODEX_ADMIN_AUTH_TOKEN) dialog to appear.
4. Observe an empty red bordered notice directly below the admin token field before submitting anything.

The issue is reproducible immediately when the dialog opens.

Version

2.42.0

Operating system

Windows 10

Provider and model

Not applicable

Logs or error output

No error output is produced. The issue is visual only.

Screenshots and supporting files

A screenshot shows the empty red bordered notice directly below the admin token field.

Redacted configuration

Not applicable

Checks

• I searched existing issues and documentation.
• I removed secrets, tokens, account details, request credentials, and personal data.

[lidge-jun]

리뷰 · 우선순위 58 / 80

이 이슈는 대시보드가 관리자 토큰을 물을 때, 아직 아무 것도 제출하지 않았는데도 토큰 입력칸 아래에 빈 빨간 테두리 안내가 바로 보이는 문제입니다. 보고자는 OpenCodex 2.42.0 / Windows 10에서 OpenCodex admin token (OPENCODEX_ADMIN_AUTH_TOKEN) 대화상자가 뜨자마자 재현된다고 했고, 로그나 서버 오류는 없고 화면만 이상합니다. 기대 동작은 분명합니다. 토큰을 넣어서 거절당하거나 검증이 실패하기 전에는 빨간 안내가 없어야 합니다.

지금 dev HEAD(066146980, package 2.43.0)에서도 같은 구조입니다. 관리자 토큰 UI는 gui/src/admin-token-dialog.ts의 promptForAdminToken이 그립니다. gui/src/api.ts가 관리 API 거절을 받으면 이 함수를 호출하고, 제출된 값은 verifyAdminToken으로 /api/settings에 넣어 맞는지 봅니다. i18n 문자열 auth.adminTokenTitle / auth.adminTokenRejected / auth.adminTokenUnavailable은 gui/src/i18n/en.ts 등에 있습니다. 비밀번호 관리자가 채울 수 있게 만든 최근 대화상자 작업(머지된 계열 #873, 후속 피드백 #3380) 이후에도 이 빈 빨간 상자는 남아 있을 수 있습니다.

코드를 보면 의도는 “처음엔 숨김”입니다. validationError를 만들 때 className = "notice notice-err", role="alert", 그리고 validationError.hidden = true로 둡니다. 글자는 제출 후에만 auth.adminTokenRejected 또는 auth.adminTokenUnavailable로 채우고 hidden = false로 바꿉니다. 그런데 전역 CSS gui/src/styles.css의 .notice 규칙이 display: flex를 걸고 있습니다. 브라우저 기본 스타일의 [hidden] { display: none }보다 작성자 CSS가 이깁니다. 그래서 hidden이 true여도 빨간 배경·테두리(notice-err)가 있는 빈 flex 칸이 그대로 보입니다. 글자가 비어 있으니 “빈 빨간 안내”로 보입니다. 같은 종류의 함정은 이미 콤보 워크스페이스에서 문서화되어 있습니다. gui/src/styles-combos-workspace.css와 gui/tests/combos-detail-tabs-dom.test.tsx가 author display가 [hidden]을 이기는 문제를 :not([hidden])로 고친 사례입니다.

테스트도 이 구멍을 못 잡습니다. gui/tests/admin-token-dialog.test.ts는 필드·취소·거절 메시지·로케일은 보지만, 대화상자를 연 직후에 [role="alert"]가 화면에 안 보이는지(또는 hidden이 실제로 display: none인지)는 검사하지 않습니다. 거절 후에야 textContent에 rejected가 들어가는지만 봅니다. 그래서 2.42.0뿐 아니라 현재 dev 빌드에서도 같은 빈 상자가 남을 가능성이 큽니다. 보안이나 인증 우회는 아니고, 첫 진입 UX가 “이미 틀린 토큰”처럼 보이게 만드는 회귀입니다. gui / bug / proxy 라벨과도 맞습니다.

라인 77-80 gui/src/admin-token-dialog.ts - validationError에 notice notice-err를 달고 hidden = true만 씁니다. .notice의 display: flex가 [hidden]을 이겨서 빈 빨간 박스가 처음부터 보입니다.

라인 1307 gui/src/styles.css - .notice { ... display: flex; ... }가 UA [hidden]보다 우선합니다. 콤보 패널에서 이미 같은 패턴을 :not([hidden])로 고친 전례가 있습니다.

경로 gui/tests/admin-token-dialog.test.ts - 오픈 직후 alert가 보이지 않는 단언이 없습니다. 거절 후 문구만 검사해서 이 회귀를 놓칩니다.

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

• 고정을 admin-token-dialog.ts 안에서만 할지(에러 노드를 필요할 때만 append, 또는 보일 때만 notice 클래스 부여), 아니면 전역 .notice를 .notice:not([hidden])로 바꿔 같은 함정을 한 번에 막을지
• 2.42.0 사용자 보고이므로 2.43.0 릴리스 노트/패치에 넣을지, help wanted로 두고 작은 PR을 받을지
• Windows 스크린샷만으로 충분할지, happy-dom에서 getComputedStyle/offsetParent로 재현 테스트를 필수에 넣을지

너의 추천
help wanted를 유지한 채, gui/src/admin-token-dialog.ts에서 처음엔 에러 노드를 DOM에 넣지 않거나(또는 hidden일 때 notice 클래스를 빼거나 inline display: none을 강제하고) gui/tests/admin-token-dialog.test.ts에 “오픈 직후 [role=alert]가 보이지 않는다” 단언을 추가하는 작은 PR을 받으세요. 여유가 있으면 gui/src/styles.css의 .notice display: flex도 .notice:not([hidden])로 맞춰 콤보 패널과 같은 규칙을 쓰세요. types/config 분할과 무관한 GUI 버그라 닫지 말고 고치면 됩니다.

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

[lidge-jun]

Landed via #3491 at 85e4211

The empty red admin-token notice is gone on dev. .notice and .notice-warn now scope display: flex to :not([hidden]), so the user-agent [hidden] rule wins again, and the dialog clears notice text together with the hidden flag. GitHub did not auto-close this because #3491 targeted dev rather than the default branch.

[lidge-jun]

Fixed on dev in #3491 (85e42117c).

The empty red bar was a CSS cascade defect, not a validation false-positive. The dialog mounts its error notice up front and hides it with the hidden attribute, but [hidden] { display: none } is a user-agent rule while .notice { display: flex } is an author rule — author origin wins, and specificity never gets a vote. The empty element kept its .notice-err border and padding and painted as a bare red bar.

The display is now scoped to :not([hidden]) on .notice, .notice-warn, and .startup-runtime-notice, the same idiom this repository already adopted for the combos workspace panels after the identical trap. The dialog also clears the notice text alongside the flag, so "hidden" and "empty" cannot drift apart.

Two regressions guard it. A DOM test alone could not: happy-dom applies no author stylesheet and does no layout, so alert.hidden === true passes while a real browser paints the box. The second test reads the stylesheet and fails any .notice rule that sets display without the guard — reverting the CSS was verified to turn it red.

Thank you for the clear report and the screenshot; the "before submitting anything" detail is what pointed straight at the cascade rather than the validation path.