@saadnvd1/agent-os 0.3.672 → 0.3.673

package/lib/attachments/types.ts

@@ -0,0 +1,8 @@
+// A file saved on this machine and attached to a message by reference: the
+// message carries these, never the bytes.
+export interface ChatFile {
+  path: string;
+  name: string;
+  size: number;
+  mediaType: string;
+}

package/lib/chat/client-send.ts

@@ -1,25 +1,29 @@
-import type { ChatImage } from "./events";
+import { resolveFiles } from "../attachments/store";
+import type { ChatFile, ChatImage } from "./events";
 import type { CompactFirst } from "./stale";
 
-// What a browser's send may carry: its text and images, and whether the
+// What a browser's send may carry: its text, images and files, and whether the
 // reader chose to compact a stale chat first. Who a message is from (`from`,
 // `peer`, `origin`) is set by the server alone, never by a client. Its own
 // id for the message is kept only in a shape no server id takes.
 export function clientSend(msg: unknown): {
   text: string;
   images?: ChatImage[];
+  files?: ChatFile[];
   compact?: CompactFirst;
   id?: string;
 } {
   const m = (msg ?? {}) as {
     text?: unknown;
     images?: unknown;
+    files?: unknown;
     compact?: unknown;
     clientId?: unknown;
   };
   return {
     text: typeof m.text === "string" ? m.text : "",
     images: Array.isArray(m.images) ? (m.images as ChatImage[]) : undefined,
+    files: resolveFiles(m.files),
     ...(m.compact === true && { compact: "yes" as const }),
     ...(isClientId(m.clientId) && { id: m.clientId }),
   };

package/lib/chat/driver.ts

@@ -6,6 +6,7 @@ import type {
   ApprovalDecision,
   ChatAccess,
   ChatCommand,
+  ChatFile,
   ChatImage,
   ChatItem,
   ChatModel,
@@ -88,7 +89,9 @@ export interface ChatConversation {
   send(
     text: string,
     images?: ChatImage[],
-    options?: { now?: boolean }
+    // `files`: saved attachments; their paths are already in `text`, and a
+    // driver may also hand some to the model directly.
+    options?: { now?: boolean; files?: ChatFile[] }
   ): string | undefined;
   // A command the driver answers itself, without starting a turn (/mcp):
   // the items to show, or null to send the text as a message.

package/lib/chat/drivers/claude.ts

@@ -1,3 +1,4 @@
+import { documentBlocks } from "../../attachments/message";
 import { sessionBaseEnv } from "../../agents/server-env";
 import { randomUUID } from "crypto";
 import {
@@ -320,6 +321,7 @@ export const claudeDriver: ChatDriver = {
               data: img.data,
             },
           })),
+          ...documentBlocks(sendOptions?.files),
           { type: "text" as const, text },
         ];
         const checkpoint = randomUUID();

package/lib/chat/events.ts

@@ -1,5 +1,8 @@
 import type { CallUsage } from "../usage/types";
 import type { SearchResult } from "./find";
