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. -->

e2e-tests/helpers/test_helper.ts

@@ -522,8 +522,15 @@ export class PageObject {
       .click({ timeout: Timeout.EXTRA_LONG });
   }
 
-  async clickDeselectComponent() {
+  async clickDeselectComponent(options?: { index?: number }) {
-    await this.page.getByRole("button", { name: "Deselect component" }).click();
+    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() {
+  async snapshotSelectedComponentsDisplay() {
-    await expect(this.getSelectedComponentDisplay()).toMatchAriaSnapshot();
+    await expect(this.getSelectedComponentsDisplay()).toMatchAriaSnapshot();
   }
 
   async snapshotPreview({ name }: { name?: string } = {}) {

e2e-tests/select_component.spec.ts

@@ -14,11 +14,11 @@ testSkipIfWindows("select component", async ({ po }) => {
     .click();
 
   await po.snapshotPreview();
-  await po.snapshotSelectedComponentDisplay();
+  await po.snapshotSelectedComponentsDisplay();
 
   await po.sendPrompt("[dump] make it smaller");
   await po.snapshotPreview();
-  await expect(po.getSelectedComponentDisplay()).not.toBeVisible();
+  await expect(po.getSelectedComponentsDisplay()).not.toBeVisible();
 
   await po.snapshotServerDump("all-messages");
 
@@ -27,6 +27,34 @@ testSkipIfWindows("select component", async ({ po }) => {
   await po.snapshotServerDump("last-message");
 });
 
+testSkipIfWindows("select multiple components", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("tc=basic");
+  await po.clickTogglePreviewPanel();
+  await po.clickPreviewPickElement();
+
+  await po
+    .getPreviewIframeElement()
+    .contentFrame()
+    .getByRole("heading", { name: "Welcome to Your Blank App" })
+    .click();
+
+  await po
+    .getPreviewIframeElement()
+    .contentFrame()
+    .getByText("Made with Dyad")
+    .click();
+
+  await po.snapshotPreview();
+  await po.snapshotSelectedComponentsDisplay();
+
+  await po.sendPrompt("[dump] make both smaller");
+  await po.snapshotPreview();
+  await expect(po.getSelectedComponentsDisplay()).not.toBeVisible();
+
+  await po.snapshotServerDump("last-message");
+});
+
 testSkipIfWindows("deselect component", async ({ po }) => {
   await po.setUp();
   await po.sendPrompt("tc=basic");
@@ -40,19 +68,50 @@ testSkipIfWindows("deselect component", async ({ po }) => {
     .click();
 
   await po.snapshotPreview();
-  await po.snapshotSelectedComponentDisplay();
+  await po.snapshotSelectedComponentsDisplay();
 
   // Deselect the component and make sure the state has reverted
   await po.clickDeselectComponent();
 
   await po.snapshotPreview();
-  await expect(po.getSelectedComponentDisplay()).not.toBeVisible();
+  await expect(po.getSelectedComponentsDisplay()).not.toBeVisible();
 
   // Send one more prompt to make sure it's a normal message.
   await po.sendPrompt("[dump] tc=basic");
   await po.snapshotServerDump("last-message");
 });
 
+testSkipIfWindows(
+  "deselect individual component from multiple",
+  async ({ po }) => {
+    await po.setUp();
+    await po.sendPrompt("tc=basic");
+    await po.clickTogglePreviewPanel();
+    await po.clickPreviewPickElement();
+
+    await po
+      .getPreviewIframeElement()
+      .contentFrame()
+      .getByRole("heading", { name: "Welcome to Your Blank App" })
+      .click();
+
+    await po
+      .getPreviewIframeElement()
+      .contentFrame()
+      .getByText("Made with Dyad")
+      .click();
+
+    await po.snapshotSelectedComponentsDisplay();
+
+    await po.clickDeselectComponent({ index: 0 });
+
+    await po.snapshotPreview();
+    await po.snapshotSelectedComponentsDisplay();
+
+    await expect(po.getSelectedComponentsDisplay()).toBeVisible();
+  },
+);
+
 testSkipIfWindows("upgrade app to select component", async ({ po }) => {
   await po.setUp();
   await po.importApp("select-component");
@@ -94,7 +153,7 @@ testSkipIfWindows("select component next.js", async ({ po }) => {
     .click();
 
   await po.snapshotPreview();
-  await po.snapshotSelectedComponentDisplay();
+  await po.snapshotSelectedComponentsDisplay();
 
   await po.sendPrompt("[dump] make it smaller");
   await po.snapshotPreview();

e2e-tests/snapshots/select_component.spec.ts_deselect-component-1.aria.yml

@@ -5,5 +5,4 @@
 - paragraph: Start building your amazing project here!
 - link "Made with Dyad":
   - /url: https://www.dyad.sh/
-- img
+- text: h1 src/pages/Index.tsx
-- text: Edit with AI h1 src/pages/Index.tsx

e2e-tests/snapshots/select_component.spec.ts_deselect-component-2.aria.yml

@@ -1,3 +1,5 @@
+- text: Selected Components (1)
+- button "Clear all"
 - img
 - text: h1 src/pages/Index.tsx:9
 - button "Deselect component":

e2e-tests/snapshots/select_component.spec.ts_deselect-individual-component-from-multiple-1.aria.yml

@@ -0,0 +1,10 @@
+- text: Selected Components (2)
+- button "Clear all"
+- img
+- text: h1 src/pages/Index.tsx:9
+- button "Deselect component":
+  - img
+- img
+- text: a src/components/made-with-dyad.tsx:4
+- button "Deselect component":
+  - img

e2e-tests/snapshots/select_component.spec.ts_deselect-individual-component-from-multiple-2.aria.yml

@@ -0,0 +1,8 @@
+- region "Notifications (F8)":
+  - list
+- region "Notifications alt+T"
+- heading "Welcome to Your Blank App" [level=1]
+- paragraph: Start building your amazing project here!
+- link "Made with Dyad":
+  - /url: https://www.dyad.sh/
+- text: a src/components/made-with-dyad.tsx

e2e-tests/snapshots/select_component.spec.ts_deselect-individual-component-from-multiple-3.aria.yml

@@ -0,0 +1,6 @@
+- text: Selected Components (1)
+- button "Clear all"
+- img
+- text: a src/components/made-with-dyad.tsx:4
+- button "Deselect component":
+  - img

e2e-tests/snapshots/select_component.spec.ts_select-component-1.aria.yml

@@ -5,5 +5,4 @@
 - paragraph: Start building your amazing project here!
 - link "Made with Dyad":
   - /url: https://www.dyad.sh/
-- img
+- text: h1 src/pages/Index.tsx
-- text: Edit with AI h1 src/pages/Index.tsx

e2e-tests/snapshots/select_component.spec.ts_select-component-1.txt

@@ -104,7 +104,9 @@ message: This is a simple basic response
 role: user
 message: [dump] make it smaller
 
-Selected component: h1 (file: src/pages/Index.tsx)
+Selected components:
+
+Component: h1 (file: src/pages/Index.tsx)
 
 Snippet:
 ```

e2e-tests/snapshots/select_component.spec.ts_select-component-2.aria.yml

@@ -1,3 +1,5 @@
+- text: Selected Components (1)
+- button "Clear all"
 - img
 - text: h1 src/pages/Index.tsx:9
 - button "Deselect component":

e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-1.aria.yml

@@ -1 +1,8 @@
-- text: Edit with AI h1 src/app/page.tsx
+- main:
+  - heading "Blank page" [level=1]
+- link "Made with Dyad":
+  - /url: https://www.dyad.sh/
+- text: h1 src/app/page.tsx
+- alert
+- button "Open Next.js Dev Tools":
+  - img

e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-1.txt

@@ -151,7 +151,9 @@ message: This is a simple basic response
 role: user
 message: [dump] make it smaller
 
-Selected component: h1 (file: src/app/page.tsx)
+Selected components:
+
+Component: h1 (file: src/app/page.tsx)
 
 Snippet:
 ```

e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-2.aria.yml

@@ -1,3 +1,5 @@
+- text: Selected Components (1)
+- button "Clear all"
 - img
 - text: h1 src/app/page.tsx:7
 - button "Deselect component":

e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-3.aria.yml

@@ -2,3 +2,6 @@
   - heading "Blank page" [level=1]
 - link "Made with Dyad":
   - /url: https://www.dyad.sh/
+- alert
+- button "Open Next.js Dev Tools":
+  - img

e2e-tests/snapshots/select_component.spec.ts_select-multiple-components-1.aria.yml

@@ -0,0 +1,8 @@
+- region "Notifications (F8)":
+  - list
+- region "Notifications alt+T"
+- heading "Welcome to Your Blank App" [level=1]
+- paragraph: Start building your amazing project here!
+- link "Made with Dyad":
+  - /url: https://www.dyad.sh/
+- text: a src/components/made-with-dyad.tsx

e2e-tests/snapshots/select_component.spec.ts_select-multiple-components-1.txt

@@ -0,0 +1,27 @@
+===
+role: user
+message: [dump] make both smaller
+
+Selected components:
+
+1. Component: h1 (file: src/pages/Index.tsx)
+
+Snippet:
+```
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1> // <-- EDIT HERE
+        <p className="text-xl text-gray-600">
+          Start building your amazing project here!
+        </p>
+```
+
+2. Component: a (file: src/components/made-with-dyad.tsx)
+
+Snippet:
+```
+    <div className="p-4 text-center">
+      <a // <-- EDIT HERE
+        href="https://www.dyad.sh/"
+        target="_blank"
+        rel="noopener noreferrer"
+```

e2e-tests/snapshots/select_component.spec.ts_select-multiple-components-2.aria.yml

@@ -0,0 +1,10 @@
+- text: Selected Components (2)
+- button "Clear all"
+- img
+- text: h1 src/pages/Index.tsx:9
+- button "Deselect component":
+  - img
+- img
+- text: a src/components/made-with-dyad.tsx:4
+- button "Deselect component":
+  - img

e2e-tests/snapshots/select_component.spec.ts_select-multiple-components-3.aria.yml

@@ -0,0 +1,7 @@
+- region "Notifications (F8)":
+  - list
+- region "Notifications alt+T"
+- heading "Welcome to Your Blank App" [level=1]
+- paragraph: Start building your amazing project here!
+- link "Made with Dyad":
+  - /url: https://www.dyad.sh/

e2e-tests/snapshots/select_component.spec.ts_upgrade-app-to-select-component-1.txt

@@ -2,7 +2,9 @@
 role: user
 message: [dump] make it smaller
 
-Selected component: h1 (file: src/pages/Index.tsx)
+Selected components:
+
+Component: h1 (file: src/pages/Index.tsx)
 
 Snippet:
 ```

src/atoms/previewAtoms.ts

@@ -1,6 +1,6 @@
 import { ComponentSelection } from "@/ipc/ipc_types";
 import { atom } from "jotai";
 
-export const selectedComponentPreviewAtom = atom<ComponentSelection | null>(
+export const selectedComponentsPreviewAtom = atom<ComponentSelection[]>([]);
-  null,
+
-);
+export const previewIframeRefAtom = atom<HTMLIFrameElement | null>(null);

src/components/chat/ChatInput.tsx

@@ -61,8 +61,11 @@ import { FileAttachmentDropdown } from "./FileAttachmentDropdown";
 import { showError, showExtraFilesToast } from "@/lib/toast";
 import { ChatInputControls } from "../ChatInputControls";
 import { ChatErrorBox } from "./ChatErrorBox";
-import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
+import {
-import { SelectedComponentDisplay } from "./SelectedComponentDisplay";
+  selectedComponentsPreviewAtom,
+  previewIframeRefAtom,
+} from "@/atoms/previewAtoms";
+import { SelectedComponentsDisplay } from "./SelectedComponentDisplay";
 import { useCheckProblems } from "@/hooks/useCheckProblems";
 import { LexicalChatInput } from "./LexicalChatInput";
 import { useChatModeToggle } from "@/hooks/useChatModeToggle";
@@ -84,9 +87,10 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   const setMessagesById = useSetAtom(chatMessagesByIdAtom);
   const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
   const [showTokenBar, setShowTokenBar] = useAtom(showTokenBarAtom);
-  const [selectedComponent, setSelectedComponent] = useAtom(
+  const [selectedComponents, setSelectedComponents] = useAtom(
-    selectedComponentPreviewAtom,
+    selectedComponentsPreviewAtom,
   );
+  const previewIframeRef = useAtomValue(previewIframeRefAtom);
   const { checkProblems } = useCheckProblems(appId);
   // Use the attachments hook
   const {
@@ -148,7 +152,21 @@ export function ChatInput({ chatId }: { chatId?: number }) {
 
     const currentInput = inputValue;
     setInputValue("");
-    setSelectedComponent(null);
+
+    // Use all selected components for multi-component editing
+    const componentsToSend =
+      selectedComponents && selectedComponents.length > 0
+        ? selectedComponents
+        : [];
+    setSelectedComponents([]);
+
+    // Clear overlays in the preview iframe
+    if (previewIframeRef?.contentWindow) {
+      previewIframeRef.contentWindow.postMessage(
+        { type: "clear-dyad-component-overlays" },
+        "*",
+      );
+    }
 
     // Send message with attachments and clear them after sending
     await streamMessage({
@@ -156,7 +174,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
       chatId,
       attachments,
       redo: false,
-      selectedComponent,
+      selectedComponents: componentsToSend,
     });
     clearAttachments();
     posthog.capture("chat:submit");
@@ -288,7 +306,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
               />
             )}
 
-          <SelectedComponentDisplay />
+          <SelectedComponentsDisplay />
 
           {/* Use the AttachmentsList component */}
           <AttachmentsList

src/components/chat/SelectedComponentDisplay.tsx

@@ -1,18 +1,67 @@
-import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
+import {
-import { useAtom } from "jotai";
+  selectedComponentsPreviewAtom,
+  previewIframeRefAtom,
+} from "@/atoms/previewAtoms";
+import { useAtom, useAtomValue } from "jotai";
 import { Code2, X } from "lucide-react";
 
-export function SelectedComponentDisplay() {
+export function SelectedComponentsDisplay() {
-  const [selectedComponent, setSelectedComponent] = useAtom(
+  const [selectedComponents, setSelectedComponents] = useAtom(
-    selectedComponentPreviewAtom,
+    selectedComponentsPreviewAtom,
   );
+  const previewIframeRef = useAtomValue(previewIframeRefAtom);
 
-  if (!selectedComponent) {
+  const handleRemoveComponent = (index: number) => {
+    const componentToRemove = selectedComponents[index];
+    const newComponents = selectedComponents.filter((_, i) => i !== index);
+    setSelectedComponents(newComponents);
+
+    // Remove the specific overlay from the iframe
+    if (previewIframeRef?.contentWindow) {
+      previewIframeRef.contentWindow.postMessage(
+        {
+          type: "remove-dyad-component-overlay",
+          componentId: componentToRemove.id,
+        },
+        "*",
+      );
+    }
+  };
+
+  const handleClearAll = () => {
+    setSelectedComponents([]);
+
+    if (previewIframeRef?.contentWindow) {
+      previewIframeRef.contentWindow.postMessage(
+        { type: "clear-dyad-component-overlays" },
+        "*",
+      );
+    }
+  };
+
+  if (!selectedComponents || selectedComponents.length === 0) {
     return null;
   }
 
   return (
-    <div className="p-2 pb-1" data-testid="selected-component-display">
+    <div
+      className="p-2 pb-1 max-h-[180px] overflow-y-auto"
+      data-testid="selected-component-display"
+    >
+      <div className="flex items-center justify-between mb-2 px-1">
+        <span className="text-xs font-medium text-muted-foreground">
+          Selected Components ({selectedComponents.length})
+        </span>
+        <button
+          onClick={handleClearAll}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+          title="Clear all selected components"
+        >
+          Clear all
+        </button>
+      </div>
+      {selectedComponents.map((selectedComponent, index) => (
+        <div key={selectedComponent.id} className="mb-1 last:mb-0">
           <div className="flex items-center justify-between rounded-md bg-indigo-600/10 px-2 py-1 text-sm">
             <div className="flex items-center gap-2 overflow-hidden">
               <Code2
@@ -30,12 +79,13 @@ export function SelectedComponentDisplay() {
                   className="truncate text-xs text-indigo-600/80 dark:text-indigo-400/80"
                   title={`${selectedComponent.relativePath}:${selectedComponent.lineNumber}`}
                 >
-              {selectedComponent.relativePath}:{selectedComponent.lineNumber}
+                  {selectedComponent.relativePath}:
+                  {selectedComponent.lineNumber}
                 </span>
               </div>
             </div>
             <button
-          onClick={() => setSelectedComponent(null)}
+              onClick={() => handleRemoveComponent(index)}
               className="ml-2 flex-shrink-0 rounded-full p-0.5 hover:bg-indigo-600/20"
               title="Deselect component"
             >
@@ -43,5 +93,7 @@ export function SelectedComponentDisplay() {
             </button>
           </div>
         </div>
+      ))}
+    </div>
   );
 }

src/components/preview_panel/PreviewIframe.tsx

@@ -35,7 +35,10 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useStreamChat } from "@/hooks/useStreamChat";
-import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
+import {
+  selectedComponentsPreviewAtom,
+  previewIframeRefAtom,
+} from "@/atoms/previewAtoms";
 import { ComponentSelection } from "@/ipc/ipc_types";
 import {
   Tooltip,
@@ -52,6 +55,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useRunApp } from "@/hooks/useRunApp";
 import { useShortcut } from "@/hooks/useShortcut";
 import { cn } from "@/lib/utils";
+import { normalizePath } from "../../../shared/normalizePath";
 
 interface ErrorBannerProps {
   error: { message: string; source: "preview-app" | "dyad-app" } | undefined;
@@ -169,9 +173,10 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
   const [canGoForward, setCanGoForward] = useState(false);
   const [navigationHistory, setNavigationHistory] = useState<string[]>([]);
   const [currentHistoryPosition, setCurrentHistoryPosition] = useState(0);
-  const [selectedComponentPreview, setSelectedComponentPreview] = useAtom(
+  const [selectedComponentsPreview, setSelectedComponentsPreview] = useAtom(
-    selectedComponentPreviewAtom,
+    selectedComponentsPreviewAtom,
   );
+  const setPreviewIframeRef = useSetAtom(previewIframeRefAtom);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [isPicking, setIsPicking] = useState(false);
 
@@ -189,9 +194,14 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
   //detect if the user is using Mac
   const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
 
+  // Update iframe ref atom
+  useEffect(() => {
+    setPreviewIframeRef(iframeRef.current);
+  }, [iframeRef.current, setPreviewIframeRef]);
+
   // Deactivate component selector when selection is cleared
   useEffect(() => {
-    if (!selectedComponentPreview) {
+    if (!selectedComponentsPreview || selectedComponentsPreview.length === 0) {
       if (iframeRef.current?.contentWindow) {
         iframeRef.current.contentWindow.postMessage(
           { type: "deactivate-dyad-component-selector" },
@@ -200,7 +210,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
       }
       setIsPicking(false);
     }
-  }, [selectedComponentPreview]);
+  }, [selectedComponentsPreview]);
 
   // Add message listener for iframe errors and navigation events
   useEffect(() => {
@@ -217,8 +227,37 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
 
       if (event.data?.type === "dyad-component-selected") {
         console.log("Component picked:", event.data);
-        setSelectedComponentPreview(parseComponentSelection(event.data));
+
-        setIsPicking(false);
+        // Parse the single selected component
+        const component = event.data.component
+          ? parseComponentSelection({
+              type: "dyad-component-selected",
+              id: event.data.component.id,
+              name: event.data.component.name,
+            })
+          : null;
+
+        if (!component) return;
+
+        // Add to existing components, avoiding duplicates by id
+        setSelectedComponentsPreview((prev) => {
+          // Check if this component is already selected
+          if (prev.some((c) => c.id === component.id)) {
+            return prev;
+          }
+          return [...prev, component];
+        });
+
+        return;
+      }
+
+      if (event.data?.type === "dyad-component-deselected") {
+        const componentId = event.data.componentId;
+        if (componentId) {
+          setSelectedComponentsPreview((prev) =>
+            prev.filter((c) => c.id !== componentId),
+          );
+        }
         return;
       }
 
@@ -306,7 +345,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
     errorMessage,
     setErrorMessage,
     setIsComponentSelectorInitialized,
-    setSelectedComponentPreview,
+    setSelectedComponentsPreview,
   ]);
 
   useEffect(() => {
@@ -742,7 +781,7 @@ function parseComponentSelection(data: any): ComponentSelection | null {
   return {
     id,
     name,
-    relativePath,
+    relativePath: normalizePath(relativePath),
     lineNumber,
     columnNumber,
   };

src/hooks/useStreamChat.ts

@@ -69,14 +69,14 @@ export function useStreamChat({
       chatId,
       redo,
       attachments,
-      selectedComponent,
+      selectedComponents,
       onSettled,
     }: {
       prompt: string;
       chatId: number;
       redo?: boolean;
       attachments?: FileAttachment[];
-      selectedComponent?: ComponentSelection | null;
+      selectedComponents?: ComponentSelection[];
       onSettled?: () => void;
     }) => {
       if (
@@ -106,7 +106,7 @@ export function useStreamChat({
       let hasIncrementedStreamCount = false;
       try {
         IpcClient.getInstance().streamMessage(prompt, {
-          selectedComponent: selectedComponent ?? null,
+          selectedComponents: selectedComponents ?? [],
           chatId,
           redo,
           attachments,

src/ipc/handlers/chat_stream_handlers.ts

@@ -351,18 +351,21 @@ export function registerChatStreamHandlers() {
       } catch (e) {
         logger.error("Failed to inline referenced prompts:", e);
       }
-      if (req.selectedComponent) {
+
+      const componentsToProcess = req.selectedComponents || [];
+
+      if (componentsToProcess.length > 0) {
+        userPrompt += "\n\nSelected components:\n";
+
+        for (const component of componentsToProcess) {
           let componentSnippet = "[component snippet not available]";
           try {
             const componentFileContent = await readFile(
-            path.join(
+              path.join(getDyadAppPath(chat.app.path), component.relativePath),
-              getDyadAppPath(chat.app.path),
-              req.selectedComponent.relativePath,
-            ),
               "utf8",
             );
-          const lines = componentFileContent.split("\n");
+            const lines = componentFileContent.split(/\r?\n/);
-          const selectedIndex = req.selectedComponent.lineNumber - 1;
+            const selectedIndex = component.lineNumber - 1;
 
             // Let's get one line before and three after for context.
             const startIndex = Math.max(0, selectedIndex - 1);
@@ -378,10 +381,12 @@ export function registerChatStreamHandlers() {
 
             componentSnippet = snippetLines.join("\n");
           } catch (err) {
-          logger.error(`Error reading selected component file content: ${err}`);
+            logger.error(
+              `Error reading selected component file content: ${err}`,
+            );
           }
 
-        userPrompt += `\n\nSelected component: ${req.selectedComponent.name} (file: ${req.selectedComponent.relativePath})
+          userPrompt += `\n${componentsToProcess.length > 1 ? `${componentsToProcess.indexOf(component) + 1}. ` : ""}Component: ${component.name} (file: ${component.relativePath})
 
 Snippet:
 \`\`\`
@@ -389,6 +394,8 @@ ${componentSnippet}
 \`\`\`
 `;
         }
+      }
+
       await db
         .insert(messages)
         .values({
@@ -460,18 +467,18 @@ ${componentSnippet}
 
         const appPath = getDyadAppPath(updatedChat.app.path);
         // When we don't have smart context enabled, we
-        // only include the selected component's file for codebase context.
+        // only include the selected components' files for codebase context.
         //
-        // If we have selected component and smart context is enabled,
+        // If we have selected components and smart context is enabled,
         // we handle this specially below.
         const chatContext =
-          req.selectedComponent && !isSmartContextEnabled
+          req.selectedComponents &&
+          req.selectedComponents.length > 0 &&
+          !isSmartContextEnabled
             ? {
-                contextPaths: [
+                contextPaths: req.selectedComponents.map((component) => ({
-                  {
+                  globPath: component.relativePath,
-                    globPath: req.selectedComponent.relativePath,
+                })),
-                  },
-                ],
                 smartContextAutoIncludes: [],
               }
             : validateChatContext(updatedChat.app.chatContext);
@@ -482,12 +489,19 @@ ${componentSnippet}
           chatContext,
         });
 
-        // For smart context and selected component, we will mark the selected component's file as focused.
+        // For smart context and selected components, we will mark the selected components' files as focused.
         // This means that we don't do the regular smart context handling, but we'll allow fetching
         // additional files through <dyad-read> as needed.
-        if (isSmartContextEnabled && req.selectedComponent) {
+        if (
+          isSmartContextEnabled &&
+          req.selectedComponents &&
+          req.selectedComponents.length > 0
+        ) {
+          const selectedPaths = new Set(
+            req.selectedComponents.map((component) => component.relativePath),
+          );
           for (const file of files) {
-            if (file.path === req.selectedComponent.relativePath) {
+            if (selectedPaths.has(file.path)) {
               file.focused = true;
             }
           }

src/ipc/ipc_client.ts

@@ -387,7 +387,7 @@ export class IpcClient {
   public streamMessage(
     prompt: string,
     options: {
-      selectedComponent: ComponentSelection | null;
+      selectedComponents?: ComponentSelection[];
       chatId: number;
       redo?: boolean;
       attachments?: FileAttachment[];
@@ -401,7 +401,7 @@ export class IpcClient {
       chatId,
       redo,
       attachments,
-      selectedComponent,
+      selectedComponents,
       onUpdate,
       onEnd,
       onError,
@@ -441,7 +441,7 @@ export class IpcClient {
               prompt,
               chatId,
               redo,
-              selectedComponent,
+              selectedComponents,
               attachments: fileDataArray,
             })
             .catch((err) => {
@@ -464,7 +464,7 @@ export class IpcClient {
           prompt,
           chatId,
           redo,
-          selectedComponent,
+          selectedComponents,
         })
         .catch((err) => {
           console.error("Error streaming message:", err);

src/ipc/ipc_types.ts

@@ -41,7 +41,7 @@ export interface ChatStreamParams {
     data: string; // Base64 encoded file data
     attachmentType: "upload-to-codebase" | "chat-context"; // FileAttachment type
   }>;
-  selectedComponent: ComponentSelection | null;
+  selectedComponents?: ComponentSelection[];
 }
 
 export interface ChatResponseEnd {

worker/dyad-component-selector-client.js

@@ -1,7 +1,9 @@
 (() => {
-  const OVERLAY_ID = "__dyad_overlay__";
+  const OVERLAY_CLASS = "__dyad_overlay__";
-  let overlay, label;
+  let overlays = [];
-
+  let hoverOverlay = null;
+  let hoverLabel = null;
+  let currentHoveredElement = null;
   //detect if the user is using Mac
   const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
 
@@ -15,8 +17,8 @@
   const css = (el, obj) => Object.assign(el.style, obj);
 
   function makeOverlay() {
-    overlay = document.createElement("div");
+    const overlay = document.createElement("div");
-    overlay.id = OVERLAY_ID;
+    overlay.className = OVERLAY_CLASS;
     css(overlay, {
       position: "absolute",
       border: "2px solid #7f22fe",
@@ -27,7 +29,7 @@
       boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
     });
 
-    label = document.createElement("div");
+    const label = document.createElement("div");
     css(label, {
       position: "absolute",
       left: "0",
@@ -45,10 +47,24 @@
     });
     overlay.appendChild(label);
     document.body.appendChild(overlay);
+
+    return { overlay, label };
   }
 
   function updateOverlay(el, isSelected = false) {
-    if (!overlay) makeOverlay();
+    // If no element, hide hover overlay
+    if (!el) {
+      if (hoverOverlay) hoverOverlay.style.display = "none";
+      return;
+    }
+
+    if (isSelected) {
+      if (overlays.some((item) => item.el === el)) {
+        return;
+      }
+
+      const { overlay, label } = makeOverlay();
+      overlays.push({ overlay, label, el });
 
       const rect = el.getBoundingClientRect();
       css(overlay, {
@@ -57,24 +73,119 @@
         width: `${rect.width}px`,
         height: `${rect.height}px`,
         display: "block",
-      border: isSelected ? "3px solid #7f22fe" : "2px solid #7f22fe",
+        border: "3px solid #7f22fe",
-      background: isSelected
+        background: "rgba(127, 34, 254, 0.05)",
-        ? "rgba(127, 34, 254, 0.05)"
-        : "rgba(0,170,255,.05)",
       });
 
-    css(label, {
+      css(label, { display: "none" });
-      background: "#7f22fe",
-    });
 
-    // Clear previous contents
+      return;
-    while (label.firstChild) {
-      label.removeChild(label.firstChild);
     }
 
-    if (isSelected) {
+    // Otherwise, this is a hover overlay: reuse the hover overlay node
-      const editLine = document.createElement("div");
+    if (!hoverOverlay || !hoverLabel) {
+      const o = makeOverlay();
+      hoverOverlay = o.overlay;
+      hoverLabel = o.label;
+    }
 
+    const rect = el.getBoundingClientRect();
+    css(hoverOverlay, {
+      top: `${rect.top + window.scrollY}px`,
+      left: `${rect.left + window.scrollX}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      display: "block",
+      border: "2px solid #7f22fe",
+      background: "rgba(0,170,255,.05)",
+    });
+    css(hoverLabel, { background: "#7f22fe" });
+    while (hoverLabel.firstChild) hoverLabel.removeChild(hoverLabel.firstChild);
+    const name = el.dataset.dyadName || "<unknown>";
+    const file = (el.dataset.dyadId || "").split(":")[0];
+    const nameEl = document.createElement("div");
+    nameEl.textContent = name;
+    hoverLabel.appendChild(nameEl);
+    if (file) {
+      const fileEl = document.createElement("span");
+      css(fileEl, { fontSize: "10px", opacity: ".8" });
+      fileEl.textContent = file.replace(/\\/g, "/");
+      hoverLabel.appendChild(fileEl);
+    }
+
+    // Update positions after showing hover label in case it caused layout shift
+    requestAnimationFrame(updateAllOverlayPositions);
+  }
+
+  function updateAllOverlayPositions() {
+    // Update all selected overlays
+    overlays.forEach(({ overlay, el }) => {
+      const rect = el.getBoundingClientRect();
+      css(overlay, {
+        top: `${rect.top + window.scrollY}px`,
+        left: `${rect.left + window.scrollX}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+      });
+    });
+
+    // Update hover overlay if visible
+    if (
+      hoverOverlay &&
+      hoverOverlay.style.display !== "none" &&
+      state.element
+    ) {
+      const rect = state.element.getBoundingClientRect();
+      css(hoverOverlay, {
+        top: `${rect.top + window.scrollY}px`,
+        left: `${rect.left + window.scrollX}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+      });
+    }
+  }
+
+  function clearOverlays() {
+    overlays.forEach(({ overlay }) => overlay.remove());
+    overlays = [];
+
+    if (hoverOverlay) {
+      hoverOverlay.remove();
+      hoverOverlay = null;
+      hoverLabel = null;
+    }
+
+    currentHoveredElement = null;
+  }
+
+  function removeOverlayById(componentId) {
+    const index = overlays.findIndex(
+      ({ el }) => el.dataset.dyadId === componentId,
+    );
+    if (index !== -1) {
+      const { overlay } = overlays[index];
+      overlay.remove();
+      overlays.splice(index, 1);
+    }
+  }
+
+  // Helper function to show/hide and populate label for a selected overlay
+  function updateSelectedOverlayLabel(item, show) {
+    const { label, el } = item;
+
+    if (!show) {
+      css(label, { display: "none" });
+      // Update positions after hiding label in case it caused layout shift
+      requestAnimationFrame(updateAllOverlayPositions);
+      return;
+    }
+
+    // Clear and populate label
+    css(label, { display: "block", background: "#7f22fe" });
+    while (label.firstChild) label.removeChild(label.firstChild);
+
+    // Add "Edit with AI" line
+    const editLine = document.createElement("div");
     const svgNS = "http://www.w3.org/2000/svg";
     const svg = document.createElementNS(svgNS, "svg");
     svg.setAttribute("width", "12");
@@ -93,41 +204,74 @@
     );
     path.setAttribute("fill", "white");
     svg.appendChild(path);
-
     editLine.appendChild(svg);
     editLine.appendChild(document.createTextNode("Edit with AI"));
     label.appendChild(editLine);
-    }
 
+    // Add component name and file
     const name = el.dataset.dyadName || "<unknown>";
     const file = (el.dataset.dyadId || "").split(":")[0];
-
     const nameEl = document.createElement("div");
     nameEl.textContent = name;
     label.appendChild(nameEl);
-
     if (file) {
       const fileEl = document.createElement("span");
       css(fileEl, { fontSize: "10px", opacity: ".8" });
-      fileEl.textContent = file;
+      fileEl.textContent = file.replace(/\\/g, "/");
       label.appendChild(fileEl);
     }
+
+    // Update positions after showing label in case it caused layout shift
+    requestAnimationFrame(updateAllOverlayPositions);
   }
 
   /* ---------- event handlers -------------------------------------------- */
   function onMouseMove(e) {
-    if (state.type !== "inspecting") return;
-
     let el = e.target;
     while (el && !el.dataset.dyadId) el = el.parentElement;
 
+    const hoveredItem = overlays.find((item) => item.el === el);
+
+    if (currentHoveredElement && currentHoveredElement !== el) {
+      const previousItem = overlays.find(
+        (item) => item.el === currentHoveredElement,
+      );
+      if (previousItem) {
+        updateSelectedOverlayLabel(previousItem, false);
+      }
+    }
+
+    currentHoveredElement = el;
+
+    // If hovering over a selected component, show its label
+    if (hoveredItem) {
+      updateSelectedOverlayLabel(hoveredItem, true);
+      if (hoverOverlay) hoverOverlay.style.display = "none";
+    }
+
+    // Handle inspecting state (component selector is active)
+    if (state.type === "inspecting") {
       if (state.element === el) return;
       state.element = el;
 
-    if (el) {
+      if (!hoveredItem && el) {
         updateOverlay(el, false);
-    } else {
+      } else if (!el) {
-      if (overlay) overlay.style.display = "none";
+        if (hoverOverlay) hoverOverlay.style.display = "none";
+      }
+    }
+  }
+
+  function onMouseLeave(e) {
+    if (!e.relatedTarget) {
+      if (hoverOverlay) {
+        hoverOverlay.style.display = "none";
+        requestAnimationFrame(updateAllOverlayPositions);
+      }
+      currentHoveredElement = null;
+      if (state.type === "inspecting") {
+        state.element = null;
+      }
     }
   }
 
@@ -136,15 +280,31 @@
     e.preventDefault();
     e.stopPropagation();
 
-    state = { type: "selected", element: state.element };
+    const selectedItem = overlays.find((item) => item.el === e.target);
+    if (selectedItem) {
+      removeOverlayById(state.element.dataset.dyadId);
+      window.parent.postMessage(
+        {
+          type: "dyad-component-deselected",
+          componentId: state.element.dataset.dyadId,
+        },
+        "*",
+      );
+      return;
+    }
+
     updateOverlay(state.element, true);
 
+    requestAnimationFrame(updateAllOverlayPositions);
+
     window.parent.postMessage(
       {
         type: "dyad-component-selected",
+        component: {
           id: state.element.dataset.dyadId,
           name: state.element.dataset.dyadName,
         },
+      },
       "*",
     );
   }
@@ -177,25 +337,25 @@
   /* ---------- activation / deactivation --------------------------------- */
   function activate() {
     if (state.type === "inactive") {
-      window.addEventListener("mousemove", onMouseMove, true);
       window.addEventListener("click", onClick, true);
     }
     state = { type: "inspecting", element: null };
-    if (overlay) {
-      overlay.style.display = "none";
-    }
   }
 
   function deactivate() {
     if (state.type === "inactive") return;
 
-    window.removeEventListener("mousemove", onMouseMove, true);
     window.removeEventListener("click", onClick, true);
-    if (overlay) {
+    // Don't clear overlays on deactivate - keep selected components visible
-      overlay.remove();
+    // Hide only the hover overlay and all labels
-      overlay = null;
+    if (hoverOverlay) {
-      label = null;
+      hoverOverlay.style.display = "none";
     }
+
+    // Hide all labels when deactivating
+    overlays.forEach((item) => updateSelectedOverlayLabel(item, false));
+    currentHoveredElement = null;
+
     state = { type: "inactive" };
   }
 
@@ -204,11 +364,25 @@
     if (e.source !== window.parent) return;
     if (e.data.type === "activate-dyad-component-selector") activate();
     if (e.data.type === "deactivate-dyad-component-selector") deactivate();
+    if (e.data.type === "clear-dyad-component-overlays") clearOverlays();
+    if (e.data.type === "remove-dyad-component-overlay") {
+      if (e.data.componentId) {
+        removeOverlayById(e.data.componentId);
+      }
+    }
   });
 
   // Always listen for keyboard shortcuts
   window.addEventListener("keydown", onKeyDown, true);
 
+  // Always listen for mouse move to show/hide labels on selected overlays
+  window.addEventListener("mousemove", onMouseMove, true);
+
+  document.addEventListener("mouseleave", onMouseLeave, true);
+
+  // Update overlay positions on window resize
+  window.addEventListener("resize", updateAllOverlayPositions);
+
   function initializeComponentSelector() {
     if (!document.body) {
       console.error(