fix(upload): link attachments to comments via client-side ID tracking

Instead of regex-parsing markdown content to find attachment URLs
(fragile), the frontend now tracks uploaded attachment IDs and sends
them with the comment creation request. The backend links them by ID.

Frontend: upload returns attachment ID, comment/reply inputs collect
IDs during editing session, pass as attachment_ids on submit.
Backend: CreateComment accepts attachment_ids, links by ID+issue scope.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/features/issues/components/comment-card.tsx

@@ -32,7 +32,7 @@ interface CommentCardProps {
   entry: TimelineEntry;
   allReplies: Map<string, TimelineEntry[]>;
   currentUserId?: string;
-  onReply: (parentId: string, content: string) => Promise<void>;
+  onReply: (parentId: string, content: string, attachmentIds?: string[]) => Promise<void>;
   onEdit: (commentId: string, content: string) => Promise<void>;
   onDelete: (commentId: string) => void;
   onToggleReaction: (commentId: string, emoji: string) => void;
@@ -374,7 +374,7 @@ function CommentCard({
               size="sm"
               avatarType="member"
               avatarId={currentUserId ?? ""}
-              onSubmit={(content) => onReply(entry.id, content)}
+              onSubmit={(content, attachmentIds) => onReply(entry.id, content, attachmentIds)}
             />
           </div>
         </CollapsibleContent>

apps/web/features/issues/components/comment-input.tsx

@@ -8,17 +8,22 @@ import { useFileUpload } from "@/shared/hooks/use-file-upload";
 
 interface CommentInputProps {
   issueId: string;
-  onSubmit: (content: string) => Promise<void>;
+  onSubmit: (content: string, attachmentIds?: string[]) => Promise<void>;
 }
 
 function CommentInput({ issueId, onSubmit }: CommentInputProps) {
   const editorRef = useRef<RichTextEditorRef>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const attachmentIdsRef = useRef<string[]>([]);
   const [isEmpty, setIsEmpty] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const { uploadWithToast, uploading } = useFileUpload();
 
-  const handleUpload = (file: File) => uploadWithToast(file, { issueId });
+  const handleUpload = async (file: File) => {
+    const result = await uploadWithToast(file, { issueId });
+    if (result) attachmentIdsRef.current.push(result.id);
+    return result;
+  };
 
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -35,8 +40,10 @@ function CommentInput({ issueId, onSubmit }: CommentInputProps) {
     if (!content || submitting) return;
     setSubmitting(true);
     try {
-      await onSubmit(content);
+      const ids = attachmentIdsRef.current.length > 0 ? [...attachmentIdsRef.current] : undefined;
+      await onSubmit(content, ids);
       editorRef.current?.clearContent();
+      attachmentIdsRef.current = [];
       setIsEmpty(true);
     } finally {
       setSubmitting(false);

apps/web/features/issues/components/reply-input.tsx

@@ -16,7 +16,7 @@ interface ReplyInputProps {
   placeholder?: string;
   avatarType: string;
   avatarId: string;
-  onSubmit: (content: string) => Promise<void>;
+  onSubmit: (content: string, attachmentIds?: string[]) => Promise<void>;
   size?: "sm" | "default";
 }
 
@@ -34,11 +34,16 @@ function ReplyInput({
 }: ReplyInputProps) {
   const editorRef = useRef<RichTextEditorRef>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const attachmentIdsRef = useRef<string[]>([]);
   const [isEmpty, setIsEmpty] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const { uploadWithToast, uploading } = useFileUpload();
 
-  const handleUpload = (file: File) => uploadWithToast(file, { issueId });
+  const handleUpload = async (file: File) => {
+    const result = await uploadWithToast(file, { issueId });
+    if (result) attachmentIdsRef.current.push(result.id);
+    return result;
+  };
 
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -55,8 +60,10 @@ function ReplyInput({
     if (!content || submitting) return;
     setSubmitting(true);
     try {
-      await onSubmit(content);
+      const ids = attachmentIdsRef.current.length > 0 ? [...attachmentIdsRef.current] : undefined;
+      await onSubmit(content, ids);
       editorRef.current?.clearContent();
+      attachmentIdsRef.current = [];
       setIsEmpty(true);
     } finally {
       setSubmitting(false);

apps/web/features/issues/hooks/use-issue-timeline.ts

@@ -174,11 +174,11 @@ export function useIssueTimeline(issueId: string, userId?: string) {
   // --- Mutation functions ---
 
   const submitComment = useCallback(
-    async (content: string) => {
+    async (content: string, attachmentIds?: string[]) => {
       if (!content.trim() || submitting || !userId) return;
       setSubmitting(true);
       try {
-        const comment = await api.createComment(issueId, content);
+        const comment = await api.createComment(issueId, content, undefined, undefined, attachmentIds);
         setTimeline((prev) => {
           if (prev.some((e) => e.id === comment.id)) return prev;
           return [...prev, commentToTimelineEntry(comment)];
@@ -193,10 +193,10 @@ export function useIssueTimeline(issueId: string, userId?: string) {
   );
 
   const submitReply = useCallback(
-    async (parentId: string, content: string) => {
+    async (parentId: string, content: string, attachmentIds?: string[]) => {
       if (!content.trim() || !userId) return;
       try {
-        const comment = await api.createComment(issueId, content, "comment", parentId);
+        const comment = await api.createComment(issueId, content, "comment", parentId, attachmentIds);
         setTimeline((prev) => {
           if (prev.some((e) => e.id === comment.id)) return prev;
           return [...prev, commentToTimelineEntry(comment)];