chore: complete v1.3 milestone — Backend Expansion
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>
This commit is contained in:
Claude Sonnet 4.6
@@ -1,87 +1,84 @@
|
||||
---
|
||||
status: diagnosed
|
||||
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-01T00:00:00Z
|
||||
updated: 2026-04-02T00:00:00Z
|
||||
---
|
||||
|
||||
## Current Focus
|
||||
|
||||
hypothesis: Two distinct root causes — onClick-only toggle (no hover), and icon placed above TextFieldMD3 instead of beside helpText
|
||||
test: Code review of FieldRenderer.tsx lines 83-109 and TextFieldMD3.tsx lines 65-67
|
||||
expecting: Confirm both issues from source
|
||||
next_action: Report diagnosis
|
||||
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.
|
||||
actual: (1) Nothing happens on hover — only click toggles. (2) Icon is above the TextFieldMD3 component.
|
||||
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: Open Remote Config wizard, hover over any info button
|
||||
started: Since phase-09 tooltip implementation
|
||||
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
|
||||
|
||||
(none needed — root causes identified on first pass)
|
||||
- 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: |
|
||||
The tooltip button at lines 85-94 uses onClick={() => setShowTooltip(v => !v)} only.
|
||||
There are NO onMouseEnter/onMouseLeave handlers, and no CSS hover-triggered tooltip.
|
||||
The tooltip text (lines 95-99) is only rendered when showTooltip state is true,
|
||||
which only changes on click — never on hover.
|
||||
implication: Root cause of Issue 1 — tooltip requires click, not hover
|
||||
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-01T00:00:00Z
|
||||
checked: FieldRenderer.tsx lines 83-109 (DOM structure of text input branch)
|
||||
- timestamp: 2026-04-02T00:00:00Z
|
||||
checked: FieldRenderer.tsx current state (all 119 lines)
|
||||
found: |
|
||||
The DOM order is:
|
||||
<div flex-col>
|
||||
{tooltipText && <button>icon</button>} ← lines 85-94: icon ABOVE field
|
||||
{tooltipText && showTooltip && <p>text</p>} ← lines 95-99: tooltip text ABOVE field
|
||||
<TextFieldMD3 helpText={field.helpText} /> ← lines 100-107: field with helpText inside
|
||||
</div>
|
||||
The icon button is a sibling rendered BEFORE TextFieldMD3, placing it above the field.
|
||||
Meanwhile, helpText is rendered INSIDE TextFieldMD3 (TextFieldMD3.tsx lines 65-67),
|
||||
so the icon cannot be "beside the helpText" from its current position.
|
||||
implication: Root cause of Issue 2 — icon is structurally above the field, not beside helpText
|
||||
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-01T00:00:00Z
|
||||
checked: TextFieldMD3.tsx lines 65-67
|
||||
- timestamp: 2026-04-02T00:00:00Z
|
||||
checked: index.css — CSS custom property values for light mode (:root)
|
||||
found: |
|
||||
helpText is rendered inside TextFieldMD3:
|
||||
{helpText && !error && (
|
||||
<p className="text-xs text-on-surface-container/70">{helpText}</p>
|
||||
)}
|
||||
This is encapsulated inside the component — FieldRenderer has no way to inject
|
||||
an icon beside it without either: (a) passing the icon as a prop, or (b) moving
|
||||
helpText rendering out of TextFieldMD3.
|
||||
implication: Fix requires changing TextFieldMD3 interface or moving helpText rendering
|
||||
--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 doesn't show on hover:
|
||||
File: src/components/ui/FieldRenderer.tsx, lines 85-94
|
||||
The tooltip button only has an onClick handler that toggles showTooltip state.
|
||||
There are no onMouseEnter/onMouseLeave handlers and no CSS :hover mechanism.
|
||||
The tooltip content (lines 95-99) is conditionally rendered only when showTooltip === true,
|
||||
which never becomes true from hovering.
|
||||
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 placed above field instead of beside helpText:
|
||||
File: src/components/ui/FieldRenderer.tsx, lines 83-109
|
||||
The icon button is rendered as a sibling BEFORE <TextFieldMD3>, placing it visually
|
||||
above the text field. The helpText is rendered INSIDE TextFieldMD3 (TextFieldMD3.tsx
|
||||
line 65-67), making it impossible for the icon in FieldRenderer to sit beside it.
|
||||
To place the icon beside helpText, either:
|
||||
(a) TextFieldMD3 needs a new prop (e.g., helpTextSuffix or helpTextIcon) to render
|
||||
content inline with the helpText paragraph, or
|
||||
(b) helpText rendering moves out of TextFieldMD3 back into FieldRenderer, where the
|
||||
icon and helpText can be placed in a flex-row together.
|
||||
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).
|
||||
|
||||
fix: (not applied — diagnosis only)
|
||||
verification: (not applied — diagnosis only)
|
||||
files_changed: []
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user