diff --git a/__tests__/components/brain/my-stream/MyStreamWaveChat.test.tsx b/__tests__/components/brain/my-stream/MyStreamWaveChat.test.tsx
index d0e14985ab..ab2a265e0a 100644
--- a/__tests__/components/brain/my-stream/MyStreamWaveChat.test.tsx
+++ b/__tests__/components/brain/my-stream/MyStreamWaveChat.test.tsx
@@ -102,11 +102,18 @@ jest.mock("@/services/api/common-api", () => ({
 
 const wave = { id: "10", participation: {}, metrics: { muted: false } } as any;
 const mockOnDropClick = jest.fn();
+const setDocumentVisibility = (visibilityState: DocumentVisibilityState) => {
+  Object.defineProperty(document, "visibilityState", {
+    configurable: true,
+    value: visibilityState,
+  });
+};
 
 describe("MyStreamWaveChat", () => {
   let store: any;
 
   beforeEach(() => {
+    setDocumentVisibility("visible");
     capturedPropsHolder.current = {};
     replaceMock.mockClear();
     searchParamsMock.get.mockReset();
@@ -244,6 +251,27 @@ describe("MyStreamWaveChat", () => {
     });
   });
 
+  it("does not call the read endpoint on unmount when the tab is hidden", async () => {
+    setDocumentVisibility("hidden");
+
+    const { unmount } = renderWithProvider(
+      <MyStreamWaveChat
+        wave={wave}
+        firstUnreadSerialNo={null}
+        viewMode="chat"
+        onDropClick={mockOnDropClick}
+      />
+    );
+
+    await act(async () => {
+      unmount();
+    });
+
+    expect(commonApiPostWithoutBodyAndResponse).not.toHaveBeenCalled();
+    expect(invalidateNotificationsMock).not.toHaveBeenCalled();
+    expect(mockRemoveWaveDeliveredNotifications).not.toHaveBeenCalled();
+  });
+
   it("skips notification cleanup on unmount for anonymous viewers", async () => {
     mockUseAuth.mockReturnValue({
       connectedProfile: null,
diff --git a/__tests__/components/drops/view/item/content/attachments/DropAttachmentDisplay.test.tsx b/__tests__/components/drops/view/item/content/attachments/DropAttachmentDisplay.test.tsx
index a1a4988dd4..2c3d1cfdce 100644
--- a/__tests__/components/drops/view/item/content/attachments/DropAttachmentDisplay.test.tsx
+++ b/__tests__/components/drops/view/item/content/attachments/DropAttachmentDisplay.test.tsx
@@ -116,12 +116,13 @@ describe("DropAttachmentDisplay", () => {
     );
 
     expect(
-      screen.getByRole("link", { name: "Open attachment" })
-    ).toHaveAttribute("href", "https://example.com/files/paper.pdf");
+      screen.queryByRole("link", { name: "Open attachment" })
+    ).not.toBeInTheDocument();
 
     await user.click(
-      screen.getByRole("button", { name: "Download attachment" })
+      screen.getByRole("button", { name: "Attachment options" })
     );
+    await user.click(screen.getByRole("button", { name: "Download" }));
 
     expect(createObjectURLSpy).toHaveBeenCalled();
     expect(clickSpy).toHaveBeenCalled();
@@ -183,7 +184,7 @@ describe("DropAttachmentDisplay", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("copies CSV attachment links without showing the PDF open action", async () => {
+  it("copies CSV attachment links without showing the open action", async () => {
     const user = userEvent.setup();
     const writeText = jest.fn().mockResolvedValue(undefined);
     Object.defineProperty(navigator, "clipboard", {
@@ -198,16 +199,46 @@ describe("DropAttachmentDisplay", () => {
       />
     );
 
-    const copyButton = screen.getByRole("button", {
-      name: "Copy attachment link",
-    });
+    await user.click(
+      screen.getByRole("button", { name: "Attachment options" })
+    );
+    const copyButton = screen.getByRole("button", { name: "Copy link" });
     await user.click(copyButton);
 
     expect(writeText).toHaveBeenCalledWith(
       "https://example.com/files/data.csv"
     );
-    expect(copyButton).toHaveAttribute("title", "Copied");
-    expect(copyButton).toHaveClass("tw-border-primary-400");
+    expect(screen.getByRole("button", { name: "Copied" })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("link", { name: "Open attachment" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("copies PDF attachment links without showing the open action", async () => {
+    const user = userEvent.setup();
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    });
+
+    render(
+      <DropAttachmentDisplay
+        mimeType="application/pdf"
+        attachmentUrl="https://example.com/files/paper.pdf"
+      />
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "Attachment options" })
+    );
+    const copyButton = screen.getByRole("button", { name: "Copy link" });
+    await user.click(copyButton);
+
+    expect(writeText).toHaveBeenCalledWith(
+      "https://example.com/files/paper.pdf"
+    );
+    expect(screen.getByRole("button", { name: "Copied" })).toBeInTheDocument();
     expect(
       screen.queryByRole("link", { name: "Open attachment" })
     ).not.toBeInTheDocument();
@@ -230,11 +261,134 @@ describe("DropAttachmentDisplay", () => {
     );
 
     await user.click(
-      screen.getByRole("button", { name: "Copy attachment link" })
+      screen.getByRole("button", { name: "Attachment options" })
+    );
+    await user.click(screen.getByRole("button", { name: "Copy link" }));
+
+    expect(writeText).toHaveBeenCalledWith(
+      "https://ipfs.example.com/ipfs/bafybeigateway/sample.csv"
+    );
+  });
+
+  it("opens attachment preview without loading metadata", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = jest.spyOn(globalThis, "fetch").mockResolvedValue({
+      ok: true,
+      text: async () => JSON.stringify({ name: "Sample", edition: 1 }),
+    } as Response);
+
+    render(
+      <DropAttachmentDisplay
+        mimeType="application/pdf"
+        attachmentUrl="ipfs://bafybeigateway/sample.pdf"
+        fileName="sample.pdf"
+      />
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "Render attachment preview" })
     );
 
+    expect(screen.getByTitle("sample.pdf")).toBeInTheDocument();
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(screen.queryByText(/"name": "Sample"/)).not.toBeInTheDocument();
+  });
+
+  it("renders IPFS attachment metadata from the root CID", async () => {
+    const user = userEvent.setup();
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    });
+    jest.spyOn(globalThis, "fetch").mockResolvedValue({
+      ok: true,
+      text: async () => JSON.stringify({ name: "Sample", edition: 1 }),
+    } as Response);
+
+    render(
+      <DropAttachmentDisplay
+        mimeType="application/pdf"
+        attachmentUrl="ipfs://bafybeigateway/sample.pdf"
+        fileName="sample.pdf"
+      />
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "Attachment options" })
+    );
+    await user.click(screen.getByRole("button", { name: "View metadata" }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/"name": "Sample"/)).toBeInTheDocument();
+    });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      "https://ipfs.example.com/ipfs/bafybeigateway/metadata.json",
+      expect.objectContaining({ signal: expect.any(AbortSignal) })
+    );
+
+    const copyMetadataButton = screen.getByRole("button", {
+      name: "Copy metadata link",
+    });
+    await user.click(copyMetadataButton);
+
+    expect(writeText).toHaveBeenCalledWith(
+      "https://ipfs.example.com/ipfs/bafybeigateway/metadata.json"
+    );
+    expect(copyMetadataButton).toHaveAttribute("title", "Copied");
+    await user.click(
+      screen.getByRole("button", { name: "Close attachment details" })
+    );
+    expect(screen.queryByText(/"name": "Sample"/)).not.toBeInTheDocument();
+  });
+
+  it("shows a metadata not found message when metadata cannot load", async () => {
+    const user = userEvent.setup();
+    jest.spyOn(globalThis, "fetch").mockResolvedValue({
+      ok: false,
+      text: async () => "",
+    } as Response);
+
+    render(
+      <DropAttachmentDisplay
+        mimeType="application/pdf"
+        attachmentUrl="ipfs://bafybeigateway/sample.pdf"
+        fileName="sample.pdf"
+      />
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "Attachment options" })
+    );
+    await user.click(screen.getByRole("button", { name: "View metadata" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Metadata not found.")).toBeInTheDocument();
+    });
+  });
+
+  it("copies attachment links from the options menu", async () => {
+    const user = userEvent.setup();
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    });
+    render(
+      <DropAttachmentDisplay
+        mimeType="text/csv"
+        attachmentUrl="ipfs://bafybeigateway/sample.csv"
+        fileName="sample.csv"
+      />
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "Attachment options" })
+    );
+    await user.click(screen.getByRole("button", { name: "Copy link" }));
     expect(writeText).toHaveBeenCalledWith(
       "https://ipfs.example.com/ipfs/bafybeigateway/sample.csv"
     );
+    expect(screen.getByRole("button", { name: "Copied" })).toBeInTheDocument();
   });
 });
