feat(web): attach a folder from the composer's attach button on the local environment

apps/web/src/components/chat/ChatComposer.tsx

@@ -49,6 +49,7 @@ import {
 } from "@t3tools/contracts";
 import type { EnvironmentConnectionPresentation } from "@t3tools/client-runtime/connection";
 import { settlePromise, squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import * as Option from "effect/Option";
 import * as Schema from "effect/Schema";
 import { formatComposerModelMention } from "@t3tools/client-runtime/composer-model-mentions";
 import { isPasteAsTextShortcut } from "@t3tools/client-runtime/text-paste";
@@ -264,7 +265,11 @@ import { Kbd } from "../ui/kbd";
 import { useSoftwareKeyboardOpen } from "../../hooks/useSoftwareKeyboardOpen";
 import { useStableCallback } from "../../hooks/useStableCallback";
 import { usePanelAnimationSettings } from "../../panelAnimations";
-import { readEnvironmentScope, readPreparedConnection } from "../../state/session";
+import {
+  readEnvironmentScope,
+  readPreparedConnection,
+  usePreparedConnection,
+} from "../../state/session";
 import type { ReviewCommentContext } from "../../reviewCommentContext";
 import { useComposerRestingTransition } from "./useComposerRestingTransition";
 import { ComposerCommandMenuLayer } from "./ComposerCommandMenuLayer";
@@ -2668,6 +2673,41 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   };
   const insertComposerTextAtEndStable = useStableCallback(insertComposerTextAtEnd);
 
+  const readPrimaryRunsInWsl = () =>
+    window.desktopBridge
+      ?.getLocalEnvironmentBootstraps()
+      .some(
+        (bootstrap) =>
+          bootstrap.id === PRIMARY_LOCAL_ENVIRONMENT_ID &&
+          typeof bootstrap.runningDistro === "string",
+      ) === true;
+  // A synchronous IPC read on desktop; the setting only changes with a restart, so read it once.
+  const [localEnvironmentDisabledAtMount] = useState(isLocalEnvironmentDisabled);
+  // Also a synchronous IPC read; only the picker's visibility uses this snapshot, drops re-read it.
+  const [primaryRunsInWslAtMount] = useState(readPrimaryRunsInWsl);
+  const preparedConnection = usePreparedConnection(environmentId);
+  const resolveFolderTarget = () =>
+    folderDropTarget({
+      localEnvironmentDisabled: localEnvironmentDisabledAtMount,
+      environmentId,
+      primaryEnvironmentId,
+      connection: readPreparedConnection(environmentId),
+      isDesktopRenderer: window.desktopBridge !== undefined,
+      primaryRunsInWsl: readPrimaryRunsInWsl(),
+    });
+  const insertFolderPathLink = (path: string): boolean => {
+    const inserted = insertComposerTextAtEndStable(`${serializeComposerFileLink(path)} `, {
+      ensureLeadingBoundary: true,
+    });
+    if (!inserted) {
+      toastManager.add({
+        type: "error",
+        title: "Unable to add folder",
+        description: "The composer is busy; try again once it is ready.",
+      });
+    }
+    return inserted;
+  };
   const insertComposerFolders = async (
     folders: File[],
     target: FolderDropTarget,
@@ -2692,37 +2732,13 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         });
         continue;
       }
