From 9ee76272da93ef73dcc049e5dc26b8ebfb8a35a4 Mon Sep 17 00:00:00 2001
From: Guilherme Lima <60904312+guilimasp@users.noreply.github.com>
Date: Thu, 13 Aug 2026 14:35:00 -0300
Subject: [PATCH] Drop files onto the chat to attach them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There is no way to hand a bot a file today: you copy the path out of
Finder by hand, or you do not send it at all. Dropping one on the window
did something worse — Electron navigated the window to the file and the
app went blank.

Dropping a file anywhere on the window now attaches it. The overlay says
so while you drag; the file becomes a chip beside any pasted text, and on
send it folds into the message as <attached-file path="…" />.

By path rather than by content, on purpose: every driver here is an agent
that can open a file itself, so a 200 MB video, a PDF, and a CSV all work
the same way, in one line of prompt, for providers that have no attachment
protocol at all. Only the preload can name a dropped file — Electron 32
removed File.path — so the bridge exposes webUtils.getPathForFile.

A drag out of a web page carries no file on disk: small text lands as a
pasted chip instead, anything else says so rather than attaching a path
that does not exist.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0197wYuWWpF21iBeNgHZ8n3X
---
 electron/preload.cjs                   |  11 +-
 src/components/Composer.tsx            |  10 +-
 src/components/ComposerAttachments.tsx | 179 +++++++++++++++++++++----
 src/lib/composer-attachments.ts        |  34 +++--
 src/types/ogb.d.ts                     |   3 +
 5 files changed, 202 insertions(+), 35 deletions(-)

diff --git a/electron/preload.cjs b/electron/preload.cjs
index 92366f935..5d4a98870 100644
--- a/electron/preload.cjs
+++ b/electron/preload.cjs
@@ -1,6 +1,6 @@
 // Renderer bridge. contextIsolation stays on; the renderer only ever sees
 // this narrow surface (window.ogb), never Node or ipcRenderer itself.
