feat: multi-component-selector (#1728)

e2e-tests/helpers/test_helper.ts

@@ -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 } = {}) {

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: Edit with AI h1 src/pages/Index.tsx
\ No newline at end of file
+- text: h1 src/pages/Index.tsx
\ No newline at end of file

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

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

+- 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
\ No newline at end of file

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

+- 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
\ No newline at end of file

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

+- text: Selected Components (1)
+- button "Clear all"
+- img
+- text: a src/components/made-with-dyad.tsx:4
+- button "Deselect component":
+  - img
\ No newline at end of file

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: Edit with AI h1 src/pages/Index.tsx
\ No newline at end of file
+- text: h1 src/pages/Index.tsx
\ No newline at end of file

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

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

-- text: Edit with AI h1 src/app/page.tsx
\ No newline at end of file
+- 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
\ No newline at end of file

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

+- 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
\ No newline at end of file

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

+- 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
\ No newline at end of file

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

+===
+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"
+```
\ No newline at end of file

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

+- 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
\ No newline at end of file

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

+- 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/
\ No newline at end of file

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

 import { ComponentSelection } from "@/ipc/ipc_types";
 import { atom } from "jotai";
 
-export const selectedComponentPreviewAtom = atom<ComponentSelection | null>(
-  null,
-);
+export const selectedComponentsPreviewAtom = atom<ComponentSelection[]>([]);
+
+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 { SelectedComponentDisplay } from "./SelectedComponentDisplay";
+import {
+  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(
-    selectedComponentPreviewAtom,
+  const [selectedComponents, setSelectedComponents] = useAtom(
+    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

-import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
-import { useAtom } from "jotai";
+import {
+  selectedComponentsPreviewAtom,
+  previewIframeRefAtom,
+} from "@/atoms/previewAtoms";
+import { useAtom, useAtomValue } from "jotai";
 import { Code2, X } from "lucide-react";
 
-export function SelectedComponentDisplay() {
-  const [selectedComponent, setSelectedComponent] = useAtom(
-    selectedComponentPreviewAtom,
+export function SelectedComponentsDisplay() {
+  const [selectedComponents, setSelectedComponents] = useAtom(
+    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(
-    selectedComponentPreviewAtom,
+  const [selectedComponentsPreview, setSelectedComponentsPreview] = useAtom(
+    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(
-              getDyadAppPath(chat.app.path),
-              req.selectedComponent.relativePath,
-            ),
+              path.join(getDyadAppPath(chat.app.path), component.relativePath),
               "utf8",
             );
-          const lines = componentFileContent.split("\n");
-          const selectedIndex = req.selectedComponent.lineNumber - 1;
+            const lines = componentFileContent.split(/\r?\n/);
+            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: [
-                  {
-                    globPath: req.selectedComponent.relativePath,
-                  },
-                ],
+                contextPaths: req.selectedComponents.map((component) => ({
+                  globPath: component.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 {