-      const inserted = insertComposerTextAtEndStable(`${serializeComposerFileLink(path)} `, {
-        ensureLeadingBoundary: true,
-      });
-      if (!inserted) {
-        toastManager.add({
-          type: "error",
-          title: "Unable to add folder",
-          description: "The composer is busy; try again once it is ready.",
-        });
-        break;
-      }
+      if (!insertFolderPathLink(path)) break;
     }
     focusComposer();
   };
 
   const addComposerFolders = (folders: File[]) => {
-    const target = folderDropTarget({
-      localEnvironmentDisabled: isLocalEnvironmentDisabled(),
-      environmentId,
-      primaryEnvironmentId,
-      connection: readPreparedConnection(environmentId),
-      isDesktopRenderer: window.desktopBridge !== undefined,
-      primaryRunsInWsl:
-        window.desktopBridge
-          ?.getLocalEnvironmentBootstraps()
-          .some(
-            (bootstrap) =>
-              bootstrap.id === PRIMARY_LOCAL_ENVIRONMENT_ID &&
-              typeof bootstrap.runningDistro === "string",
-          ) === true,
-    });
+    const target = resolveFolderTarget();
     if (target === "remote") {
       toastManager.add({
         type: "error",
@@ -2738,6 +2754,34 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     );
   };
   const addComposerFoldersStable = useStableCallback(addComposerFolders);
+  // The desktop folder dialog returns a path on this computer, so it is only offered when the
+  // thread's server shares this filesystem, the same rule as dropped folders.
+  const pickFolder = window.desktopBridge?.pickFolder;
+  // The dialog refuses to open while the local environment is off, even for a loopback server.
+  const canPickLocalFolder =
+    pickFolder !== undefined &&
+    !localEnvironmentDisabledAtMount &&
+    folderDropTarget({
+      localEnvironmentDisabled: localEnvironmentDisabledAtMount,
+      environmentId,
+      primaryEnvironmentId,
+      connection: Option.getOrNull(preparedConnection),
+      isDesktopRenderer: true,
+      primaryRunsInWsl: primaryRunsInWslAtMount,
+    }) === "local";
+  const attachLocalFolder = async () => {
+    if (!pickFolder) return;
+    let path: string | null;
+    try {
+      path = await pickFolder(gitCwd ? { initialPath: gitCwd } : undefined);
+    } catch {
+      toastManager.add({ type: "error", title: "Couldn't open the folder picker" });
+      return;
+    }
+    if (path !== null) insertFolderPathLink(path);
+    focusComposer();
+  };
+  const attachLocalFolderStable = useStableCallback(attachLocalFolder);
 
   const onComposerPaste = (event: React.ClipboardEvent<HTMLElement>) => {
     const { files, folders } = splitTransferredFiles(event.clipboardData);
@@ -3323,6 +3367,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     <ComposerAttachButton
       addComposerAttachments={addComposerAttachments}
       focusComposer={focusComposer}
+      attachFolder={canPickLocalFolder ? attachLocalFolderStable : undefined}
     />
   ) : null;
   return (

apps/web/src/components/chat/ComposerAttachButton.browser.test.tsx

@@ -0,0 +1,21 @@
+import { expect, it, vi } from "vite-plus/test";
+import { page, userEvent } from "vite-plus/test/browser";
+
+import { render } from "../../../test/render";
+import { ComposerAttachButton } from "./ComposerAttachmentStrip";
+
+it("opens the Files and Folder menu with a mouse click and picks a folder", async () => {
+  const attachFolder = vi.fn();
+  await using _screen = await render(
+    <ComposerAttachButton
+      addComposerAttachments={async () => true}
+      focusComposer={() => {}}
+      attachFolder={attachFolder}
+    />,
+  );
+
+  await userEvent.click(page.getByRole("button", { name: "Attach files or a folder" }));
+  await userEvent.click(page.getByRole("menuitem", { name: "Folder…" }));
+
+  expect(attachFolder).toHaveBeenCalledOnce();
+});

apps/web/src/components/chat/ComposerAttachmentStrip.tsx

@@ -6,7 +6,15 @@ import type {
   SnapShotSource,
 } from "@t3tools/contracts";
 import { formatAttachmentSize } from "@t3tools/client-runtime/state/attachments";
-import { CircleAlertIcon, ImageIcon, PaperclipIcon, PlayIcon, XIcon } from "lucide-react";
+import {
+  CircleAlertIcon,
+  FileIcon,
+  FolderIcon,
+  ImageIcon,
+  PaperclipIcon,
+  PlayIcon,
+  XIcon,
+} from "lucide-react";
 import { type ComponentProps, useLayoutEffect, useRef } from "react";
 
 import {
@@ -32,6 +40,7 @@ import { AttachmentFilePreview } from "../files/AttachmentFilePreview";
 import { AttachmentImage } from "../media/AttachmentImage";
 import { Button } from "../ui/button";
 import { Dialog, DialogPopup, DialogTitle } from "../ui/dialog";
+import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { ComposerImageThumbnail } from "./ComposerImageThumbnail";
 import { composerFloatingLayerProps } from "./composerEventScope";
@@ -702,11 +711,32 @@ export function ComposerQueuedAttachmentRow({
 export function ComposerAttachButton({
   addComposerAttachments,
   focusComposer,
+  attachFolder,
 }: {
   readonly addComposerAttachments: (files: File[]) => Promise<boolean>;
   readonly focusComposer: () => void;
+  /** Present when a folder can be attached; the button then opens a Files / Folder menu. */
+  readonly attachFolder?: (() => void) | undefined;
 }) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const label = attachFolder ? "Attach files or a folder" : "Attach files";
+  const triggerButton = (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label={label}
+      // Keeps editor focus for the direct picker; the menu opens on mousedown, which this would cancel.
+      {...(attachFolder
+        ? {}
+        : {
+            onPointerDown: (event: { preventDefault(): void }) => event.preventDefault(),
+            onClick: () => inputRef.current?.click(),
+          })}
+    />
+  );
+  // The clip's weight sits in its upper loop; 1px down reads as centered on the row.
+  const icon = <PaperclipIcon className="translate-y-px" />;
   return (
     <>
       <input
@@ -725,24 +755,29 @@ export function ComposerAttachButton({
           });
         }}
       />
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              onPointerDown={(event) => event.preventDefault()}
-              onClick={() => inputRef.current?.click()}
-              aria-label="Attach files"
-            />
-          }
-        >
-          {/* The clip's weight sits in its upper loop; 1px down reads as centered on the row. */}
-          <PaperclipIcon className="translate-y-px" />
-        </TooltipTrigger>
-        <TooltipPopup>Attach files</TooltipPopup>
-      </Tooltip>
+      {attachFolder ? (
+        <Menu>
+          <Tooltip>
+            <TooltipTrigger render={<MenuTrigger render={triggerButton} />}>{icon}</TooltipTrigger>
+            <TooltipPopup>{label}</TooltipPopup>
+          </Tooltip>
+          <MenuPopup align="start" {...composerFloatingLayerProps}>
+            <MenuItem onClick={() => inputRef.current?.click()}>
+              <FileIcon />
+              Files…
+            </MenuItem>
+            <MenuItem onClick={attachFolder}>
+              <FolderIcon />
+              Folder…
+            </MenuItem>
+          </MenuPopup>
+        </Menu>
+      ) : (
+        <Tooltip>
+          <TooltipTrigger render={triggerButton}>{icon}</TooltipTrigger>
+          <TooltipPopup>{label}</TooltipPopup>
+        </Tooltip>
+      )}
     </>
   );
 }

docs/user/composer.md

@@ -58,6 +58,11 @@ also send files to T3 Code through another app's system share sheet.
 On Android, you can also drag images from another app into the message input
 in split screen.
 
+In the desktop app, when the thread's environment runs on this computer, drag a
+folder onto the composer or choose **Folder…** from the attach button to add its
+path. Nothing is uploaded, so there is no size limit; the agent reads the folder
+in place.
+
 See [images and videos](#images-and-videos-in-messages) for previewing and saving media.
 
 ## Send while the agent is working