/** * @file promptAttach.ts * @description What a prompt box can attach besides a fresh upload: a project * file or folder dragged from the Files panel (`ATTACH_MIME`, read back by * `PromptEditor`'s drop) or from a Chat pane's activity panel * (`dragAttachments`, `dragSkill`: a skill becomes the prompt's `/command`) and the files uploaded through a prompt box in the * last day (`recentUploads`, kept in this browser), and `claudeMention`, the * `@` form a file is handed to `claude` in, and what a browser on the * dashboard's own machine attaches by path instead of uploading * (`localCandidates` — a drag's uri-list, or the plain-text paths a pasted * file-manager copy carries —, checked by the server in `sameFilesHere` — * `POST /api/run/local-paths` —, `localAttachment`), and the pasted or * dropped files that machine's file manager holds (`fileManagerPaths`). An * attachment is a path sent with the prompt; those checks are the calls here * to the server. * @author Nguyễn Ngọc Trí Vĩ */ import type { DragEvent } from "react"; import { api } from "./api"; /** One attachment, shaped like `PromptImage`: what is sent, and its label. */ export interface Attachment { path: string; name: string; url?: string; } export const ATTACH_MIME = "application/x-agenthub-attach"; /** A project path (relative to the box's folder) as Claude Code's `@` mention. */ export function projectAttachment(rel: string): Attachment { const name = rel.replace(/\/$/, "").split("/").pop() || rel; return { path: `@${rel}`, name: rel.endsWith("/") ? `${name}/` : name }; } /** Start a drag carrying `rel` (a Files panel row) to a prompt box; plain * text too, so a drop elsewhere (a terminal, an editor) gets the path. A row * under a `data-drag-root` (an extra folder's section) lies outside the * pane's folder, so it carries its absolute path instead. */ export function dragProjectPath(e: DragEvent, rel: string) { const root = (e.currentTarget as HTMLElement | null)?.closest?.("[data-drag-root]") ?.dataset.dragRoot; const path = root ? `${root.replace(/[\\/]+$/, "")}/${rel}` : rel; e.dataTransfer.setData(ATTACH_MIME, JSON.stringify(projectAttachment(path))); e.dataTransfer.setData("text/plain", path); e.dataTransfer.effectAllowed = "copy"; } /** Start a drag carrying attachments as they are (an activity panel's files, * already absolute); plain text too, like `dragProjectPath`. */ export function dragAttachments(e: DragEvent, items: Attachment[]) { e.dataTransfer.setData(ATTACH_MIME, JSON.stringify(items)); e.dataTransfer.setData("text/plain", items.map((a) => a.path.replace(/^@/, "")).join(" ")); e.dataTransfer.effectAllowed = "copy"; } /** The attachments a drop carries, if they are ours: one, or a list. */ export function droppedAttachments(dt: DataTransfer | null | undefined): Attachment[] { try { const v: unknown = JSON.parse(dt?.getData(ATTACH_MIME) || "null"); return (Array.isArray(v) ? v : [v]) .filter( (a): a is Attachment => !!a && typeof (a as Attachment).path === "string" && typeof (a as Attachment).name === "string" ) .map((a) => ({ path: a.path, name: a.name })); } catch { return []; } } /** Whether this browser reaches the dashboard by a loopback address — a * hint only: an SSH tunnel's browser does too, from another machine, so a * dropped path is used only once `sameFilesHere` has checked it. */ export function isLocalBrowser(): boolean { return /^(localhost|127(\.\d{1,3}){3}|\[::1\])$/.test(window.location.hostname); } /** The `file://` paths a drop or paste carries beside its `files`, when this * may be a browser on the dashboard's machine — read now: a DataTransfer is * empty once its event is over. Null when there is nothing to check. */ export function localCandidates( dt: DataTransfer | null | undefined, files: File[] ): string[] | null { if (!isLocalBrowser()) return null; const paths = droppedFilePaths(dt); if (paths) return paths.length === files.length ? paths : null; // A PASTE of a file manager's copy has no uri-list: Chrome hands over the // files and the paths as plain text only. Kept only when the names match // the files one for one — `sameFilesHere` then checks the sizes. const copied = textFilePaths(dt); if (!copied || copied.length !== files.length) return null; const base = (p: string) => p.split(/[\\/]/).pop() ?? ""; const want = files.map((f) => f.name).sort(); const have = copied.map(base).sort(); return have.every((n, i) => n === want[i]) ? copied : null; } /** A paste's plain text as absolute paths — every non-empty line a `file://` * URI or an absolute path (a file manager's copy) — else null. */ function textFilePaths(dt: DataTransfer | null | undefined): string[] | null { let lines: string[]; try { lines = (dt?.getData("text/plain") ?? "") .split(/\r?\n/) .map((l) => l.trim()) .filter(Boolean); } catch { return null; } if (lines.length === 0) return null; if (lines.every((l) => l.startsWith("file://"))) { return droppedFilePaths({ getData: () => lines.join("\n") } as unknown as DataTransfer); } return lines.every((l) => /^(\/|[A-Za-z]:[\\/])/.test(l)) ? lines : null; } /** The `file://` paths a paste carries as text with no file beside it — a * file manager's copy, as some browsers paste it — or null: its uri-list, * else its plain text when every line is one. Plain absolute paths are NOT * taken here: with no file to compare against, they are text to paste. */ export function copiedFilePaths(dt: DataTransfer | null | undefined): string[] | null { const uris = droppedFilePaths(dt); if (uris) return uris; const text = dt?.getData("text/plain") ?? ""; if (!/^file:\/\//.test(text.trim())) return null; return textFilePaths(dt); } /** Whether `paths` are the dropped `files` as the dashboard's machine sees * them: every one a regular file there, and the sizes the same. Anything * else (an SSH tunnel's laptop paths, server mode, an error) is false, and * the caller uploads the bytes as before. */ export async function sameFilesHere(paths: string[], files: File[]): Promise { try { const { sizes } = await api.run.localPaths(paths); const want = files.map((f) => f.size).sort((a, b) => a - b); const have = sizes.slice().sort((a, b) => (a ?? -1) - (b ?? -1)); return have.length === want.length && have.every((s, i) => s === want[i]); } catch { return false; } } /** A pasted BITMAP (a screenshot), not a copied image FILE: browsers name the * clipboard's picture `image.png`, while a file manager's copy keeps its own * name. Only a bitmap goes to `claude`'s own image paste — a copied file is * pasted by its path, as a native terminal does (`claude` finds no picture * on a clipboard that holds a file) — and a bitmap that comes WITH text (a * spreadsheet's cells, a page's selection) is the text's picture: a * terminal pastes the text. */ export function isClipboardBitmap(f: File): boolean { return f.type.startsWith("image/") && f.name === "image.png"; } /** The pasted or dropped `files` by their own paths on the dashboard's * machine, as its file manager holds them — a paste on its OS clipboard, a * drop as its selection, which is what a drag from it carries * (`POST /api/run/clipboard-files` / `selected-files`): a native terminal's * paths, and the one way past the upload limit. Null when this is not a * loopback browser, on a refusal (server mode), or when any file is not * held under the same name and size (an SSH tunnel's browser pastes * ANOTHER machine's files). Paths come back in `files`' order. */ export async function fileManagerPaths( files: File[], from: "paste" | "drop" ): Promise { if (!isLocalBrowser() || files.length === 0) return null; try { const { files: held } = await (from === "paste" ? api.run.clipboardFiles() : api.run.selectedFiles()); const base = (p: string) => p .replace(/[\\/]+$/, "") .split(/[\\/]/) .pop() ?? ""; const left = [...held]; const paths: string[] = []; for (const f of files) { const i = left.findIndex((h) => base(h.path) === f.name && (h.dir || h.size === f.size)); if (i < 0) return null; paths.push(left[i]!.path.replace(/(.)[\\/]+$/, "$1")); left.splice(i, 1); } return paths; } catch { return null; } } /** The local files a drop or a paste names as `file://` URIs (a file * manager's, an editor's), as absolute paths — or null when it names none, * or anything that is not one. `file:///C:/x` is `C:/x`. */ export function droppedFilePaths(dt: DataTransfer | null | undefined): string[] | null { try { const paths = (dt?.getData("text/uri-list") ?? "") .split(/\r?\n/) .filter((l) => l && !l.startsWith("#")) .map((l) => { try { const u = new URL(l.trim()); if (u.protocol !== "file:" || (u.host && u.host !== "localhost")) return null; return decodeURIComponent(u.pathname).replace(/^\/([A-Za-z]:\/)/, "$1"); } catch { return null; } }); return paths.length && paths.every(Boolean) ? (paths as string[]) : null; } catch { return null; } } /** A file on this machine, by its absolute path, as an attachment. */ export function localAttachment(path: string): Attachment { // A Windows path in `/` form, like `claudeMention` (Windows takes either). const p = /^[A-Za-z]:\\/.test(path) ? path.replace(/\\/g, "/") : path; return { // A space would end the mention: Claude Code reads `@"…"` whole. path: /\s/.test(p) ? `@"${p}"` : `@${p}`, name: path .replace(/[\\/]$/, "") .split(/[\\/]/) .pop() || path, }; } /** A drop that carries no file and none of ours, only text — a file manager * or an editor (VS Code) that hands over `file://` URIs, a selection, a * link: the local `file://` URIs as `@path` attachments, else the text to * insert, as a terminal pastes it. */ export function droppedText( dt: DataTransfer | null | undefined ): { attachments: Attachment[] } | { text: string } | null { try { const paths = droppedFilePaths(dt); if (paths) return { attachments: paths.map(localAttachment) }; const text = dt?.getData("text/plain") ?? ""; return text.trim() ? { text } : null; } catch { return null; } } /** An attached file as Claude Code's `@` mention, which `claude` reads at * submit — an image as an image — whether it came on the command line or in * a paste. A bare pasted PATH becomes `[Image #n]` only when the TUI catches * the paste on its own and finishes before Enter: on Windows (psmux) it * stayed a plain `C:\…\drops\…png` in the prompt, and on the command line * a path is never an image at all. A Windows path's backslashes become `/` * (Windows takes either); a path with a space is quoted. */ export function claudeMention(path: string): string { if (path.startsWith("@")) return path; const p = /^[A-Za-z]:\\/.test(path) ? path.replace(/\\/g, "/") : path; return /\s/.test(p) ? `@"${p}"` : `@${p}`; } const IMAGE_PATH = /\.(png|jpe?g|gif|webp)$/i; /** What a terminal pastes for files dropped or pasted on a `claude` pane, one * paste per entry, as a local terminal hands them over: the images as their * bare paths, each a paste of its own — the shape Claude Code turns into * `[Image #n]`, as it does a native drop — and every other file as an `@` * mention, together in one. A Windows path, or * one with a space, stays a mention — the bare path stayed plain text there * (see `claudeMention`). */ export function claudePastes(paths: string[]): string[] { const bare = (p: string) => IMAGE_PATH.test(p) && p.startsWith("/") && !/\s/.test(p); const images = paths.filter(bare); const others = paths.filter((p) => !bare(p)).map(claudeMention); return [...images, others.join(" ")].filter(Boolean); } export const SKILL_MIME = "application/x-agenthub-skill"; // A skill's name as Claude Code types it: `name` or `plugin:name`. const SKILL_RE = /^[\w.-]+(?::[\w.-]+)?$/; /** Start a drag carrying a skill; dropped on a prompt box it becomes `/name`. */ export function dragSkill(e: DragEvent, name: string) { e.dataTransfer.setData(SKILL_MIME, name); e.dataTransfer.setData("text/plain", `/${name}`); e.dataTransfer.effectAllowed = "copy"; } /** The skill a drop carries, if it is one of ours. */ export function droppedSkill(dt: DataTransfer | null | undefined): string | null { try { const name = dt?.getData(SKILL_MIME) ?? ""; return SKILL_RE.test(name) ? name : null; } catch { return null; } } /** `prev` plus whichever of `items` it does not hold yet. */ export function addAttachments(prev: T[], items: T[]): T[] { const fresh = items.filter( (a, i) => !prev.some((p) => p.path === a.path) && items.findIndex((b) => b.path === a.path) === i ); return fresh.length ? [...prev, ...fresh] : prev; } const RECENT_KEY = "agenthub.prompt.recentUploads"; const RECENT_MAX = 20; // The server prunes an upload a day after it was written (`saveDrop`). // ponytail: a client-side guess of that TTL, a few minutes short; a listing // route instead if uploads must outlive it or follow the user to another browser. const RECENT_TTL_MS = 23.9 * 60 * 60_000; interface Recent extends Attachment { at: number; } function readRecent(): Recent[] { try { const v: unknown = JSON.parse(localStorage.getItem(RECENT_KEY) || "[]"); const cutoff = Date.now() - RECENT_TTL_MS; return (Array.isArray(v) ? (v as Recent[]) : []).filter( (r) => typeof r?.path === "string" && typeof r.name === "string" && r.at > cutoff ); } catch { return []; } } export function recentUploads(): Attachment[] { return readRecent().map(({ path, name, url }) => ({ path, name, ...(url ? { url } : {}) })); } /** Remember uploads just saved, newest first; an image keeps a thumbnail * through `GET /api/run/drop/:name` (its local blob URL dies with the page). */ export function rememberUploads(items: { path: string; name: string; image: boolean }[]) { const at = Date.now(); const added: Recent[] = items.map(({ path, name, image }) => ({ path, name, at, ...(image ? { url: `/api/run/drop/${encodeURIComponent(path.split("/").pop() || "")}` } : {}), })); const kept = readRecent().filter((r) => !added.some((a) => a.path === r.path)); try { localStorage.setItem(RECENT_KEY, JSON.stringify([...added, ...kept].slice(0, RECENT_MAX))); } catch { /* storage full or blocked: the list is a convenience */ } }