+import type { ChatFile } from "../attachments/types";
+
+export type { ChatFile };
 
 /**
  * The provider-neutral shape of a chat conversation. Every driver (Claude
@@ -152,6 +155,8 @@ export type ChatItem =
       kind: "user";
       text: string;
       images?: ChatImage[];
+      // Saved in the session's attachments folder, by reference.
+      files?: ChatFile[];
       // Who sent it through the agent bus, when not typed here.
       from?: string;
       // Sent by another agent session: shown as its body, while the agent
@@ -282,6 +287,7 @@ export interface QueuedMessage {
   id: string;
   text: string;
   imageCount?: number;
+  fileCount?: number;
   createdAt: number;
 }
 
@@ -413,7 +419,13 @@ export type ChatServerMessage =
 // What a browser sends.
 export type ChatClientMessage =
   // `clientId` (`user-c-…`) becomes the message's id: a resend is a no-op.
-  | { type: "send"; text: string; images?: ChatImage[]; clientId?: string }
+  | {
+      type: "send";
+      text: string;
+      images?: ChatImage[];
+      files?: ChatFile[];
+      clientId?: string;
+    }
   | { type: "queue_edit"; id: string; text: string }
   | { type: "queue_move"; id: string; by: -1 | 1 }
   | { type: "queue_delete"; id: string }

package/lib/chat/pending.ts

@@ -1,4 +1,4 @@
-import type { ChatImage, ChatState } from "./events";
+import type { ChatFile, ChatImage, ChatState } from "./events";
 
 // A message the composer sent that isn't in the chat or its queue yet. It
 // shows as a bubble at once, and stays (as failed, with Retry) if it never
@@ -7,6 +7,7 @@ export interface PendingSend {
   id: string;
   text: string;
   images?: ChatImage[];
+  files?: ChatFile[];
   compact?: boolean;
   // "sending": not taken in yet. "accepted": the server has it and is
   // starting the agent.

package/lib/chat/queued.ts

@@ -1,6 +1,6 @@
 import { db } from "../db";
 import { HELD_SQL } from "./hold";
-import type { ChatImage, QueuedMessage, SentBy } from "./events";
+import type { ChatFile, ChatImage, QueuedMessage, SentBy } from "./events";
 
 // Messages written while a turn runs, kept in SQLite so a reload or a
 // restart never loses them. The worker sends them in order when the turn
@@ -15,6 +15,7 @@ interface Row {
   id: string;
   text: string;
   images: string | null;
+  files: string | null;
   sent_by: string | null;
   created_at: number;
 }
@@ -25,19 +26,21 @@ export function listQueue(sessionId: string): QueuedMessage[] {
   return (
     db
       .prepare(
-        `SELECT id, text, image_count, created_at
+        `SELECT id, text, image_count, files, created_at
          FROM chat_queue WHERE session_id = ? ORDER BY position, created_at`
       )
       .all(sessionId) as {
       id: string;
       text: string;
       image_count: number;
+      files: string | null;
       created_at: number;
     }[]
   ).map((r) => ({
     id: r.id,
     text: r.text,
     imageCount: r.image_count || undefined,
+    fileCount: r.files ? (JSON.parse(r.files) as unknown[]).length : undefined,
     createdAt: r.created_at,
   }));
 }
@@ -45,7 +48,12 @@ export function listQueue(sessionId: string): QueuedMessage[] {
 // At the back. A retried send with the same id is only queued once.
 export function enqueue(
   sessionId: string,
-  m: { id: string; text: string; images?: ChatImage[] } & SentBy
+  m: {
+    id: string;
+    text: string;
+    images?: ChatImage[];
+    files?: ChatFile[];
+  } & SentBy
 ): void {
   const images = m.images?.length ? JSON.stringify(m.images) : null;
   const sentBy: SentBy = { from: m.from, peer: m.peer, origin: m.origin };
@@ -59,8 +67,8 @@ export function enqueue(
   if (n >= MAX_QUEUED)
     throw new Error(`The queue is full (${MAX_QUEUED} messages)`);
   db.prepare(
-    `INSERT OR IGNORE INTO chat_queue (id, session_id, position, text, images, image_count, sent_by, created_at)
-     VALUES (?, ?, (SELECT COALESCE(MAX(position), 0) + 1 FROM chat_queue WHERE session_id = ?), ?, ?, ?, ?, ?)`
+    `INSERT OR IGNORE INTO chat_queue (id, session_id, position, text, images, image_count, files, sent_by, created_at)
+     VALUES (?, ?, (SELECT COALESCE(MAX(position), 0) + 1 FROM chat_queue WHERE session_id = ?), ?, ?, ?, ?, ?, ?)`
   ).run(
     m.id,
     sessionId,
@@ -68,6 +76,7 @@ export function enqueue(
     m.text,
     images,
     m.images?.length ?? 0,
+    m.files?.length ? JSON.stringify(m.files) : null,
     m.from || m.peer || m.origin ? JSON.stringify(sentBy) : null,
     Date.now()
   );
@@ -80,13 +89,20 @@ export function claimNext(
   sessionId: string,
   // That message only, if it's still there.
   id?: string
-): ({ id: string; text: string; images?: ChatImage[] } & SentBy) | null {
+):
+  | ({
+      id: string;
+      text: string;
+      images?: ChatImage[];
+      files?: ChatFile[];
+    } & SentBy)
+  | null {
   const row = db
     .prepare(
       `DELETE FROM chat_queue WHERE session_id = @sid AND NOT ${HELD_SQL} AND id = (
          SELECT id FROM chat_queue WHERE session_id = @sid AND (@id IS NULL OR id = @id)
          ORDER BY position, created_at LIMIT 1
-       ) RETURNING id, text, images, sent_by, created_at`
+       ) RETURNING id, text, images, files, sent_by, created_at`
     )
     .get({ sid: sessionId, id: id ?? null }) as Row | undefined;
   if (!row) return null;
@@ -94,6 +110,7 @@ export function claimNext(
     id: row.id,
     text: row.text,
     images: row.images ? (JSON.parse(row.images) as ChatImage[]) : undefined,
+    files: row.files ? (JSON.parse(row.files) as ChatFile[]) : undefined,
     ...(row.sent_by ? (JSON.parse(row.sent_by) as SentBy) : {}),
   };
 }

package/lib/chat/runner.ts

@@ -19,6 +19,7 @@ import type { CompactFirst } from "./stale";
 import type {
   ApprovalDecision,
   ChatContext,
+  ChatFile,
   ChatImage,
   ChatServerMessage,
   ChatState,
@@ -405,7 +406,12 @@ function refuseAway(sessionId: string): void {
 // started): the message waits in the queue instead of starting a turn.
 function queuedIfHeld(
   sessionId: string,
-  m: { id: string; text: string; images?: ChatImage[] } & SentBy
+  m: {
+    id: string;
+    text: string;
+    images?: ChatImage[];
+    files?: ChatFile[];
+  } & SentBy
 ): boolean {
   refuseAway(sessionId);
   if (!chatHold(sessionId)) return false;
@@ -429,6 +435,7 @@ export async function sendChat(
   input: {
     text: string;
     images?: ChatImage[];
+    files?: ChatFile[];
     // Typed in the composer: waits in the queue while a turn runs.
     queue?: boolean;
     // Compact a stale chat first (lib/chat/stale).
@@ -438,7 +445,7 @@ export async function sendChat(
   } & SentBy
 ): Promise<void> {
   const text = input.text.trim();
-  if (!text && !input.images?.length) return;
+  if (!text && !input.images?.length && !input.files?.length) return;
   if (input.id && taken(sessionId, input.id)) return;
   refuseAway(sessionId);
   const id = input.id ?? `user-${Date.now()}-${randomUUID().slice(0, 5)}`;
@@ -449,6 +456,7 @@ export async function sendChat(
       id,
       text,
       images: input.images,
+      files: input.files,
       ...sentBy(input),
     });
     emitQueue(sessionId);
@@ -463,6 +471,7 @@ export async function sendChat(
     id,
     text,
     images: input.images,
+    files: input.files,
     ...sentBy(input),
     queue: input.queue,
     compact: input.compact,

package/lib/chat/worker/host.ts

@@ -10,10 +10,12 @@ import { agentEnv } from "../../agents/launch";
 import { sessionRunningBrief } from "../../project-config/session";
 import { BUS_BRIEF } from "../../agents/brief";
 import { resolveModelForAgent } from "../../model-catalog";
+import { agentText } from "../../attachments/message";
 import { chatDriverFor } from "../drivers";
 import type { ChatConversation } from "../driver";
 import type {
   ChatContext,
+  ChatFile,
   ChatImage,
   ChatItem,
   ChatState,
@@ -560,6 +562,7 @@ export class ChatHost {
       id: string;
       text: string;
       images?: ChatImage[];
+      files?: ChatFile[];
     } & SentBy,
     now = false
   ): void {
@@ -577,7 +580,7 @@ export class ChatHost {
     if (now) this.nowPending++;
     this.stopping = null;
     const note = this.refreshedNote ?? (this.restartedNote && RESTARTED_NOTE);
-    const text = note ? `${note}\n\n${m.text}` : m.text;
+    const text = agentText(note ? `${note}\n\n${m.text}` : m.text, m.files);
     if (this.refreshedNote) {
       this.refreshedNote = null;
       db.prepare(`UPDATE sessions SET chat_refreshed = 0 WHERE id = ?`).run(
@@ -592,13 +595,14 @@ export class ChatHost {
     }
     if (/^\/compact\b/.test(m.text.trimStart())) this.setCompacting(true);
     const checkpoint = now
-      ? this.conversation.send(text, m.images, { now })
-      : this.conversation.send(text, m.images);
+      ? this.conversation.send(text, m.images, { now, files: m.files })
+      : this.conversation.send(text, m.images, { files: m.files });
     const user: ChatItem = {
       id: m.id,
       kind: "user",
       text: m.text,
       images: m.images,
+      files: m.files,
       from: m.from,
       peer: m.peer,
       origin: m.origin,

package/lib/chat/worker/protocol.ts

@@ -9,6 +9,7 @@ import path from "path";
 import type {
   ApprovalDecision,
   ChatAccess,
+  ChatFile,
   ChatImage,
   ChatItem,
   ChatState,
@@ -32,6 +33,7 @@ export type WorkerCommand =
       id: string;
       text: string;
       images?: ChatImage[];
+      files?: ChatFile[];
       from?: string;
       peer?: PeerMessage;
       origin?: ChatOrigin;

package/lib/config/client-config-types.ts

@@ -28,10 +28,23 @@ export interface ClientConfig {
   runTriggers: Record<string, string>;
   features: ClientFeatures;
   intake: IntakeLimits;
-  attachments: { max: number };
+  attachments: AttachmentConfig;
   voice: VoiceLimits;
 }
 
+// What a chat accepts, served from lib/attachments/policy.ts. Sizes in bytes.
+export interface AttachmentConfig {
+  max: number;
+  maxBytes: number;
+  maxImageBytes: number;
+  pdfInlineBytes: number;
+  types: {
+    ext: string;
+    mediaType: string;
+    kind: "image" | "pdf" | "sheet" | "doc" | "text";
+  }[];
+}
+
 // Server kill switches for the phone's new sends.
 export interface ClientFeatures {
   shakeToReport: boolean;
@@ -66,8 +79,6 @@ export const INTAKE_LIMITS: IntakeLimits = {
   logMaxLines: 200,
 };
 
-export const ATTACHMENT_LIMITS = { max: 8 };
-
 export const VOICE_LIMITS: VoiceLimits = {
   maxPhrases: 100,
   holdMinMs: 250,

package/lib/config/client-config.ts

@@ -1,3 +1,4 @@
+import { ATTACHMENT_LIMITS } from "../attachments/policy";
 import { ACCESS_LEVELS, DEFAULT_NEW_CHAT_ACCESS } from "../chat/access-levels";
 import { CHAT_ACCESS } from "../chat/events";
 import {
@@ -7,7 +8,6 @@ import {
 import { TASK_STATE_LABELS } from "../tasks/state-labels";
 import { cachedCheck } from "../updates/check";
 import {
-  ATTACHMENT_LIMITS,
   CLIENT_CONFIG_VERSION,
   INTAKE_LIMITS,
   VOICE_LIMITS,

package/lib/db/migrations/20261019T1200_chat_queue_files.ts

@@ -0,0 +1,14 @@
+import type { Migration } from "../migration-types";
+
+export default {
+  key: "20261019T1200_chat_queue_files",
+  up: (db) => {
+    // Files attached to a queued message, as a JSON list of references to
+    // the session's attachments folder (never the bytes).
+    const cols = db.prepare(`PRAGMA table_info(chat_queue)`).all() as {
+      name: string;
+    }[];
+    if (!cols.some((c) => c.name === "files"))
+      db.exec(`ALTER TABLE chat_queue ADD COLUMN files TEXT`);
+  },
+} satisfies Migration;

package/lib/file-upload.ts

@@ -1,34 +1,68 @@
-/**
- * Upload a file to temporary storage and return its path.
- * Converts the file to base64 and POSTs to /api/files/upload-temp.
- *
- * @param file - The file to upload
- * @returns The path to the uploaded file, or null if upload failed
- */
-export async function uploadFileToTemp(file: File): Promise<string | null> {
-  const buffer = await file.arrayBuffer();
-  const base64 = btoa(
-    new Uint8Array(buffer).reduce(
-      (data, byte) => data + String.fromCharCode(byte),
-      ""
-    )
-  );
+import type { AttachmentKind } from "./attachments/policy";
+import type { ChatFile } from "./attachments/types";
 
-  const res = await fetch("/api/files/upload-temp", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      filename: file.name || `file-${Date.now()}`,
-      base64,
-      mimeType: file.type || "application/octet-stream",
-    }),
+export type UploadResult =
+  | { ok: true; file: ChatFile; kind: AttachmentKind }
+  | { ok: false; error: string };
+
+function toBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result).split(",")[1] ?? "");
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
   });
