Right panel: Auto-Digitize Settings section is closed by default in image-uploaded state — controls invisible until clicked #57

New issue

Closed

opened 2026-09-02 02:02:39 +00:00 by Mark · 0 comments

Mark commented

2026-09-02 02:02:39 +00:00

Owner

Bug

In the Workspace right panel, after uploading an image (entering image-uploaded state), the Auto-Digitize Settings section header is visible but the section body is collapsed. The Stitch Preference buttons, Color Sensitivity slider, Min Stitch Length slider, Underlay toggle, Auto Thread Match toggle, and Run Auto-Digitize button are all hidden. The user sees only the bare header and assumes the settings are missing from the UI.

Reproduction

Open Workspace at http://127.0.0.1:5173/workspace (empty state).
Upload an image. App transitions to image-uploaded state.
Look at the right panel: "Design Settings" is expanded, but "Auto-Digitize Settings" only shows its header — no controls.
Click the "Auto-Digitize Settings" header.
Now the controls appear: Stitch Preference (Balanced/Detail/Speed), Color Sensitivity slider, Min Stitch Length slider, Underlay toggle, Auto Thread Match toggle, Run Auto-Digitize button.

Observed

Subagent pixel/OCR analysis (2026-09-01): right panel has Design Settings header at y≈46-57 and Auto-Digitize Settings header at y≈205-219. From y=226 to y=574 (over 350px of vertical space) the panel area is completely empty cream background — zero non-background pixels. All controls that should appear under the Auto-Digitize Settings header are invisible until the user clicks the header.
Clicking the header opens the section and reveals everything correctly.

Root cause

src/components/workspace/RightPanel.tsx lines 34–40:

const [openSections, setOpenSections] = useState<Record<SectionKey, boolean>>({
  design: appState === 'empty' || appState === 'image-uploaded',
  auto: appState === 'image-uploaded',
  stitch: appState === 'digitized',
  threads: appState === 'digitizing' || appState === 'digitized',
  objects: appState === 'digitizing' || appState === 'digitized',
});

The openSections.auto initial value is computed from appState, but useState only runs the initializer once when the component mounts. The Workspace panel mounts when the page loads (in empty state), at which point auto: appState === 'image-uploaded' evaluates to false. When the user later uploads an image and appState transitions to 'image-uploaded', the openSections state is not re-initialized — auto stays false until the user manually clicks the header.

Design Settings has the same initialization logic but appears open because in the typical flow the user sees the empty-state first, then uploads, but Design Settings also was closed at mount and only opens because the user clicks it. (Design Settings DOES open by default in empty state because of the OR clause: design: appState === 'empty' || appState === 'image-uploaded'.)

Auto-Digitize Settings has no equivalent default-open clause for the empty state.

Expected

When appState transitions to 'image-uploaded', the Auto-Digitize Settings section should auto-open so the user immediately sees the controls they need to run auto-digitize. Two reasonable fixes:

Reset openSections on appState change — add a useEffect that watches appState and re-syncs the defaults, OR move the default computation out of useState so it always reflects current state.
Add a default-open clause for the empty state — change auto initial value to appState === 'image-uploaded' || appState === 'empty', and add a similar default-open behavior for any other section that should be visible on first interaction.

Severity

Medium. The user has to discover that Auto-Digitize Settings is a clickable accordion; until they do, they cannot configure and run auto-digitize. Same UX bug class as Mark/Kimi_Agent_Brother_10_Digitizing_App#56 (Stitch Parameters accordion never expands) — both produce the symptom "header is visible but nothing happens" but with different root causes.

#56: Right panel Stitch Parameters accordion does nothing when no stitch object is selected.
#54: Workspace canvas split-view toggle renders identical output when one layer is empty.
#55: Workspace: clicking Confirm & Edit silently hides the source image.

## Bug In the Workspace right panel, after uploading an image (entering `image-uploaded` state), the **Auto-Digitize Settings** section header is visible but the section body is collapsed. The Stitch Preference buttons, Color Sensitivity slider, Min Stitch Length slider, Underlay toggle, Auto Thread Match toggle, and Run Auto-Digitize button are all hidden. The user sees only the bare header and assumes the settings are missing from the UI. ## Reproduction 1. Open Workspace at http://127.0.0.1:5173/workspace (empty state). 2. Upload an image. App transitions to `image-uploaded` state. 3. Look at the right panel: "Design Settings" is expanded, but "Auto-Digitize Settings" only shows its header — no controls. 4. Click the "Auto-Digitize Settings" header. 5. Now the controls appear: Stitch Preference (Balanced/Detail/Speed), Color Sensitivity slider, Min Stitch Length slider, Underlay toggle, Auto Thread Match toggle, Run Auto-Digitize button. ## Observed - Subagent pixel/OCR analysis (2026-09-01): right panel has Design Settings header at y≈46-57 and Auto-Digitize Settings header at y≈205-219. From y=226 to y=574 (over 350px of vertical space) the panel area is completely empty cream background — zero non-background pixels. **All controls that should appear under the Auto-Digitize Settings header are invisible until the user clicks the header.** - Clicking the header opens the section and reveals everything correctly. ## Root cause `src/components/workspace/RightPanel.tsx` lines 34–40: ```tsx const [openSections, setOpenSections] = useState<Record<SectionKey, boolean>>({ design: appState === 'empty' || appState === 'image-uploaded', auto: appState === 'image-uploaded', stitch: appState === 'digitized', threads: appState === 'digitizing' || appState === 'digitized', objects: appState === 'digitizing' || appState === 'digitized', }); ``` The `openSections.auto` initial value is computed from `appState`, but `useState` only runs the initializer **once** when the component mounts. The Workspace panel mounts when the page loads (in `empty` state), at which point `auto: appState === 'image-uploaded'` evaluates to `false`. When the user later uploads an image and `appState` transitions to `'image-uploaded'`, the `openSections` state is **not re-initialized** — `auto` stays `false` until the user manually clicks the header. Design Settings has the same initialization logic but appears open because in the typical flow the user sees the empty-state first, then uploads, but Design Settings also was closed at mount and only opens because the user clicks it. (Design Settings DOES open by default in `empty` state because of the OR clause: `design: appState === 'empty' || appState === 'image-uploaded'`.) Auto-Digitize Settings has no equivalent default-open clause for the empty state. ## Expected When `appState` transitions to `'image-uploaded'`, the Auto-Digitize Settings section should auto-open so the user immediately sees the controls they need to run auto-digitize. Two reasonable fixes: 1. **Reset openSections on appState change** — add a `useEffect` that watches `appState` and re-syncs the defaults, OR move the default computation out of `useState` so it always reflects current state. 2. **Add a default-open clause for the empty state** — change `auto` initial value to `appState === 'image-uploaded' || appState === 'empty'`, and add a similar default-open behavior for any other section that should be visible on first interaction. ## Severity Medium. The user has to discover that Auto-Digitize Settings is a clickable accordion; until they do, they cannot configure and run auto-digitize. Same UX bug class as Mark/Kimi_Agent_Brother_10_Digitizing_App#56 (Stitch Parameters accordion never expands) — both produce the symptom "header is visible but nothing happens" but with different root causes. ## Related - #56: Right panel Stitch Parameters accordion does nothing when no stitch object is selected. - #54: Workspace canvas split-view toggle renders identical output when one layer is empty. - #55: Workspace: clicking Confirm & Edit silently hides the source image.