-const { contextBridge, ipcRenderer } = require("electron");
+const { contextBridge, ipcRenderer, webUtils } = require("electron");
 
 contextBridge.exposeInMainWorld("ogb", {
   /** Host platform ("darwin" | "win32" | "linux") — for platform-aware UI. */
@@ -19,6 +19,15 @@ contextBridge.exposeInMainWorld("ogb", {
     ipcRenderer.on("speech:end", handler);
     return () => ipcRenderer.removeListener("speech:end", handler);
   },
+  /** Absolute path of a dropped File — Electron 32 removed File.path, and
+   * only the preload can ask. "" when the drag carried no file on disk. */
+  getPathForFile: (file) => {
+    try {
+      return webUtils.getPathForFile(file);
+    } catch {
+      return "";
+    }
+  },
   /** {mic} TCC status strings: granted|denied|not-determined|unknown.
    * No screen field — macOS 15+ caches that status per-process, so any
    * value here would lie for the whole session after a grant. */
diff --git a/src/components/Composer.tsx b/src/components/Composer.tsx
index 3bda94207..d85be350b 100644
--- a/src/components/Composer.tsx
+++ b/src/components/Composer.tsx
@@ -47,6 +47,10 @@ export function Composer({
   // pastes too long for the input ride along as chips and fold back
   // into the message on send
   const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const addAttachments = useCallback(
+    (next: Attachment[]) => setAttachments((prev) => [...prev, ...next]),
+    [],
+  );
   const removeAttachment = useCallback(
     (id: string) => setAttachments((prev) => prev.filter((a) => a.id !== id)),
     [],
@@ -222,7 +226,11 @@ export function Composer({
             ))}
           </div>
         )}
-        <ComposerAttachments items={attachments} onRemove={removeAttachment} />
+        <ComposerAttachments
+          items={attachments}
+          onAdd={addAttachments}
+          onRemove={removeAttachment}
+        />
         <div className="flex items-end gap-2 rounded-3xl border border-hairline/40 bg-raised/60 py-2 pl-3 pr-2">
         <textarea
           ref={inputRef}
diff --git a/src/components/ComposerAttachments.tsx b/src/components/ComposerAttachments.tsx
index 31fab42a2..67027b289 100644
--- a/src/components/ComposerAttachments.tsx
+++ b/src/components/ComposerAttachments.tsx
@@ -1,55 +1,186 @@
-// Chips for what is attached to the next message, shown above the input.
-// A long paste collapses into a card of its first lines instead of
-// flooding the composer with a wall of text.
-import { ClipboardPaste, X } from "lucide-react";
+// Chips for what is attached to the next message, plus the window-wide
+// file drop that creates them. A long paste collapses into a card of its
+// first lines instead of flooding the composer; a file dropped anywhere
+// on the window attaches by path.
+import { useEffect, useRef, useState } from "react";
+import { ClipboardPaste, File as FileIcon, X } from "lucide-react";
 import { cn } from "@/lib/cn";
-import { pasteSummary, type Attachment } from "@/lib/composer-attachments";
+import {
+  fileAttachment,
+  formatSize,
+  pasteAttachment,
+  pasteSummary,
+  type Attachment,
+} from "@/lib/composer-attachments";
+
+// A drag out of a web page carries no file on disk, so there is no path to
+// attach; small text still has content worth keeping, so it lands as a paste.
+const INLINE_LIMIT = 512 * 1024;
+const isTextish = (f: File) => f.type.startsWith("text/") || f.type === "application/json";
+
+/** Electron 32 removed File.path — only the preload can name a file. */
+function pathForFile(file: File): string {
+  return window.ogb?.getPathForFile?.(file) ?? "";
+}
 
 export function ComposerAttachments({
   items,
+  onAdd,
   onRemove,
 }: {
   items: Attachment[];
+  onAdd: (attachments: Attachment[]) => void;
   onRemove: (id: string) => void;
 }) {
-  if (!items.length) return null;
+  const [dragging, setDragging] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  // dragenter/dragleave fire once per element crossed, so the overlay
+  // tracks depth rather than the last event it happened to see
+  const depth = useRef(0);
+
+  useEffect(() => {
+    const carriesFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
+
+    const onEnter = (e: DragEvent) => {
+      if (!carriesFiles(e)) return;
+      depth.current += 1;
+      setDragging(true);
+    };
+    const onLeave = (e: DragEvent) => {
+      if (!carriesFiles(e)) return;
+      depth.current = Math.max(0, depth.current - 1);
+      if (depth.current === 0) setDragging(false);
+    };
+    // without preventDefault the window navigates to the dropped file and
+    // the app is simply gone
+    const onOver = (e: DragEvent) => {
+      if (carriesFiles(e)) e.preventDefault();
+    };
+    const onDrop = (e: DragEvent) => {
+      if (!carriesFiles(e)) return;
+      e.preventDefault();
+      depth.current = 0;
+      setDragging(false);
+      const made: Attachment[] = [];
+      const pathless: string[] = [];
+      for (const f of Array.from(e.dataTransfer?.files ?? [])) {
+        const path = pathForFile(f);
+        if (path) made.push(fileAttachment(f.name, path, f.size));
+        else if (isTextish(f) && f.size <= INLINE_LIMIT) {
+          void f.text().then((t) => onAdd([pasteAttachment(t)]));
+        } else pathless.push(f.name);
+      }
+      if (made.length) onAdd(made);
+      setNotice(
+        pathless.length
+          ? `${pathless.join(", ")} — that drag carried no file on disk. Save it first, then drop it from Finder.`
+          : null,
+      );
+    };
+
+    window.addEventListener("dragenter", onEnter);
+    window.addEventListener("dragleave", onLeave);
+    window.addEventListener("dragover", onOver);
+    window.addEventListener("drop", onDrop);
+    return () => {
+      window.removeEventListener("dragenter", onEnter);
+      window.removeEventListener("dragleave", onLeave);
+      window.removeEventListener("dragover", onOver);
+      window.removeEventListener("drop", onDrop);
+    };
+  }, [onAdd]);
+
   return (
-    <div className="mb-2 flex flex-wrap gap-2">
-      {items.map((a) => (
-        <PasteChip key={a.id} item={a} onRemove={() => onRemove(a.id)} />
-      ))}
-    </div>
+    <>
+      {dragging && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-10">
+          <div className="rounded-2xl border-2 border-dashed border-accent/70 bg-panel/90 px-8 py-6 text-[14px] font-medium text-ink shadow-2xl">
+            Drop to attach — the bot gets the file path
+          </div>
+        </div>
+      )}
+
+      {notice && (
+        <div className="mb-2 flex items-start gap-2 rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-[12px] text-warning">
+          <span className="min-w-0 flex-1">{notice}</span>
+          <button
+            onClick={() => setNotice(null)}
+            aria-label="Dismiss"
+            className="shrink-0 rounded p-0.5"
+          >
+            <X size={12} />
+          </button>
+        </div>
+      )}
+
+      {items.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-2">
+          {items.map((a) =>
+            a.kind === "paste" ? (
+              <Chip
+                key={a.id}
+                label="PASTED"
+                title={a.text.slice(0, 4000)}
+                onRemove={() => onRemove(a.id)}
+              >
+                <div className="relative h-[76px] overflow-hidden">
+                  <pre className="whitespace-pre-wrap break-words font-mono text-[10.5px] leading-[1.45] text-ink-secondary">
+                    {a.text.slice(0, 400)}
+                  </pre>
+                  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-b from-transparent to-raised" />
+                </div>
+                <div className="mt-1 text-[10.5px] text-ink-secondary/70">{pasteSummary(a)}</div>
+              </Chip>
+            ) : (
+              <Chip key={a.id} label="FILE" title={a.path} onRemove={() => onRemove(a.id)}>
+                <div className="flex h-[76px] items-center gap-2">
+                  <FileIcon size={16} className="shrink-0 text-ink-secondary" />
+                  <div className="min-w-0">
+                    <div className="truncate text-[12px] text-ink">{a.name}</div>
+                    <div className="text-[10.5px] text-ink-secondary/70">{formatSize(a.size)}</div>
+                  </div>
+                </div>
+              </Chip>
+            ),
+          )}
+        </div>
+      )}
+    </>
   );
 }
 
-function PasteChip({ item, onRemove }: { item: Attachment; onRemove: () => void }) {
-  const { text } = item;
+function Chip({
+  children,
+  label,
+  title,
+  onRemove,
+}: {
+  children: React.ReactNode;
+  label: "PASTED" | "FILE";
+  title: string;
+  onRemove: () => void;
+}) {
+  const Icon = label === "PASTED" ? ClipboardPaste : FileIcon;
   return (
     <div
-      title={text.slice(0, 4000)}
+      title={title}
       className={cn(
         "group relative w-[172px] rounded-xl border border-hairline/40 bg-raised px-2.5 py-2",
         "transition-colors hover:border-hairline",
       )}
     >
-      <div className="relative h-[76px] overflow-hidden">
-        <pre className="whitespace-pre-wrap break-words font-mono text-[10.5px] leading-[1.45] text-ink-secondary">
-          {text.slice(0, 400)}
-        </pre>
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-b from-transparent to-raised" />
-      </div>
-      <div className="mt-1 text-[10.5px] text-ink-secondary/70">{pasteSummary(item)}</div>
+      {children}
       <div className="mt-1 flex items-center gap-1">
-        <ClipboardPaste size={11} className="text-ink-secondary/70" />
+        <Icon size={11} className="text-ink-secondary/70" />
         <span className="rounded border border-hairline/60 px-1 py-px text-[9.5px] font-medium tracking-wide text-ink-secondary">
-          PASTED
+          {label}
         </span>
       </div>
       {/* hover reveals it, but so must focus: `hidden` would take the only
           way to drop a chip out of reach of the keyboard */}
       <button
         onClick={onRemove}
-        aria-label="Remove pasted text"
+        aria-label={`Remove ${label === "PASTED" ? "pasted text" : "file"}`}
         className="absolute -right-1.5 -top-1.5 flex size-5 items-center justify-center rounded-full border border-hairline/60 bg-panel text-ink-secondary opacity-0 transition-opacity hover:text-ink focus-visible:opacity-100 group-hover:opacity-100"
       >
         <X size={11} />
diff --git a/src/lib/composer-attachments.ts b/src/lib/composer-attachments.ts
index c9c4a8cd2..5d07159b5 100644
--- a/src/lib/composer-attachments.ts
+++ b/src/lib/composer-attachments.ts
@@ -1,7 +1,10 @@
-// Text pasted into the composer that is too long to live in the input.
-// It rides along as a chip and folds back into the message on send —
-// nothing here reaches the server, so every driver still sees a prompt.
-export type Attachment = { kind: "paste"; id: string; text: string; size: number };
+// What is attached to the next message: a paste too long to live in the
+// input, and files dropped onto the window. Both ride along as chips and
+// fold back into the message on send — nothing here reaches the server,
+// so every driver still sees a plain prompt.
+export type Attachment =
+  | { kind: "paste"; id: string; text: string; size: number }
+  | { kind: "file"; id: string; path: string; name: string; size: number };
 
 /** Past this, a paste stops reading as typing and becomes an attachment.
  * Long-but-narrow (a stack trace, a log) counts by line, not just chars. */
@@ -16,8 +19,16 @@ export function countLines(text: string): number {
   return text.split("\n").length;
 }
 
+function newId(): string {
+  return globalThis.crypto?.randomUUID?.() ?? `a${Math.random().toString(36).slice(2)}`;
+}
+
+export function fileAttachment(name: string, path: string, size: number): Attachment {
+  return { kind: "file", id: newId(), path, name, size };
+}
+
 export function pasteAttachment(text: string): Attachment {
-  const id = globalThis.crypto?.randomUUID?.() ?? `a${Math.random().toString(36).slice(2)}`;
+  const id = newId();
   // measured once, here: a chip re-renders on every keystroke in the
   // composer, and encoding half a megabyte each time would be felt
   return { kind: "paste", id, text, size: byteLength(text) };
@@ -40,13 +51,18 @@ export function formatSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-/** The prompt the bot receives: what was typed, then one block per paste.
- * Tagged blocks rather than fences — pasted code and markdown carry fences
- * of their own, and nesting them loses the boundary. */
+/** The prompt the bot receives: what was typed, then one block per
+ * attachment. Tagged blocks rather than fences — pasted code and markdown
+ * carry fences of their own, and nesting them loses the boundary. A file
+ * needs only its path: every driver here is an agent that can open it. */
 export function composeMessage(text: string, attachments: Attachment[]): string {
   const parts = [text.trim()];
   attachments.forEach((a, i) => {
-    parts.push(`<pasted-text index="${i + 1}">\n${a.text}\n</pasted-text>`);
+    if (a.kind === "paste") {
+      parts.push(`<pasted-text index="${i + 1}">\n${a.text}\n</pasted-text>`);
+    } else {
+      parts.push(`<attached-file path="${a.path}" />`);
+    }
   });
   return parts.filter(Boolean).join("\n\n");
 }
diff --git a/src/types/ogb.d.ts b/src/types/ogb.d.ts
index 2a2f569f2..12048f281 100644
--- a/src/types/ogb.d.ts
+++ b/src/types/ogb.d.ts
@@ -12,6 +12,9 @@ declare global {
         cb: (line: { partial?: boolean; text?: string; error?: string }) => void,
       ): () => void;
       onSpeechEnd(cb: (info: { code: number | null }) => void): () => void;
+      /** Absolute path of a dropped File ("" when the drag carried no
+       * file on disk). Absent in older builds of the shell. */
+      getPathForFile?(file: File): string;
       /** {mic} TCC status: granted|denied|not-determined|unknown. Screen
        * status is deliberately absent — macOS 15+ caches it per-process,
        * so it lies for the whole session after a grant. */