Repository navigation
feat(ui): redesign phase 5 — Inpaint, Ground and Preview panels - #30
Merged
Merged
Conversation
- InpaintPanel: Fill holes / Extend edges (planned) mode switch, numbered sub-steps, Generate primary until candidates exist and Apply after, a 3-across candidate grid; entering Inpaint with no selection selects the farthest slice. - GroundPanel: ground slice radio list (+ No ground plane), Fit ground, horizon/pitch readout, ground distance and the scene side view. - PreviewPanel: Parallax 2D / 3D switch and the camera sliders. - Export panel keeps mesh displacement, depth of field, glTF, upscale and animation; camera edits go through a shared coalescing cameraDraft store. - Horizon options bar offers Fit ground once a ground slice exists. - e2e driver reveals the step panel that holds a slider or Fit ground. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The redesign refactor appears coherent with updated unit/e2e coverage, and the remaining feedback is limited to non-blocking accessibility/maintainability tweaks.
Review effort: Lite
Findings: 1
Open (2)
What changed in this PR
This PR implements Phase 5 of the redesign handoff by splitting the Inspector into dedicated step panels (Inpaint, Ground, Preview, Export) and centralizing shared camera/displacement draft state so the new panels can edit settings without request races.
Changes:
- Replaces the old Inpainting tab with a new step-based
InpaintPanel(mode switch, sub-steps, candidate grid, primary button behavior, auto-select farthest slice on entry). - Introduces
GroundPanelandPreviewPanel, moves “Fit ground” out of Segmentation, and exposes “Fit ground” in the Horizon tool options once a ground slice exists. - Adds a shared
cameraDraftStoreplusCameraSlidercomponent, and updates Export/Preview/Ground panels and tests to use the coalesced settings commits.
| File | Description |
|---|---|
| frontend/src/lib/workflow.ts | Adds setGroundSlice() helper to support GroundPanel ground selection UX. |
| frontend/src/lib/state/ui.svelte.ts | Adds Ground/Preview tabs and maps workflow steps to the new panels. |
| frontend/src/lib/state/ui.svelte.test.ts | Updates expectations for the new Ground/Preview step-to-panel mapping. |
| frontend/src/lib/state/canvas.svelte.ts | Updates docs/comments to reference InpaintPanel. |
| frontend/src/lib/state/cameraDraft.svelte.ts | New shared camera/displacement/ground draft store with coalesced commits. |
| frontend/src/lib/state/cameraDraft.svelte.test.ts | New unit tests for draft syncing, commit coalescing, and clamping behavior. |
| frontend/src/lib/components/shell/Shell.test.ts | Updates step-to-panel assertions for Ground/Preview panels. |
| frontend/src/lib/components/shell/Inspector.svelte | Mounts new InpaintPanel, GroundPanel, and PreviewPanel. |
| frontend/src/lib/components/shared/CameraSlider.svelte | New slider component that edits cameraDraftStore and commits on change. |
| frontend/src/lib/components/segmentation/SegmentPanel.svelte | Removes “Fit ground” control from Segmentation panel. |
| frontend/src/lib/components/segmentation/SegmentPanel.test.ts | Updates ground-plane tests to reflect Fit Ground relocation. |
| frontend/src/lib/components/preview/PreviewPanel.svelte | New Preview step panel with 2D/3D switch and camera sliders. |
| frontend/src/lib/components/preview/PreviewPanel.test.ts | New tests for preview radios and camera slider persistence/commit behavior. |
| frontend/src/lib/components/inpainting/InpaintPanel.svelte | New Inpaint step panel with sub-steps, prompts, candidates, and apply flow. |
| frontend/src/lib/components/inpainting/InpaintPanel.test.ts | Updates/expands inpaint panel tests for new UX rules and step-entry behavior. |
| frontend/src/lib/components/inpainting/InpaintingTab.svelte | Removes the legacy Inpainting tab implementation. |
| frontend/src/lib/components/ground/GroundPanel.svelte | New Ground step panel (ground slice selection, Fit ground, horizon/distance, side view). |
| frontend/src/lib/components/ground/GroundPanel.test.ts | New tests for ground selection, Fit ground behavior, and ground distance commits. |
| frontend/src/lib/components/export/ExportTab.svelte | Refactors Export panel to use cameraDraftStore and focus on export-specific controls. |
| frontend/src/lib/components/export/ExportTab.test.ts | Adjusts export tests for shared camera draft and new displacement commit path. |
| frontend/src/lib/components/canvas/ToolOptionsBar.svelte | Adds “Fit ground” button for Horizon tool when a ground slice exists. |
| frontend/src/lib/components/canvas/ToolOptionsBar.test.ts | Tests conditional “Fit ground” visibility/enabled state for Horizon tool. |
| e2e/drivers/svelte.ts | Updates driver to reveal the correct step panel for sliders / Fit ground before interacting. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+277
to
+286
| <img | ||
| data-testid="candidate-image" | ||
| alt={`inpainting candidate ${index + 1}`} | ||
| src={candidate.url} | ||
| role="option" | ||
| tabindex="0" | ||
| aria-selected={selectedCandidate === index} | ||
| class:selected={selectedCandidate === index} | ||
| onclick={() => selectCandidate(index)} | ||
| /> |
| // Entering the Inpaint step with nothing selected selects the farthest | ||
| // slice (HANDOFF §4) - once per entry, so clearing the selection while | ||
| // here is left alone. | ||
| let previousStep: string | null = null; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 5 of the Claude Design handoff (
docs/redesign/HANDOFF.md§3, §4, §12).InpaintingTab): Fill holes / Extend edges mode switch (Extend disabled, badged PLANNED), numbered sub-steps, prompts, strength/guidance, crop to ROI, Generate (primary until candidates exist), Fill/Enhance/Erase, 3-across candidate grid, Apply (primary once candidates exist). Entering the Inpaint step with nothing selected selects the farthest slice.cameraDraftstore used by all three panels.setSlider/fitGroundreveal the step panel holding the control; scenarios unchanged.All existing test ids are kept. ExportDialog/SettingsDialog, toasts, job cards and cancel come in phase 6.
Tests: vitest 289 passing,
svelte-checkclean, e2e 46/46 locally.🤖 Generated with Claude Code