feat: attachments on tickets and comments

Files are uploaded over REST, stored on disk (a volume in Docker) and
recorded on the ticket as events; the bytes are written first, so no
attachment ever points at a missing file. Only images, video, audio, PDF
and plain text are shown inline, everything with nosniff and a sandbox CSP.
The web shows thumbnails, uploads by drag and drop or by pasting a
screenshot, and attaches files to new comments.

Also adds `nx run api:contracts`, which writes schema.gql and
openapi.json without starting the API or any database.

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

libs/web/tracker/infrastructure/src/lib/adapters/http-attachments.gateway.ts

@@ -0,0 +1,73 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import {
+  AccessTokenSource,
+  API_CONFIG,
+} from '@task-stream/web/shared/infrastructure';
+import {
+  Attachment,
+  AttachmentsGateway,
+  CommandResult,
+} from '@task-stream/web/tracker/domain';
+import { from, Observable, switchMap } from 'rxjs';
+
+/**
+ * Files travel over REST (`/api/issues/:id/attachments`): GraphQL is not made
+ * for bytes. The ticket's list of files comes with the ticket itself.
+ */
+@Injectable()
+export class HttpAttachmentsGateway extends AttachmentsGateway {
+  private readonly http = inject(HttpClient);
+  private readonly api = inject(API_CONFIG);
+  private readonly tokens = inject(AccessTokenSource);
+
+  upload(
+    issueId: string,
+    file: File,
+    commentId?: string | null,
+  ): Observable<CommandResult> {
+    const body = new FormData();
+    body.append('file', file, file.name);
+    if (commentId) body.append('commentId', commentId);
+    return this.authorized((headers) =>
+      this.http.post<CommandResult>(this.url(issueId), body, { headers }),
+    );
+  }
+
+  download(issueId: string, attachment: Attachment): Observable<Blob> {
+    return this.authorized((headers) =>
+      this.http.get(this.url(issueId, attachment.id), {
+        headers,
+        responseType: 'blob',
+      }),
+    );
+  }
+
+  remove(issueId: string, attachmentId: string): Observable<CommandResult> {
+    return this.authorized((headers) =>
+      this.http.delete<CommandResult>(this.url(issueId, attachmentId), {
+        headers,
+      }),
+    );
+  }
+
+  private url(issueId: string, attachmentId?: string): string {
+    const base = `${this.api.restUrl}/issues/${encodeURIComponent(issueId)}/attachments`;
+    return attachmentId ? `${base}/${encodeURIComponent(attachmentId)}` : base;
+  }
+
+  /** Public projects can be read without a session: no token, no header. */
+  private authorized<T>(
+    request: (headers: HttpHeaders) => Observable<T>,
+  ): Observable<T> {
+    return from(this.tokens.accessToken()).pipe(
+      switchMap((token) =>
+        request(
+          token
+            ? new HttpHeaders({ Authorization: `Bearer ${token}` })
+            : new HttpHeaders(),
+        ),
+      ),
+    );
+  }
+}

libs/web/tracker/infrastructure/src/lib/graphql/fragments.graphql

@@ -88,6 +88,17 @@ fragment IssueFields on Issue {
     issueId
     issueKey
   }
+  attachments {
+    id
+    fileName
+    mimeType
+    size
+    uploadedAt
+    commentId
+    uploadedBy {
+      ...UserRefFields
+    }
+  }
 }
 
 fragment CommentFields on Comment {

libs/web/tracker/infrastructure/src/lib/graphql/generated.ts

@@ -237,6 +237,15 @@ export type IssueFieldsFragment = {
     issueId: string;
     issueKey: string;
   }>;
+  attachments: Array<{
+    id: string;
+    fileName: string;
+    mimeType: string;
+    size: number;
+    uploadedAt: string;
+    commentId: string | null;
+    uploadedBy: { id: string; name: string };
+  }>;
   assignee: { id: string; name: string } | null;
   release: { id: string; name: string } | null;
 };
@@ -342,6 +351,15 @@ export type IssueQuery = {
       issueId: string;
       issueKey: string;
     }>;
+    attachments: Array<{
+      id: string;
+      fileName: string;
+      mimeType: string;
+      size: number;
+      uploadedAt: string;
+      commentId: string | null;
+      uploadedBy: { id: string; name: string };
+    }>;
     assignee: { id: string; name: string } | null;
     release: { id: string; name: string } | null;
   };
@@ -1294,6 +1312,34 @@ export const IssueFieldsFragmentDoc = {
               ],
             },
           },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'attachments' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'fileName' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'mimeType' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'size' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'uploadedAt' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'commentId' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'uploadedBy' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'FragmentSpread',
+                        name: { kind: 'Name', value: 'UserRefFields' },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
         ],
       },
     },
@@ -1877,6 +1923,34 @@ export const IssueDocument = {
               ],
             },
           },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'attachments' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'fileName' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'mimeType' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'size' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'uploadedAt' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'commentId' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'uploadedBy' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'FragmentSpread',
+                        name: { kind: 'Name', value: 'UserRefFields' },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
         ],
       },
     },

libs/web/tracker/infrastructure/src/lib/tracker-infrastructure.providers.ts

@@ -4,6 +4,7 @@ import {
 } from '@angular/core';
 import {
   ActivityGateway,
+  AttachmentsGateway,
   CommentsGateway,
   IssuesGateway,
   ProjectsGateway,
@@ -18,10 +19,11 @@ import {
   GraphqlUsersGateway,
 } from './adapters/graphql-collaboration.gateways';
 import { GraphqlIssuesGateway } from './adapters/graphql-issues.gateway';
+import { HttpAttachmentsGateway } from './adapters/http-attachments.gateway';
 import { GraphqlProjectsGateway } from './adapters/graphql-projects.gateway';
 import { GraphqlRealtimeGateway } from './adapters/graphql-realtime.gateway';
 
-/** Ports → GraphQL adapters. */
+/** Ports → GraphQL adapters (and REST for files). */
 export function provideTrackerInfrastructure(): EnvironmentProviders {
   return makeEnvironmentProviders([
     { provide: ProjectsGateway, useClass: GraphqlProjectsGateway },
@@ -29,6 +31,7 @@ export function provideTrackerInfrastructure(): EnvironmentProviders {
     { provide: CommentsGateway, useClass: GraphqlCommentsGateway },
     { provide: ReleasesGateway, useClass: GraphqlReleasesGateway },
     { provide: ActivityGateway, useClass: GraphqlActivityGateway },
+    { provide: AttachmentsGateway, useClass: HttpAttachmentsGateway },
     { provide: UsersGateway, useClass: GraphqlUsersGateway },
     { provide: TrackerRealtimeGateway, useClass: GraphqlRealtimeGateway },
   ]);