Add file upload functionality to the agent. Implement API endpoint for uploading files, including validation and error handling. Update web interface to support file selection and display upload status. Enhance input handling with configurable key delay for text input.

lib/agent/web/app.js

@@ -114,6 +114,22 @@
     );
   }
 
+  async function uploadFile(file) {
+    const dir = pathInput.value.trim();
+    if (!dir) {
+      throw new Error("open a folder first");
+    }
+    const form = new FormData();
+    form.set("path", dir);
+    form.set("file", file);
+    showError("");
+    const res = await fetch("/api/v1/upload", { method: "POST", body: form });
+    if (!res.ok) {
+      throw new Error(await readError(res));
+    }
+    return res.json();
+  }
+
   async function listFiles(path) {
     const query = new URLSearchParams();
     if (path) query.set("path", path);
@@ -284,10 +300,11 @@
     const field = document.getElementById("video-text");
     const text = field.value;
     if (!text) return;
+    const delayMs = clamp(document.getElementById("video-key-delay").value, 0, 200);
     await api("/api/v1/input/text", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text }),
+      body: JSON.stringify({ text, delay_ms: delayMs }),
     });
     field.value = "";
   }
@@ -362,6 +379,21 @@
   document.getElementById("file-up").addEventListener("click", () => {
     listFiles(parentPath(pathInput.value.trim())).catch((err) => showError(err.message));
   });
+  const filePicker = document.getElementById("file-picker");
+  document.getElementById("file-upload").addEventListener("click", () => {
+    filePicker.click();
+  });
+  filePicker.addEventListener("change", () => {
+    const file = filePicker.files[0];
+    filePicker.value = "";
+    if (!file) return;
+    uploadFile(file)
+      .then((data) => {
+        fileMeta.textContent = `uploaded ${data.name} (${formatBytes(data.size || 0)})`;
+        return listFiles(pathInput.value.trim());
+      })
+      .catch((err) => showError(err.message));
+  });
   document.getElementById("shot-capture").addEventListener("click", () => {
     captureScreen().catch((err) => showError(err.message));
   });
@@ -379,6 +411,11 @@
   document.getElementById("video-send").addEventListener("click", () => {
     sendVideoText().catch((err) => showError(err.message));
   });
+  const videoKeyDelay = document.getElementById("video-key-delay");
+  const videoKeyDelayVal = document.getElementById("video-key-delay-val");
+  videoKeyDelay.addEventListener("input", () => {
+    videoKeyDelayVal.textContent = videoKeyDelay.value;
+  });
   document.getElementById("video-text").addEventListener("keydown", (event) => {
     if (event.key === "Enter") {
       event.preventDefault();