diff --git a/backend/app/api/messages.py b/backend/app/api/messages.py
index 4405075..1284224 100644
--- a/backend/app/api/messages.py
+++ b/backend/app/api/messages.py
@@ -7,6 +7,7 @@ import io
 import uuid
 import zipfile
 from typing import Annotated
+from urllib.parse import quote
 
 from fastapi import APIRouter, Depends, Query
 from fastapi.responses import HTMLResponse, Response
@@ -146,6 +147,15 @@ async def message_cid(
     return Response(content=data, media_type=media_type)
 
 
+def _content_disposition(disposition: str, filename: str) -> str:
+    """RFC 6266 Content-Disposition safe for non-ASCII names. HTTP header values
+    are Latin-1, so a raw Polish/CJK filename (ł, ń, …) crashes the response with
+    a 500; emit an ASCII fallback plus a UTF-8 ``filename*`` for modern clients."""
+    ascii_name = filename.encode("ascii", "ignore").decode("ascii").replace('"', "").strip()
+    fallback = ascii_name or "attachment"
+    return f"{disposition}; filename=\"{fallback}\"; filename*=UTF-8''{quote(filename)}"
+
+
 async def _real_attachments(db: AsyncSession, message_id: uuid.UUID) -> list[Attachment]:
     """Downloadable (non-inline) attachments for a message, in a stable order."""
     rows = await db.scalars(
@@ -234,5 +244,5 @@ async def message_attachment(
     return Response(
         content=data,
         media_type=media_type,
-        headers={"Content-Disposition": f'{disposition}; filename="{att.filename}"'},
+        headers={"Content-Disposition": _content_disposition(disposition, att.filename)},
     )
diff --git a/backend/app/search/pg.py b/backend/app/search/pg.py
index 7d013c7..c5e4ee4 100644
--- a/backend/app/search/pg.py
+++ b/backend/app/search/pg.py
@@ -257,6 +257,17 @@ class PgSearchBackend(SearchBackend):
         for cond in conditions:
             stmt = stmt.where(cond)
 
+        # Exclude Trash/Junk from search by default (Gmail-style), so deleting a
+        # message from search results removes it. An explicit `in:trash`/`in:junk`
+        # overrides this to search there on purpose.
+        if not _targets_removal_folder(groups):
+            stmt = stmt.where(
+                or_(
+                    Mailbox.special_use.is_(None),
+                    Mailbox.special_use.notin_(_REMOVAL_FOLDERS),
+                )
+            )
+
         decoded = _decode_cursor(cursor)
         if decoded is not None:
             cur_hit, cur_date, cur_id = decoded
@@ -291,6 +302,23 @@ class PgSearchBackend(SearchBackend):
         return hits, next_cursor
 
 
+_REMOVAL_FOLDERS = ("trash", "junk")
+
+
+def _targets_removal_folder(groups: list[list[dict[str, object]]]) -> bool:
+    """True if the query explicitly scopes to Trash/Junk via an ``in:`` filter, in
+    which case the default removal-folder exclusion must not apply."""
+    for group in groups:
+        for clause in group:
+            if (
+                clause.get("type") == "filter"
+                and clause.get("key") == "in"
+                and str(clause.get("value", "")).strip().lower() in _REMOVAL_FOLDERS
+            ):
+                return True
+    return False
+
+
 def _positive_text_terms(groups: list[list[dict[str, object]]]) -> list[str]:
     terms: list[str] = []
     for group in groups:
diff --git a/backend/tests/api/test_api.py b/backend/tests/api/test_api.py
index a4972c2..6fc05ce 100644
--- a/backend/tests/api/test_api.py
+++ b/backend/tests/api/test_api.py
@@ -234,6 +234,42 @@ async def test_attachments_list_and_zip(api: ApiCtx) -> None:
     assert archive.read("notes.txt") == b"hello attachment"
 
 
+async def test_attachment_download_non_ascii_filename(api: ApiCtx) -> None:
+    # A Polish filename (ł, ń) is not Latin-1, which would crash the response with
+    # a 500 if put raw in Content-Disposition. It must serve 200 with RFC 6266.
+    from app.indexer import blobstore
+    from app.models import Attachment
+
+    assert api.session is not None
+    mid = api.message_ids[-1]
+    payload = b"PK\x03\x04 zip-ish bytes"
+    sha = blobstore.store(api.user_id, payload)
+    name = "oferta - składowe ceny.ods"
+    api.session.add(
+        Attachment(
+            message_id=mid,
+            user_id=api.user_id,
+            filename=name,
+            mime_type="application/vnd.oasis.opendocument.spreadsheet",
+            size_bytes=len(payload),
+            content_id=None,
+            blob_sha256=sha,
+        )
+    )
+    await api.session.commit()
+
+    aid = next(
+        a["id"] for a in (await api.client.get(f"/api/messages/{mid}/attachments")).json()
+        if a["filename"] == name
+    )
+    resp = await api.client.get(f"/api/messages/{mid}/attachments/{aid}")
+    assert resp.status_code == 200  # not 500
+    assert resp.content == payload
+    cd = resp.headers["content-disposition"]
+    assert "filename*=UTF-8''" in cd  # UTF-8 encoded name for modern clients
+    assert "sk%C5%82adowe" in cd  # ł percent-encoded
+
+
 async def test_quota_reports_usage_and_default(api: ApiCtx) -> None:
     resp = await api.client.get("/api/settings/quota")
     assert resp.status_code == 200
diff --git a/backend/tests/search/test_search_api.py b/backend/tests/search/test_search_api.py
index 5f39197..9a2d0df 100644
--- a/backend/tests/search/test_search_api.py
+++ b/backend/tests/search/test_search_api.py
@@ -86,6 +86,8 @@ async def _ingest(
     body: str,
     flags: frozenset[str] = frozenset(),
     attach: bool = False,
+    mailbox_id: uuid.UUID | None = None,
+    special: str = "inbox",
 ) -> None:
     ctx.uid += 1
     m = EmailMessage()
@@ -101,8 +103,8 @@ async def _ingest(
         ctx.session,
         user_id=ctx.user_id,
         account_id=ctx.account_id,
-        mailbox_id=ctx.mailbox_id,
-        mailbox_special_use="inbox",
+        mailbox_id=mailbox_id or ctx.mailbox_id,
+        mailbox_special_use=special,
         remote=RemoteMessage(
             uid=ctx.uid, raw=m.as_bytes(), flags=flags, internal_date=datetime.now(UTC)
         ),
@@ -145,6 +147,25 @@ async def seeded(ctx: Ctx) -> Ctx:
     return ctx
 
 
+async def test_search_excludes_trash_by_default(ctx: Ctx) -> None:
+    # Deleting a message from search results (it moves to Trash) removes it from the
+    # results — search excludes Trash/Junk unless in:trash/in:junk asks for them.
+    from app.models import Mailbox
+
+    await _ingest(ctx, frm="Bob <bob@corp.com>", subject="quarterly zephyr", body="hi")
+    trash = Mailbox(
+        account_id=ctx.account_id, user_id=ctx.user_id, path="Trash", special_use="trash"
+    )
+    ctx.session.add(trash)
+    await ctx.session.flush()
+    await _ingest(
+        ctx, frm="X <x@corp.com>", subject="zephyr in trash", body="bye",
+        mailbox_id=trash.id, special="trash",
+    )
+    assert await _search(ctx, "zephyr") == 1  # inbox only; the trashed one is hidden
+    assert await _search(ctx, "in:trash zephyr") == 1  # explicit -> searches Trash
+
+
 async def test_free_text(seeded: Ctx) -> None:
     assert await _search(seeded, "revenue") == 1
     assert await _search(seeded, "lunch") == 1
diff --git a/frontend/icons/document.svg b/frontend/icons/document.svg
new file mode 100644
index 0000000..8ebf0c0
--- /dev/null
+++ b/frontend/icons/document.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none">
+  <path d="M6 2.5h7L19 8v13a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 5 21V4A1.5 1.5 0 0 1 6 2.5z" fill="#2563eb" opacity="0.15"/>
+  <path d="M13 2.5L19 8h-4.5A1.5 1.5 0 0 1 13 6.5V2.5z" fill="#2563eb" opacity="0.4"/>
+  <path d="M8 12.5h8M8 15.5h8M8 18.5h5" stroke="#2563eb" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
diff --git a/frontend/icons/image.svg b/frontend/icons/image.svg
new file mode 100644
index 0000000..261b35d
--- /dev/null
+++ b/frontend/icons/image.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="26"
+   height="26"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   id="svg3"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <path
+     d="M6 2.5h7L19 8v13a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 5 21V4A1.5 1.5 0 0 1 6 2.5z"
+     fill="#2563eb"
+     opacity="0.15"
+     id="path1"
+     style="fill:#eb9425;fill-opacity:1" />
+  <path
+     d="M13 2.5L19 8h-4.5A1.5 1.5 0 0 1 13 6.5V2.5z"
+     fill="#2563eb"
+     opacity="0.4"
+     id="path2"
+     style="fill:#eb9125;fill-opacity:1" />
+  <path
+     style="fill:none;fill-opacity:1;stroke:#ff6600;stroke-width:0.875077;stroke-linecap:round;stroke-dasharray:none"
+     d="m 7.911187,18.240819 1.7315517,-2.380972 1.5272013,1.130759 2.233989,-3.074296 2.869342,4.385995 z"
+     id="path3" />
+  <circle
+     style="fill:none;fill-opacity:1;stroke:#ff6600;stroke-width:0.719258;stroke-linecap:round;stroke-dasharray:none"
+     id="path4"
+     cx="9.4974737"
+     cy="12.776868"
+     r="0.96485692" />
+</svg>
diff --git a/frontend/icons/spreadsheet.svg b/frontend/icons/spreadsheet.svg
new file mode 100644
index 0000000..44c5e41
--- /dev/null
+++ b/frontend/icons/spreadsheet.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="26"
+   height="26"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   id="svg3"
+   sodipodi:docname="spreadsheet.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="45.038463"
+     inkscape:cx="13.299743"
+     inkscape:cy="13.62169"
+     inkscape:window-width="2560"
+     inkscape:window-height="1376"
+     inkscape:window-x="2560"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3" />
+  <defs
+     id="defs3" />
+  <path
+     d="M6 2.5h7L19 8v13a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 5 21V4A1.5 1.5 0 0 1 6 2.5z"
+     fill="#2563eb"
+     opacity="0.15"
+     id="path1"
+     style="fill:#1ba81e;fill-opacity:1" />
+  <path
+     d="M13 2.5L19 8h-4.5A1.5 1.5 0 0 1 13 6.5V2.5z"
+     fill="#2563eb"
+     opacity="0.4"
+     id="path2"
+     style="fill:#1bab1e;fill-opacity:1" />
+  <rect
+     style="fill:#2ca02c;fill-opacity:1;stroke:none;stroke-width:0.998284;stroke-linecap:round;stroke-dasharray:none"
+     id="rect3"
+     width="3.1597841"
+     height="2.5984228"
+     x="7.9113088"
+     y="12.715921" />
+  <rect
+     style="fill:#2ca02c;fill-opacity:1;stroke:none;stroke-width:0.998284;stroke-linecap:round;stroke-dasharray:none"
+     id="rect3-2"
+     width="3.1597841"
+     height="2.5984228"
+     x="7.927196"
+     y="17.143465" />
+  <rect
+     style="fill:#2ca02c;fill-opacity:1;stroke:none;stroke-width:0.998284;stroke-linecap:round;stroke-dasharray:none"
+     id="rect3-6"
+     width="3.1597841"
+     height="2.5984228"
+     x="12.990695"
+     y="12.726586" />
+  <rect
+     style="fill:#2ca02c;fill-opacity:1;stroke:none;stroke-width:0.998284;stroke-linecap:round;stroke-dasharray:none"
+     id="rect3-2-2"
+     width="3.1597841"
+     height="2.5984228"
+     x="13.006582"
+     y="17.154131" />
+</svg>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fcf7b52..f892cf9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,10 +10,14 @@
       "dependencies": {
         "@tanstack/react-query": "~5.51.0",
         "@tanstack/react-virtual": "~3.8.0",
+        "docx-preview": "^0.4.0",
+        "jszip": "^3.10.1",
+        "pdfjs-dist": "^4.10.38",
         "qrcode.react": "~4.1.0",
         "react": "~18.3.1",
         "react-dom": "~18.3.1",
         "react-router-dom": "~6.26.0",
+        "xlsx-preview": "^1.0.5",
         "zod": "~3.23.8"
       },
       "devDependencies": {
@@ -998,6 +1002,47 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fast-csv/format": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/@fast-csv/format/-/format-4.3.5.tgz",
+      "integrity": "sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0"
+      }
+    },
+    "node_modules/@fast-csv/format/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
+      "license": "MIT"
+    },
+    "node_modules/@fast-csv/parse": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/@fast-csv/parse/-/parse-4.3.6.tgz",
+      "integrity": "sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.groupby": "^4.6.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/@fast-csv/parse/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
+      "license": "MIT"
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1110,6 +1155,256 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.100.tgz",
+      "integrity": "sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-x64": "0.1.100",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.100",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.100",
+        "@napi-rs/canvas-win32-arm64-msvc": "0.1.100",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.100"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz",
+      "integrity": "sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz",
+      "integrity": "sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz",
+      "integrity": "sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz",
+      "integrity": "sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz",
+      "integrity": "sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz",
+      "integrity": "sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz",
+      "integrity": "sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz",
+      "integrity": "sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz",
+      "integrity": "sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz",
+      "integrity": "sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz",
+      "integrity": "sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1801,6 +2096,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "26.1.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.1.tgz",
+      "integrity": "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~8.3.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -2266,6 +2573,59 @@
         "node": ">= 8"
       }
     },
