Issues

The slideshow mode does not run reliably. In some cases, the slideshow does not start at all. In other cases, it starts but stops after a few images (e.g. after 2–3 slides). This issue occurs inconsistently and affects both desktop and mobile devices.

user: "trying to create a page called "home" gives error, probably because internally you have home by default"

enhance the ui for the image block settings panel

allow Navigation to hide automatically. expand on hoover.

bases on vercel's workflow builder, inspired by vuo

Description: When switching between edit and view mode, the page automatically jumps back to the top. This interrupts the workflow, especially when working on longer pages, as the user has to manually scroll back to the previous position each time. Suggested solution: Preserve the current scroll position when switching between edit and view mode. Benefit: This would create a smoother and more efficient workflow, especially for longer pages, by maintaining context and reducing unnecessary navigation. Optional enhancement: Make this behavior configurable (e.g. “preserve scroll position” vs. “always scroll to top”), allowing users to choose the behavior that best fits their workflow.

Currently, it is only possible to integrate video content via external embeds (e.g. YouTube or Vimeo). There is no option to use video files directly within layouts. This limits the ability to include moving image content in a simple and flexible way. Suggested solution: Allow the use of video files directly within layouts, either via upload or by linking to external sources. Benefit: This would make it possible to integrate moving image content more easily and flexibly, enhancing the visual possibilities and overall design of a page. As motion content has become a standard element in modern web design, this feature would align the tool with common expectations and evolving design practices.

In the previous version of Salon, the background image was visible in Lightbox mode, which helped maintain the visual context of the page. Currently, when opening images in the Lightbox view, the background image is not displayed. While it is possible to adjust the background color, there is no option to display the background image in this mode. Suggested solution: Enable the background image to be displayed in the Lightbox view. Benefit: This would preserve the overall visual design and atmosphere when viewing images in Lightbox mode, creating a more consistent and immersive user experience.

Currently, background colors can be selected using the built-in color picker (including hex input and predefined color options). However, it is not possible to pick a color directly from the canvas or from images within the workspace. This makes it difficult to match colors precisely when working with existing visual elements. Suggested solution: Add an eyedropper tool that allows users to sample colors directly from the canvas or uploaded images. Benefit: This would enable faster and more accurate color matching, improving design consistency and streamlining the workflow. It would also align the tool with standard functionality found in many design applications.

In the previous version of Salon, it was possible to create and adjust horizontal canvases with groups of images in just a few simple steps. This was very convenient and the layout option I used most. In the new version of Salon, the horizontal canvas option is only available in canvas mode. While this works great for many cases, it can be unnecessarily time-consuming for many common use cases. For example, if I want to arrange a series of images (e.g. 20 images of the same size with consistent spacing) in a horizontal row, doing this in canvas mode requires a lot of manual work. Any changes (such as size, spacing, or order) also have to be adjusted manually and individually for each image. Suggested solution: Enable horizontal canvas in fixed height layout mode, with flexible options for sizing and spacing. Benefit: This would allow for quick and efficient creation and adjustment of consistent horizontal image rows, while avoiding the manual overhead required in canvas mode. It would significantly improve workflow efficiency for common horizontal layout tasks.

Description: In the Canvas layout, it is currently possible to move individual images or the entire layout, but not multiple selected elements at once. This often limits the full potential of the Canvas layout mode. For example, if I need to create space in the middle of a longer and possibly complex layout, I cannot shift a group of elements (e.g. all items on one side) together. Instead, I have to move each element individually to make space for the image I want to insert. This can result in having to partially dismantle and rebuild the layout. Since this mode enables highly customized and intricate designs, this may require undoing work that took significant time and effort to create. Suggested solution: Allow selecting multiple assets (e.g. via the Assets panel) and moving them as a group, similar to layer selection in design tools like Photoshop. Benefit: This would make editing layouts in Canvas mode much faster and more efficient, both for simple arrangements (e.g. inserting an image into a row of elements) and for more complex compositions. It would also better support the intuitive creative potential of the Canvas workflow by preserving carefully arranged layouts and avoiding unnecessary rework. This improvement would benefit both horizontal and vertical use cases.

When using the Canvas layout in combination with horizontal scrolling, the page frequently resets partially after closing the editor or switching between edit and preview modes. This results in multiple layout settings being changed or lost without user input. Examples of affected settings include: - Background color - Horizontal / vertical orientation - Overall layout size - Layout position - Lightbox (enabled/disabled) - Section width and padding Expected behavior: All layout settings should persist consistently after switching modes or reopening the page. Actual behavior: Various layout settings reset randomly, causing loss of work and requiring repeated adjustments. Impact: This is a critical issue, especially for complex layouts, as it can result in significant time loss and repeated manual reconfiguration.

