attachments sync: attach offline, upload when linked, removals stick (#5168)

Desktop could not create an attachment at all, and a removed attachment or
dismissed preview came back on the next pull. Now:

- core: add_attachment keeps the bytes in the blob store and queues the row
  (schema v10: attachments.uploaded / upload_error). Push uploads it once its
  note has landed. A refusal that retrying won't fix (too large, id clash, hash
  mismatch) is recorded on the file and not re-sent every cycle; the editor
  shows it.
- core: removing a synced attachment or dismissing a preview leaves a tombstone
  in pending_deletes; push sends it as an `attachment`/`preview` delete, and a
  pull while it waits doesn't put the row back. A pull also keeps files still
  waiting to upload instead of replacing them wholesale.
- server: PUT /api/sync/attachments/<id> (raw body, sha256-checked, idempotent,
  size-capped) and child deletes in push, which apply regardless of LWW and
  answer noop for rows the caller can't see. One store_attachment helper for
  the upload route, the importer and sync. Protocol 5, feature attachment_sync;
  the client sends neither to a server without it.
- server: migration 0031 makes a link preview's insert/delete bump its note, so
  background-fetched previews and web dismissals reach linked devices.
- desktop: Attach and paste-image work offline (raw-bytes IPC command).
- SVG is served as a download by the desktop blob scheme too (as #1981 did for
  the web), and drawn as a file chip on both.
- autosync: drop the catch_unwind; release builds abort on panic, so it only
  ever worked in debug builds.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/adapters/local.ts

@@ -4,8 +4,8 @@
 //
 // Argument keys are camelCase; Tauri converts them to the Rust commands' snake_case
 // parameters (e.g. labelIds -> label_ids). A few operations have no offline meaning
-// yet (account auth, device linking, attachment upload, URL unfurl, file import) —
-// those reject with a clear message rather than silently failing; the board, editor,
+// yet (account auth, device linking, URL unfurl, file import) — those reject with a
+// clear message rather than silently failing; the board, editor, attachments,
 // capture, filters, labels, checklists and reminders all work fully offline.
 
 import { invoke } from "../desktop/bridge";
@@ -58,7 +58,17 @@ export const local: Repo = {
     addItem: (id, text) => invoke<Note>("notes_add_item", { id, text }),
     updateItem: (id, itemId, changes) => invoke<Note>("notes_update_item", { id, itemId, changes }),
     deleteItem: (id, itemId) => invoke<Note>("notes_delete_item", { id, itemId }),
-    uploadAttachment: () => Promise.reject<Note>(new Error(NEEDS_SERVER)),
+    // Kept on this device and uploaded by the next sync once linked (#5168). The bytes
+    // go as the raw IPC body; the name is percent-encoded because a header carries
+    // only ASCII.
+    uploadAttachment: async (id, file) =>
+      invoke<Note>("notes_add_attachment", new Uint8Array(await file.arrayBuffer()), {
+        headers: {
+          "x-note-id": id,
+          "x-filename": encodeURIComponent(file.name),
+          "x-mime": file.type || "application/octet-stream",
+        },
+      }),
     deleteAttachment: (id, attId) => invoke<Note>("notes_delete_attachment", { id, attId }),
     unfurl: () => Promise.reject<Note>(new Error(NEEDS_SERVER)),
     deletePreview: (id, previewId) => invoke<Note>("notes_delete_preview", { id, previewId }),

frontend/src/api/errors.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import { errorMessage } from "./errors";
+
+describe("errorMessage", () => {
+  it("reads the REST client's error", () => {
+    expect(errorMessage({ error: "file is too large (max 25 MB)", status: 413 }, "x")).toBe(
+      "file is too large (max 25 MB)",
+    );
+  });
+
+  // A Tauri command rejects with its Rust error as a bare string.
+  it("reads a desktop command's string", () => {
+    expect(errorMessage("That note no longer exists.", "x")).toBe("That note no longer exists.");
+  });
+
+  it("reads a thrown Error", () => {
+    expect(errorMessage(new Error("Not running in the desktop app."), "x")).toBe(
+      "Not running in the desktop app.",
+    );
+  });
+
+  it("falls back when there is nothing to say", () => {
+    expect(errorMessage(undefined, "Could not upload file.")).toBe("Could not upload file.");
+    expect(errorMessage("  ", "fallback")).toBe("fallback");
+    expect(errorMessage({ status: 500 }, "fallback")).toBe("fallback");
+  });
+});

frontend/src/api/errors.ts

@@ -0,0 +1,16 @@
+// What went wrong, in words to show a person, from whichever layer failed.
+//
+// The two backends reject differently: the REST client with an `ApiError`
+// (`{ error, status }`), a Tauri command with the plain string its Rust `Err` held.
+// A catch that reads only `.error` turns every desktop failure into its generic
+// fallback — "Could not upload file." when the store said exactly why.
+
+export function errorMessage(e: unknown, fallback: string): string {
+  if (typeof e === "string" && e.trim()) return e;
+  if (e && typeof e === "object") {
+    const { error, message } = e as { error?: unknown; message?: unknown };
+    if (typeof error === "string" && error.trim()) return error;
+    if (typeof message === "string" && message.trim()) return message;
+  }
+  return fallback;
+}

frontend/src/components/NoteCard.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from "vue";
 import { useNotesStore } from "../stores/notes";
 import { NOTE_CARD_SURFACE, labelChipClasses } from "../notes/colors";
+import { rendersInline } from "../notes/attachments";
 import type { Note } from "../stores/notes";
 import Icon from "./Icon.vue";
 import LinkPreview from "./LinkPreview.vue";
@@ -43,8 +44,8 @@ const trashCountdown = computed(() => formatTrashCountdown(trashDays.value));
 const trashUrgent = computed(() => trashDays.value !== null && trashDays.value <= 3);
 
 // The card previews the first image inline; non-image files show as compact chips.
-const firstImage = computed(() => props.note.attachments.find((a) => a.mime.startsWith("image/")));
-const otherAttachments = computed(() => props.note.attachments.filter((a) => !a.mime.startsWith("image/")));
+const firstImage = computed(() => props.note.attachments.find((a) => rendersInline(a.mime)));
+const otherAttachments = computed(() => props.note.attachments.filter((a) => !rendersInline(a.mime)));
 
 // How much of a note the CARD shows. Android has always clamped to 8
 // (`MAX_PREVIEW_LINES`); the web rendered the whole body, so one long note could

frontend/src/components/NoteEditor.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useNotesStore } from "../stores/notes";
+import { errorMessage } from "../api/errors";
+import { rendersInline } from "../notes/attachments";
 import Icon from "./Icon.vue";
 import LabelPicker from "./LabelPicker.vue";
 import LinkPreview from "./LinkPreview.vue";