+    "node_modules/archiver": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
+      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
+      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/archiver/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -2310,6 +2670,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2358,7 +2724,26 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
@@ -2374,6 +2759,28 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/big-integer": {
+      "version": "1.6.52",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
+      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/binary": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
+      "integrity": "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffers": "~0.1.1",
+        "chainsaw": "~0.1.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -2387,11 +2794,41 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+      "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==",
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.2.tgz",
       "integrity": "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -2444,6 +2881,56 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-indexof-polyfill": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
+      "integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/buffers": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
+      "integrity": "sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==",
+      "engines": {
+        "node": ">=0.2.0"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -2526,6 +3013,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/chainsaw": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
+      "integrity": "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==",
+      "license": "MIT/X11",
+      "dependencies": {
+        "traverse": ">=0.3.0 <0.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chalk": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@@ -2638,11 +3137,39 @@
         "node": ">= 6"
       }
     },
+    "node_modules/compress-commons": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
+      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/compress-commons/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/convert-source-map": {
@@ -2652,6 +3179,51 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
+      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+      "license": "MIT",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/crc32-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2729,6 +3301,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.21",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
+      "integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2831,6 +3409,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/docx-preview": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/docx-preview/-/docx-preview-0.4.0.tgz",
+      "integrity": "sha512-OdKtE/uj3M4RfGarLkGjahUzRg8/kBp0Sraj1r1NAY1tp/sTpHOBqDrzVf9onMBt9vxP6SdQ6bpLCUCsFwjgcA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jszip": ">=3.0.0"
+      }
+    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -2854,6 +3441,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.392",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.392.tgz",
@@ -2861,6 +3457,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -3210,6 +3815,52 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/exceljs": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/exceljs/-/exceljs-4.4.0.tgz",
+      "integrity": "sha512-XctvKaEMaj1Ii9oDOqbW/6e1gXknSY4g/aLCDicOXqBE4M0nRWkUu0PTp++UPNzoFY12BNHMfs/VadKIS6llvg==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver": "^5.0.0",
+        "dayjs": "^1.8.34",
+        "fast-csv": "^4.3.1",
+        "jszip": "^3.10.1",
+        "readable-stream": "^3.6.0",
+        "saxes": "^5.0.1",
+        "tmp": "^0.2.0",
+        "unzipper": "^0.10.11",
+        "uuid": "^8.3.0"
+      },
+      "engines": {
+        "node": ">=8.3.0"
+      }
+    },
+    "node_modules/exceljs/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/exceljs/node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/execa": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -3234,6 +3885,19 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/fast-csv": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz",
+      "integrity": "sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==",
+      "license": "MIT",
+      "dependencies": {
+        "@fast-csv/format": "4.3.5",
+        "@fast-csv/parse": "4.3.6"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3391,11 +4055,16 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT"
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/fsevents": {
@@ -3413,6 +4082,35 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/fstream/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3490,7 +4188,6 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -3524,7 +4221,6 @@
       "version": "1.1.16",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
       "integrity": "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -3535,7 +4231,6 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
       "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -3594,6 +4289,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -3717,6 +4418,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3727,6 +4448,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3782,7 +4509,6 @@
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
       "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
@@ -3793,7 +4519,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/is-binary-path": {
@@ -3888,6 +4613,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4032,6 +4763,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4042,6 +4785,18 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4056,6 +4811,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -4076,6 +4840,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/listenercount": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
+      "integrity": "sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==",
+      "license": "ISC"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4099,6 +4869,73 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.escaperegexp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
+      "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.groupby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
+      "integrity": "sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnil": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
+      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4106,6 +4943,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4259,6 +5108,27 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4318,7 +5188,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4384,7 +5253,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "wrappy": "1"
@@ -4489,6 +5357,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4560,7 +5434,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4610,6 +5483,18 @@
         "node": ">= 14.16"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "4.10.38",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.10.38.tgz",
+      "integrity": "sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.65"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4863,6 +5748,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
@@ -5008,6 +5899,42 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -5188,6 +6115,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -5230,6 +6163,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5307,6 +6246,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -5453,6 +6401,36 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tar-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -5568,6 +6546,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tmp": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5610,6 +6597,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/traverse": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
+      "license": "MIT/X11",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
@@ -5670,6 +6666,15 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -5680,6 +6685,24 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/unzipper": {
+      "version": "0.10.14",
+      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
+      "integrity": "sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==",
+      "license": "MIT",
+      "dependencies": {
+        "big-integer": "^1.6.17",
+        "binary": "~0.3.0",
+        "bluebird": "~3.4.1",
+        "buffer-indexof-polyfill": "~1.0.0",
+        "duplexer2": "~0.1.4",
+        "fstream": "^1.0.12",
+        "graceful-fs": "^4.2.2",
+        "listenercount": "~1.0.1",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "~1.0.4"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -5743,9 +6766,18 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -6002,7 +7034,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/ws": {
@@ -6027,6 +7058,15 @@
         }
       }
     },