When using the "Variable Size" layout option, the background image is displayed at a much larger scale than intended. The same background image behaves correctly in all other layout options, where it keeps the selected size. The issue only occurs when "Variable Size" is enabled.

correct canonical URLs on custom domains etc etc) so your users have good SEO, also make sure its only accessible on the custom domain when user sets one, and that the salon url redirects properly to the custom domain to avoid dublicate content issues and when users port sites from the old salon, the redirects must pass the link juice (301 redirect vs 302)

## Overview Integrate [Agent Browser](https://agent-browser.dev/) — a headless browser automation CLI built for AI agents — to enable automated end-to-end testing, migration verification, and quality assurance across the New Salon platform. Agent Browser uses a Rust CLI + Playwright daemon architecture with a token-efficient "refs" system (~200-400 tokens vs ~3000-5000 for full DOM), making it ideal for AI-driven testing workflows. --- ## Implementation Plan ### Phase 1: Setup & Infrastructure - Install Agent Browser CLI (npm or Homebrew) - Configure daemon settings for our development environment - Set up test runner scripts in `package.json` (e.g., `npm run test:e2e`) - Create `/tests/e2e/` directory structure with shared utilities - Document setup in CLAUDE.md and developer onboarding guide ### Phase 2: Layout Engine Visual Testing - Write automated visual tests for all 8 layout engines: - Canvas: free-form positioning, block overlap, z-index - Mosaic: tile responsiveness, aspect ratios - Slideshow: navigation, transitions, caption display - Justified: row filling, aspect-ratio preservation - Column: snap-to-grid, responsive breakpoints - Fixed Height: row height consistency, floating images - Variable Size: masonry layout, variable widths - Square: uniform aspect ratio grid alignment - Screenshot comparison baselines for each engine - Test across viewport sizes (mobile, tablet, desktop) ### Phase 3: Editor Flow Testing - Block CRUD operations (create, edit, delete, reorder) - Drag-and-drop interactions via @dnd-kit - Section management (add, reorder, delete sections) - Panel interactions (Page, Section, Layout tabs) - Navigation editor flows - Theme switching and preview - Rich text editing (TipTap) interactions ### Phase 4: Migration Verification - Automated comparison between legacy salon.io pages and migrated new.salon.io pages - Fetch legacy page via salon.io JSON API - Render migrated version and capture screenshots - Pixel-diff or structural comparison reporting - Batch verification across migrated user sites ### Phase 5: Payment & Auth Flow Testing - Stripe Checkout session creation and redirect - Subscription management (upgrade, downgrade, cancel, reactivate) - Customer Portal access and navigation - Test all 5 tiers: Free, Basic, Premium, Pro, Pro Lifetime - Webhook handling verification - Auth flows: sign up, sign in, password reset, magic links ### Phase 6: Public Site & SEO Auditing - Crawl published user sites for meta tag verification - OpenGraph and social sharing preview validation - Accessibility audit (WCAG compliance checks) - Custom domain routing and SSL verification - Content width modes (full-bleed, full, wide, inset) rendering - Theme CSS variable application on public pages ### Phase 7: CI/CD Integration - Add Agent Browser tests to Vercel deployment pipeline - Post-deploy smoke tests on preview and production URLs - Failure alerting and screenshot capture on test failures - Test result reporting and trend tracking - Multi-session isolation for parallel test execution --- ## Key Benefits - **Token efficiency**: Refs system uses 10-20x fewer tokens than full DOM, reducing AI testing costs - **Multi-session isolation**: Test authenticated vs anonymous views simultaneously - **CLI-first**: Easy to script into CI/CD pipelines - **Cross-platform**: Works on macOS, Linux, Windows ## Dependencies - Agent Browser CLI (Rust + Node.js) - Playwright (managed by Agent Browser daemon) - Chrome/Chromium browser ## Notes - We already have Playwright MCP connected — Agent Browser complements it for CI/CD and batch testing - Start with Phase 1-2 post-launch (after March 13, 2026) - Prioritize layout engine visual testing as highest-value first use case

- Unified color picker behavior across all panels (text, backgrounds, navigation, theme) - Always show: recent colors (last 8 used), theme colors, standard presets - Compact mode for inline use, expanded mode for detailed editing - Smart suggestions: complementary colors from site theme, high-contrast options against background **Files:** `src/components/ui/color-picker.tsx`