@@ -446,11 +448,12 @@ function addChecklist(): void {
 }
 
 // ---- attachments ----
+const refusedUploads = computed(() => liveNote.value.attachments.filter((a) => a.upload_error));
 function pickFile() {
   fileInput.value?.click();
 }
 function attKind(mime: string): "image" | "audio" | "file" {
-  if (mime.startsWith("image/")) return "image";
+  if (rendersInline(mime)) return "image";
   if (mime.startsWith("audio/")) return "audio";
   return "file";
 }
@@ -467,7 +470,7 @@ async function uploadFile(file: File) {
   try {
     await notes.uploadAttachment(id, file);
   } catch (e) {
-    uploadError.value = (e as { error?: string }).error ?? "Could not upload file.";
+    uploadError.value = errorMessage(e, "Could not upload file.");
   }
 }
 
@@ -611,6 +614,16 @@ function revPreview(rev: NoteRevision): string {
           </template>
         </div>
         <p v-if="uploadError" class="text-xs text-red-600 dark:text-red-400">{{ uploadError }}</p>
+        <!-- Desktop: a file attached here that the server refused. It isn't retried,
+             so without this line it would sit on this device unsynced and unexplained. -->
+        <p
+          v-for="att in refusedUploads"
+          :key="`refused-${att.id}`"
+          class="text-xs text-amber-600 dark:text-amber-400"
+        >
+          {{ att.filename || "A file" }} won't sync: {{ att.upload_error }}. It stays on this
+          device until you remove it.
+        </p>
 
         <!-- Fetched automatically after each save; removable here and nowhere else. -->
         <div v-if="liveNote.previews.length" class="flex flex-col gap-2">

frontend/src/desktop/bridge.ts

@@ -4,7 +4,13 @@
 // @tauri-apps/api dependency and the web bundle is unaffected.
 
 interface TauriGlobal {
-  core: { invoke: <T>(cmd: string, args?: Record<string, unknown>) => Promise<T> };
+  core: {
+    invoke: <T>(
+      cmd: string,
+      args?: Record<string, unknown> | Uint8Array,
+      options?: { headers?: Record<string, string> },
+    ) => Promise<T>;
+  };
   // Also from `withGlobalTauri`. Needed because quick capture puts the app in TWO
   // windows, each with its own Pinia stores — a note saved in one is invisible to
   // the other until something says so, and an event is the only channel between
@@ -31,10 +37,16 @@ export function isDesktop(): boolean {
   return typeof window !== "undefined" && !!window.__TAURI__;
 }
 
-export function invoke<T>(cmd: string, args?: Record<string, unknown>): Promise<T> {
+/** Call a desktop command. `args` is either named arguments or, for a command that
+ *  takes a file, its raw bytes — with anything else it needs in `options.headers`. */
+export function invoke<T>(
+  cmd: string,
+  args?: Record<string, unknown> | Uint8Array,
+  options?: { headers?: Record<string, string> },
+): Promise<T> {
   const tauri = window.__TAURI__;
   if (!tauri) return Promise.reject(new Error("Not running in the desktop app."));
-  return tauri.core.invoke<T>(cmd, args).catch((err: unknown) => {
+  return tauri.core.invoke<T>(cmd, args, options).catch((err: unknown) => {
     // Every failed command names itself in the log — so a broken "basic function"
     // in some environment is diagnosable. Skip log_event to avoid recursion.
     if (cmd !== "log_event") logEvent("error", `invoke '${cmd}' failed: ${String(err)}`);
@@ -111,6 +123,10 @@ export interface PushSummary {
   noop: number;
   rejected: number;
   errors: string[];
+  /** Files attached on this device that reached the server this cycle. */
+  uploaded: number;
+  /** Files that didn't; their reasons are in `errors`. */
+  upload_failed: number;
 }
 
 export interface PullSummary {

frontend/src/notes/attachments.ts

@@ -0,0 +1,11 @@
+// How an attachment is drawn, decided in one place for the card and the editor.
+
+/** Whether a file is shown as a picture rather than as a chip to download.
+ *
+ *  Every `image/` type except SVG. An SVG is a document that can carry its own
+ *  script, so neither surface serves one to render: the server sends it as a download
+ *  (#1981) and the desktop's blob scheme as opaque bytes, where an `<img>` of it would
+ *  only ever show broken. */
+export function rendersInline(mime: string): boolean {
+  return mime.startsWith("image/") && mime !== "image/svg+xml";
+}

frontend/src/stores/notes.ts

@@ -43,6 +43,9 @@ export interface Attachment {
   mime: string;
   size?: number;
   sha256?: string | null;
+  // Desktop only: why the server refused a file attached on this device. The file
+  // stays here, unsynced, until it is removed.
+  upload_error?: string;
 }
 
 // A cached OpenGraph/meta preview for a URL in the note (server-fetched, SSRF-guarded).

frontend/src/views/SyncView.vue

@@ -233,6 +233,8 @@ function showOutcome(outcome: SyncOutcome) {
   const blobs = outcome.pull.blobs_downloaded;
   const parts: string[] = [];
   if (sent > 0) parts.push(`sent ${sent}`);
+  const up = outcome.push.uploaded;
+  if (up > 0) parts.push(`uploaded ${up} file${up === 1 ? "" : "s"}`);
   if (received > 0) parts.push(`received ${received}`);
   if (blobs > 0) parts.push(`${blobs} attachment${blobs === 1 ? "" : "s"}`);
   lastResult.value = parts.length ? `Synced — ${parts.join(", ")}.` : "Already up to date.";
@@ -244,10 +246,12 @@ function showOutcome(outcome: SyncOutcome) {
   // Rejections are the server refusing a specific change — surfaced, never
   // swallowed, because only the person can resolve them. The background cycle does
   // not resend them on its own (autosync.rs), so this stays until they're fixed.
-  syncError.value =
-    outcome.push.rejected > 0
-      ? `${outcome.push.rejected} change(s) the server wouldn't accept: ${outcome.push.errors.join("; ")}`
-      : "";
+  // A file refused for good is listed once, here, and not retried; the editor says so
+  // on the file itself from then on.
+  const problems: string[] = [];
+  if (outcome.push.rejected > 0) problems.push(`${outcome.push.rejected} change(s) the server wouldn't accept`);
+  if (outcome.push.upload_failed > 0) problems.push(`${outcome.push.upload_failed} file(s) didn't upload`);
+  syncError.value = problems.length ? `${problems.join(" and ")}: ${outcome.push.errors.join("; ")}` : "";
 }
 
 async function syncNow() {