kawaandClaude Sonnet 4.6
a26608791f
Archives v1.3 milestone (Phase 13: 18 rclone backends), updates PROJECT.md with all 30 validated requirements, reorganizes ROADMAP.md with all 4 milestones in collapsed details blocks, adds v1.2 and v1.3 retrospective entries. Also commits minor CSS token fixes in src/ (text-on-surface-container class alignment) that were uncommitted from phase 13 execution. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
85 lines
5.1 KiB
Markdown
85 lines
5.1 KiB
Markdown
---
|
|
status: awaiting_human_verify
|
|
trigger: "Tooltip info buttons on Remote Config wizard step: hovering doesn't show anything, icon placement is wrong (above field instead of beside helpText)"
|
|
created: 2026-04-01T00:00:00Z
|
|
updated: 2026-04-02T00:00:00Z
|
|
---
|
|
|
|
## Current Focus
|
|
|
|
hypothesis: Issues 1 & 2 already fixed in current code; Issue 3 (light mode illegibility) is active — text-on-surface-variant is gray-100 (near-white) in light mode, used on light backgrounds
|
|
test: Applying fix to BackendSelectionStep.tsx — replace text-on-surface-variant with text-on-surface-container for step description; replace placeholder:text-on-surface-variant/50 with placeholder:text-on-surface-container/50 for search bar
|
|
expecting: Both elements become legible in light mode; dark mode unaffected
|
|
next_action: Apply fix to BackendSelectionStep.tsx
|
|
|
|
## Symptoms
|
|
|
|
expected: (1) Hovering tooltip button shows tooltip text. (2) Icon is beside the helpText under the field. (3) Step description and search bar placeholder are legible in light mode.
|
|
actual: (1) Nothing happens on hover — only click toggles. (2) Icon is above the TextFieldMD3 component. (3) Step subtitle and search placeholder are near-invisible in light mode.
|
|
errors: none
|
|
reproduction: (1,2) Open Remote Config wizard, hover over any info button. (3) View BackendSelectionStep in light mode.
|
|
started: (1,2) Since phase-09 tooltip implementation. (3) Since text-on-surface-variant was used for body text.
|
|
|
|
## Eliminated
|
|
|
|
- hypothesis: Issues 1 & 2 are still present in the codebase
|
|
evidence: Current FieldRenderer.tsx (lines 88-91) and PasswordField.tsx (lines 34-35) both have onMouseEnter/onMouseLeave wired to setHoverTooltip. TextFieldMD3 renders helpTextPrefix in a flex row beside helpText (lines 67-74). The debug diagnosis was from before the code was updated.
|
|
timestamp: 2026-04-02T00:00:00Z
|
|
|
|
## Evidence
|
|
|
|
- timestamp: 2026-04-01T00:00:00Z
|
|
checked: FieldRenderer.tsx lines 83-109 (text input default branch)
|
|
found: Original code had onClick-only toggle, icon rendered above TextFieldMD3, no hover support.
|
|
implication: Root causes of Issues 1 & 2 at diagnosis time
|
|
|
|
- timestamp: 2026-04-02T00:00:00Z
|
|
checked: FieldRenderer.tsx current state (all 119 lines)
|
|
found: |
|
|
Lines 88-91: onMouseEnter/onMouseLeave both wired to setHoverTooltip — hover IS implemented.
|
|
Line 99: tooltipVisible = showTooltip || hoverTooltip — hover state properly used.
|
|
Lines 103-111: TextFieldMD3 receives helpTextPrefix={tooltipIcon} — icon IS placed beside helpText.
|
|
Same pattern confirmed in PasswordField.tsx lines 34-35 and 54.
|
|
implication: Issues 1 & 2 already resolved in current code
|
|
|
|
- timestamp: 2026-04-02T00:00:00Z
|
|
checked: index.css — CSS custom property values for light mode (:root)
|
|
found: |
|
|
--r2b-on-surface-variant: #F3F4F6 (gray-100 — intended for text ON surface-variant/code blocks)
|
|
--r2b-on-surface-container: #374151 (gray-700 — good contrast on white/light surfaces)
|
|
--r2b-surface: #F9FAFB (gray-50 — light background)
|
|
implication: text-on-surface-variant = near-white on light backgrounds = illegible; text-on-surface-container = dark gray = legible
|
|
|
|
- timestamp: 2026-04-02T00:00:00Z
|
|
checked: BackendSelectionStep.tsx line 88 and line 107
|
|
found: |
|
|
Line 88: <p className="text-sm text-on-surface-variant mt-1 mb-4"> — step description uses on-surface-variant
|
|
Line 107: placeholder:text-on-surface-variant/50 — search placeholder uses on-surface-variant at 50% opacity
|
|
Both become near-invisible in light mode: gray-100 (#F3F4F6) on gray-50 (#F9FAFB) background.
|
|
implication: Root cause of Issue 3 — wrong semantic token used for body text on surface background
|
|
|
|
## Resolution
|
|
|
|
root_cause: |
|
|
ISSUE 1 (tooltip hover) — ALREADY FIXED in current code.
|
|
Both FieldRenderer.tsx and PasswordField.tsx have onMouseEnter/onMouseLeave handlers wired to setHoverTooltip.
|
|
tooltipVisible = showTooltip || hoverTooltip ensures hover triggers display.
|
|
|
|
ISSUE 2 (icon placement) — ALREADY FIXED in current code.
|
|
FieldRenderer.tsx passes helpTextPrefix={tooltipIcon} to TextFieldMD3.
|
|
TextFieldMD3 renders helpTextPrefix in a flex row beside helpText (lines 67-74).
|
|
|
|
ISSUE 3 (light mode illegibility):
|
|
File: src/components/wizard/BackendSelectionStep.tsx, lines 88 and 107
|
|
text-on-surface-variant (#F3F4F6, gray-100) is semantically "text on dark surface-variant elements"
|
|
(e.g., code blocks). Using it on light surface backgrounds produces near-white text on near-white
|
|
background. The step description and search placeholder are nearly invisible in light mode.
|
|
Fix: use text-on-surface-container (#374151, gray-700) which is designed for secondary text on surfaces.
|
|
|
|
fix: |
|
|
BackendSelectionStep.tsx line 88: text-on-surface-variant -> text-on-surface-container
|
|
BackendSelectionStep.tsx line 107: placeholder:text-on-surface-variant/50 -> placeholder:text-on-surface-container/50
|
|
verification: TypeScript passes clean. 79 tests pass (13 pre-existing infra failures unrelated to this change — same failures existed before). Fix applied and code-reviewed: token change is semantically correct.
|
|
files_changed:
|
|
- src/components/wizard/BackendSelectionStep.tsx
|