+}
 
-  const data = await res.json();
-  if (data.path) {
-    return data.path;
+/**
+ * Upload a file through /api/files/upload-temp. With a `sessionId` (or
+ * "draft") the server checks it against its attachment limits and keeps it in
+ * that session's attachments folder; without one it goes to temp storage.
+ * The error is the server's own message, ready to show.
+ */
+export async function uploadFile(
+  file: File,
+  sessionId?: string
+): Promise<UploadResult> {
+  try {
+    const res = await fetch("/api/files/upload-temp", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        filename: file.name || `file-${Date.now()}`,
+        base64: await toBase64(file),
+        mimeType: file.type || "application/octet-stream",
+        sessionId,
+      }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (res.ok && data.path)
+      return {
+        ok: true,
+        kind: data.kind,
+        file: {
+          path: data.path,
+          name: data.name,
+          size: data.size,
+          mediaType: data.mediaType,
+        },
+      };
+    return {
+      ok: false,
+      error: data.error ?? `Couldn't upload ${file.name} (${res.status})`,
+    };
+  } catch {
+    return { ok: false, error: `Couldn't upload ${file.name}` };
   }
+}
 
-  console.error("Upload failed:", data.error);
+/** The saved path, or null when the upload failed (terminal and picker). */
+export async function uploadFileToTemp(
+  file: File,
+  sessionId?: string
+): Promise<string | null> {
+  const r = await uploadFile(file, sessionId);
+  if (r.ok) return r.file.path;
+  console.error("Upload failed:", r.error);
   return null;
 }

package/lib/intake/intake.ts

@@ -8,6 +8,7 @@ import { getWorkspace } from "../workspaces";
 import { INTAKE_LIMITS, MAX_INLINE_IMAGE_BYTES } from "./limits";
 import { buildIntakeMessage, type IntakeMeta } from "./message";
 import { sniff } from "./sniff";
+import { safeName } from "../attachments/store";
 
 export class IntakeError extends Error {
   constructor(
@@ -39,23 +40,7 @@ const day = (t: number) => new Date(t).toISOString().slice(0, 10);
 const workspaceRoot = (workspaceId: string) =>
   path.join(dataRoot(), "intake", segment(workspaceId));
 
-/** A phone's filename as one safe path segment. */
-export function safeName(name: string, taken: Set<string>, n: number): string {
-  let base = path.basename(name.replace(/\\/g, "/"));
-  base = base
-    .replace(/[^a-zA-Z0-9.-]/g, "_")
-    .replace(/^\.+/, "")
-    .slice(0, 80);
-  if (!base) base = `file-${n}`;
-  let out = base;
-  for (let i = 2; taken.has(out); i++) {
-    const dot = base.lastIndexOf(".");
-    out =
-      dot > 0 ? `${base.slice(0, dot)}-${i}${base.slice(dot)}` : `${base}-${i}`;
-  }
-  taken.add(out);
-  return out;
-}
+export { safeName };
 
 function checkMeta(meta: IntakeMeta) {
   if (!meta || typeof meta !== "object") throw new IntakeError(400, "Bad meta");

package/lib/intake/sniff.ts

@@ -9,7 +9,7 @@ const BLOCKED_NAME =
 const starts = (b: Buffer, sig: number[], at = 0) =>
   sig.every((v, i) => b[at + i] === v);
 
-function isText(b: Buffer): boolean {
+export function isText(b: Buffer): boolean {
   const head = b.subarray(0, 8192);
   if (head.includes(0)) return false;
   try {

package/lib/sessions/launch.ts

@@ -10,7 +10,7 @@ import os from "os";
 import { randomUUID } from "crypto";
 import { db, queries, type Session } from "../db";
 import type { AgentType } from "../providers";
-import type { ChatAccess, ChatImage } from "../chat/events";
+import type { ChatAccess, ChatFile, ChatImage } from "../chat/events";
 import { resolveModelForAgent } from "../model-catalog";
 import { parseOverride, resolveRole, setSessionModel } from "../models/resolve";
 import { ANTHROPIC } from "../models/roles";
@@ -69,6 +69,7 @@ export interface LaunchInput {
   // The first message.
   prompt?: string | null;
   images?: ChatImage[];
+  files?: ChatFile[];
   name?: string | null;
   view?: "chat" | "terminal";
   parentSessionId?: string | null;
@@ -103,9 +104,14 @@ function firstMessage(projectPrompt: string | null | undefined, text: string) {
 }
 
 // Waits in the queue, so neither a restart nor a slow setup loses it.
-function queueFirst(sessionId: string, text: string, images?: ChatImage[]) {
+function queueFirst(
+  sessionId: string,
+  text: string,
+  images?: ChatImage[],
+  files?: ChatFile[]
+) {
   const id = `user-${Date.now()}-${randomUUID().slice(0, 5)}`;
-  enqueue(sessionId, { id, text, images });
+  enqueue(sessionId, { id, text, images, files });
   return id;
 }
 
@@ -201,8 +207,8 @@ async function launch(input: LaunchInput, id: string): Promise<Launched> {
   // A linked machine's AgentOS starts it there; it is mirrored here.
   const link = remote ? hostLink(runOn) : null;
   if (link) {
-    if (input.images?.length)
-      throw new Error(`Images can't be sent to ${link.hostName} yet`);
+    if (input.images?.length || input.files?.length)
+      throw new Error(`Images and files can't be sent to ${link.hostName} yet`);
     return startOnPeer(link, {
       id,
       project: scratch ? null : (project ?? null),
@@ -305,7 +311,7 @@ async function launch(input: LaunchInput, id: string): Promise<Launched> {
       : "";
   const chatFirst =
     view === "chat" && message
-      ? queueFirst(id, message, input.images)
+      ? queueFirst(id, message, input.images, input.files)
       : undefined;
 
   if (useWorktree) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.672",
+  "version": "0.3.673",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"

package/components/Chat/composer/useImageDrop.ts

@@ -1,52 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import type { ChatImage } from "@/lib/chat/events";
-import { isImage } from "./paste";
-
-function readImage(file: File): Promise<ChatImage> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const [meta, data] = String(reader.result).split(",");
-      resolve({ mediaType: meta.slice(5, meta.indexOf(";")), data });
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-}
-
-const carriesFiles = (e: React.DragEvent) =>
-  [...e.dataTransfer.types].includes("Files");
-
-// Images picked, pasted or dropped onto the composer, and the outline
-// shown while something is dragged over it.
-export function useImageDrop(onImages: (images: ChatImage[]) => void) {
-  const [dragging, setDragging] = useState(false);
-
-  const addFiles = async (picked: Iterable<File>) => {
-    const read = await Promise.all([...picked].filter(isImage).map(readImage));
-    if (read.length) onImages(read);
-  };
-
-  const dropProps = {
-    onDragOver: (e: React.DragEvent) => {
-      if (!carriesFiles(e)) return;
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "copy";
-      setDragging(true);
-    },
-    onDragLeave: (e: React.DragEvent) => {
-      if (!e.currentTarget.contains(e.relatedTarget as Node | null))
-        setDragging(false);
-    },
-    onDrop: (e: React.DragEvent) => {
-      if (!carriesFiles(e)) return;
-      e.preventDefault();
-      setDragging(false);
-      void addFiles(e.dataTransfer.files);
-    },
-  };
-
-  return { dragging, dropProps, addFiles };
-}