diff --git a/__tests__/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.test.tsx b/__tests__/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.test.tsx
index 82d6de3319..94c6b6a625 100644
--- a/__tests__/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.test.tsx
+++ b/__tests__/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.test.tsx
@@ -1,7 +1,7 @@
 import { ReactQueryWrapperContext } from "@/components/react-query-wrapper/ReactQueryWrapper";
 import { useWaveDropsNotificationRead } from "@/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead";
 import { commonApiPostWithoutBodyAndResponse } from "@/services/api/common-api";
-import { render, waitFor } from "@testing-library/react";
+import { act, render, waitFor } from "@testing-library/react";
 import React from "react";
 
 jest.mock("@/services/api/common-api", () => ({
@@ -33,8 +33,15 @@ describe("useWaveDropsNotificationRead", () => {
   const removeWaveDeliveredNotifications = jest
     .fn()
     .mockResolvedValue(undefined);
+  const setDocumentVisibility = (visibilityState: DocumentVisibilityState) => {
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: visibilityState,
+    });
+  };
 
   beforeEach(() => {
+    setDocumentVisibility("visible");
     invalidateNotifications.mockClear();
     removeWaveDeliveredNotifications.mockClear();
     (
@@ -82,4 +89,54 @@ describe("useWaveDropsNotificationRead", () => {
       expect(invalidateNotifications).toHaveBeenCalled();
     });
   });
+
+  it("does not call the read endpoint when the tab is hidden", () => {
+    setDocumentVisibility("hidden");
+
+    render(
+      <ReactQueryWrapperContext.Provider
+        value={{ invalidateNotifications } as any}
+      >
+        <TestComponent
+          waveId="wave-1"
+          removeWaveDeliveredNotifications={removeWaveDeliveredNotifications}
+        />
+      </ReactQueryWrapperContext.Provider>
+    );
+
+    expect(commonApiPostWithoutBodyAndResponse).not.toHaveBeenCalled();
+    expect(invalidateNotifications).not.toHaveBeenCalled();
+    expect(removeWaveDeliveredNotifications).not.toHaveBeenCalled();
+  });
+
+  it("syncs read state when a hidden tab becomes visible", async () => {
+    setDocumentVisibility("hidden");
+
+    render(
+      <ReactQueryWrapperContext.Provider
+        value={{ invalidateNotifications } as any}
+      >
+        <TestComponent
+          waveId="wave-1"
+          removeWaveDeliveredNotifications={removeWaveDeliveredNotifications}
+        />
+      </ReactQueryWrapperContext.Provider>
+    );
+
+    expect(removeWaveDeliveredNotifications).not.toHaveBeenCalled();
+    expect(commonApiPostWithoutBodyAndResponse).not.toHaveBeenCalled();
+
+    act(() => {
+      setDocumentVisibility("visible");
+      document.dispatchEvent(new Event("visibilitychange"));
+    });
+
+    await waitFor(() => {
+      expect(removeWaveDeliveredNotifications).toHaveBeenCalledWith("wave-1");
+      expect(commonApiPostWithoutBodyAndResponse).toHaveBeenCalledWith({
+        endpoint: "notifications/wave/wave-1/read",
+      });
+      expect(invalidateNotifications).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/__tests__/useWaveRealtimeUpdater.test.ts b/__tests__/useWaveRealtimeUpdater.test.ts
index 022c5f7dd8..b294d15678 100644
--- a/__tests__/useWaveRealtimeUpdater.test.ts
+++ b/__tests__/useWaveRealtimeUpdater.test.ts
@@ -17,6 +17,12 @@ jest.mock("@/services/api/drop-api", () => ({
   fetchDropByIdBatched: jest.fn(),
 }));
 
+jest.mock("@tanstack/react-query", () => ({
+  useQueryClient: jest.fn(() => ({
+    setQueriesData: jest.fn(),
+  })),
+}));
+
 const {
   commonApiPostWithoutBodyAndResponse,
 } = require("@/services/api/common-api");
@@ -25,6 +31,17 @@ const { fetchDropByIdBatched } = require("@/services/api/drop-api");
 const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
 
 describe("useWaveRealtimeUpdater", () => {
+  const setDocumentVisibility = (visibilityState: DocumentVisibilityState) => {
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: visibilityState,
+    });
+  };
+
+  beforeEach(() => {
+    setDocumentVisibility("visible");
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -219,6 +236,28 @@ describe("useWaveRealtimeUpdater", () => {
     });
   });
 
+  it("does not call the read endpoint for an active hidden wave", async () => {
+    setDocumentVisibility("hidden");
+    const store = {
+      wave1: { drops: [], latestFetchedSerialNo: 10 },
+    };
+    const props = baseProps(store);
+    props.activeWaveId = "wave1";
+    const { result } = renderHook(() => useWaveRealtimeUpdater(props));
+    const drop: any = { id: "d9-hidden", wave: { id: "wave1" }, author: {} };
+
+    await act(async () =>
+      result.current.processIncomingDrop(
+        drop,
+        ProcessIncomingDropType.DROP_INSERT
+      )
+    );
+    await flushPromises();
+
+    expect(commonApiPostWithoutBodyAndResponse).not.toHaveBeenCalled();
+    expect(props.removeWaveDeliveredNotifications).not.toHaveBeenCalled();
+  });
+
   it("does not mark non-active wave as read", async () => {
     const store = {
       wave1: { drops: [], latestFetchedSerialNo: 10 },
diff --git a/components/brain/my-stream/MyStreamWaveChat.tsx b/components/brain/my-stream/MyStreamWaveChat.tsx
index d436127be6..c8a4534c33 100644
--- a/components/brain/my-stream/MyStreamWaveChat.tsx
+++ b/components/brain/my-stream/MyStreamWaveChat.tsx
@@ -81,6 +81,10 @@ const WaveChatLeaveHandler: React.FC<WaveChatLeaveHandlerProps> = ({
     return () => {
       setUnreadDividerSerialNo(null);
       void (async () => {
+        if (document.visibilityState !== "visible") {
+          return;
+        }
+
         try {
           await Promise.resolve(removeWaveDeliveredNotifications(waveId));
         } catch (error: unknown) {
diff --git a/components/drops/view/item/content/attachments/DropAttachmentDisplay.tsx b/components/drops/view/item/content/attachments/DropAttachmentDisplay.tsx
index 295fed9d0a..3e9cde0b89 100644
--- a/components/drops/view/item/content/attachments/DropAttachmentDisplay.tsx
+++ b/components/drops/view/item/content/attachments/DropAttachmentDisplay.tsx
@@ -4,14 +4,18 @@ import { getFileInfoFromUrl } from "@/helpers/file.helpers";
 import { shareFetchedBlobInNativeApp } from "@/helpers/capacitorBlobDownload.helpers";
 import { TOOLTIP_STYLES } from "@/helpers/tooltip.helpers";
 import { resolveIpfsUrlSync } from "@/components/ipfs/IPFSContext";
+import CommonDropdownItemsDefaultWrapper from "@/components/utils/select/dropdown/CommonDropdownItemsDefaultWrapper";
+import JsonPreview from "@/components/drops/view/item/content/attachments/JsonPreview";
 import { faShieldHalved } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   ArrowDownTrayIcon,
-  ArrowTopRightOnSquareIcon,
+  CodeBracketSquareIcon,
   DocumentIcon,
+  EllipsisHorizontalIcon,
   EyeIcon,
   EyeSlashIcon,
+  LinkIcon,
   TableCellsIcon,
 } from "@heroicons/react/24/outline";
 import useCapacitor from "@/hooks/useCapacitor";
@@ -19,6 +23,7 @@ import useDeviceInfo from "@/hooks/useDeviceInfo";
 import useIsMobileDevice from "@/hooks/isMobileDevice";
 import clsx from "clsx";
 import { Tooltip } from "react-tooltip";
+import type { ReactNode, RefObject } from "react";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 
 const SAFE_URL_PROTOCOLS = new Set(["https:", "http:", "blob:"]);
@@ -41,6 +46,40 @@ function getSafeAttachmentUrl(rawUrl: string): string | null {
 
 type AttachmentRenderType = "csv" | "pdf" | "unknown";
 
+function getAttachmentMetadataUrl(rawUrl: string): string | null {
+  const trimmedUrl = rawUrl.trim();
+  if (!trimmedUrl) {
+    return null;
+  }
+
+  if (trimmedUrl.toLowerCase().startsWith("ipfs://")) {
+    const withoutProtocol = trimmedUrl.slice("ipfs://".length);
+    const rootCid = withoutProtocol.split(/[/?#]/)[0];
+    return rootCid ? `ipfs://${rootCid}/metadata.json` : null;
+  }
+
+  try {
+    const base = globalThis.window?.location?.origin || "https://6529.io";
+    const parsed = new URL(trimmedUrl, base);
+    const pathSegments = parsed.pathname.split("/");
+    const ipfsIndex = pathSegments.indexOf("ipfs");
+
+    if (ipfsIndex >= 0 && pathSegments[ipfsIndex + 1]) {
+      parsed.pathname = [
+        ...pathSegments.slice(0, ipfsIndex + 2),
+        "metadata.json",
+      ].join("/");
+      parsed.search = "";
+      parsed.hash = "";
+      return parsed.toString();
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
 const CSV_PREVIEW_MAX_ROWS = 51;
 const CSV_PREVIEW_MAX_COLUMNS = 12;
 const CSV_PREVIEW_MAX_CHARS = 500_000;
@@ -57,7 +96,6 @@ const TRUSTED_BADGE_ICON_SIZE_CLASS_BY_SIZE = {
   default: "tw-h-2.5 tw-w-2.5",
   compact: "tw-h-[9px] tw-w-[9px]",
 } as const;
-
 const CSV_PREVIEW_TIMEOUT_MESSAGE =
   "CSV preview timed out. Please download the file.";
 const CSV_PREVIEW_SIZE_MESSAGE =
@@ -183,7 +221,9 @@ async function releaseCsvPreviewReader(
   await reader.cancel().catch(() => undefined);
   try {
     reader.releaseLock();
-  } catch {}
+  } catch {
+    // Reader may already be released after cancellation or stream completion.
+  }
 }
 
 async function readCsvPreviewFromStreamBody(
@@ -537,7 +577,7 @@ function CsvAttachmentPreview({ url }: { readonly url: string }) {
   let isFirstRow = true;
 
   return (
-    <div className="tw-max-h-[28rem] tw-overflow-auto tw-rounded-b-lg tw-border tw-border-t-0 tw-border-solid tw-border-iron-700 tw-bg-iron-950">
+    <div className="tw-overflow-x-auto tw-rounded-b-lg tw-border tw-border-t-0 tw-border-solid tw-border-iron-700 tw-bg-iron-950">
       <table className="tw-w-full tw-border-separate tw-border-spacing-0 tw-text-left tw-text-xs tw-text-iron-200">
         <tbody>
           {visibleRows.map((row) => {
@@ -577,6 +617,157 @@ function CsvAttachmentPreview({ url }: { readonly url: string }) {
   );
 }
 
+function AnimatedAttachmentPanel({
+  isOpen,
+  children,
+}: {
+  readonly isOpen: boolean;
+  readonly children: ReactNode;
+}) {
+  const [shouldRender, setShouldRender] = useState(isOpen);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      return;
+    }
+
+    const timeoutId = globalThis.window.setTimeout(
+      () => setShouldRender(false),
+      220
+    );
+    return () => globalThis.window.clearTimeout(timeoutId);
+  }, [isOpen]);
+
+  if (!shouldRender && !isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className={clsx(
+        "tw-grid tw-transition-all tw-duration-200 tw-ease-out",
+        isOpen ? "tw-opacity-100" : "tw-opacity-0"
+      )}
+      style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
+    >
+      <div className="tw-min-h-0 tw-overflow-hidden">
+        <div
+          className={clsx(
+            "tw-transform-gpu tw-transition-transform tw-duration-200 tw-ease-out",
+            isOpen ? "tw-translate-y-0" : "-tw-translate-y-2"
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AttachmentMoreMenu({
+  isOpen,
+  hasMetadata,
+  isDetailsOpen,
+  copiedLink,
+  isDownloading,
+  buttonRef,
+  onToggle,
+  onToggleDetails,
+  onCopyLink,
+  onDownload,
+}: {
+  readonly isOpen: boolean;
+  readonly hasMetadata: boolean;
+  readonly isDetailsOpen: boolean;
+  readonly copiedLink: boolean;
+  readonly isDownloading: boolean;
+  readonly buttonRef: RefObject<HTMLButtonElement | null>;
+  readonly onToggle: () => void;
+  readonly onToggleDetails: () => void;
+  readonly onCopyLink: () => void;
+  readonly onDownload: () => void;
+}) {
+  const getMenuItemClassName = (active = false) =>
+    clsx(
+      "tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-gap-x-3 tw-rounded-lg tw-border-0 tw-bg-transparent tw-px-3 tw-py-2 tw-text-left tw-transition-colors tw-duration-200 desktop-hover:hover:tw-bg-iron-800",
+      active
+        ? "tw-text-primary-300 desktop-hover:hover:tw-text-primary-300"
+        : "tw-text-iron-300 desktop-hover:hover:tw-text-iron-300"
+    );
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={onToggle}
+        aria-label="Attachment options"
+        title="More"
+        className="tw-inline-flex tw-size-8 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-800 tw-text-iron-100 tw-transition desktop-hover:hover:tw-bg-iron-700"
+      >
+        <EllipsisHorizontalIcon className="tw-size-4" aria-hidden="true" />
+      </button>
+      <CommonDropdownItemsDefaultWrapper
+        isOpen={isOpen}
+        setOpen={(open) => {
+          if (!open && isOpen) {
+            onToggle();
+          }
+        }}
+        buttonRef={buttonRef}
+      >
+        <li className="tw-list-none">
+          <div className="tw-flex tw-flex-col tw-gap-y-1 tw-py-1">
+            {hasMetadata && (
+              <button
+                type="button"
+                onClick={onToggleDetails}
+                className={getMenuItemClassName()}
+              >
+                <CodeBracketSquareIcon
+                  className="tw-size-4 tw-flex-shrink-0"
+                  aria-hidden="true"
+                />
+                <span className="tw-text-sm tw-font-medium">
+                  {isDetailsOpen ? "Hide metadata" : "View metadata"}
+                </span>
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={onCopyLink}
+              className={getMenuItemClassName(copiedLink)}
+            >
+              <LinkIcon
+                className="tw-size-4 tw-flex-shrink-0"
+                aria-hidden="true"
+              />
+              <span className="tw-text-sm tw-font-medium">
+                {copiedLink ? "Copied" : "Copy link"}
+              </span>
+            </button>
+            <button
+              type="button"
+              onClick={onDownload}
+              disabled={isDownloading}
+              className={getMenuItemClassName()}
+            >
+              <ArrowDownTrayIcon
+                className="tw-size-4 tw-flex-shrink-0"
+                aria-hidden="true"
+              />
+              <span className="tw-text-sm tw-font-medium">
+                {isDownloading ? "Downloading" : "Download"}
+              </span>
+            </button>
+          </div>
+        </li>
+      </CommonDropdownItemsDefaultWrapper>
+    </>
+  );
+}
+
 export default function DropAttachmentDisplay({
   mimeType,
   attachmentUrl,
@@ -588,25 +779,24 @@ export default function DropAttachmentDisplay({
   readonly fileName?: string | undefined;
   readonly disableMediaInteraction?: boolean | undefined;
 }) {
-  const [isRendered, setIsRendered] = useState(false);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+  const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const [copiedLink, setCopiedLink] = useState(false);
   const downloadAbortRef = useRef<AbortController | null>(null);
+  const moreButtonRef = useRef<HTMLButtonElement>(null);
   const { isCapacitor } = useCapacitor();
   const safeAttachmentUrl = useMemo(
     () => getSafeAttachmentUrl(attachmentUrl),
     [attachmentUrl]
   );
-  const {
-    renderType,
-    fileName,
-    label,
-    canRender,
-    canOpenInNewTab,
-    canCopyLink,
-    canDownload,
-    Icon,
-  } = useMemo(() => {
+  const safeMetadataUrl = useMemo(() => {
+    const metadataUrl = getAttachmentMetadataUrl(attachmentUrl);
+    return metadataUrl ? getSafeAttachmentUrl(metadataUrl) : null;
+  }, [attachmentUrl]);
+  const isRendered = isPreviewOpen;
+  const { renderType, fileName, label, canRender, Icon } = useMemo(() => {
     const nextRenderType = getAttachmentRenderType(mimeType, attachmentUrl);
     const fileInfo = getFileInfoFromUrl(attachmentUrl);
     const fallbackExtension = getFallbackExtension(nextRenderType);
@@ -617,20 +807,12 @@ export default function DropAttachmentDisplay({
     const nextCanRender =
       safeAttachmentUrl !== null &&
       (nextRenderType === "pdf" || nextRenderType === "csv");
-    const nextCanOpenInNewTab =
-      safeAttachmentUrl !== null && nextRenderType === "pdf";
-    const nextCanCopyLink =
-      safeAttachmentUrl !== null && nextRenderType === "csv";
-    const nextCanDownload = safeAttachmentUrl !== null;
     const NextIcon = nextRenderType === "csv" ? TableCellsIcon : DocumentIcon;
     return {
       renderType: nextRenderType,
       fileName: nextFileName,
       label: nextLabel,
       canRender: nextCanRender,
-      canOpenInNewTab: nextCanOpenInNewTab,
-      canCopyLink: nextCanCopyLink,
-      canDownload: nextCanDownload,
       Icon: NextIcon,
     };
   }, [attachmentUrl, mimeType, providedFileName, safeAttachmentUrl]);
@@ -725,6 +907,30 @@ export default function DropAttachmentDisplay({
     }
   };
 
+  const handleToggleDetails = () => {
+    setIsDetailsOpen((current) => !current);
+    setIsMoreMenuOpen(false);
+  };
+
+  const handleToggleMoreMenu = () => {
+    if (!isMoreMenuOpen) {
+      setCopiedLink(false);
+    }
+    setIsMoreMenuOpen((current) => !current);
+  };
+
+  const handleMenuCopyLink = async () => {
+    await handleCopyLink();
+    globalThis.window.setTimeout(() => {
+      setIsMoreMenuOpen(false);
+    }, 300);
+  };
+
+  const handleMenuDownload = () => {
+    void handleDownload();
+    setIsMoreMenuOpen(false);
+  };
+
   return (
     <div className="tw-flex tw-w-full tw-flex-col">
       <div
@@ -754,93 +960,62 @@ export default function DropAttachmentDisplay({
             {canRender && (
               <button
                 type="button"
-                onClick={() => setIsRendered((current) => !current)}
+                onClick={() => setIsPreviewOpen((current) => !current)}
                 aria-label={
-                  isRendered
+                  isPreviewOpen
                     ? "Hide attachment preview"
                     : "Render attachment preview"
                 }
-                title={isRendered ? "Hide preview" : "Render preview"}
+                title={isPreviewOpen ? "Hide preview" : "Render preview"}
                 className="tw-inline-flex tw-size-8 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-800 tw-text-iron-100 tw-transition desktop-hover:hover:tw-bg-iron-700"
               >
-                {isRendered ? (
+                {isPreviewOpen ? (
                   <EyeSlashIcon className="tw-size-4" aria-hidden="true" />
                 ) : (
                   <EyeIcon className="tw-size-4" aria-hidden="true" />
                 )}
               </button>
             )}
-            {canCopyLink && (
-              <button
-                type="button"
-                onClick={handleCopyLink}
-                aria-label="Copy attachment link"
-                title={copiedLink ? "Copied" : "Copy link"}
-                className={clsx(
-                  "tw-inline-flex tw-size-8 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-bg-iron-800 tw-no-underline tw-transition desktop-hover:hover:tw-bg-iron-700",
-                  copiedLink
-                    ? "tw-border-primary-400 tw-text-primary-300"
-                    : "tw-border-iron-700 tw-text-iron-100"
-                )}
-              >
-                <svg
-                  className="tw-size-4"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth="1.5"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-                  />
-                </svg>
-              </button>
-            )}
-            {canDownload && (
-              <button
-                type="button"
-                onClick={handleDownload}
-                aria-label="Download attachment"
-                title={isDownloading ? "Downloading" : "Download"}
-                disabled={isDownloading}
-                className="tw-inline-flex tw-size-8 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-800 tw-text-iron-100 tw-no-underline tw-transition desktop-hover:hover:tw-bg-iron-700"
-              >
-                <ArrowDownTrayIcon className="tw-size-4" aria-hidden="true" />
-              </button>
-            )}
-            {canOpenInNewTab && safeAttachmentUrl && (
-              <a
-                href={safeAttachmentUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label="Open attachment"
-                title="Open"
-                className="tw-inline-flex tw-size-8 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-800 tw-text-iron-100 tw-transition desktop-hover:hover:tw-bg-iron-700"
-              >
-                <ArrowTopRightOnSquareIcon
-                  className="tw-size-4"
-                  aria-hidden="true"
-                />
-              </a>
+            {safeAttachmentUrl && (
+              <AttachmentMoreMenu
+                isOpen={isMoreMenuOpen}
+                hasMetadata={safeMetadataUrl !== null}
+                isDetailsOpen={isDetailsOpen}
+                copiedLink={copiedLink}
+                isDownloading={isDownloading}
+                buttonRef={moreButtonRef}
+                onToggle={handleToggleMoreMenu}
+                onToggleDetails={handleToggleDetails}
+                onCopyLink={handleMenuCopyLink}
+                onDownload={handleMenuDownload}
+              />
             )}
           </div>
         )}
       </div>
-      {isRendered && renderType === "pdf" && safeAttachmentUrl && (
-        <iframe
-          src={safeAttachmentUrl}
-          title={fileName}
-          referrerPolicy="no-referrer"
-          className="tw-h-[32rem] tw-w-full tw-rounded-b-lg tw-border tw-border-t-0 tw-border-solid tw-border-iron-700 tw-bg-iron-950"
-        />
-      )}
-      {isRendered && renderType === "csv" && safeAttachmentUrl && (
-        <CsvAttachmentPreview url={safeAttachmentUrl} />
-      )}
+      <AnimatedAttachmentPanel isOpen={isDetailsOpen && !!safeMetadataUrl}>
+        {safeMetadataUrl && (
+          <div className="tw-rounded-b-lg tw-border tw-border-t-0 tw-border-solid tw-border-iron-700 tw-bg-iron-950">
+            <JsonPreview
+              link={safeMetadataUrl}
+              onClose={() => setIsDetailsOpen(false)}
+            />
+          </div>
+        )}
+      </AnimatedAttachmentPanel>
+      <AnimatedAttachmentPanel isOpen={isPreviewOpen && !!safeAttachmentUrl}>
+        {renderType === "pdf" && safeAttachmentUrl && (
+          <iframe
+            src={safeAttachmentUrl}
+            title={fileName}
+            referrerPolicy="no-referrer"
+            className="tw-h-[32rem] tw-w-full tw-rounded-b-lg tw-border tw-border-t-0 tw-border-solid tw-border-iron-700 tw-bg-iron-950"
+          />
+        )}
+        {renderType === "csv" && safeAttachmentUrl && (
+          <CsvAttachmentPreview url={safeAttachmentUrl} />
+        )}
+      </AnimatedAttachmentPanel>
     </div>
   );
 }
diff --git a/components/drops/view/item/content/attachments/JsonPreview.tsx b/components/drops/view/item/content/attachments/JsonPreview.tsx
new file mode 100644
index 0000000000..ed0be2b5e0
--- /dev/null
+++ b/components/drops/view/item/content/attachments/JsonPreview.tsx
@@ -0,0 +1,488 @@
+"use client";
+
+import { LinkIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+
+const METADATA_FETCH_TIMEOUT_MS = 120_000;
+const METADATA_PREVIEW_MAX_BYTES = 1_000_000;
+const METADATA_PREVIEW_SIZE_MESSAGE = "Metadata preview is too large.";
+
+type MetadataDetails = {
+  readonly text: string;
+  readonly isJson: boolean;
+};
+
+const JSON_LITERAL_CLASSES = {
+  true: "tw-text-sky-300",
+  false: "tw-text-sky-300",
+  null: "tw-text-iron-500",
+} as const;
+
+async function fetchMetadataPreviewText(
+  url: string,
+  signal: AbortSignal
+): Promise<MetadataDetails> {
+  const response = await fetch(url, { signal });
+  if (!response.ok) {
+    throw new Error("Metadata not found.");
+  }
+
+  const text = await readMetadataPreviewText(response, signal);
+  try {
+    const json = JSON.parse(text);
+    return {
+      text: JSON.stringify(json, null, 2),
+      isJson: true,
+    };
+  } catch {
+    return { text, isJson: false };
+  }
+}
+
+function assertMetadataContentLengthWithinLimit(response: Response): void {
+  const lengthHeader = response.headers.get("Content-Length");
+  if (lengthHeader === null) {
+    return;
+  }
+
+  const parsed = Number.parseInt(lengthHeader, 10);
+  if (Number.isFinite(parsed) && parsed > METADATA_PREVIEW_MAX_BYTES) {
+    throw new Error(METADATA_PREVIEW_SIZE_MESSAGE);
+  }
+}
+
+function assertMetadataSignalActive(signal: AbortSignal): void {
+  if (signal.aborted) {
+    throw new DOMException("Aborted", "AbortError");
+  }
+}
+
+async function releaseMetadataPreviewReader(
+  reader: ReadableStreamDefaultReader<Uint8Array>
+): Promise<void> {
+  await reader.cancel().catch(() => undefined);
+  try {
+    reader.releaseLock();
+  } catch {
+    // Reader may already be released after cancellation or stream completion.
+  }
+}
+
+async function readMetadataPreviewTextFromBodyLessResponse(
+  response: Response
+): Promise<string> {
+  const buffer = await response.arrayBuffer();
+  if (buffer.byteLength > METADATA_PREVIEW_MAX_BYTES) {
+    throw new Error(METADATA_PREVIEW_SIZE_MESSAGE);
+  }
+  return new TextDecoder().decode(buffer);
+}
+
+async function readMetadataPreviewTextFromStream(
+  reader: ReadableStreamDefaultReader<Uint8Array>,
+  signal: AbortSignal
+): Promise<string> {
+  const chunks: Uint8Array[] = [];
+  let totalBytes = 0;
+
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) {
+      const bytes = new Uint8Array(totalBytes);
+      let offset = 0;
+
+      for (const chunk of chunks) {
+        bytes.set(chunk, offset);
+        offset += chunk.byteLength;
+      }
+
+      return new TextDecoder().decode(bytes);
+    }
+
+    assertMetadataSignalActive(signal);
+    totalBytes += value.byteLength;
+
+    if (totalBytes > METADATA_PREVIEW_MAX_BYTES) {
+      throw new Error(METADATA_PREVIEW_SIZE_MESSAGE);
+    }
+
+    chunks[chunks.length] = value;
+  }
+}
+
+async function readMetadataPreviewText(
+  response: Response,
+  signal: AbortSignal
+): Promise<string> {
+  assertMetadataContentLengthWithinLimit(response);
+  if (!response.body) {
+    return readMetadataPreviewTextFromBodyLessResponse(response);
+  }
+
+  const reader = response.body.getReader();
+  try {
+    return await readMetadataPreviewTextFromStream(reader, signal);
+  } finally {
+    await releaseMetadataPreviewReader(reader);
+  }
+}
+
+function addJsonPreviewPart(parts: ReactNode[], part: ReactNode) {
+  parts[parts.length] = part;
+}
+
+function isJsonWhitespace(char: string | undefined): boolean {
+  return char === " " || char === "\t" || char === "\n" || char === "\r";
+}
+
+function isJsonDigit(char: string | undefined): boolean {
+  return char !== undefined && char >= "0" && char <= "9";
+}
+
+function isJsonWordChar(char: string | undefined): boolean {
+  if (!char) {
+    return false;
+  }
+
+  return (
+    (char >= "A" && char <= "Z") ||
+    (char >= "a" && char <= "z") ||
+    isJsonDigit(char) ||
+    char === "_"
+  );
+}
+
+function readJsonStringEnd(line: string, startIndex: number): number {
+  let index = startIndex + 1;
+
+  while (index < line.length) {
+    if (line[index] === "\\") {
+      index += 2;
+    } else if (line[index] === '"') {
+      return index + 1;
+    } else {
+      index += 1;
+    }
+  }
+
+  return line.length;
+}
+
+function readJsonKeySuffixEnd(line: string, startIndex: number): number {
+  let index = startIndex;
+
+  while (isJsonWhitespace(line[index])) {
+    index += 1;
+  }
+
+  return line[index] === ":" ? index + 1 : startIndex;
+}
+
+function isJsonNumberStart(line: string, startIndex: number): boolean {
+  return line[startIndex] === "-" || isJsonDigit(line[startIndex]);
+}
+
+function readJsonNumberEnd(line: string, startIndex: number): number {
+  let index = startIndex;
+
+  if (line[index] === "-") {
+    index += 1;
+  }
+
+  if (!isJsonDigit(line[index])) {
+    return startIndex + 1;
+  }
+
+  while (isJsonDigit(line[index])) {
+    index += 1;
+  }
+
+  if (line[index] === "." && isJsonDigit(line[index + 1])) {
+    index += 1;
+    while (isJsonDigit(line[index])) {
+      index += 1;
+    }
+  }
+
+  const hasExponent = line[index] === "e" || line[index] === "E";
+  if (hasExponent) {
+    const exponentStart = index;
+    index += 1;
+
+    if (line[index] === "+" || line[index] === "-") {
+      index += 1;
+    }
+
+    if (!isJsonDigit(line[index])) {
+      return exponentStart;
+    }
+
+    while (isJsonDigit(line[index])) {
+      index += 1;
+    }
+  }
+
+  return index;
+}
+
+function getJsonLiteralAt(
+  line: string,
+  startIndex: number
+): keyof typeof JSON_LITERAL_CLASSES | null {
+  const nextCharIsWord = (literal: string) =>
+    isJsonWordChar(line[startIndex + literal.length]);
+
+  if (line.startsWith("true", startIndex) && !nextCharIsWord("true")) {
+    return "true";
+  }
+
+  if (line.startsWith("false", startIndex) && !nextCharIsWord("false")) {
+    return "false";
+  }
+
+  if (line.startsWith("null", startIndex) && !nextCharIsWord("null")) {
+    return "null";
+  }
+
+  return null;
+}
+
+function JsonPreviewLine({ line }: { readonly line: string }) {
+  const parts: ReactNode[] = [];
+  let charOffset = 0;
+
+  while (charOffset < line.length) {
+    if (line[charOffset] === '"') {
+      const stringEnd = readJsonStringEnd(line, charOffset);
+      const token = line.slice(charOffset, stringEnd);
+      const keySuffixEnd = readJsonKeySuffixEnd(line, stringEnd);
+      const key = `json-string-${charOffset}-${token}`;
+
+      if (keySuffixEnd > stringEnd) {
+        addJsonPreviewPart(
+          parts,
+          <span key={key}>
+            <span className="tw-text-rose-300">{token}</span>
+            {line.slice(stringEnd, keySuffixEnd)}
+          </span>
+        );
+        charOffset = keySuffixEnd;
+      } else {
+        addJsonPreviewPart(
+          parts,
+          <span key={key} className="tw-text-lime-300">
+            {token}
+          </span>
+        );
+        charOffset = stringEnd;
+      }
+      continue;
+    }
+
+    const literal = getJsonLiteralAt(line, charOffset);
+    if (literal) {
+      addJsonPreviewPart(
+        parts,
+        <span
+          key={`json-literal-${charOffset}-${literal}`}
+          className={JSON_LITERAL_CLASSES[literal]}
+        >
+          {literal}
+        </span>
+      );
+      charOffset += literal.length;
+      continue;
+    }
+
+    if (isJsonNumberStart(line, charOffset)) {
+      const numberEnd = readJsonNumberEnd(line, charOffset);
+      const token = line.slice(charOffset, numberEnd);
+
+      addJsonPreviewPart(
+        parts,
+        <span
+          key={`json-number-${charOffset}-${token}`}
+          className="tw-text-violet-300"
+        >
+          {token}
+        </span>
+      );
+      charOffset = numberEnd;
+      continue;
+    }
+
+    addJsonPreviewPart(parts, line[charOffset]);
+    charOffset += 1;
+  }
+
+  return <>{parts}</>;
+}
+
+function getMetadataLineKey(line: string, countsByLine: Map<string, number>) {
+  const count = countsByLine.get(line) ?? 0;
+  countsByLine.set(line, count + 1);
+  let hash = 0;
+
+  for (const char of line) {
+    hash = Math.trunc(hash * 31 + (char.codePointAt(0) ?? 0));
+  }
+
+  return `metadata-line-${hash.toString(36)}-${count}`;
+}
+
+function MetadataPreviewContent({
+  metadata,
+  isJson,
+}: {
+  readonly metadata: string;
+  readonly isJson: boolean;
+}) {
+  const lines = metadata.split("\n");
+
+  if (!isJson) {
+    return (
+      <pre className="tw-m-0 tw-max-h-[28rem] tw-overflow-auto tw-whitespace-pre-wrap tw-break-words tw-p-4 tw-pr-28 tw-text-xs tw-text-iron-200">
+        {metadata}
+      </pre>
+    );
+  }
+
+  const lineKeyCounts = new Map<string, number>();
+  let remainingLineCount = lines.length;
+
+  return (
+    <pre className="tw-m-0 tw-max-h-[28rem] tw-overflow-auto tw-whitespace-pre-wrap tw-break-words tw-p-4 tw-pr-28 tw-font-mono tw-text-xs tw-leading-relaxed tw-text-iron-200">
+      {lines.map((line) => {
+        const key = getMetadataLineKey(line, lineKeyCounts);
+        remainingLineCount -= 1;
+
+        return (
+          <span key={key}>
+            <JsonPreviewLine line={line} />
+            {remainingLineCount > 0 ? "\n" : null}
+          </span>
+        );
+      })}
+    </pre>
+  );
+}
+
+export default function JsonPreview({
+  link,
+  onClose,
+}: {
+  readonly link: string;
+  readonly onClose?: () => void;
+}) {
+  const [metadata, setMetadata] = useState<string | null>(null);
+  const [isJsonMetadata, setIsJsonMetadata] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [copiedMetadataLink, setCopiedMetadataLink] = useState(false);
+
+  useEffect(() => {
+    setMetadata(null);
+    setIsJsonMetadata(false);
+    setError(null);
+    const controller = new AbortController();
+    let active = true;
+    const timeoutId = globalThis.window.setTimeout(() => {
+      controller.abort();
+    }, METADATA_FETCH_TIMEOUT_MS);
+
+    void (async () => {
+      try {
+        const result = await fetchMetadataPreviewText(link, controller.signal);
+        if (!active || controller.signal.aborted) {
+          return;
+        }
+        setMetadata(result.text);
+        setIsJsonMetadata(result.isJson);
+      } catch (error) {
+        if (!active || controller.signal.aborted) {
+          return;
+        }
+        setError(
+          error instanceof Error ? error.message : "Metadata not found."
+        );
+      } finally {
+        globalThis.window.clearTimeout(timeoutId);
+      }
+    })();
+
+    return () => {
+      active = false;
+      globalThis.window.clearTimeout(timeoutId);
+      controller.abort();
+    };
+  }, [link]);
+
+  useEffect(() => {
+    if (!copiedMetadataLink) {
+      return;
+    }
+
+    const timeoutId = globalThis.window.setTimeout(
+      () => setCopiedMetadataLink(false),
+      1500
+    );
+    return () => globalThis.window.clearTimeout(timeoutId);
+  }, [copiedMetadataLink]);
+
+  const handleCopyMetadataLink = async () => {
+    try {
+      await navigator.clipboard.writeText(link);
+      setCopiedMetadataLink(true);
+    } catch (error) {
+      console.error("Failed to copy attachment metadata link", error);
+    }
+  };
+
+  return (
+    <div className="tw-relative tw-min-h-32 tw-bg-primary-400/[0.035]">
+      <div className="tw-absolute tw-right-3 tw-top-3 tw-z-10">
+        <div className="tw-flex tw-items-center tw-gap-x-2">
+          <button
+            type="button"
+            onClick={handleCopyMetadataLink}
+            aria-label="Copy metadata link"
+            title={copiedMetadataLink ? "Copied" : "Copy metadata link"}
+            className={clsx(
+              "tw-inline-flex tw-size-8 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-bg-iron-900/80 tw-no-underline tw-transition desktop-hover:hover:tw-bg-primary-400/[0.12]",
+              copiedMetadataLink
+                ? "tw-border-primary-400 tw-text-primary-300"
+                : "tw-border-iron-700 tw-text-iron-200"
+            )}
+          >
+            <LinkIcon className="tw-size-4" aria-hidden="true" />
+          </button>
+          {onClose && (
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close attachment details"
+              title="Close"
+              className="tw-inline-flex tw-size-8 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/80 tw-text-iron-200 tw-transition desktop-hover:hover:tw-bg-iron-800 desktop-hover:hover:tw-text-iron-50"
+            >
+              <XMarkIcon className="tw-size-4" aria-hidden="true" />
+            </button>
+          )}
+        </div>
+      </div>
+      {error && (
+        <div className="tw-p-4 tw-pr-28 tw-text-sm tw-text-iron-300">
+          {error}
+        </div>
+      )}
+      {!error && !metadata && (
+        <div className="tw-p-4 tw-pr-28 tw-text-sm tw-text-iron-400">
+          Loading metadata...
+        </div>
+      )}
+      {metadata && (
+        <MetadataPreviewContent metadata={metadata} isJson={isJsonMetadata} />
+      )}
+    </div>
+  );
+}
diff --git a/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.ts b/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.ts
index 5c33aae20d..258491add6 100644
--- a/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.ts
+++ b/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.ts
@@ -23,6 +23,10 @@ export const useWaveDropsNotificationRead = ({
     }
 
     const syncReadState = async () => {
+      if (document.visibilityState !== "visible") {
+        return;
+      }
+
       try {
         await Promise.resolve(removeWaveDeliveredNotifications(waveId));
       } catch (error) {
@@ -38,7 +42,19 @@ export const useWaveDropsNotificationRead = ({
         .catch((error) => console.error("Failed to mark feed as read:", error));
     };
 
-    syncReadState();
+    const syncReadStateWhenVisible = () => {
+      if (document.visibilityState === "visible") {
+        void syncReadState();
+      }
+    };
+
+    void syncReadState();
+    document.addEventListener("visibilitychange", syncReadStateWhenVisible);
+    return () =>
+      document.removeEventListener(
+        "visibilitychange",
+        syncReadStateWhenVisible
+      );
   }, [
     enabled,
     waveId,
diff --git a/contexts/wave/hooks/useWaveRealtimeUpdater.ts b/contexts/wave/hooks/useWaveRealtimeUpdater.ts
index fcab0d19d1..7177449c86 100644
--- a/contexts/wave/hooks/useWaveRealtimeUpdater.ts
+++ b/contexts/wave/hooks/useWaveRealtimeUpdater.ts
@@ -188,6 +188,10 @@ export function useWaveRealtimeUpdater({
   const processIncomingDrop: ProcessIncomingDropFn = useCallback(
     async (drop: ApiDrop, type: ProcessIncomingDropType) => {
       const markWaveAsRead = async (waveId: string) => {
+        if (document.visibilityState !== "visible") {
+          return;
+        }
+
         await commonApiPostWithoutBodyAndResponse({
           endpoint: `notifications/wave/${waveId}/read`,
         });
@@ -309,7 +313,7 @@ export function useWaveRealtimeUpdater({
         initiateFetchNewestCycle(waveId, serialNoForFetch);
       }
 
-      if (activeWaveId === waveId) {
+      if (activeWaveId === waveId && document.visibilityState === "visible") {
         removeWaveDeliveredNotifications(waveId).catch((error) =>
           console.error("Failed to remove wave delivered notifications:", error)
         );