feat(maestro): attach files in structured views

web/src/api.ts

@@ -184,6 +184,15 @@ export async function sendStructuredPrompt(id: Uuid, prompt: string): Promise<vo
   );
 }
 
+export async function uploadStructuredFile(id: Uuid, file: File): Promise<{ path: string }> {
+  return jsonOrError(await fetch(`${routes.structuredAttachment(id)}?name=${encodeURIComponent(file.name)}`, {
+    method: "POST",
+    credentials: "same-origin",
+    headers: { "content-type": "application/octet-stream" },
+    body: file,
+  }));
+}
+
 /** Cancel a structured session's active ACP turn (#138). */
 export async function cancelStructuredTurn(id: Uuid): Promise<void> {
   await jsonOrError(

web/src/routes.ts

@@ -47,6 +47,10 @@ export function structuredPrompt(id: Uuid): string {
   return `${session(id)}/structured/prompt`;
 }
 
+export function structuredAttachment(id: Uuid): string {
+  return `${session(id)}/structured/attachments`;
+}
+
 /** `POST /api/sessions/:id/structured/cancel` — cancel an ACP turn. */
 export function structuredCancel(id: Uuid): string {
   return `${session(id)}/structured/cancel`;

web/src/structured.test.ts

@@ -6,6 +6,7 @@ vi.mock("./api.js", async () => {
   return {
     ...actual,
     sendStructuredPrompt: vi.fn().mockResolvedValue(undefined),
+    uploadStructuredFile: vi.fn().mockResolvedValue({ path: "/uploads/pasted.txt" }),
     cancelStructuredTurn: vi.fn().mockResolvedValue(undefined),
     resolveStructuredApproval: vi.fn().mockResolvedValue(undefined),
     setStructuredConfig: vi.fn().mockResolvedValue(undefined),
@@ -16,6 +17,7 @@ import {
   cancelStructuredTurn,
   resolveStructuredApproval,
   sendStructuredPrompt,
+  uploadStructuredFile,
   setStructuredConfig,
 } from "./api.js";
 import { TOGGLE_DRAWER_EVENT } from "./drawer.js";
@@ -95,6 +97,53 @@ function mount(opts: {
 describe("structured connection: data flow", () => {
   beforeEach(() => vi.clearAllMocks());
 
+  it("converts long pasted text into a removable file and sends it without reply text", async () => {
+    const conn = mount({ sockets: [new FakeSocket()] });
+    const input = conn.el.querySelector("textarea")!;
+    const paste = new Event("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(paste, "clipboardData", { value: {
+      files: [], getData: () => "a".repeat(4000),
+    } });
+    input.dispatchEvent(paste);
+    expect(paste.defaultPrevented).toBe(true);
+    expect(input.value).toBe("");
+    expect(conn.el.querySelector(".structured-attachments")!.textContent).toContain("pasted-1.txt");
+    conn.el.querySelector("form")!.dispatchEvent(new Event("submit", { cancelable: true }));
+    await vi.waitFor(() => expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", expect.stringContaining("/uploads/pasted.txt")));
+    expect(uploadStructuredFile).toHaveBeenCalledWith("s1", expect.objectContaining({ name: "pasted-1.txt", size: 4000 }));
+    conn.dispose();
+  });
+
+  it("leaves short pastes alone", () => {
+    const conn = mount({ sockets: [new FakeSocket()] });
+    const paste = new Event("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(paste, "clipboardData", { value: { files: [], getData: () => "hello" } });
+    conn.el.querySelector("textarea")!.dispatchEvent(paste);
+    expect(paste.defaultPrevented).toBe(false);
+    conn.dispose();
+  });
+
+  it("retains failed uploads for retry and lets the operator remove them", async () => {
+    vi.mocked(uploadStructuredFile).mockRejectedValueOnce(new Error("Upload failed"));
+    const conn = mount({ sockets: [new FakeSocket()] });
+    const input = conn.el.querySelector("textarea")!;
+    input.value = "Read this";
+    const paste = new Event("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(paste, "clipboardData", { value: {
+      files: [new File(["content"], "notes.txt")], getData: () => "",
+    } });
+    input.dispatchEvent(paste);
+    conn.el.querySelector("form")!.dispatchEvent(new Event("submit", { cancelable: true }));
+    await vi.waitFor(() => expect(input.disabled).toBe(false));
+    expect(input.value).toBe("Read this");
+    expect(sendStructuredPrompt).not.toHaveBeenCalled();
+    const remove = conn.el.querySelector<HTMLButtonElement>('[aria-label="Remove notes.txt"]')!;
+    expect(remove).not.toBeNull();
+    remove.click();
+    expect(conn.el.querySelector<HTMLElement>(".structured-attachments")!.hidden).toBe(true);
+    conn.dispose();
+  });
+
   it("renders every row from the initial snapshot", () => {
     const ws = new FakeSocket();
     const conn = mount({ sockets: [ws] });

web/src/structured.ts

@@ -10,6 +10,7 @@ import {
   cancelStructuredTurn,
   resolveStructuredApproval,
   sendStructuredPrompt,
+  uploadStructuredFile,
   setStructuredConfig,
   structuredWsUrl,
 } from "./api.js";
@@ -90,7 +91,12 @@ export function createStructuredConnection(
           <span class="structured-activity-text">Thinking</span>
         </div>
         <form class="structured-composer">
+          <button type="button" class="btn btn-ghost btn-icon structured-attach" aria-label="Attach files" title="Attach files (up to 20 MiB each)">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m8 12 7-7a3 3 0 0 1 4 4L9 19a5 5 0 0 1-7-7L12 2M5 14l9-9"/></svg>
+          </button>
+          <input class="structured-file-input" type="file" multiple hidden>
           <div class="structured-input-wrap">
+            <div class="structured-attachments" aria-label="Attachments" aria-live="polite" hidden></div>
             <div id="structured-command-menu-${sessionId}" class="structured-command-menu"
               role="listbox" hidden></div>
             <textarea class="structured-input" rows="1" placeholder="Reply, or / for commands…"
@@ -128,6 +134,79 @@ export function createStructuredConnection(
   const input = el.querySelector(".structured-input") as HTMLTextAreaElement;
   const sendBtn = el.querySelector(".structured-send") as HTMLButtonElement;
   const cancelBtn = el.querySelector(".structured-cancel") as HTMLButtonElement;
+  const attachBtn = el.querySelector(".structured-attach") as HTMLButtonElement;
+  const fileInput = el.querySelector(".structured-file-input") as HTMLInputElement;
+  const attachmentEl = el.querySelector(".structured-attachments") as HTMLDivElement;
+  type Attachment = { file: File; path?: string };
+  let attachments: Attachment[] = [];
+  let uploading = false;
+  let pasteCount = 0;
+
+  function renderAttachments(): void {
+    attachmentEl.replaceChildren();
+    attachmentEl.hidden = attachments.length === 0;
+    for (const attachment of attachments) {
+      const chip = document.createElement("span");
+      chip.className = "structured-attachment";
+      const label = document.createElement("span");
+      label.textContent = attachment.file.name;
+      label.title = `${attachment.file.name} (${attachment.file.size.toLocaleString()} bytes)`;
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.textContent = "×";
+      remove.setAttribute("aria-label", `Remove ${attachment.file.name}`);
+      remove.disabled = input.disabled;
+      remove.addEventListener("click", () => {
+        attachments = attachments.filter((item) => item !== attachment);
+        renderAttachments();
+      });
+      chip.append(label, remove);
+      attachmentEl.append(chip);
+    }
+  }
+
+  function addFiles(files: File[]): void {
+    if (input.disabled || disposed) return;
+    for (const file of files) {
+      if (file.size > 20 * 1024 * 1024) {
+        showError(`${file.name} exceeds 20 MiB. Choose a smaller file.`);
+      } else if (attachments.length >= 10) {
+        showError("Attach up to 10 files per message.");
+      } else {
+        attachments.push({ file });
+      }
+    }
+    renderAttachments();
+  }
+  attachBtn.addEventListener("click", () => fileInput.click());
+  fileInput.addEventListener("change", () => {
+    addFiles(Array.from(fileInput.files ?? []));
+    fileInput.value = "";
+  });
+  composerForm.addEventListener("dragover", (event) => {
+    if (event.dataTransfer?.types.includes("Files")) event.preventDefault();
+  });
+  composerForm.addEventListener("drop", (event) => {
+    if (!event.dataTransfer?.files.length) return;
+    event.preventDefault();
+    addFiles(Array.from(event.dataTransfer.files));
+  });
+  input.addEventListener("paste", (event) => {
+    const clipboard = event.clipboardData;
+    if (!clipboard || input.disabled) return;
+    if (clipboard.files.length) {
+      event.preventDefault();
+      addFiles(Array.from(clipboard.files));
+      return;
+    }
+    const text = clipboard.getData("text/plain");
+    if (text.length < 4000 && text.split("\n").length < 40) return;
+    if (attachments.length >= 10 || new Blob([text]).size > 20 * 1024 * 1024) return;
+    event.preventDefault();
+    addFiles([new File([text], `pasted-${++pasteCount}.txt`, { type: "text/plain" })]);
+    input.setRangeText("", input.selectionStart, input.selectionEnd, "end");
+    autoResize();
+  });
 
   disconnectBtn.addEventListener("click", () => opts.onRequestClose?.(sessionId));
   // Mobile-only (CSS hides it on desktop, where the sidebar is always in
@@ -527,9 +606,12 @@ export function createStructuredConnection(
   }
 
   function renderComposerState(): void {
-    const active = state.turn.responding || state.turn.thinking || awaitingBeginGeneration !== null;
+    const active = uploading || state.turn.responding || state.turn.thinking || awaitingBeginGeneration !== null;
     const projectedActive = state.turn.responding || state.turn.thinking;
     input.disabled = active;
+    attachBtn.disabled = active;
+    fileInput.disabled = active;
+    renderAttachments();
     sendBtn.disabled = active;
     sendBtn.hidden = projectedActive;
     cancelBtn.hidden = !projectedActive;
@@ -797,7 +879,9 @@ export function createStructuredConnection(
   composerForm.addEventListener("submit", (e) => {
     e.preventDefault();
     const text = input.value;
-    if (!text.trim() || input.disabled) return;
+    if ((!text.trim() && attachments.length === 0) || input.disabled) return;
+    const submittedAttachments = attachments;
+    uploading = submittedAttachments.length > 0;
     const generation = ++submissionGeneration;
     const submissionSocketGeneration = socketGeneration;
     awaitingBeginGeneration = generation;
@@ -807,13 +891,26 @@ export function createStructuredConnection(
     autoResize();
     clearError();
     renderComposerState();
-    sendStructuredPrompt(sessionId, text).then(
+    const send = async () => {
+      for (const attachment of submittedAttachments) {
+        if (disposed) return;
+        if (!attachment.path) attachment.path = (await uploadStructuredFile(sessionId, attachment.file)).path;
+      }
+      if (disposed) return;
+      const references = submittedAttachments.map(({ file, path }) =>
+        `Attached file ${JSON.stringify(file.name)}: ${JSON.stringify(path)}`);
+      await sendStructuredPrompt(sessionId, [text, ...references].filter(Boolean).join("\n\n"));
+    };
+    void send().then(
       () => {
-        if (
-          disposed
-          || generation !== submissionGeneration
-          || awaitingBeginGeneration !== generation
-        ) return;
+        if (disposed || generation !== submissionGeneration) return;
+        uploading = false;
+        if (attachments === submittedAttachments) {
+          attachments = [];
+          renderAttachments();
+        }
+        renderComposerState();
+        if (awaitingBeginGeneration !== generation) return;
         const acceptanceSocketGeneration = socketGeneration;
         acceptedSubmission = { generation, socketGeneration: acceptanceSocketGeneration };
         // A replacement socket may have captured idle before the POST claimed
@@ -821,6 +918,7 @@ export function createStructuredConnection(
         if (acceptanceSocketGeneration > submissionSocketGeneration) reconnectForReconciliation();
       },
       (e: unknown) => {
+        uploading = false;
         if (disposed || generation !== submissionGeneration) return;
         if (awaitingBeginGeneration === generation) awaitingBeginGeneration = null;
         if (input.value === "") {

web/src/styles.css

@@ -3095,6 +3095,45 @@ input.leaf-rename:focus {
   min-width: 0;
 }
 
+.structured-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-1);
+  padding: var(--sp-1);
+}
+
+.structured-attachments[hidden] { display: none; }
+
+.structured-attachment {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  padding-left: var(--sp-2);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-1);
+  font-size: var(--fs-11);
+}
+
+.structured-attachment > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.structured-attachment button {
+  flex-shrink: 0;
+  min-width: var(--tap);
+  min-height: var(--tap);
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+}
+
+.structured-attachment button:hover { color: var(--ink); }
+.structured-attachment button:disabled { opacity: 0.5; }
+
 .structured-input {
   display: block;
   width: 100%;