From 16d4a13810eab0f5ac9687edbce708aaa2a8deb5 Mon Sep 17 00:00:00 2001
From: Skylinerffm97 <marc.schilling.ffm@gmail.com>
Date: Fri, 4 Sep 2026 12:58:26 +0200
Subject: [PATCH] feat: mount StepAttachments under the step composer in
 SequenceView for email steps so per-step attachments can be seen, uploaded
 and removed from the dashboard, and describe per-step attachments in the
 sequences guide (issue #307 item 3)

---
 docs/content/docs/guides/sequences.mdx                      | 2 ++
 web/src/components/app/campaigns/sequences/SequenceView.tsx | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/docs/content/docs/guides/sequences.mdx b/docs/content/docs/guides/sequences.mdx
index 88c11d07..b2b64f37 100644
--- a/docs/content/docs/guides/sequences.mdx
+++ b/docs/content/docs/guides/sequences.mdx
@@ -26,6 +26,8 @@ The Preview tab renders through the real send engine against a sample contact, s
 Apply a saved template to a step, or save a step as a reusable one from the composer. Templates carry their subject and body and live in your shared library.
 </Callout>
 
+Upload attachments for each step below its composer by dragging and dropping files or clicking the upload area. They are included with every email sent by that step and can be removed there. Campaign-level attachments without a `step_id`, which can only be added through the API, do not appear in the step composer.
+
 ### Action steps
 
 A step can perform an action instead of sending: add or remove a tag, label email, create a task, create a deal or move its stage, unsubscribe the contact, notify (fires your webhooks and integrations), run an automation, or switch. They connect like email steps and work best at the end of a reply branch, for example creating a deal and notifying your team on a positive reply.
diff --git a/web/src/components/app/campaigns/sequences/SequenceView.tsx b/web/src/components/app/campaigns/sequences/SequenceView.tsx
index 7724950f..7719a8dd 100644
--- a/web/src/components/app/campaigns/sequences/SequenceView.tsx
+++ b/web/src/components/app/campaigns/sequences/SequenceView.tsx
@@ -9,6 +9,7 @@ import { GitBranchIcon, Loader2Icon } from "lucide-react";
 import toast from "react-hot-toast";
 import type Sequence from "@/lib/api/models/app/campaigns/sequences/Sequence";
 import EmailContentEditor from "./EmailContentEditor";
+import StepAttachments from "./StepAttachments";
 import { Label, TextInput } from "@/components/ui/field";
 import useUpdateSequence from "@/lib/api/hooks/app/campaigns/sequences/useUpdateSequence";
 import type { AppError } from "@/lib/api/client/normalizeError";
@@ -134,6 +135,10 @@ export default function SequenceView({
                         </p>
                     </div>
                 )}
+
+                {sequence.kind === "email" && (
+                    <StepAttachments campaignId={campaignId} sequenceId={sequence.id} />
+                )}
             </div>
         </div>
     );