feat: multi-component-selector (#1728)

<!-- This is an auto-generated description by cubic. -->
## Summary by cubic
Adds multi-component selection in the preview and sends all selected
components to chat for targeted edits. Updates overlays, UI, and IPC to
support arrays, smarter context focusing, and cross-platform path
normalization.

- **New Features**
- Select multiple components in the iframe; selection mode stays active
until you deactivate it.
- Show a scrollable list of selections with remove buttons and a Clear
all; remove from the list or click an overlay in the preview to
deselect. Sending clears all overlays.
- Separate hover vs selected overlays with labels on hover; overlays
persist after deactivation and re-position on layout changes/resizes.
- Chat input and streaming now send selectedComponents; server builds
per-component snippets and focuses their files in smart context.

- **Migration**
- Replace selectedComponentPreviewAtom with
selectedComponentsPreviewAtom (ComponentSelection[]).
- ChatStreamParams now uses selectedComponents; migrate any
single-selection usages.
  - previewIframeRefAtom added for clearing overlays from the parent.

<sup>Written for commit da0d64cc9e9f83fbf4b975278f6c869f0d3a8c7d.
Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Mohamed Aziz Mejri
2025-11-13 22:26:41 +01:00
committed by GitHub
parent c4591996ea
commit 2a7f5a8909
28 changed files with 646 additions and 187 deletions

View File

@@ -522,8 +522,15 @@ export class PageObject {
.click({ timeout: Timeout.EXTRA_LONG });
}
async clickDeselectComponent() {
await this.page.getByRole("button", { name: "Deselect component" }).click();
async clickDeselectComponent(options?: { index?: number }) {
const buttons = this.page.getByRole("button", {
name: "Deselect component",
});
if (options?.index !== undefined) {
await buttons.nth(options.index).click();
} else {
await buttons.first().click();
}
}
async clickPreviewMoreOptions() {
@@ -582,12 +589,12 @@ export class PageObject {
await expect(this.getChatInputContainer()).toMatchAriaSnapshot();
}
getSelectedComponentDisplay() {
getSelectedComponentsDisplay() {
return this.page.getByTestId("selected-component-display");
}
async snapshotSelectedComponentDisplay() {
await expect(this.getSelectedComponentDisplay()).toMatchAriaSnapshot();
async snapshotSelectedComponentsDisplay() {
await expect(this.getSelectedComponentsDisplay()).toMatchAriaSnapshot();
}
async snapshotPreview({ name }: { name?: string } = {}) {