+    "node_modules/xlsx-preview": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/xlsx-preview/-/xlsx-preview-1.0.5.tgz",
+      "integrity": "sha512-ijPHLA4ploV6FehbQi18fr8f1ETyJGPetOwCgKhS0vVkD8qDwTxqtw+Vg/hpqSP46EpJ2hAUi2lVBGTUsqFoLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "exceljs": "^4.3.0"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
@@ -6041,7 +7081,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/yallist": {
@@ -6081,6 +7120,55 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zip-stream": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
+      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/archiver-utils": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
+      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.2.3",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b1b917f..f5b1bc0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,10 +15,14 @@
   "dependencies": {
     "@tanstack/react-query": "~5.51.0",
     "@tanstack/react-virtual": "~3.8.0",
+    "docx-preview": "^0.4.0",
+    "jszip": "^3.10.1",
+    "pdfjs-dist": "^4.10.38",
     "qrcode.react": "~4.1.0",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "react-router-dom": "~6.26.0",
+    "xlsx-preview": "^1.0.5",
     "zod": "~3.23.8"
   },
   "devDependencies": {
diff --git a/frontend/src/components/compose/Composer.tsx b/frontend/src/components/compose/Composer.tsx
index 4eca598..ed7d6dd 100644
--- a/frontend/src/components/compose/Composer.tsx
+++ b/frontend/src/components/compose/Composer.tsx
@@ -142,7 +142,17 @@ export function Composer({
   const [attachments, setAttachments] = useState<AttachmentOut[]>([]);
   const [attachError, setAttachError] = useState("");
   const [status, setStatus] = useState<"" | "saving" | "saved" | "sending" | "error">("");
-  const [undo, setUndo] = useState<{ outboxId: string } | null>(null);
+  const [undo, setUndo] = useState<{ outboxId: string; until: number } | null>(null);
+  const [undoLeft, setUndoLeft] = useState(0);
+  // Tick the undo countdown while the window is open.
+  useEffect(() => {
+    if (!undo) return;
+    const id = window.setInterval(
+      () => setUndoLeft(Math.max(0, Math.ceil((undo.until - Date.now()) / 1000))),
+      500,
+    );
+    return () => window.clearInterval(id);
+  }, [undo]);
   const [showClosePrompt, setShowClosePrompt] = useState(false);
   const draftId = useRef<string | null>(init.draftId ?? null);
   const sentRef = useRef(false); // send initiated -> don't mirror to Drafts on close
@@ -224,7 +234,7 @@ export function Composer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const addFiles = async (files: FileList) => {
+  const addFiles = async (files: FileList | File[]) => {
     markDirty();
     setAttachError("");
     for (const file of Array.from(files)) {
@@ -246,6 +256,77 @@ export function Composer({
     setAttachments((prev) => prev.filter((a) => a.id !== id));
   };
 
+  // Drag & drop: files dropped on the writing area insert inline (images) or
+  // attach (other types); dropped anywhere above it, everything attaches.
+  const editorAreaRef = useRef<HTMLDivElement>(null);
+  const [dragKind, setDragKind] = useState<null | "body" | "attach">(null);
+
+  const readDataUrl = (file: File): Promise<string> =>
+    new Promise((resolve, reject) => {
+      const r = new FileReader();
+      r.onload = () => resolve(String(r.result));
+      r.onerror = () => reject(r.error);
+      r.readAsDataURL(file);
+    });
+
+  const setCaretToPoint = (x: number, y: number) => {
+    const d = document as Document & {
+      caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;
+    };
+    let range: Range | null = null;
+    if (d.caretRangeFromPoint) range = d.caretRangeFromPoint(x, y);
+    else if (d.caretPositionFromPoint) {
+      const p = d.caretPositionFromPoint(x, y);
+      if (p) {
+        range = document.createRange();
+        range.setStart(p.offsetNode, p.offset);
+        range.collapse(true);
+      }
+    }
+    if (range && editorAreaRef.current?.contains(range.startContainer)) {
+      const sel = window.getSelection();
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+    }
+  };
+
+  const onDragOver = (e: React.DragEvent) => {
+    if (!Array.from(e.dataTransfer.types).includes("Files")) return;
+    e.preventDefault();
+    setDragKind(editorAreaRef.current?.contains(e.target as Node) ? "body" : "attach");
+  };
+
+  const onDragLeave = (e: React.DragEvent) => {
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragKind(null);
+  };
+
+  const onDrop = async (e: React.DragEvent) => {
+    const files = e.dataTransfer.files;
+    if (!files || !files.length) return;
+    e.preventDefault();
+    const inBody = editorAreaRef.current?.contains(e.target as Node);
+    setDragKind(null);
+    if (!inBody) {
+      void addFiles(files);
+      return;
+    }
+    setCaretToPoint(e.clientX, e.clientY);
+    const others: File[] = [];
+    for (const file of Array.from(files)) {
+      if (file.type.startsWith("image/")) {
+        try {
+          editorRef.current?.insertHtml(`<img src="${await readDataUrl(file)}" style="max-width:100%">`);
+          markDirty();
+        } catch {
+          others.push(file); // fall back to attaching if the read fails
+        }
+      } else {
+        others.push(file);
+      }
+    }
+    if (others.length) void addFiles(others);
+  };
+
   // The editor's seed content. New messages get the account signature (2 blank
   // lines above it); replies keep the quoted original in a marked block so the
   // signature can later be inserted above it.
@@ -325,8 +406,12 @@ export function Composer({
       if (!draftId.current) draftId.current = (await api.createDraft(payload())).id;
       else await api.updateDraft(draftId.current, payload());
       const res = await api.send(draftId.current);
-      setUndo({ outboxId: res.outbox_id });
-      undoTimer.current = window.setTimeout(onClose, 10000);
+      // Drive the countdown + auto-close off the server's undo deadline.
+      const until = new Date(res.undo_until).getTime();
+      const remaining = Math.max(0, until - Date.now());
+      setUndo({ outboxId: res.outbox_id, until });
+      setUndoLeft(Math.ceil(remaining / 1000));
+      undoTimer.current = window.setTimeout(onClose, remaining);
     } catch (e) {
       sentRef.current = false;
       setStatus("error");
@@ -403,22 +488,37 @@ export function Composer({
   if (undo) {
     return (
       <div className="m-3 flex items-center justify-between rounded-lg bg-app-fg px-4 py-2.5 text-sm text-app-surface shadow-lg">
-        <span>{t("compose.sent")}</span>
-        <button className="font-medium text-app-accent" onClick={doUndo}>
-          {t("compose.undo")}
-        </button>
+        <span>{t("compose.sending")}</span>
+        <span className="flex items-center gap-1.5">
+          {undoLeft > 0 && (
+            <span className="tabular-nums text-app-surface/70">
+              {t("compose.undoIn", { count: undoLeft })}
+            </span>
+          )}
+          <button className="font-medium text-app-accent hover:underline" onClick={doUndo}>
+            {t("compose.undo")}
+          </button>
+        </span>
       </div>
     );
   }
 
   return (
     <div
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
       className={`relative flex flex-col overflow-hidden border-app-border bg-app-elevated ${
         fullWindow
           ? "h-full"
           : `rounded-xl border shadow-2xl ${expanded ? "h-full" : ""}`
       }`}
     >
+      {dragKind && (
+        <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center border-2 border-dashed border-app-accent bg-app-accent/10 text-sm font-medium text-app-accent">
+          {dragKind === "body" ? t("compose.dropBody") : t("compose.dropAttach")}
+        </div>
+      )}
       {showClosePrompt && (
         <div
           className="absolute inset-0 z-40 flex items-center justify-center bg-black/40 p-4"
@@ -672,20 +772,22 @@ export function Composer({
         </div>
       )}
 
-      {/* Body */}
-      {bodyReady ? (
-        <RichTextEditor
-          ref={editorRef}
-          initialHtml={initialHtml}
-          onInput={(html) => {
-            markDirty();
-            setBodyHtml(html);
-          }}
-          showToolbar={showToolbar}
-        />
-      ) : (
-        <div className="min-h-[250px] flex-1 px-3 py-3 text-sm text-app-faint">…</div>
-      )}
+      {/* Body — wrapped so a drop here is detected as the writing area. */}
+      <div ref={editorAreaRef} className="flex min-h-0 flex-1 flex-col">
+        {bodyReady ? (
+          <RichTextEditor
+            ref={editorRef}
+            initialHtml={initialHtml}
+            onInput={(html) => {
+              markDirty();
+              setBodyHtml(html);
+            }}
+            showToolbar={showToolbar}
+          />
+        ) : (
+          <div className="min-h-[250px] flex-1 px-3 py-3 text-sm text-app-faint">…</div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/compose/RichTextEditor.tsx b/frontend/src/components/compose/RichTextEditor.tsx
index 45899b5..b198eec 100644
--- a/frontend/src/components/compose/RichTextEditor.tsx
+++ b/frontend/src/components/compose/RichTextEditor.tsx
@@ -8,6 +8,8 @@ export interface RichTextEditorHandle {
   replaceSignature: (html: string) => void;
   // Insert the signature below the body but above quoted content (reply menu).
   insertSignature: (html: string) => void;
+  // Insert HTML (e.g. a dropped inline image) at the caret, or append it.
+  insertHtml: (html: string) => void;
 }
 
 // A lightweight WYSIWYG editor over a contenteditable div. The DOM is the source
@@ -153,6 +155,9 @@ export const RichTextEditor = forwardRef<
   const paletteRef = useRef<HTMLDivElement>(null);
   const [active, setActive] = useState<Record<string, boolean>>({});
   const [colorMenu, setColorMenu] = useState<null | "fore" | "hilite">(null);
+  // Currently-selected inline image + its handle box (px, relative to the editor).
+  const [selImg, setSelImg] = useState<HTMLImageElement | null>(null);
+  const [box, setBox] = useState<{ left: number; top: number; width: number; height: number } | null>(null);
 
   // Seed the editable region exactly once.
   useEffect(() => {
@@ -194,6 +199,19 @@ export const RichTextEditor = forwardRef<
       el.insertBefore(spacerAfter, anchor);
       onInput(el.innerHTML);
     },
+    insertHtml: (html: string) => {
+      const el = ref.current;
+      if (!el || !html) return;
+      el.focus();
+      // Insert at the current caret; if that fails (no selection in the editor),
+      // append before the signature/quoted block.
+      if (!document.execCommand("insertHTML", false, html)) {
+        const block = document.createElement("div");
+        block.innerHTML = html;
+        el.insertBefore(block, el.querySelector(".wmc-signature, .wmc-quoted"));
+      }
+      onInput(el.innerHTML);
+    },
   }));
 
   // Remember the caret/selection so native pickers (color/file) that steal focus
@@ -294,6 +312,75 @@ export const RichTextEditor = forwardRef<
     reader.readAsDataURL(file);
   };
 
+  // ── Inline-image select / resize / delete ─────────────────────────────────
+  const computeBox = useCallback(() => {
+    const img = selImg;
+    const ed = ref.current;
+    if (!img || !ed) return null;
+    const ir = img.getBoundingClientRect();
+    const er = ed.getBoundingClientRect();
+    return { left: ir.left - er.left, top: ir.top - er.top, width: ir.width, height: ir.height };
+  }, [selImg]);
+
+  useEffect(() => setBox(computeBox()), [selImg, computeBox]);
+
+  // Reposition handles on window resize; deselect on an outside click.
+  useEffect(() => {
+    if (!selImg) return;
+    const onWin = () => setBox(computeBox());
+    const onDown = (e: MouseEvent) => {
+      const el = e.target as HTMLElement;
+      if (el === selImg || el.closest("[data-img-handle]")) return;
+      setSelImg(null);
+    };
+    window.addEventListener("resize", onWin);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      window.removeEventListener("resize", onWin);
+      document.removeEventListener("mousedown", onDown);
+    };
+  }, [selImg, computeBox]);
+
+  const startResize = (corner: "nw" | "ne" | "sw" | "se") => (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const img = selImg;
+    const ed = ref.current;
+    if (!img || !ed) return;
+    const startX = e.clientX;
+    const startW = img.getBoundingClientRect().width;
+    const maxW = ed.clientWidth - 24; // minus px-3 padding
+    const onMove = (ev: MouseEvent) => {
+      const dx = ev.clientX - startX;
+      const grow = corner === "se" || corner === "ne" ? dx : -dx;
+      img.style.width = `${Math.round(Math.max(24, Math.min(startW + grow, maxW)))}px`;
+      img.style.height = "auto";
+      setBox(computeBox());
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      emit();
+      setBox(computeBox());
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+
+  const onEditorClick = (e: React.MouseEvent) => {
+    const el = e.target as HTMLElement;
+    setSelImg(el.tagName === "IMG" ? (el as HTMLImageElement) : null);
+  };
+
+  const onEditorKeyDown = (e: React.KeyboardEvent) => {
+    if (selImg && (e.key === "Delete" || e.key === "Backspace")) {
+      e.preventDefault();
+      selImg.remove();
+      setSelImg(null);
+      emit();
+    }
+  };
+
   const Btn = ({
     onClick,
     title,
@@ -452,18 +539,44 @@ export const RichTextEditor = forwardRef<
           {ICONS.clear}
         </Btn>
       </div>
-      <div
-        ref={ref}
-        contentEditable
-        suppressContentEditableWarning
-        role="textbox"
-        aria-multiline="true"
-        data-testid="rich-editor"
-        onInput={(e) => onInput((e.target as HTMLDivElement).innerHTML)}
-        onKeyUp={refreshActive}
-        onMouseUp={refreshActive}
-        className={`wmc-editor ${minHeight} flex-1 overflow-y-auto px-3 py-3 text-sm text-app-fg outline-none`}
-      />
+      <div className="relative flex min-h-0 flex-1 flex-col">
+        <div
+          ref={ref}
+          contentEditable
+          suppressContentEditableWarning
+          role="textbox"
+          aria-multiline="true"
+          data-testid="rich-editor"
+          onInput={(e) => onInput((e.target as HTMLDivElement).innerHTML)}
+          onKeyUp={refreshActive}
+          onMouseUp={refreshActive}
+          onClick={onEditorClick}
+          onKeyDown={onEditorKeyDown}
+          onScroll={() => setBox(computeBox())}
+          className={`wmc-editor ${minHeight} flex-1 overflow-y-auto px-3 py-3 text-sm text-app-fg outline-none`}
+        />
+        {selImg && box && (
+          <>
+            <div
+              className="pointer-events-none absolute z-10 border-2 border-app-accent"
+              style={{ left: box.left - 1, top: box.top - 1, width: box.width + 2, height: box.height + 2 }}
+            />
+            {(["nw", "ne", "sw", "se"] as const).map((c) => (
+              <div
+                key={c}
+                data-img-handle
+                onMouseDown={startResize(c)}
+                className="absolute z-10 h-2.5 w-2.5 rounded-sm border border-white bg-app-accent shadow"
+                style={{
+                  left: (c[1] === "w" ? box.left : box.left + box.width) - 5,
+                  top: (c[0] === "n" ? box.top : box.top + box.height) - 5,
+                  cursor: c === "nw" || c === "se" ? "nwse-resize" : "nesw-resize",
+                }}
+              />
+            ))}
+          </>
+        )}
+      </div>
     </div>
   );
 });
diff --git a/frontend/src/components/list/MessageList.tsx b/frontend/src/components/list/MessageList.tsx
index 17d69f6..f032d98 100644
--- a/frontend/src/components/list/MessageList.tsx
+++ b/frontend/src/components/list/MessageList.tsx
@@ -61,6 +61,7 @@ export function MessageList({
   onDeletePermanent,
   onTogglePin,
   checkedIds,
+  dimmedIds,
   onToggleCheck,
 }: {
   threads: ThreadSummary[];
@@ -73,6 +74,7 @@ export function MessageList({
   onDeletePermanent: (id: string) => void;
   onTogglePin: (id: string, pinned: boolean) => void;
   checkedIds: Set<string>;
+  dimmedIds?: Set<string>;
   onToggleCheck: (id: string) => void;
 }) {
   const t = useT();
@@ -103,6 +105,7 @@ export function MessageList({
           const unread = thread.unread_count > 0;
           const selected = selectedId === thread.id;
           const checked = checkedIds.has(thread.id);
+          const dimmed = dimmedIds?.has(thread.id) ?? false;
           const primary = thread.participants[0];
           const names =
             thread.participants.map((p) => p.name || p.email).join(",  ") || "(no one)";
@@ -116,10 +119,11 @@ export function MessageList({
             <div
               key={thread.id}
               role="button"
-              tabIndex={0}
-              onClick={() => onSelect(thread.id)}
+              tabIndex={dimmed ? -1 : 0}
+              aria-disabled={dimmed}
+              onClick={() => !dimmed && onSelect(thread.id)}
               onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") onSelect(thread.id);
+                if (!dimmed && (e.key === "Enter" || e.key === " ")) onSelect(thread.id);
               }}
               style={{
                 position: "absolute",
@@ -129,7 +133,9 @@ export function MessageList({
                 height: item.size,
                 transform: `translateY(${item.start}px)`,
               }}
-              className="group absolute inset-x-0 cursor-pointer px-2 pt-[7px]"
+              className={`group absolute inset-x-0 px-2 pt-[7px] ${
+                dimmed ? "pointer-events-none opacity-40" : "cursor-pointer"
+              }`}
             >
               <div
                 className={`flex h-full items-center gap-3 rounded-lg px-3 ${
diff --git a/frontend/src/components/thread/AttachmentPreview.tsx b/frontend/src/components/thread/AttachmentPreview.tsx
new file mode 100644
index 0000000..f543fc2
--- /dev/null
+++ b/frontend/src/components/thread/AttachmentPreview.tsx
@@ -0,0 +1,528 @@
+// Full-screen attachment preview overlay (SPEC §12 M2): text / image / pdf.
+// Chrome: name + type badge top-left, print + download top-right, prev/next
+// attachment arrows on the sides, and scale (+ pdf page) controls at the bottom.
+
+import * as pdfjs from "pdfjs-dist";
+import PdfWorker from "pdfjs-dist/build/pdf.worker.min.mjs?worker";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { useT } from "../../i18n";
+import { api } from "../../lib/api";
+import type { AttachmentOut } from "../../lib/types";
+import { Icon } from "../Icon";
+import { convertOffice, renderDocxInto } from "./officeConvert";
+import { extOf, kindOf } from "./previewKind";
+
+pdfjs.GlobalWorkerOptions.workerPort = new PdfWorker();
+
+export function AttachmentPreview({
+  messageId,
+  attachments,
+  index,
+  onIndex,
+  onClose,
+}: {
+  messageId: string;
+  attachments: AttachmentOut[];
+  index: number;
+  onIndex: (i: number) => void;
+  onClose: () => void;
+}) {
+  const t = useT();
+  const att = attachments[index];
+  const kind = kindOf(att.filename);
+  const url = api.attachmentUrl(messageId, att.id);
+  const [zoom, setZoom] = useState(1);
+  const [page, setPage] = useState({ current: 1, total: 0 });
+  const textRef = useRef("");
+  const officeRef = useRef(""); // converted office HTML, for printing
+
+  const prev = useCallback(
+    () => onIndex((index - 1 + attachments.length) % attachments.length),
+    [index, attachments.length, onIndex],
+  );
+  const next = useCallback(
+    () => onIndex((index + 1) % attachments.length),
+    [index, attachments.length, onIndex],
+  );
+
+  useEffect(() => setZoom(1), [att.id]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "ArrowLeft") prev();
+      else if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose, prev, next]);
+
+  const download = () => {
+    const a = document.createElement("a");
+    a.href = api.attachmentDownloadUrl(messageId, att.id);
+    a.download = att.filename;
+    a.click();
+  };
+
+  // Print via a hidden iframe so the browser's native print handles pdf/image; for
+  // text we print a wrapped document (its inline URL isn't a renderable type).
+  const printAtt = () => {
+    const frame = document.createElement("iframe");
+    Object.assign(frame.style, {
+      position: "fixed",
+      right: "0",
+      bottom: "0",
+      width: "0",
+      height: "0",
+      border: "0",
+    });
+    let printed = false;
+    frame.onload = () => {
+      // Ignore the initial empty (about:blank) load — only print once the real
+      // content is in, otherwise the first dialog previews a blank page.
+      let href = "";
+      try {
+        href = frame.contentWindow?.location.href ?? "";
+      } catch {
+        /* same-origin content; ignore */
+      }
+      if (printed || href === "about:blank") return;
+      printed = true;
+      frame.contentWindow?.focus();
+      frame.contentWindow?.print();
+      window.setTimeout(() => frame.remove(), 60_000);
+    };
+    // Set the source BEFORE appending so the frame navigates straight to the
+    // content instead of first loading about:blank and printing that.
+    if (kind === "text") {
+      // A .txt is served as octet-stream (not renderable via URL), so print the
+      // already-loaded text in a wrapped document.
+      const esc = textRef.current
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+      frame.srcdoc = `<pre style="font:13px/1.5 ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;padding:16px">${esc}</pre>`;
+    } else if (kind === "office") {
+      // Office docs are converted to HTML client-side; print that.
+      frame.srcdoc = wrapOfficeDoc(officeRef.current);
+    } else {
+      frame.src = url;
+    }
+    document.body.appendChild(frame);
+  };
+
+  const single = attachments.length <= 1;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex flex-col bg-black/85 backdrop-blur-sm">
+      {/* Top bar */}
+      <div className="flex shrink-0 items-center justify-between px-4 py-3 text-white">
+        <div className="flex min-w-0 items-center gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            title={t("common.close")}
+            aria-label={t("common.close")}
+            className="rounded p-1.5 text-white/80 hover:bg-white/10 hover:text-white"
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
+              <path d="M5 5l10 10M15 5L5 15" />
+            </svg>
+          </button>
+          <span className="rounded bg-red-600 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide">
+            {extOf(att.filename) || "file"}
+          </span>
+          <span className="truncate text-sm" title={att.filename}>
+            {att.filename}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={printAtt}
+            title={t("mail.print")}
+            aria-label={t("mail.print")}
+            className="rounded p-1.5 text-white/80 hover:bg-white/10 hover:text-white"
+          >
+            <Icon name="print" size={19} />
+          </button>
+          <button
+            type="button"
+            onClick={download}
+            title={t("mail.download")}
+            aria-label={t("mail.download")}
+            className="rounded p-1.5 text-white/80 hover:bg-white/10 hover:text-white"
+          >
+            <svg width="19" height="19" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M10 3v9M6 9l4 4 4-4M4 16h12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Content — click the empty area (not the media or a control) to dismiss. */}
+      <div
+        className="relative min-h-0 flex-1"
+        onClick={(e) => {
+          if (!(e.target as Element).closest("img, iframe, canvas, pre, button, a")) onClose();
+        }}
+      >
+        {kind === "image" && <ImageView url={url} zoom={zoom} alt={att.filename} />}
+        {kind === "text" && (
+          <TextView url={url} zoom={zoom} onLoaded={(tx) => (textRef.current = tx)} />
+        )}
+        {kind === "pdf" && (
+          <PdfView url={url} zoom={zoom} onPage={(current, total) => setPage({ current, total })} />
+        )}
+        {kind === "office" && (
+          <OfficeView
+            url={url}
+            filename={att.filename}
+            zoom={zoom}
+            onHtml={(h) => (officeRef.current = h)}
+          />
+        )}
+
+        {/* Prev / next attachment */}
+        {!single && (
+          <>
+            <SideArrow dir="left" onClick={prev} label={t("mail.previewPrev")} />
+            <SideArrow dir="right" onClick={next} label={t("mail.previewNext")} />
+          </>
+        )}
+      </div>
+
+      {/* Bottom controls */}
+      <div className="flex shrink-0 items-center justify-center py-3">
+        <div className="flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white ring-1 ring-white/15">
+          {kind === "pdf" && page.total > 0 && (
+            <>
+              <span className="tabular-nums">
+                {t("mail.previewPage", { current: page.current, total: page.total })}
+              </span>
+              <span className="mx-1 h-4 w-px bg-white/20" />
+            </>
+          )}
+          <ZoomButton onClick={() => setZoom((z) => Math.max(0.25, +(z - 0.2).toFixed(2)))} label="−" />
+          <button
+            type="button"
+            onClick={() => setZoom(1)}
+            title={t("mail.previewResetZoom")}
+            className="rounded px-1.5 text-white/80 hover:text-white"
+          >
+            <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
+              <circle cx="9" cy="9" r="6" />
+              <path d="M13.5 13.5L17 17" />
+            </svg>
+          </button>
+          <ZoomButton onClick={() => setZoom((z) => Math.min(5, +(z + 0.2).toFixed(2)))} label="+" />
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+function SideArrow({ dir, onClick, label }: { dir: "left" | "right"; onClick: () => void; label: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={label}
+      aria-label={label}
+      className={`absolute top-1/2 -translate-y-1/2 rounded-full bg-black/40 p-2 text-white/80 ring-1 ring-white/15 hover:bg-black/70 hover:text-white ${
+        dir === "left" ? "left-3" : "right-3"
+      }`}
+    >
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+        <path d={dir === "left" ? "M15 5l-7 7 7 7" : "M9 5l7 7-7 7"} />
+      </svg>
+    </button>
+  );
+}
+
+function ZoomButton({ onClick, label }: { onClick: () => void; label: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-6 rounded text-center text-lg leading-none text-white/80 hover:text-white"
+      aria-label={label === "+" ? "zoom in" : "zoom out"}
+    >
+      {label}
+    </button>
+  );
+}
+
+function ImageView({ url, zoom, alt }: { url: string; zoom: number; alt: string }) {
+  return (
+    <div className="flex h-full w-full items-center justify-center overflow-auto p-4">
+      <img
+        src={url}
+        alt={alt}
+        className="max-h-full max-w-full object-contain transition-transform"
+        style={{ transform: `scale(${zoom})` }}
+      />
+    </div>
+  );
+}
+
+function TextView({
+  url,
+  zoom,
+  onLoaded,
+}: {
+  url: string;
+  zoom: number;
+  onLoaded: (text: string) => void;
+}) {
+  const [text, setText] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    fetch(url, { credentials: "include" })
+      .then((r) => (r.ok ? r.text() : Promise.reject(new Error("load failed"))))
+      .then((tx) => {
+        if (cancelled) return;
+        setText(tx);
+        onLoaded(tx);
+      })
+      .catch(() => !cancelled && setFailed(true));
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+  return (
+    <div className="mx-auto h-full max-w-4xl overflow-auto p-6">
+      {failed ? (
+        <p className="text-white/70">—</p>
+      ) : (
+        <pre
+          className="whitespace-pre-wrap break-words rounded-lg bg-white p-6 font-mono text-gray-900 shadow-lg"
+          style={{ fontSize: `${13 * zoom}px`, lineHeight: 1.5 }}
+        >
+          {text ?? ""}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+function wrapOfficeDoc(bodyHtml: string): string {
+  return `<!doctype html><html><head><meta charset="utf-8"><style>
+    html,body{margin:0}
+    body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;
+      line-height:1.5;color:#1a1a1a;background:#fff;padding:32px;word-break:break-word}
+    img{max-width:100%;height:auto}
+    table{border-collapse:collapse;max-width:100%}
+    td,th{border:1px solid #ccc;padding:4px 8px;vertical-align:top}
+    h1,h2,h3,h4,h5,h6{line-height:1.25;margin:.6em 0 .3em}
+    a{color:#2563eb}
+  </style></head><body>${bodyHtml}</body></html>`;
+}
+
+function OfficeView({
+  url,
+  filename,
+  zoom,
+  onHtml,
+}: {
+  url: string;
+  filename: string;
+  zoom: number;
+  onHtml: (html: string) => void;
+}) {
+  const t = useT();
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  // Either a ready-to-inject HTML string (xlsx/odf) or a raw buffer that
+  // docx-preview renders live into the iframe (docx — see renderDocxInto).
+  const [content, setContent] = useState<
+    { kind: "html"; html: string } | { kind: "docx"; buffer: ArrayBuffer } | null
+  >(null);
+  const [error, setError] = useState<string | null>(null);
+  const isDocx = extOf(filename) === "docx";
+
+  useEffect(() => {
+    let cancelled = false;
+    setContent(null);
+    setError(null);
+    (async () => {
+      let diag = "";
+      try {
+        const resp = await fetch(url, { credentials: "include", cache: "no-store" });
+        const buf = await resp.arrayBuffer();
+        const head = Array.from(new Uint8Array(buf).slice(0, 4))
+          .map((b) => b.toString(16).padStart(2, "0"))
+          .join(" ");
+        diag = ` [${resp.status} ${resp.headers.get("content-type") ?? "?"} ${buf.byteLength}B ${head}]`;
+        if (isDocx) {
+          if (!cancelled) setContent({ kind: "docx", buffer: buf });
+        } else {
+          const html = await convertOffice(filename, buf);
+          if (cancelled) return;
+          setContent({ kind: "html", html });
+          onHtml(html);
+        }
+      } catch (e) {
+        console.error("attachment preview: office conversion failed", e);
+        if (!cancelled) setError((e instanceof Error ? e.message : String(e)) + diag);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, filename]);
+
+  // docx needs a blank white page docx-preview fills in on load; xlsx/odf inject
+  // their converted HTML directly. Embed the url so navigating docx→docx changes
+  // the srcdoc and forces a fresh load (and thus a fresh render).
+  const srcDoc = useMemo(() => {
+    if (content == null) return "";
+    if (content.kind === "docx") return wrapOfficeDoc(`<!--${url}-->`);
+    return wrapOfficeDoc(content.html);
+  }, [content, url]);
+
+  // Apply zoom as font-size on the (same-origin) frame body — no reload/flicker.
+  useEffect(() => {
+    const b = frameRef.current?.contentDocument?.body;
+    if (b) b.style.fontSize = `${Math.round(15 * zoom)}px`;
+  }, [zoom, content]);
+
+  const onLoad = () => {
+    const doc = frameRef.current?.contentDocument;
+    if (!doc) return;
+    if (doc.body) doc.body.style.fontSize = `${Math.round(15 * zoom)}px`;
+    // Links must not navigate the preview frame (same rule as message bodies).
+    doc.addEventListener("click", (e) => {
+      const a = (e.target as Element | null)?.closest?.("a[href]") as HTMLAnchorElement | null;
+      if (!a) return;
+      e.preventDefault();
+      const raw = (a.getAttribute("href") || "").trim();
+      if (/^https?:\/\//i.test(raw)) window.open(a.href, "_blank", "noopener,noreferrer");
+    });
+    // docx-preview must render into this live document so header/footer VML images
+    // (sized via getBBox) survive; snapshot the result afterwards for printing.
+    if (content?.kind === "docx" && doc.body) {
+      renderDocxInto(doc.body, doc.head, content.buffer)
+        .then(() => {
+          doc.body.style.fontSize = `${Math.round(15 * zoom)}px`;
+          onHtml(doc.body.innerHTML);
+        })
+        .catch((e: unknown) => {
+          console.error("attachment preview: docx render failed", e);
+          setError(e instanceof Error ? e.message : String(e));
+        });
+    }
+  };
+
+  if (error) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center text-white/70">
+        <span>{t("mail.loadFailed")}</span>
+        <span className="max-w-lg break-words text-xs opacity-60">{error}</span>
+      </div>
+    );
+  }
+  if (content == null) {
+    return <div className="flex h-full items-center justify-center text-white/70">{t("mail.loadingThread")}</div>;
+  }
+  // Spreadsheets are landscape/wide — use the full overlay width; text documents
+  // read better constrained to a page-like column.
+  const wide = ["xlsx", "ods"].includes(extOf(filename));
+  return (
+    <div className={`mx-auto h-full p-4 ${wide ? "w-full" : "max-w-4xl"}`}>
+      <iframe
+        ref={frameRef}
+        title={filename}
+        sandbox="allow-same-origin"
+        srcDoc={srcDoc}
+        onLoad={onLoad}
+        className="h-full w-full rounded-lg bg-white"
+      />
+    </div>
+  );
+}
+
+function PdfView({
+  url,
+  zoom,
+  onPage,
+}: {
+  url: string;
+  zoom: number;
+  onPage: (current: number, total: number) => void;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const docRef = useRef<pdfjs.PDFDocumentProxy | null>(null);
+  const [numPages, setNumPages] = useState(0);
+
+  // Load the document once.
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const buf = await (await fetch(url, { credentials: "include" })).arrayBuffer();
+      if (cancelled) return;
+      const doc = await pdfjs.getDocument({ data: buf }).promise;
+      if (cancelled) return;
+      docRef.current = doc;
+      setNumPages(doc.numPages);
+      onPage(1, doc.numPages);
+    })();
+    return () => {
+      cancelled = true;
+      docRef.current?.destroy();
+      docRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+
+  // (Re)render all pages to canvases when the doc or zoom changes.
+  useEffect(() => {
+    const doc = docRef.current;
+    const container = scrollRef.current;
+    if (!doc || !container) return;
+    let cancelled = false;
+    (async () => {
+      container.replaceChildren();
+      const targetW = Math.min(920, (container.clientWidth || 900) - 32) * zoom;
+      for (let n = 1; n <= doc.numPages; n++) {
+        const p = await doc.getPage(n);
+        const base = p.getViewport({ scale: 1 });
+        const viewport = p.getViewport({ scale: targetW / base.width });
+        const dpr = window.devicePixelRatio || 1;
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.floor(viewport.width * dpr);
+        canvas.height = Math.floor(viewport.height * dpr);
+        canvas.style.width = `${viewport.width}px`;
+        canvas.style.height = `${viewport.height}px`;
+        canvas.className = "mx-auto mb-4 bg-white shadow-xl";
+        canvas.dataset.page = String(n);
+        const ctx = canvas.getContext("2d");
+        if (!ctx || cancelled) return;
+        ctx.scale(dpr, dpr);
+        container.appendChild(canvas);
+        await p.render({ canvasContext: ctx, viewport }).promise;
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [numPages, zoom]);
+
+  const onScroll = () => {
+    const container = scrollRef.current;
+    if (!container || !docRef.current) return;
+    const canvases = container.querySelectorAll<HTMLCanvasElement>("canvas");
+    let current = 1;
+    for (const c of canvases) {
+      if (c.offsetTop - 80 <= container.scrollTop) current = Number(c.dataset.page);
+    }
+    onPage(current, docRef.current.numPages);
+  };
+
+  return <div ref={scrollRef} onScroll={onScroll} className="h-full overflow-auto py-4" />;
+}
diff --git a/frontend/src/components/thread/Attachments.tsx b/frontend/src/components/thread/Attachments.tsx
index fa2df26..7b0b81b 100644
--- a/frontend/src/components/thread/Attachments.tsx
+++ b/frontend/src/components/thread/Attachments.tsx
@@ -1,9 +1,22 @@
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { lazy, Suspense, useState } from "react";
 
+import imageSvgRaw from "../../../icons/image.svg?raw";
+import spreadsheetSvgRaw from "../../../icons/spreadsheet.svg?raw";
 import { useT } from "../../i18n";
 import { api } from "../../lib/api";
 import type { AttachmentOut } from "../../lib/types";
+import { extOf, isPreviewable } from "./previewKind";
+
+// These icons carry their own (baked-in) colours via inline styles, so render
+// them raw rather than through <Icon>, which strips styles. Drop the XML prolog.
+const IMAGE_SVG = imageSvgRaw.replace(/<\?xml[^>]*\?>/, "");
+const SPREADSHEET_SVG = spreadsheetSvgRaw.replace(/<\?xml[^>]*\?>/, "");
+
+// Lazy: the preview bundles pdf.js (~500 kB), loaded only when one is opened.
+const AttachmentPreview = lazy(() =>
+  import("./AttachmentPreview").then((m) => ({ default: m.AttachmentPreview })),
+);
 
 function formatSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
@@ -11,7 +24,9 @@ function formatSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-function FileGlyph() {
+// Base document glyph: folded-corner page. Used (blue) for text and (grey) for
+// any other type; the coloured/pictorial variants below cover pdf/image/archive.
+function FileGlyph({ label }: { label?: string }) {
   return (
     <svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden>
       <path
@@ -19,16 +34,77 @@ function FileGlyph() {
         fill="currentColor"
         opacity="0.15"
       />
-      <path
-        d="M13 2.5L19 8h-4.5A1.5 1.5 0 0 1 13 6.5V2.5z"
-        fill="currentColor"
-        opacity="0.4"
-      />
-      <path d="M8 12.5h8M8 15.5h8M8 18.5h5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+      <path d="M13 2.5L19 8h-4.5A1.5 1.5 0 0 1 13 6.5V2.5z" fill="currentColor" opacity="0.4" />
+      {label ? (
+        <text
+          x="11.5"
+          y="18"
+          textAnchor="middle"
+          fontSize="6.5"
+          fontWeight="700"
+          fill="currentColor"
+        >
+          {label}
+        </text>
+      ) : (
+        <path
+          d="M8 12.5h8M8 15.5h8M8 18.5h5"
+          stroke="currentColor"
+          strokeWidth="1.3"
+          strokeLinecap="round"
+        />
+      )}
     </svg>
   );
 }
 
+// Archive icon for zip/rar/… (box with a zipper).
+function ArchiveGlyph() {
+  return (
+    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+      <path d="M4 7l1.4-3h13.2L20 7" strokeLinejoin="round" />
+      <rect x="4" y="7" width="16" height="13" rx="1.5" />
+      <path d="M12 4v3.5" />
+      <rect x="10.4" y="11" width="3.2" height="3.2" rx="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+const IMAGE_ICON_EXT = new Set(["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg", "tiff", "heic"]);
+const ARCHIVE_EXT = new Set(["zip", "rar", "7z", "tar", "gz", "bz2", "xz"]);
+const SPREADSHEET_EXT = new Set(["xlsx", "ods"]);
+const DOC_EXT = new Set(["txt", "docx", "odt"]); // blue document icon
+
+function AttachmentIcon({ filename }: { filename: string }) {
+  const e = extOf(filename);
+  if (e === "pdf") {
+    return (
+      <span className="shrink-0 text-red-600 dark:text-red-500">
+        <FileGlyph label="PDF" />
+      </span>
+    );
+  }
+  if (SPREADSHEET_EXT.has(e)) {
+    return <span className="shrink-0" aria-hidden dangerouslySetInnerHTML={{ __html: SPREADSHEET_SVG }} />;
+  }
+  if (IMAGE_ICON_EXT.has(e)) {
+    return <span className="shrink-0" aria-hidden dangerouslySetInnerHTML={{ __html: IMAGE_SVG }} />;
+  }
+  if (ARCHIVE_EXT.has(e)) {
+    return (
+      <span className="shrink-0 text-amber-500">
+        <ArchiveGlyph />
+      </span>
+    );
+  }
+  // Blue document for text/docx/odt; grey for everything else.
+  return (
+    <span className={`shrink-0 ${DOC_EXT.has(e) ? "text-app-accent" : "text-app-muted"}`}>
+      <FileGlyph />
+    </span>
+  );
+}
+
 function DownloadGlyph() {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
@@ -40,6 +116,8 @@ function DownloadGlyph() {
 export function Attachments({ messageId }: { messageId: string }) {
   const t = useT();
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  // Index into the previewable subset that's open in the full-screen viewer.
+  const [previewIdx, setPreviewIdx] = useState<number | null>(null);
 
   const { data } = useQuery({
     queryKey: ["attachments", messageId],
@@ -49,6 +127,12 @@ export function Attachments({ messageId }: { messageId: string }) {
   const attachments = data ?? [];
   if (attachments.length === 0) return null;
 
+  const previewable = attachments.filter((a) => isPreviewable(a.filename));
+  const openPreview = (id: string) => {
+    const i = previewable.findIndex((a) => a.id === id);
+    if (i >= 0) setPreviewIdx(i);
+  };
+
   const toggle = (id: string) =>
     setSelected((prev) => {
       const next = new Set(prev);
@@ -85,13 +169,22 @@ export function Attachments({ messageId }: { messageId: string }) {
               className="h-3.5 w-3.5 shrink-0 accent-app-accent"
               aria-label={att.filename}
             />
-            <span className="shrink-0 text-app-accent">
-              <FileGlyph />
-            </span>
+            <AttachmentIcon filename={att.filename} />
             <span className="min-w-0 flex-1">
-              <span className="block truncate text-sm font-medium text-app-fg" title={att.filename}>
-                {att.filename}
-              </span>
+              {isPreviewable(att.filename) ? (
+                <button
+                  type="button"
+                  onClick={() => openPreview(att.id)}
+                  title={att.filename}
+                  className="block w-full truncate text-left text-sm font-medium text-app-accent hover:underline"
+                >
+                  {att.filename}
+                </button>
+              ) : (
+                <span className="block truncate text-sm font-medium text-app-fg" title={att.filename}>
+                  {att.filename}
+                </span>
+              )}
               <span className="block text-xs text-app-faint">{formatSize(att.size_bytes)}</span>
             </span>
             <a
@@ -114,6 +207,17 @@ export function Attachments({ messageId }: { messageId: string }) {
           {t("mail.downloadAll", { count: attachments.length })}
         </a>
       </div>
+      {previewIdx !== null && (
+        <Suspense fallback={null}>
+          <AttachmentPreview
+            messageId={messageId}
+            attachments={previewable}
+            index={previewIdx}
+            onIndex={setPreviewIdx}
+            onClose={() => setPreviewIdx(null)}
+          />
+        </Suspense>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/components/thread/officeConvert.ts b/frontend/src/components/thread/officeConvert.ts
new file mode 100644
index 0000000..0cf8d9b
--- /dev/null
+++ b/frontend/src/components/thread/officeConvert.ts
@@ -0,0 +1,415 @@
+// Client-side conversion of office documents to HTML for preview.
+//   .docx  -> docx-preview, rendered live into the iframe (see renderDocxInto)
+//   .xlsx  -> xlsx-preview (exceljs) -> styled tables
+//   .odt/.ods/.odp/.odg -> JSZip + DOMParser walk of content.xml
+//
+// The ODF walker is adapted from ReaderJS (github.com/Alpaq92/ReaderJS, MIT):
+// it maps the text/table/draw namespaces to a small set of safe HTML tags and
+// escapes all text/attributes. The result is rendered in a script-less sandboxed
+// iframe (see OfficeView), so no active content can run.
+
+import JSZip from "jszip";
+import xlsxPreview from "xlsx-preview"; // CJS/UMD: default import is the reliable form
+
+import { extOf } from "./previewKind";
+
+// xlsx/odf convert to a self-contained HTML string. .docx is handled separately
+// by renderDocxInto — docx-preview must render into the live, displayed iframe so
+// its layout-time work (VML image sizing via getBBox, image/font loading) runs in
+// a real document; serializing to a string would drop header/footer VML images.
+export async function convertOffice(filename: string, buffer: ArrayBuffer): Promise<string> {
+  const ext = extOf(filename);
+  if (ext === "xlsx") {
+    // separateSheets gives self-contained per-sheet HTML (styled tables); the
+    // default single-string output embeds sheets as <object data="blob:…">, which
+    // won't render inside our sandboxed srcdoc iframe. Each sheet is
+    // <body>…</body><style>…</style>; turn the <body> into a <div> (keeping the
+    // trailing <style>) so multiple sheets nest cleanly in one document.
+    // minimumRows/Cols default to a padded grid (lots of empty cells); 1 makes it
+    // render just the sheet's used range (max(usedRange, minimum)).
+    const sheets = await xlsxPreview.xlsx2Html(buffer, {
+      separateSheets: true,
+      minimumRows: 1,
+      minimumCols: 1,
+    });
+    const arr = Array.isArray(sheets) ? sheets.map(String) : [String(sheets)];
+    return arr
+      .map((s) => s.replace(/<body[^>]*>/i, '<div class="xlsx-sheet">').replace(/<\/body>/i, "</div>"))
+      .join('\n<hr style="margin:24px 0;border:none;border-top:1px solid #ccc">\n');
+  }
+  return odfToHtml(buffer);
+}
+
+// ── .docx ────────────────────────────────────────────────────────────────────
+// docx-preview reproduces Word formatting (colours, alignment, fonts, sizes,
+// underline, tables, lists) far more faithfully than a semantic converter.
+//
+// It must render into a LIVE, displayed document: it sizes VML images (e.g.
+// header/footer logos) with getBBox() inside a requestAnimationFrame callback,
+// and getBBox only returns real geometry for laid-out elements. Rendering into a
+// detached/off-screen node and snapshotting innerHTML drops those images. So we
+// render straight into the preview iframe's own document.
+export async function renderDocxInto(
+  bodyEl: HTMLElement,
+  styleEl: HTMLElement,
+  buffer: ArrayBuffer,
+): Promise<void> {
+  const { renderAsync } = await import("docx-preview");
+  await renderAsync(buffer, bodyEl, styleEl, {
+    inWrapper: false, // no grey page wrapper; the iframe provides the white canvas
+    ignoreWidth: true, // flow to the container width instead of fixed page size
+    ignoreHeight: true,
+    breakPages: false,
+    useBase64URL: true, // inline images/fonts so they load inside the iframe
+  });
+  // Let the rAF-driven VML image sizing settle before callers snapshot the HTML.
+  await new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+}
+
+// ── ODF (OpenDocument) ──────────────────────────────────────────────────────
+
+const NS = {
+  office: "urn:oasis:names:tc:opendocument:xmlns:office:1.0",
+  text: "urn:oasis:names:tc:opendocument:xmlns:text:1.0",
+  table: "urn:oasis:names:tc:opendocument:xmlns:table:1.0",
+  draw: "urn:oasis:names:tc:opendocument:xmlns:drawing:1.0",
+  style: "urn:oasis:names:tc:opendocument:xmlns:style:1.0",
+  fo: "urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0",
+  xlink: "http://www.w3.org/1999/xlink",
+};
+
+const IMG_MIME: Record<string, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+};
+
+async function odfToHtml(buffer: ArrayBuffer): Promise<string> {
+  const zip = await JSZip.loadAsync(buffer);
+  const mimeEntry = zip.file("mimetype");
+  const mime = mimeEntry ? (await mimeEntry.async("string")).trim() : "";
+  if (mime && !mime.startsWith("application/vnd.oasis.opendocument")) {
+    throw new Error(`unexpected ODF mimetype: ${mime}`);
+  }
+  const contentEntry = zip.file("content.xml");
+  if (!contentEntry) throw new Error("ODF file has no content.xml");
+  const xmlDoc = new DOMParser().parseFromString(await contentEntry.async("string"), "application/xml");
+  if (xmlDoc.getElementsByTagName("parsererror").length) throw new Error("content.xml parse error");
+
+  const styles = parseStyles(xmlDoc);
+  // Spreadsheets need a grid-aware renderer (repeats, cell styles, alignment);
+  // the generic walker below handles text/presentation/drawing documents.
+  const spreadsheet = xmlDoc.getElementsByTagNameNS(NS.office, "spreadsheet")[0];
+  if (spreadsheet) return renderSpreadsheet(spreadsheet, styles);
+
+  const imgMap = await extractImages(zip);
+  // getElementsByTagNameNS is reliable on XML documents (the "*|body" CSS selector
+  // is flaky across engines); fall back to the whole document.
+  const body = xmlDoc.getElementsByTagNameNS(NS.office, "body")[0] ?? xmlDoc.documentElement;
+  const sb: string[] = [];
+  nodeToHtml(body, sb, imgMap, styles);
+  return sb.join("");
+}
+
+async function extractImages(zip: JSZip): Promise<Record<string, string>> {
+  const entries: [string, JSZip.JSZipObject][] = [];
+  zip.forEach((path, file) => {
+    if (/^(Pictures|images)\//i.test(path) && !file.dir) entries.push([path, file]);
+  });
+  const map: Record<string, string> = {};
+  for (const [path, file] of entries) {
+    const b64 = await file.async("base64");
+    const mime = IMG_MIME[path.split(".").pop()?.toLowerCase() ?? ""] ?? "application/octet-stream";
+    map[path] = `data:${mime};base64,${b64}`; // data URI: no blob lifecycle to manage
+  }
+  return map;
+}
+
+function esc(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function nodeToHtml(
+  node: Node,
+  sb: string[],
+  imgMap: Record<string, string>,
+  styles: OdfStyles,
+): void {
+  if (node.nodeType === Node.TEXT_NODE) {
+    sb.push(esc(node.textContent ?? ""));
+    return;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return;
+  const el = node as Element;
+  const ns = el.namespaceURI;
+  const local = el.localName;
+  // Direct formatting (bold/italic/colour/alignment) lives in the style referenced
+  // by text:style-name; apply it inline.
+  const styleName =
+    el.getAttributeNS(NS.table, "style-name") ?? el.getAttributeNS(NS.text, "style-name") ?? "";
+  const css = styles.css.get(styleName) ?? "";
+
+  if (ns === NS.text) {
+    if (local === "p") return wrap("p", el, sb, imgMap, styles, css);
+    if (local === "h") {
+      const lvl = Math.min(6, Math.max(1, parseInt(el.getAttributeNS(NS.text, "outline-level") || "1", 10)));
+      return wrap(`h${lvl}`, el, sb, imgMap, styles, css);
+    }
+    if (local === "span") return wrap("span", el, sb, imgMap, styles, css);
+    if (local === "a") {
+      const href = el.getAttributeNS(NS.xlink, "href") || "#";
+      sb.push(`<a href="${esc(href)}" target="_blank" rel="noopener noreferrer">`);
+      children(el, sb, imgMap, styles);
+      sb.push("</a>");
+      return;
+    }
+    if (local === "line-break") return void sb.push("<br>");
+    if (local === "s") return void sb.push("&nbsp;");
+    if (local === "tab") return void sb.push("&emsp;");
+    if (local === "list") return wrap("ul", el, sb, imgMap, styles);
+    if (local === "list-item") return wrap("li", el, sb, imgMap, styles);
+  }
+
+  if (ns === NS.table) {
+    if (local === "table") return wrap("table", el, sb, imgMap, styles, css);
+    if (local === "table-row") return wrap("tr", el, sb, imgMap, styles);
+    if (local === "table-cell") return wrap("td", el, sb, imgMap, styles, css);
+  }
+
+  if (ns === NS.draw) {
+    if (local === "frame") return children(el, sb, imgMap, styles);
+    if (local === "image") {
+      const href = el.getAttributeNS(NS.xlink, "href") || "";
+      const src = imgMap[href] ?? imgMap[href.replace(/^\//, "")] ?? "";
+      if (src) sb.push(`<img src="${src}" style="max-width:100%;height:auto">`);
+      return;
+    }
+  }
+
+  children(el, sb, imgMap, styles); // anything else: recurse
+}
+
+function wrap(
+  tag: string,
+  el: Element,
+  sb: string[],
+  imgMap: Record<string, string>,
+  styles: OdfStyles,
+  css = "",
+): void {
+  sb.push(css ? `<${tag} style="${css}">` : `<${tag}>`);
+  children(el, sb, imgMap, styles);
+  sb.push(`</${tag}>`);
+}
+
+function children(
+  el: Element,
+  sb: string[],
+  imgMap: Record<string, string>,
+  styles: OdfStyles,
+): void {
+  for (const child of Array.from(el.childNodes)) nodeToHtml(child, sb, imgMap, styles);
+}
+
+// ── ODF spreadsheet (.ods) ──────────────────────────────────────────────────
+// A grid-aware renderer: honours number-columns/rows-repeated (so cells land in
+// the right columns), applies automatic cell styles (background, alignment,
+// weight, border, column widths), right-aligns numbers, and trims to the used
+// range so the huge trailing empty repeats aren't rendered.
+
+const MAX_COLS = 128;
+const MAX_ROWS = 2000;
+
+interface OdfStyles {
+  css: Map<string, string>; // style-name -> inline CSS (text/paragraph/table-cell)
+  colWidth: Map<string, string>;
+}
+
+function childElemsNS(parent: Element, ns: string, local: string): Element[] {
+  const out: Element[] = [];
+  for (const c of Array.from(parent.childNodes)) {
+    if (c.nodeType === Node.ELEMENT_NODE) {
+      const e = c as Element;
+      if (e.namespaceURI === ns && e.localName === local) out.push(e);
+    }
+  }
+  return out;
+}
+
+function clampInt(v: string | null, dflt: number): number {
+  const n = v ? parseInt(v, 10) : NaN;
+  return Number.isFinite(n) && n > 0 ? n : dflt;
+}
+
+function cssBorder(v: string): string {
+  // Hairline widths (e.g. 0.06pt) render inconsistently; bump sub-1pt to 1px.
+  return v.replace(/^([\d.]+)pt/, (_m, n: string) => (parseFloat(n) < 1 ? "1px" : `${n}pt`));
+}
+
+// Build the inline CSS for a style from its text/paragraph/table-cell properties.
+// Covers direct character formatting (bold/italic/underline/strike/colour/size/
+// font) and paragraph alignment, plus cell background/border for spreadsheets.
+function extractCss(st: Element): string {
+  const css: string[] = [];
+  const tp = childElemsNS(st, NS.style, "text-properties")[0];
+  if (tp) {
+    const fw = tp.getAttributeNS(NS.fo, "font-weight");
+    if (fw && fw !== "normal") css.push(`font-weight:${fw}`);
+    const fst = tp.getAttributeNS(NS.fo, "font-style");
+    if (fst && fst !== "normal") css.push(`font-style:${fst}`);
+    const color = tp.getAttributeNS(NS.fo, "color");
+    if (color) css.push(`color:${color}`);
+    const hl = tp.getAttributeNS(NS.fo, "background-color");
+    if (hl && hl !== "transparent") css.push(`background-color:${hl}`);
+    const size = tp.getAttributeNS(NS.fo, "font-size");
+    if (size) css.push(`font-size:${size}`);
+    const font = tp.getAttributeNS(NS.style, "font-name") || tp.getAttributeNS(NS.fo, "font-family");
+    if (font) css.push(`font-family:${font.replace(/"/g, "")}`);
+    const deco: string[] = [];
+    const ul = tp.getAttributeNS(NS.style, "text-underline-style");
+    if (ul && ul !== "none") deco.push("underline");
+    const lt = tp.getAttributeNS(NS.style, "text-line-through-style");
+    if (lt && lt !== "none") deco.push("line-through");
+    if (deco.length) css.push(`text-decoration:${deco.join(" ")}`);
+    const va = tp.getAttributeNS(NS.style, "text-position");
+    if (va?.startsWith("super")) css.push("vertical-align:super");
+    else if (va?.startsWith("sub")) css.push("vertical-align:sub");
+  }
+  const pp = childElemsNS(st, NS.style, "paragraph-properties")[0];
+  if (pp) {
+    const ta = pp.getAttributeNS(NS.fo, "text-align");
+    if (ta) css.push(`text-align:${ta === "start" ? "left" : ta === "end" ? "right" : ta}`);
+    const pbg = pp.getAttributeNS(NS.fo, "background-color");
+    if (pbg && pbg !== "transparent") css.push(`background-color:${pbg}`);
+    const pborder = pp.getAttributeNS(NS.fo, "border");
+    if (pborder) css.push(`border:${cssBorder(pborder)}`);
+    const pad = pp.getAttributeNS(NS.fo, "padding");
+    if (pad) css.push(`padding:${pad}`);
+  }
+  const cp = childElemsNS(st, NS.style, "table-cell-properties")[0];
+  if (cp) {
+    const bg = cp.getAttributeNS(NS.fo, "background-color");
+    if (bg && bg !== "transparent") css.push(`background-color:${bg}`);
+    const border = cp.getAttributeNS(NS.fo, "border");
+    if (border) css.push(`border:${cssBorder(border)}`);
+    const cva = cp.getAttributeNS(NS.style, "vertical-align");
+    if (cva && cva !== "automatic") css.push(`vertical-align:${cva}`);
+  }
+  return css.join(";");
+}
+
+function parseStyles(xmlDoc: Document): OdfStyles {
+  const css = new Map<string, string>();
+  const colWidth = new Map<string, string>();
+  const autos = xmlDoc.getElementsByTagNameNS(NS.office, "automatic-styles")[0];
+  if (!autos) return { css, colWidth };
+  for (const st of childElemsNS(autos, NS.style, "style")) {
+    const name = st.getAttributeNS(NS.style, "name");
+    if (!name) continue;
+    if (st.getAttributeNS(NS.style, "family") === "table-column") {
+      const cp = childElemsNS(st, NS.style, "table-column-properties")[0];
+      const w = cp?.getAttributeNS(NS.style, "column-width");
+      if (w) colWidth.set(name, w);
+    } else {
+      const c = extractCss(st);
+      if (c) css.set(name, c);
+    }
+  }
+  return { css, colWidth };
+}
+
+function cellText(cell: Element): string {
+  const ps = childElemsNS(cell, NS.text, "p");
+  if (ps.length === 0) return "";
+  return ps.map((p) => esc(p.textContent ?? "")).join("<br>");
+}
+
+interface GridCell {
+  css: string;
+  html: string;
+  empty: boolean;
+}
+
+function renderSpreadsheet(spreadsheet: Element, styles: OdfStyles): string {
+  const out: string[] = [
+    "<style>",
+    "table.ods-sheet{border-collapse:collapse;font-size:12px;margin:0 0 24px;table-layout:fixed}",
+    "table.ods-sheet td{border:1px solid #e2e2e2;padding:2px 6px;vertical-align:top;word-break:break-word}",
+    "</style>",
+  ];
+  const tables = childElemsNS(spreadsheet, NS.table, "table");
+  for (const table of tables) {
+    const colWidths: (string | undefined)[] = [];
+    for (const col of childElemsNS(table, NS.table, "table-column")) {
+      const rep = clampInt(col.getAttributeNS(NS.table, "number-columns-repeated"), 1);
+      const sn = col.getAttributeNS(NS.table, "style-name");
+      const w = sn ? styles.colWidth.get(sn) : undefined;
+      for (let i = 0; i < rep && colWidths.length < MAX_COLS; i++) colWidths.push(w);
+    }
+
+    const grid: GridCell[][] = [];
+    for (const row of childElemsNS(table, NS.table, "table-row")) {
+      if (grid.length >= MAX_ROWS) break;
+      const rrep = clampInt(row.getAttributeNS(NS.table, "number-rows-repeated"), 1);
+      const cells: GridCell[] = [];
+      for (const cell of childElemsNS(row, NS.table, "table-cell")) {
+        if (cells.length >= MAX_COLS) break;
+        const crep = clampInt(cell.getAttributeNS(NS.table, "number-columns-repeated"), 1);
+        const sn = cell.getAttributeNS(NS.table, "style-name");
+        let css = sn ? (styles.css.get(sn) ?? "") : "";
+        const html = cellText(cell);
+        const vtype = cell.getAttributeNS(NS.office, "value-type");
+        const numeric = vtype === "float" || vtype === "currency" || vtype === "percentage";
+        if (html && numeric && !css.includes("text-align")) css += `${css ? ";" : ""}text-align:right`;
+        // Repeated cell: show content once, then empty copies to keep alignment.
+        cells.push({ css, html, empty: !html });
+        for (let i = 1; i < crep && cells.length < MAX_COLS; i++) {
+          cells.push({ css, html: "", empty: true });
+        }
+      }
+      for (let i = 0; i < Math.min(rrep, MAX_ROWS - grid.length); i++) grid.push(cells);
+    }
+
+    // Trim to the used range (drop the huge trailing empty repeats).
+    let maxCol = -1;
+    let maxRow = -1;
+    grid.forEach((r, ri) =>
+      r.forEach((c, ci) => {
+        if (!c.empty) {
+          if (ci > maxCol) maxCol = ci;
+          if (ri > maxRow) maxRow = ri;
+        }
+      }),
+    );
+    if (maxCol < 0) continue; // empty sheet
+
+    const name = table.getAttributeNS(NS.table, "name");
+    if (name && tables.length > 1) {
+      out.push(`<div style="font-weight:600;margin:12px 0 4px">${esc(name)}</div>`);
+    }
+    out.push('<table class="ods-sheet"><colgroup>');
+    for (let ci = 0; ci <= maxCol; ci++) {
+      const w = colWidths[ci];
+      out.push(w ? `<col style="width:${w}">` : "<col>");
+    }
+    out.push("</colgroup><tbody>");
+    for (let ri = 0; ri <= maxRow; ri++) {
+      const r = grid[ri] ?? [];
+      out.push("<tr>");
+      for (let ci = 0; ci <= maxCol; ci++) {
+        const c = r[ci] ?? { css: "", html: "", empty: true };
+        out.push(`<td${c.css ? ` style="${c.css}"` : ""}>${c.html}</td>`);
+      }
+      out.push("</tr>");
+    }
+    out.push("</tbody></table>");
+  }
+  return out.join("");
+}
diff --git a/frontend/src/components/thread/previewKind.ts b/frontend/src/components/thread/previewKind.ts
new file mode 100644
index 0000000..86b862d
--- /dev/null
+++ b/frontend/src/components/thread/previewKind.ts
@@ -0,0 +1,25 @@
+// Attachment-preview type helpers. Kept free of pdf.js so `Attachments` can decide
+// clickability without pulling the heavy preview bundle (lazy-loaded on open).
+
+const IMAGE_EXT = new Set(["jpg", "jpeg", "png", "gif", "webp"]);
+// Office docs converted to HTML client-side (docx via mammoth, ODF via JSZip).
+const OFFICE_EXT = new Set(["docx", "xlsx", "odt", "ods", "odp", "odg"]);
+
+export function extOf(name: string): string {
+  return name.split(".").pop()?.toLowerCase() ?? "";
+}
+
+export function isPreviewable(name: string): boolean {
+  const e = extOf(name);
+  return e === "pdf" || e === "txt" || IMAGE_EXT.has(e) || OFFICE_EXT.has(e);
+}
+
+export type PreviewKind = "image" | "pdf" | "text" | "office";
+
+export function kindOf(name: string): PreviewKind {
+  const e = extOf(name);
+  if (e === "pdf") return "pdf";
+  if (e === "txt") return "text";
+  if (OFFICE_EXT.has(e)) return "office";
+  return "image";
+}
diff --git a/frontend/src/i18n/en.ts b/frontend/src/i18n/en.ts
index 42c1e26..975dec9 100644
--- a/frontend/src/i18n/en.ts
+++ b/frontend/src/i18n/en.ts
@@ -49,6 +49,8 @@ export const en = {
   "nav.spam": "Spam",
   "nav.trash": "Trash",
   "nav.search": "Search mail…",
+  "nav.searchInTrash": "Search in Trash",
+  "nav.searchInSpam": "Search in Spam",
   "search.save": "Save this search",
   "search.saved": "Saved searches",
   "search.saveNamePrompt": "Name this saved search:",
@@ -61,6 +63,10 @@ export const en = {
   "mail.expandAll": "Expand all",
   "mail.collapseAll": "Collapse all",
   "mail.print": "Print",
+  "mail.previewPage": "Page {current} / {total}",
+  "mail.previewResetZoom": "Reset zoom",
+  "mail.previewPrev": "Previous",
+  "mail.previewNext": "Next",
   "mail.orderOldest": "Oldest first",
   "mail.orderNewest": "Newest first",
   "filter.all": "All mail",
@@ -120,6 +126,7 @@ export const en = {
   "compose.saveDraft": "Save draft",
   "compose.closePrompt": "Save this message as a draft?",
   "compose.sent": "Message sent.",
+  "compose.undoIn": "{count} seconds to",
   "compose.undo": "Undo",
   "compose.sendFailed": "Send failed.",
   "compose.savingDraft": "Saving draft…",
@@ -156,6 +163,8 @@ export const en = {
   "compose.imageTooLarge": "Image is too large (max 5 MB).",
   "compose.attachTooLarge": "File exceeds the 25 MB limit.",
   "compose.attachments": "Attachments",
+  "compose.dropAttach": "Drop to attach",
+  "compose.dropBody": "Drop image to insert · other files attach",
 
   "wizard.title": "Add mail account",
   "wizard.step1": "Your email address",
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index a8df9c2..c1836ac 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -230,6 +230,10 @@ export const api = {
     apiFetch<AttachmentOut[]>(`/messages/${messageId}/attachments`),
   attachmentDownloadUrl: (messageId: string, attachmentId: string) =>
     `/api/messages/${messageId}/attachments/${attachmentId}?download=1`,
+  // Inline URL (no ?download): safe types are served with their real content-type
+  // for in-app preview (image/pdf/text).
+  attachmentUrl: (messageId: string, attachmentId: string) =>
+    `/api/messages/${messageId}/attachments/${attachmentId}`,
   attachmentsZipUrl: (messageId: string, ids?: string[]) =>
     `/api/messages/${messageId}/attachments.zip${ids && ids.length ? `?ids=${ids.join(",")}` : ""}`,
   uploadComposeAttachment: (file: File) => {
diff --git a/frontend/src/routes/MailLayout.tsx b/frontend/src/routes/MailLayout.tsx
index 495a3d2..9f2912a 100644
--- a/frontend/src/routes/MailLayout.tsx
+++ b/frontend/src/routes/MailLayout.tsx
@@ -65,6 +65,9 @@ export function MailLayout() {
   // Mail-list selection (checkboxes). Lives here so the reading pane can show the
   // bulk-action bar / count while any conversation is selected.
   const [checkedIds, setCheckedIds] = useState<Set<string>>(new Set());
+  // Rows just archived/trashed/deleted from the list: greyed out and unclickable
+  // for immediate feedback (search results don't always drop the row on refetch).
+  const [dimmedIds, setDimmedIds] = useState<Set<string>>(new Set());
   const toggleCheck = (id: string) =>
     setCheckedIds((prev) => {
       const next = new Set(prev);
@@ -116,9 +119,16 @@ export function MailLayout() {
     queryFn: api.remoteDrafts,
     enabled: isDrafts,
   });
+  // Trash/Spam are excluded from normal search, so while viewing them the search
+  // box scopes to that folder instead (via an in: operator) and searches only it.
+  const searchScope =
+    currentFolder === "trash" ? "in:trash" : currentFolder === "junk" ? "in:junk" : "";
+  const effectiveQuery = searchScope
+    ? `${searchScope} ${debouncedTerm}`.trim()
+    : debouncedTerm;
   const searchQuery = useQuery({
-    queryKey: ["search", debouncedTerm],
-    queryFn: () => api.search(debouncedTerm),
+    queryKey: ["search", effectiveQuery],
+    queryFn: () => api.search(effectiveQuery),
     enabled: searching,
   });
   const savedSearchesQuery = useQuery({ queryKey: ["saved-searches"], queryFn: api.savedSearches });
@@ -192,6 +202,13 @@ export function MailLayout() {
     setTerm(s.query);
     navigate("/mail");
   };
+  // Switch folder/account view. Clears any active search so the folder actually
+  // loads — otherwise the list stays stuck on (now-stale) search results.
+  const selectView = (v: string) => {
+    setTerm("");
+    setView(v);
+    navigate("/mail");
+  };
 
   // Auto-mark an opened thread read after a short dwell (4s), not instantly — and
   // cancel it if you leave before then, so a quick glance doesn't mark it read.
@@ -289,13 +306,18 @@ export function MailLayout() {
       detail.pinned ? ["\\Flagged"] : [],
     );
     queryClient.invalidateQueries({ queryKey: ["threads"] });
+    queryClient.invalidateQueries({ queryKey: ["search"] });
     queryClient.invalidateQueries({ queryKey: ["thread", detail.id] });
   };
 
   // Per-thread actions for the mail-list hover buttons (act on a given id, not the
   // currently-open thread). Close the reading pane only if the acted thread is open.
   const listAfterMove = (id: string) => {
+    // In a folder the refetch below removes the row (it left the folder's scope).
+    // In search the row may still match a global query, so grey it out for feedback.
+    if (searching) setDimmedIds((prev) => new Set(prev).add(id));
     queryClient.invalidateQueries({ queryKey: ["threads"] });
+    queryClient.invalidateQueries({ queryKey: ["search"] }); // keep search results in sync
     queryClient.invalidateQueries({ queryKey: ["quota"] });
     queryClient.invalidateQueries({ queryKey: ["folder-counts"] });
     if (id === threadId) navigate("/mail");
@@ -319,11 +341,13 @@ export function MailLayout() {
   const listTogglePin = async (id: string, pinned: boolean) => {
     await api.threadFlags(id, pinned ? [] : ["\\Flagged"], pinned ? ["\\Flagged"] : []);
     queryClient.invalidateQueries({ queryKey: ["threads"] });
+    queryClient.invalidateQueries({ queryKey: ["search"] }); // pin state on search results
     queryClient.invalidateQueries({ queryKey: ["thread", id] });
   };
 
   // Selection resets when you leave the folder.
   useEffect(() => setCheckedIds(new Set()), [view]);
+  useEffect(() => setDimmedIds(new Set()), [view, debouncedTerm]);
 
   // Bulk actions run the given operation over every selected thread, then clear the
   // selection and refresh (navigating away if the open thread was among them).
@@ -382,10 +406,7 @@ export function MailLayout() {
     onReplyAll: () => setReplySignal({ kind: "reply_all", seq: Date.now() }),
     onForward: () => setReplySignal({ kind: "forward", seq: Date.now() }),
     onArchive: archive,
-    onGoInbox: () => {
-      setView("folder:inbox");
-      navigate("/mail");
-    },
+    onGoInbox: () => selectView("folder:inbox"),
     onEscape: () => setComposing(null),
     onNext: () => openRelative(1),
     onPrev: () => openRelative(-1),
@@ -447,10 +468,7 @@ export function MailLayout() {
               active={view === f.view}
               collapsed={collapsed}
               title={collapsed ? t(f.label) : undefined}
-              onClick={() => {
-                setView(f.view);
-                navigate("/mail");
-              }}
+              onClick={() => selectView(f.view)}
             >
               <Icon name={f.icon} size={f.icon === "trash" ? 20 : 18} />
               {!collapsed && <span className="flex-1 truncate">{t(f.label)}</span>}
@@ -470,7 +488,7 @@ export function MailLayout() {
                 <SidebarItem
                   key={a.id}
                   active={view === `account:${a.id}`}
-                  onClick={() => { setView(`account:${a.id}`); navigate("/mail"); }}
+                  onClick={() => selectView(`account:${a.id}`)}
                 >
                   <AccountDot
                     color={a.color}
@@ -569,7 +587,13 @@ export function MailLayout() {
               className={`w-full rounded-lg border border-app-border bg-app-bg px-3 py-1.5 text-[15px] text-app-fg placeholder:text-app-faint focus:border-app-accent focus:outline-none ${
                 term ? "pr-14" : "pr-8"
               }`}
-              placeholder={t("nav.search")}
+              placeholder={
+                currentFolder === "trash"
+                  ? t("nav.searchInTrash")
+                  : currentFolder === "junk"
+                    ? t("nav.searchInSpam")
+                    : t("nav.search")
+              }
               value={term}
               onChange={(e) => setTerm(e.target.value)}
             />
@@ -683,6 +707,7 @@ export function MailLayout() {
               onDeletePermanent={listDeletePermanent}
               onTogglePin={listTogglePin}
               checkedIds={checkedIds}
+              dimmedIds={dimmedIds}
               onToggleCheck={toggleCheck}
             />
           )}
diff --git a/frontend/src/types/xlsx-preview.d.ts b/frontend/src/types/xlsx-preview.d.ts
new file mode 100644
index 0000000..5a34420
--- /dev/null
+++ b/frontend/src/types/xlsx-preview.d.ts
@@ -0,0 +1,11 @@
+// xlsx-preview ships types in dist/index.d.ts but doesn't declare them in
+// package.json, so TS can't find them. Minimal ambient declaration for the API
+// we use: xlsx2Html(ArrayBuffer|Blob|File) -> Promise<HTML string>.
+declare module "xlsx-preview" {
+  export function xlsx2Html(
+    data: ArrayBuffer | Blob | File,
+    options?: Record<string, unknown>,
+  ): Promise<string | ArrayBuffer | string[]>;
+  const _default: { xlsx2Html: typeof xlsx2Html };
+  export default _default;
+}
diff --git a/screenshots/ods-webmail.png b/screenshots/ods-webmail.png
new file mode 100644
index 0000000..aaabfda
Binary files /dev/null and b/screenshots/ods-webmail.png differ
diff --git a/screenshots/ods_libreoffice.png b/screenshots/ods_libreoffice.png
new file mode 100644
index 0000000..0251b33
Binary files /dev/null and b/screenshots/ods_libreoffice.png differ