Introduce --color-danger-solid-* CSS variables and replace hardcoded values

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

.specify/memory/ideen.md

@@ -180,6 +180,7 @@ Organisator kann Event absagen (mit optionaler Nachricht, Einweg-Transition).
 * RSVPs werden nach Absage abgelehnt
 * Absage-Nachricht nachträglich editierbar
 * Kann nicht rückgängig gemacht werden
+* Wenn Organisator Event auf der Eventlistenseite löscht, muss dabei das Event abgesagt werden (nicht nur lokal entfernen)
 
 ### 025 – Event löschen
 Organisator löscht Event permanent und unwiderruflich.

CLAUDE.md

@@ -49,14 +49,3 @@ The following skills are available and should be used for their respective purpo
 - The loop runner is `ralph.sh`. Each run lives in its own directory under `.ralph/`.
 - Run directories contain: `instructions.md` (prompt), `chief-wiggum.md` (directives), `answers.md` (human answers), `questions.md` (Ralph's questions), `progress.txt` (iteration log), `meta.md` (metadata), `run.log` (execution log).
 - Project specifications (user stories, setup tasks, personas, etc.) live in `specs/` (feature dirs) and `.specify/memory/` (cross-cutting docs).
-
-## Active Technologies
-- Java 25 (backend), TypeScript 5.9 (frontend) + Spring Boot 3.5.x, Vue 3, Vue Router 5, openapi-fetch, openapi-typescript (007-view-event)
-- PostgreSQL (JPA via Spring Data, Liquibase migrations) (007-view-event)
-- TypeScript 5.9 (frontend only) + Vue 3, Vue Router 5 (existing — no additions) (010-event-list-grouping)
-- localStorage via `useEventStorage.ts` composable (existing — no changes) (010-event-list-grouping)
-- Java 25, Spring Boot 3.5.x + Spring Scheduling (`@Scheduled`), Spring Data JPA (for native query) (013-auto-delete-expired)
-- PostgreSQL (existing, Liquibase migrations) (013-auto-delete-expired)
-
-## Recent Changes
-- 007-view-event: Added Java 25 (backend), TypeScript 5.9 (frontend) + Spring Boot 3.5.x, Vue 3, Vue Router 5, openapi-fetch, openapi-typescript

backend/src/main/java/de/fete/adapter/in/web/EventController.java

@@ -8,8 +8,9 @@ import de.fete.adapter.in.web.model.CreateRsvpRequest;
 import de.fete.adapter.in.web.model.CreateRsvpResponse;
 import de.fete.adapter.in.web.model.GetAttendeesResponse;
 import de.fete.adapter.in.web.model.GetEventResponse;
-import de.fete.application.service.EventNotFoundException;
+import de.fete.adapter.in.web.model.PatchEventRequest;
-import de.fete.application.service.InvalidTimezoneException;
+import de.fete.application.service.exception.EventNotFoundException;
+import de.fete.application.service.exception.InvalidTimezoneException;
 import de.fete.domain.model.CreateEventCommand;
 import de.fete.domain.model.Event;
 import de.fete.domain.model.EventToken;
@@ -22,6 +23,7 @@ import de.fete.domain.port.in.CreateEventUseCase;
 import de.fete.domain.port.in.CreateRsvpUseCase;
 import de.fete.domain.port.in.GetAttendeesUseCase;
 import de.fete.domain.port.in.GetEventUseCase;
+import de.fete.domain.port.in.UpdateEventUseCase;
 import java.time.DateTimeException;
 import java.time.ZoneId;
 import java.util.List;
@@ -40,6 +42,7 @@ public class EventController implements EventsApi {
   private final CancelRsvpUseCase cancelRsvpUseCase;
   private final CountAttendeesByEventUseCase countAttendeesByEventUseCase;
   private final GetAttendeesUseCase getAttendeesUseCase;
+  private final UpdateEventUseCase updateEventUseCase;
 
   /** Creates a new controller with the given use cases. */
   public EventController(
@@ -48,13 +51,15 @@ public class EventController implements EventsApi {
       CreateRsvpUseCase createRsvpUseCase,
       CancelRsvpUseCase cancelRsvpUseCase,
       CountAttendeesByEventUseCase countAttendeesByEventUseCase,
-      GetAttendeesUseCase getAttendeesUseCase) {
+      GetAttendeesUseCase getAttendeesUseCase,
+      UpdateEventUseCase updateEventUseCase) {
     this.createEventUseCase = createEventUseCase;
     this.getEventUseCase = getEventUseCase;
     this.createRsvpUseCase = createRsvpUseCase;
     this.cancelRsvpUseCase = cancelRsvpUseCase;
     this.countAttendeesByEventUseCase = countAttendeesByEventUseCase;
     this.getAttendeesUseCase = getAttendeesUseCase;
+    this.updateEventUseCase = updateEventUseCase;
   }
 
   @Override
@@ -73,42 +78,55 @@ public class EventController implements EventsApi {
     Event event = createEventUseCase.createEvent(command);
 
     var response = new CreateEventResponse();
-    response.setEventToken(event.getEventToken().value());
+    response.setEventToken(event.eventToken().value());
-    response.setOrganizerToken(event.getOrganizerToken().value());
+    response.setOrganizerToken(event.organizerToken().value());
-    response.setTitle(event.getTitle());
+    response.setTitle(event.title());
-    response.setDateTime(event.getDateTime());
+    response.setDateTime(event.dateTime());
-    response.setTimezone(event.getTimezone().getId());
+    response.setTimezone(event.timezone().getId());
 
     return ResponseEntity.status(HttpStatus.CREATED).body(response);
   }
 
   @Override
-  public ResponseEntity<GetEventResponse> getEvent(UUID token) {
+  public ResponseEntity<GetEventResponse> getEvent(UUID eventToken) {
-    var eventToken = new de.fete.domain.model.EventToken(token);
+    var evtToken = new EventToken(eventToken);
-    Event event = getEventUseCase.getByEventToken(eventToken)
+    Event event = getEventUseCase.getByEventToken(evtToken)
-        .orElseThrow(() -> new EventNotFoundException(token));
+        .orElseThrow(() -> new EventNotFoundException(eventToken));
 
     var response = new GetEventResponse();
-    response.setEventToken(event.getEventToken().value());
+    response.setEventToken(event.eventToken().value());
-    response.setTitle(event.getTitle());
+    response.setTitle(event.title());
-    response.setDescription(event.getDescription());
+    response.setDescription(event.description());
-    response.setDateTime(event.getDateTime());
+    response.setDateTime(event.dateTime());
-    response.setTimezone(event.getTimezone().getId());
+    response.setTimezone(event.timezone().getId());
-    response.setLocation(event.getLocation());
+    response.setLocation(event.location());
     response.setAttendeeCount(
-        (int) countAttendeesByEventUseCase.countByEvent(eventToken));
+        (int) countAttendeesByEventUseCase.countByEvent(evtToken));
+    response.setCancelled(event.cancelled());
+    response.setCancellationReason(event.cancellationReason());
 
     return ResponseEntity.ok(response);
   }
 
+  @Override
+  public ResponseEntity<Void> patchEvent(
+      UUID eventToken, UUID organizerToken, PatchEventRequest request) {
+    updateEventUseCase.cancelEvent(
+        new EventToken(eventToken),
+        new OrganizerToken(organizerToken),
+        request.getCancelled(),
+        request.getCancellationReason());
+    return ResponseEntity.noContent().build();
+  }
+
   @Override
   public ResponseEntity<GetAttendeesResponse> getAttendees(
-      UUID token, UUID organizerToken) {
+      UUID eventToken, UUID organizerToken) {
-    var eventToken = new EventToken(token);
+    var evtToken = new EventToken(eventToken);
     var orgToken = new OrganizerToken(organizerToken);
 
     List<String> names = getAttendeesUseCase
-        .getAttendeeNames(eventToken, orgToken);
+        .getAttendeeNames(evtToken, orgToken);
 
     var attendees = names.stream()
         .map(name -> new Attendee().name(name))
@@ -122,20 +140,20 @@ public class EventController implements EventsApi {
 
   @Override
   public ResponseEntity<CreateRsvpResponse> createRsvp(
-      UUID token, CreateRsvpRequest createRsvpRequest) {
+      UUID eventToken, CreateRsvpRequest createRsvpRequest) {
-    var eventToken = new EventToken(token);
+    var evtToken = new EventToken(eventToken);
-    Rsvp rsvp = createRsvpUseCase.createRsvp(eventToken, createRsvpRequest.getName());
+    Rsvp rsvp = createRsvpUseCase.createRsvp(evtToken, createRsvpRequest.getName());
 
     var response = new CreateRsvpResponse();
-    response.setRsvpToken(rsvp.getRsvpToken().value());
+    response.setRsvpToken(rsvp.rsvpToken().value());
-    response.setName(rsvp.getName());
+    response.setName(rsvp.name());
 
     return ResponseEntity.status(HttpStatus.CREATED).body(response);
   }
 
   @Override
-  public ResponseEntity<Void> cancelRsvp(UUID token, UUID rsvpToken) {
+  public ResponseEntity<Void> cancelRsvp(UUID eventToken, UUID rsvpToken) {
-    cancelRsvpUseCase.cancelRsvp(new EventToken(token), new RsvpToken(rsvpToken));
+    cancelRsvpUseCase.cancelRsvp(new EventToken(eventToken), new RsvpToken(rsvpToken));
     return ResponseEntity.noContent().build();
   }
 

backend/src/main/java/de/fete/adapter/in/web/GlobalExceptionHandler.java

@@ -1,11 +1,13 @@
 package de.fete.adapter.in.web;
 
-import de.fete.application.service.EventExpiredException;
+import de.fete.application.service.exception.EventAlreadyCancelledException;
-import de.fete.application.service.EventNotFoundException;
+import de.fete.application.service.exception.EventCancelledException;
-import de.fete.application.service.ExpiryDateBeforeEventException;
+import de.fete.application.service.exception.EventExpiredException;
-import de.fete.application.service.ExpiryDateInPastException;
+import de.fete.application.service.exception.EventNotFoundException;
-import de.fete.application.service.InvalidOrganizerTokenException;
+import de.fete.application.service.exception.ExpiryDateBeforeEventException;
-import de.fete.application.service.InvalidTimezoneException;
+import de.fete.application.service.exception.ExpiryDateInPastException;
+import de.fete.application.service.exception.InvalidOrganizerTokenException;
+import de.fete.application.service.exception.InvalidTimezoneException;
 import java.net.URI;
 import java.util.List;
 import java.util.Map;
@@ -75,6 +77,32 @@ public class GlobalExceptionHandler extends ResponseEntityExceptionHandler {
         .body(problemDetail);
   }
 
+  /** Handles attempt to cancel an already cancelled event. */
+  @ExceptionHandler(EventAlreadyCancelledException.class)
+  public ResponseEntity<ProblemDetail> handleEventAlreadyCancelled(
+      EventAlreadyCancelledException ex) {
+    ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(
+        HttpStatus.CONFLICT, ex.getMessage());
+    problemDetail.setTitle("Event Already Cancelled");
+    problemDetail.setType(URI.create("urn:problem-type:event-already-cancelled"));
+    return ResponseEntity.status(HttpStatus.CONFLICT)
+        .contentType(MediaType.APPLICATION_PROBLEM_JSON)
+        .body(problemDetail);
+  }
+
+  /** Handles RSVP on cancelled event. */
+  @ExceptionHandler(EventCancelledException.class)
+  public ResponseEntity<ProblemDetail> handleEventCancelled(
+      EventCancelledException ex) {
+    ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(
+        HttpStatus.CONFLICT, ex.getMessage());
+    problemDetail.setTitle("Event Cancelled");
+    problemDetail.setType(URI.create("urn:problem-type:event-cancelled"));
+    return ResponseEntity.status(HttpStatus.CONFLICT)
+        .contentType(MediaType.APPLICATION_PROBLEM_JSON)
+        .body(problemDetail);
+  }
+
   /** Handles RSVP on expired event. */
   @ExceptionHandler(EventExpiredException.class)
   public ResponseEntity<ProblemDetail> handleEventExpired(

backend/src/main/java/de/fete/adapter/in/web/SpaController.java

@@ -68,17 +68,17 @@ public class SpaController {
 
   /** Serves SPA HTML with event-specific meta-tags. */
   @GetMapping(
-      value = "/events/{token}",
+      value = "/events/{eventToken}",
       produces = MediaType.TEXT_HTML_VALUE
   )
   @ResponseBody
-  public String serveEventPage(@PathVariable String token,
+  public String serveEventPage(@PathVariable String eventToken,
       HttpServletRequest request) {
     if (htmlTemplate == null) {
       return "";
     }
     String baseUrl = getBaseUrl(request);
-    Map<String, String> meta = resolveEventMeta(token, baseUrl);
+    Map<String, String> meta = resolveEventMeta(eventToken, baseUrl);
     return htmlTemplate.replace(PLACEHOLDER, renderTags(meta));
   }
 
@@ -86,11 +86,11 @@ public class SpaController {
 
   private Map<String, String> buildEventMeta(Event event, String baseUrl) {
     var tags = new LinkedHashMap<String, String>();
-    String title = truncateTitle(event.getTitle());
+    String title = truncateTitle(event.title());
     String description = formatDescription(event);
     tags.put("og:title", title);
     tags.put("og:description", description);
-    tags.put("og:url", baseUrl + "/events/" + event.getEventToken().value());
+    tags.put("og:url", baseUrl + "/events/" + event.eventToken().value());
     tags.put("og:type", "website");
     tags.put("og:site_name", GENERIC_TITLE);
     tags.put("og:image", baseUrl + "/og-image.png");
@@ -138,16 +138,16 @@ public class SpaController {
   }
 
   private String formatDescription(Event event) {
-    ZonedDateTime zoned = event.getDateTime().atZoneSameInstant(event.getTimezone());
+    ZonedDateTime zoned = event.dateTime().atZoneSameInstant(event.timezone());
     var sb = new StringBuilder();
     sb.append("📅 ").append(zoned.format(DATE_FORMAT));
 
-    if (event.getLocation() != null && !event.getLocation().isBlank()) {
+    if (event.location() != null && !event.location().isBlank()) {
-      sb.append(" · 📍 ").append(event.getLocation());
+      sb.append(" · 📍 ").append(event.location());
     }
 
-    if (event.getDescription() != null && !event.getDescription().isBlank()) {
+    if (event.description() != null && !event.description().isBlank()) {
-      sb.append(" — ").append(event.getDescription());
+      sb.append(" — ").append(event.description());
     }
 
     String result = sb.toString();

backend/src/main/java/de/fete/adapter/out/persistence/EventJpaEntity.java

@@ -46,6 +46,12 @@ public class EventJpaEntity {
   @Column(name = "created_at", nullable = false)
   private OffsetDateTime createdAt;
 
+  @Column(name = "cancelled", nullable = false)
+  private boolean cancelled;
+
+  @Column(name = "cancellation_reason", length = 2000)
+  private String cancellationReason;
+
   /** Returns the internal database ID. */
   public Long getId() {
     return id;
@@ -145,4 +151,24 @@ public class EventJpaEntity {
   public void setCreatedAt(OffsetDateTime createdAt) {
     this.createdAt = createdAt;
   }
+
+  /** Returns whether the event is cancelled. */
+  public boolean isCancelled() {
+    return cancelled;
+  }
+
+  /** Sets the cancelled flag. */
+  public void setCancelled(boolean cancelled) {
+    this.cancelled = cancelled;
+  }
+
+  /** Returns the cancellation reason. */
+  public String getCancellationReason() {
+    return cancellationReason;
+  }
+
+  /** Sets the cancellation reason. */
+  public void setCancellationReason(String cancellationReason) {
+    this.cancellationReason = cancellationReason;
+  }
 }

backend/src/main/java/de/fete/adapter/out/persistence/EventPersistenceAdapter.java

@@ -38,31 +38,34 @@ public class EventPersistenceAdapter implements EventRepository {
 
   private EventJpaEntity toEntity(Event event) {
     var entity = new EventJpaEntity();
-    entity.setId(event.getId());
+    entity.setId(event.id());
-    entity.setEventToken(event.getEventToken().value());
+    entity.setEventToken(event.eventToken().value());
-    entity.setOrganizerToken(event.getOrganizerToken().value());
+    entity.setOrganizerToken(event.organizerToken().value());
-    entity.setTitle(event.getTitle());
+    entity.setTitle(event.title());
-    entity.setDescription(event.getDescription());
+    entity.setDescription(event.description());
-    entity.setDateTime(event.getDateTime());
+    entity.setDateTime(event.dateTime());
-    entity.setTimezone(event.getTimezone().getId());
+    entity.setTimezone(event.timezone().getId());
-    entity.setLocation(event.getLocation());
+    entity.setLocation(event.location());
-    entity.setExpiryDate(event.getExpiryDate());
+    entity.setExpiryDate(event.expiryDate());
-    entity.setCreatedAt(event.getCreatedAt());
+    entity.setCreatedAt(event.createdAt());
+    entity.setCancelled(event.cancelled());
+    entity.setCancellationReason(event.cancellationReason());
     return entity;
   }
 
   private Event toDomain(EventJpaEntity entity) {
-    var event = new Event();
+    return new Event(
-    event.setId(entity.getId());
+        entity.getId(),
-    event.setEventToken(new EventToken(entity.getEventToken()));
+        new EventToken(entity.getEventToken()),
-    event.setOrganizerToken(new OrganizerToken(entity.getOrganizerToken()));
+        new OrganizerToken(entity.getOrganizerToken()),
-    event.setTitle(entity.getTitle());
+        entity.getTitle(),
-    event.setDescription(entity.getDescription());
+        entity.getDescription(),
-    event.setDateTime(entity.getDateTime());
+        entity.getDateTime(),
-    event.setTimezone(ZoneId.of(entity.getTimezone()));
+        ZoneId.of(entity.getTimezone()),
-    event.setLocation(entity.getLocation());
+        entity.getLocation(),
-    event.setExpiryDate(entity.getExpiryDate());
+        entity.getExpiryDate(),
-    event.setCreatedAt(entity.getCreatedAt());
+        entity.getCreatedAt(),
-    return event;
+        entity.isCancelled(),
+        entity.getCancellationReason());
   }
 }

backend/src/main/java/de/fete/adapter/out/persistence/RsvpPersistenceAdapter.java

@@ -43,19 +43,18 @@ public class RsvpPersistenceAdapter implements RsvpRepository {
 
   private RsvpJpaEntity toEntity(Rsvp rsvp) {
     var entity = new RsvpJpaEntity();
-    entity.setId(rsvp.getId());
+    entity.setId(rsvp.id());
-    entity.setRsvpToken(rsvp.getRsvpToken().value());
+    entity.setRsvpToken(rsvp.rsvpToken().value());
-    entity.setEventId(rsvp.getEventId());
+    entity.setEventId(rsvp.eventId());
-    entity.setName(rsvp.getName());
+    entity.setName(rsvp.name());
     return entity;
   }
 
   private Rsvp toDomain(RsvpJpaEntity entity) {
-    var rsvp = new Rsvp();
+    return new Rsvp(
-    rsvp.setId(entity.getId());
+        entity.getId(),
-    rsvp.setRsvpToken(new RsvpToken(entity.getRsvpToken()));
+        new RsvpToken(entity.getRsvpToken()),
-    rsvp.setEventId(entity.getEventId());
+        entity.getEventId(),
-    rsvp.setName(entity.getName());
+        entity.getName());
-    return rsvp;
   }
 }

backend/src/main/java/de/fete/application/service/EventService.java

@@ -1,21 +1,26 @@
 package de.fete.application.service;
 
+import de.fete.application.service.exception.EventAlreadyCancelledException;
+import de.fete.application.service.exception.EventNotFoundException;
+import de.fete.application.service.exception.InvalidOrganizerTokenException;
 import de.fete.domain.model.CreateEventCommand;
 import de.fete.domain.model.Event;
 import de.fete.domain.model.EventToken;
 import de.fete.domain.model.OrganizerToken;
 import de.fete.domain.port.in.CreateEventUseCase;
 import de.fete.domain.port.in.GetEventUseCase;
+import de.fete.domain.port.in.UpdateEventUseCase;
 import de.fete.domain.port.out.EventRepository;
 import java.time.Clock;
 import java.time.LocalDate;
 import java.time.OffsetDateTime;
 import java.util.Optional;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 /** Application service implementing event creation and retrieval. */
 @Service
-public class EventService implements CreateEventUseCase, GetEventUseCase {
+public class EventService implements CreateEventUseCase, GetEventUseCase, UpdateEventUseCase {
 
   private static final int EXPIRY_DAYS_AFTER_EVENT = 7;
 
@@ -32,16 +37,19 @@ public class EventService implements CreateEventUseCase, GetEventUseCase {
   public Event createEvent(CreateEventCommand command) {
     LocalDate expiryDate = command.dateTime().toLocalDate().plusDays(EXPIRY_DAYS_AFTER_EVENT);
 
-    var event = new Event();
+    var event = new Event(
-    event.setEventToken(EventToken.generate());
+        null,
-    event.setOrganizerToken(OrganizerToken.generate());
+        EventToken.generate(),
-    event.setTitle(command.title());
+        OrganizerToken.generate(),
-    event.setDescription(command.description());
+        command.title(),
-    event.setDateTime(command.dateTime());
+        command.description(),
-    event.setTimezone(command.timezone());
+        command.dateTime(),
-    event.setLocation(command.location());
+        command.timezone(),
-    event.setExpiryDate(expiryDate);
+        command.location(),
-    event.setCreatedAt(OffsetDateTime.now(clock));
+        expiryDate,
+        OffsetDateTime.now(clock),
+        false,
+        null);
 
     return eventRepository.save(event);
   }
@@ -50,4 +58,27 @@ public class EventService implements CreateEventUseCase, GetEventUseCase {
   public Optional<Event> getByEventToken(EventToken eventToken) {
     return eventRepository.findByEventToken(eventToken);
   }
+
+  @Transactional
+  @Override
+  public void cancelEvent(
+      EventToken eventToken, OrganizerToken organizerToken,
+      Boolean cancelled, String reason) {
+    if (!Boolean.TRUE.equals(cancelled)) {
+      return;
+    }
+
+    Event event = eventRepository.findByEventToken(eventToken)
+        .orElseThrow(() -> new EventNotFoundException(eventToken.value()));
+
+    if (!event.organizerToken().equals(organizerToken)) {
+      throw new InvalidOrganizerTokenException();
+    }
+
+    if (event.cancelled()) {
+      throw new EventAlreadyCancelledException(eventToken.value());
+    }
+
+    eventRepository.save(event.withCancellation(true, reason));
+  }
 }

backend/src/main/java/de/fete/application/service/RsvpService.java

@@ -1,5 +1,9 @@
 package de.fete.application.service;
 
+import de.fete.application.service.exception.EventCancelledException;
+import de.fete.application.service.exception.EventExpiredException;
+import de.fete.application.service.exception.EventNotFoundException;
+import de.fete.application.service.exception.InvalidOrganizerTokenException;
 import de.fete.domain.model.Event;
 import de.fete.domain.model.EventToken;
 import de.fete.domain.model.OrganizerToken;
@@ -42,14 +46,15 @@ public class RsvpService
     Event event = eventRepository.findByEventToken(eventToken)
         .orElseThrow(() -> new EventNotFoundException(eventToken.value()));
 
-    if (!event.getExpiryDate().isAfter(LocalDate.now(clock))) {
+    if (event.cancelled()) {
+      throw new EventCancelledException(eventToken.value());
+    }
+
+    if (!event.expiryDate().isAfter(LocalDate.now(clock))) {
       throw new EventExpiredException(eventToken.value());
     }
 
-    var rsvp = new Rsvp();
+    var rsvp = new Rsvp(null, RsvpToken.generate(), event.id(), name.strip());
-    rsvp.setRsvpToken(RsvpToken.generate());
-    rsvp.setEventId(event.getId());
-    rsvp.setName(name.strip());
 
     return rsvpRepository.save(rsvp);
   }
@@ -59,14 +64,14 @@ public class RsvpService
   public void cancelRsvp(EventToken eventToken, RsvpToken rsvpToken) {
     eventRepository.findByEventToken(eventToken)
         .ifPresent(event ->
-            rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken));
+            rsvpRepository.deleteByEventIdAndRsvpToken(event.id(), rsvpToken));
   }
 
   @Override
   public long countByEvent(EventToken eventToken) {
     Event event = eventRepository.findByEventToken(eventToken)
         .orElseThrow(() -> new EventNotFoundException(eventToken.value()));
-    return rsvpRepository.countByEventId(event.getId());
+    return rsvpRepository.countByEventId(event.id());
   }
 
   @Override
@@ -74,12 +79,12 @@ public class RsvpService
     Event event = eventRepository.findByEventToken(eventToken)
         .orElseThrow(() -> new EventNotFoundException(eventToken.value()));
 
-    if (!event.getOrganizerToken().equals(organizerToken)) {
+    if (!event.organizerToken().equals(organizerToken)) {
       throw new InvalidOrganizerTokenException();
     }
 
-    return rsvpRepository.findByEventId(event.getId()).stream()
+    return rsvpRepository.findByEventId(event.id()).stream()
-        .map(Rsvp::getName)
+        .map(Rsvp::name)
         .toList();
   }
 }

backend/src/main/java/de/fete/application/service/exception/EventAlreadyCancelledException.java

@@ -0,0 +1,12 @@
+package de.fete.application.service.exception;
+
+import java.util.UUID;
+
+/** Thrown when attempting to cancel an event that is already cancelled. */
+public class EventAlreadyCancelledException extends RuntimeException {
+
+  /** Creates a new exception for the given event token. */
+  public EventAlreadyCancelledException(UUID eventToken) {
+    super("Event is already cancelled: " + eventToken);
+  }
+}

backend/src/main/java/de/fete/application/service/exception/EventCancelledException.java

@@ -0,0 +1,12 @@
+package de.fete.application.service.exception;
+
+import java.util.UUID;
+
+/** Thrown when an RSVP is attempted on a cancelled event. */
+public class EventCancelledException extends RuntimeException {
+
+  /** Creates a new exception for the given event token. */
+  public EventCancelledException(UUID eventToken) {
+    super("Event is cancelled: " + eventToken);
+  }
+}

backend/src/main/java/de/fete/application/service/exception/EventExpiredException.java

@@ -1,4 +1,4 @@
-package de.fete.application.service;
+package de.fete.application.service.exception;
 
 import java.util.UUID;
 

backend/src/main/java/de/fete/application/service/exception/EventNotFoundException.java

@@ -1,4 +1,4 @@
-package de.fete.application.service;
+package de.fete.application.service.exception;
 
 import java.util.UUID;
 

backend/src/main/java/de/fete/application/service/exception/ExpiryDateBeforeEventException.java

@@ -1,4 +1,4 @@
-package de.fete.application.service;
+package de.fete.application.service.exception;
 
 import java.time.LocalDate;
 import java.time.OffsetDateTime;

backend/src/main/java/de/fete/application/service/exception/ExpiryDateInPastException.java

@@ -1,4 +1,4 @@
-package de.fete.application.service;
+package de.fete.application.service.exception;
 
 import java.time.LocalDate;
 

backend/src/main/java/de/fete/application/service/exception/InvalidOrganizerTokenException.java

@@ -1,4 +1,4 @@
-package de.fete.application.service;
+package de.fete.application.service.exception;
 
 /** Thrown when an invalid organizer token is provided. */
 public class InvalidOrganizerTokenException extends RuntimeException {

backend/src/main/java/de/fete/application/service/exception/InvalidTimezoneException.java

@@ -1,4 +1,4 @@
-package de.fete.application.service;
+package de.fete.application.service.exception;
 
 /** Thrown when an invalid IANA timezone ID is provided. */
 public class InvalidTimezoneException extends RuntimeException {

backend/src/main/java/de/fete/application/service/exception/package-info.java

@@ -0,0 +1,4 @@
+/**
+ * Application-layer exceptions thrown by service use case implementations.
+ */
+package de.fete.application.service.exception;

backend/src/main/java/de/fete/domain/model/Event.java

@@ -5,116 +5,26 @@ import java.time.OffsetDateTime;
 import java.time.ZoneId;
 
 /** Domain entity representing an event. */
-public class Event {
+public record Event(
+    Long id,
+    EventToken eventToken,
+    OrganizerToken organizerToken,
+    String title,
+    String description,
+    OffsetDateTime dateTime,
+    ZoneId timezone,
+    String location,
+    LocalDate expiryDate,
+    OffsetDateTime createdAt,
+    boolean cancelled,
+    String cancellationReason
+) {
 
-  private Long id;
+  /** Returns a copy of this event with cancellation applied. */
-  private EventToken eventToken;
+  public Event withCancellation(boolean cancelled, String cancellationReason) {
-  private OrganizerToken organizerToken;
+    return new Event(
-  private String title;
+        id, eventToken, organizerToken, title, description,
-  private String description;
+        dateTime, timezone, location, expiryDate, createdAt,
-  private OffsetDateTime dateTime;
+        cancelled, cancellationReason);
-  private ZoneId timezone;
-  private String location;
-  private LocalDate expiryDate;
-  private OffsetDateTime createdAt;
-
-  /** Returns the internal database ID. */
-  public Long getId() {
-    return id;
-  }
-
-  /** Sets the internal database ID. */
-  public void setId(Long id) {
-    this.id = id;
-  }
-
-  /** Returns the public event token. */
-  public EventToken getEventToken() {
-    return eventToken;
-  }
-
-  /** Sets the public event token. */
-  public void setEventToken(EventToken eventToken) {
-    this.eventToken = eventToken;
-  }
-
-  /** Returns the secret organizer token. */
-  public OrganizerToken getOrganizerToken() {
-    return organizerToken;
-  }
-
-  /** Sets the secret organizer token. */
-  public void setOrganizerToken(OrganizerToken organizerToken) {
-    this.organizerToken = organizerToken;
-  }
-
-  /** Returns the event title. */
-  public String getTitle() {
-    return title;
-  }
-
-  /** Sets the event title. */
-  public void setTitle(String title) {
-    this.title = title;
-  }
-
-  /** Returns the event description. */
-  public String getDescription() {
-    return description;
-  }
-
-  /** Sets the event description. */
-  public void setDescription(String description) {
-    this.description = description;
-  }
-
-  /** Returns the event date and time with UTC offset. */
-  public OffsetDateTime getDateTime() {
-    return dateTime;
-  }
-
-  /** Sets the event date and time. */
-  public void setDateTime(OffsetDateTime dateTime) {
-    this.dateTime = dateTime;
-  }
-
-  /** Returns the IANA timezone. */
-  public ZoneId getTimezone() {
-    return timezone;
-  }
-
-  /** Sets the IANA timezone. */
-  public void setTimezone(ZoneId timezone) {
-    this.timezone = timezone;
-  }
-
-  /** Returns the event location. */
-  public String getLocation() {
-    return location;
-  }
-
-  /** Sets the event location. */
-  public void setLocation(String location) {
-    this.location = location;
-  }
-
-  /** Returns the expiry date after which event data is deleted. */
-  public LocalDate getExpiryDate() {
-    return expiryDate;
-  }
-
-  /** Sets the expiry date. */
-  public void setExpiryDate(LocalDate expiryDate) {
-    this.expiryDate = expiryDate;
-  }
-
-  /** Returns the creation timestamp. */
-  public OffsetDateTime getCreatedAt() {
-    return createdAt;
-  }
-
-  /** Sets the creation timestamp. */
-  public void setCreatedAt(OffsetDateTime createdAt) {
-    this.createdAt = createdAt;
   }
 }

backend/src/main/java/de/fete/domain/model/Rsvp.java

@@ -1,50 +1,9 @@
 package de.fete.domain.model;
 
 /** Domain entity representing an RSVP. */
-public class Rsvp {
+public record Rsvp(
-
+    Long id,
-  private Long id;
+    RsvpToken rsvpToken,
-  private RsvpToken rsvpToken;
+    Long eventId,
-  private Long eventId;
+    String name
-  private String name;
+) {}
-
-  /** Returns the internal database ID. */
-  public Long getId() {
-    return id;
-  }
-
-  /** Sets the internal database ID. */
-  public void setId(Long id) {
-    this.id = id;
-  }
-
-  /** Returns the RSVP token. */
-  public RsvpToken getRsvpToken() {
-    return rsvpToken;
-  }
-
-  /** Sets the RSVP token. */
-  public void setRsvpToken(RsvpToken rsvpToken) {
-    this.rsvpToken = rsvpToken;
-  }
-
-  /** Returns the event ID this RSVP belongs to. */
-  public Long getEventId() {
-    return eventId;
-  }
-
-  /** Sets the event ID. */
-  public void setEventId(Long eventId) {
-    this.eventId = eventId;
-  }
-
-  /** Returns the guest's display name. */
-  public String getName() {
-    return name;
-  }
-
-  /** Sets the guest's display name. */
-  public void setName(String name) {
-    this.name = name;
-  }
-}

backend/src/main/java/de/fete/domain/port/in/UpdateEventUseCase.java

@@ -0,0 +1,13 @@
+package de.fete.domain.port.in;
+
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
+
+/** Inbound port for updating an event. */
+public interface UpdateEventUseCase {
+
+  /** Cancels the event identified by the given token. */
+  void cancelEvent(
+      EventToken eventToken, OrganizerToken organizerToken,
+      Boolean cancelled, String reason);
+}

backend/src/main/resources/db/changelog/004-add-cancellation-columns.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<databaseChangeLog
+    xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog
+        http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-latest.xsd">
+
+    <changeSet id="004-add-cancellation-columns" author="fete">
+        <addColumn tableName="events">
+            <column name="cancelled" type="BOOLEAN" defaultValueBoolean="false">
+                <constraints nullable="false"/>
+            </column>
+            <column name="cancellation_reason" type="VARCHAR(2000)"/>
+        </addColumn>
+    </changeSet>
+
+</databaseChangeLog>

backend/src/main/resources/db/changelog/db.changelog-master.xml

@@ -9,5 +9,6 @@
     <include file="db/changelog/001-create-events-table.xml"/>
     <include file="db/changelog/002-add-timezone-column.xml"/>
     <include file="db/changelog/003-create-rsvps-table.xml"/>
+    <include file="db/changelog/004-add-cancellation-columns.xml"/>
 
 </databaseChangeLog>

backend/src/main/resources/openapi/api.yaml

@@ -37,7 +37,7 @@ paths:
               schema:
                 $ref: "#/components/schemas/ValidationProblemDetail"
 
-  /events/{token}/rsvps/{rsvpToken}:
+  /events/{eventToken}/rsvps/{rsvpToken}:
     delete:
       operationId: cancelRsvp
       summary: Cancel RSVP
@@ -47,7 +47,7 @@ paths:
       tags:
         - events
       parameters:
-        - name: token
+        - name: eventToken
           in: path
           required: true
           schema:
@@ -69,14 +69,14 @@ paths:
         "500":
           description: Internal server error
 
-  /events/{token}/rsvps:
+  /events/{eventToken}/rsvps:
     post:
       operationId: createRsvp
       summary: Submit an RSVP for an event
       tags:
         - events
       parameters:
-        - name: token
+        - name: eventToken
           in: path
           required: true
           schema:
@@ -115,14 +115,14 @@ paths:
               schema:
                 $ref: "#/components/schemas/ProblemDetail"
 
-  /events/{token}/attendees:
+  /events/{eventToken}/attendees:
     get:
       operationId: getAttendees
       summary: Get attendee list for an event (organizer only)
       tags:
         - events
       parameters:
-        - name: token
+        - name: eventToken
           in: path
           required: true
           schema:
@@ -156,14 +156,14 @@ paths:
               schema:
                 $ref: "#/components/schemas/ProblemDetail"
 
-  /events/{token}:
+  /events/{eventToken}:
     get:
       operationId: getEvent
       summary: Get public event details by token
       tags:
         - events
       parameters:
-        - name: token
+        - name: eventToken
           in: path
           required: true
           schema:
@@ -184,6 +184,58 @@ paths:
               schema:
                 $ref: "#/components/schemas/ProblemDetail"
 
+    patch:
+      operationId: patchEvent
+      summary: Update an event (currently cancel)
+      description: |
+        Partial update of an event resource. Currently the only supported operation
+        is cancellation (setting cancelled to true). Requires the organizer token.
+        Cancellation is irreversible.
+      tags:
+        - events
+      parameters:
+        - name: eventToken
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: Public event token
+        - name: organizerToken
+          in: query
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: Organizer token for authorization
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/PatchEventRequest"
+      responses:
+        "204":
+          description: Event updated successfully
+        "403":
+          description: Invalid organizer token
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ProblemDetail"
+        "404":
+          description: Event not found
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ProblemDetail"
+        "409":
+          description: Event is already cancelled
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ProblemDetail"
+
 components:
   schemas:
     CreateEventRequest:
@@ -252,6 +304,7 @@ components:
         - dateTime
         - timezone
         - attendeeCount
+        - cancelled
       properties:
         eventToken:
           type: string
@@ -284,6 +337,31 @@ components:
           minimum: 0
           description: Number of confirmed attendees (attending=true)
           example: 12
+        cancelled:
+          type: boolean
+          description: Whether the event has been cancelled
+          example: false
+        cancellationReason:
+          type:
+            - string
+            - "null"
+          description: Reason for cancellation, if provided
+          example: null
+
+    PatchEventRequest:
+      type: object
+      required:
+        - cancelled
+      properties:
+        cancelled:
+          type: boolean
+          description: Set to true to cancel the event (irreversible)
+          example: true
+        cancellationReason:
+          type: string
+          maxLength: 2000
+          description: Optional cancellation reason
+          example: "Unfortunately the venue is no longer available."
 
     CreateRsvpRequest:
       type: object

backend/src/test/java/de/fete/HexagonalArchitectureTest.java

@@ -4,10 +4,14 @@ import static com.tngtech.archunit.lang.syntax.ArchRuleDefinition.classes;
 import static com.tngtech.archunit.lang.syntax.ArchRuleDefinition.noClasses;
 import static com.tngtech.archunit.library.Architectures.onionArchitecture;
 
+import com.tngtech.archunit.core.domain.JavaClass;
 import com.tngtech.archunit.core.importer.ImportOption;
 import com.tngtech.archunit.junit.AnalyzeClasses;
 import com.tngtech.archunit.junit.ArchTest;
+import com.tngtech.archunit.lang.ArchCondition;
 import com.tngtech.archunit.lang.ArchRule;
+import com.tngtech.archunit.lang.ConditionEvents;
+import com.tngtech.archunit.lang.SimpleConditionEvent;
 
 @AnalyzeClasses(packages = "de.fete", importOptions = ImportOption.DoNotIncludeTests.class)
 class HexagonalArchitectureTest {
@@ -65,4 +69,24 @@ class HexagonalArchitectureTest {
   static final ArchRule webAdapterMustNotDependOnOutboundPorts = noClasses()
       .that().resideInAPackage("de.fete.adapter.in.web..")
       .should().dependOnClassesThat().resideInAPackage("de.fete.domain.port.out..");
+
+  @ArchTest
+  static final ArchRule domainModelsMustBeRecords = classes()
+      .that().resideInAPackage("de.fete.domain.model..")
+      .and().doNotHaveSimpleName("package-info")
+      .should(beRecords());
+
+  private static ArchCondition<JavaClass> beRecords() {
+    return new ArchCondition<>("be records") {
+      @Override
+      public void check(JavaClass javaClass,
+          ConditionEvents events) {
+        boolean isRecord = javaClass.reflect().isRecord();
+        if (!isRecord) {
+          events.add(SimpleConditionEvent.violated(javaClass,
+              javaClass.getFullName() + " is not a record"));
+        }
+      }
+    };
+  }
 }

backend/src/test/java/de/fete/adapter/in/web/EventControllerIntegrationTest.java

@@ -3,6 +3,7 @@ package de.fete.adapter.in.web;
 import static org.assertj.core.api.Assertions.assertThat;
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.delete;
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.patch;
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
@@ -21,6 +22,7 @@ import de.fete.adapter.out.persistence.RsvpJpaRepository;
 import java.time.LocalDate;
 import java.time.OffsetDateTime;
 import java.time.ZoneOffset;
+import java.util.Map;
 import java.util.UUID;
 import org.junit.jupiter.api.Test;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -431,6 +433,147 @@ class EventControllerIntegrationTest {
         .andExpect(jsonPath("$.attendeeCount").value(1));
   }
 
+  // --- Cancel Event tests ---
+
+  @Test
+  void cancelEventReturns204AndPersists() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Cancel Me", null, "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    var body = Map.of(
+        "cancelled", true,
+        "cancellationReason", "Venue closed");
+
+    mockMvc.perform(patch("/api/events/" + event.getEventToken()
+            + "?organizerToken=" + event.getOrganizerToken())
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(body)))
+        .andExpect(status().isNoContent());
+
+    EventJpaEntity persisted = jpaRepository
+        .findByEventToken(event.getEventToken()).orElseThrow();
+    assertThat(persisted.isCancelled()).isTrue();
+    assertThat(persisted.getCancellationReason()).isEqualTo("Venue closed");
+  }
+
+  @Test
+  void cancelEventWithoutReasonReturns204() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Cancel No Reason", null, "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    var body = Map.of("cancelled", true);
+
+    mockMvc.perform(patch("/api/events/" + event.getEventToken()
+            + "?organizerToken=" + event.getOrganizerToken())
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(body)))
+        .andExpect(status().isNoContent());
+
+    EventJpaEntity persisted = jpaRepository
+        .findByEventToken(event.getEventToken()).orElseThrow();
+    assertThat(persisted.isCancelled()).isTrue();
+    assertThat(persisted.getCancellationReason()).isNull();
+  }
+
+  @Test
+  void cancelEventWithWrongOrganizerTokenReturns403() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Wrong Token", null, "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    var body = Map.of("cancelled", true);
+
+    mockMvc.perform(patch("/api/events/" + event.getEventToken()
+            + "?organizerToken=" + UUID.randomUUID())
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(body)))
+        .andExpect(status().isForbidden())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
+        .andExpect(jsonPath("$.type").value("urn:problem-type:invalid-organizer-token"));
+
+    assertThat(jpaRepository.findByEventToken(event.getEventToken())
+        .orElseThrow().isCancelled()).isFalse();
+  }
+
+  @Test
+  void cancelEventNotFoundReturns404() throws Exception {
+    var body = Map.of("cancelled", true);
+
+    mockMvc.perform(patch("/api/events/" + UUID.randomUUID()
+            + "?organizerToken=" + UUID.randomUUID())
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(body)))
+        .andExpect(status().isNotFound())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
+        .andExpect(jsonPath("$.type").value("urn:problem-type:event-not-found"));
+  }
+
+  @Test
+  void cancelAlreadyCancelledEventReturns409() throws Exception {
+    EventJpaEntity event = seedCancelledEvent("Already Cancelled");
+
+    var body = Map.of("cancelled", true);
+
+    mockMvc.perform(patch("/api/events/" + event.getEventToken()
+            + "?organizerToken=" + event.getOrganizerToken())
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(body)))
+        .andExpect(status().isConflict())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
+        .andExpect(jsonPath("$.type").value("urn:problem-type:event-already-cancelled"));
+  }
+
+  @Test
+  void getEventReturnsCancelledFields() throws Exception {
+    EventJpaEntity event = seedCancelledEvent("Weather Event");
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()))
+        .andExpect(status().isOk())
+        .andExpect(jsonPath("$.cancelled").value(true))
+        .andExpect(jsonPath("$.cancellationReason").value("Cancelled"));
+  }
+
+  @Test
+  void getEventReturnsNotCancelledByDefault() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Active Event", null, "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()))
+        .andExpect(status().isOk())
+        .andExpect(jsonPath("$.cancelled").value(false))
+        .andExpect(jsonPath("$.cancellationReason").doesNotExist());
+  }
+
+  @Test
+  void createRsvpOnCancelledEventReturns409() throws Exception {
+    EventJpaEntity event = seedCancelledEvent("Cancelled RSVP");
+    long countBefore = rsvpJpaRepository.count();
+
+    var request = new CreateRsvpRequest().name("Late Guest");
+
+    mockMvc.perform(post("/api/events/" + event.getEventToken() + "/rsvps")
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(request)))
+        .andExpect(status().isConflict())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
+        .andExpect(jsonPath("$.type").value("urn:problem-type:event-cancelled"));
+
+    assertThat(rsvpJpaRepository.count()).isEqualTo(countBefore);
+  }
+
+  private EventJpaEntity seedCancelledEvent(String title) {
+    var entity = new EventJpaEntity();
+    entity.setEventToken(UUID.randomUUID());
+    entity.setOrganizerToken(UUID.randomUUID());
+    entity.setTitle(title);
+    entity.setDateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+    entity.setTimezone("Europe/Berlin");
+    entity.setExpiryDate(LocalDate.now().plusDays(30));
+    entity.setCreatedAt(OffsetDateTime.now());
+    entity.setCancelled(true);
+    entity.setCancellationReason("Cancelled");
+    return jpaRepository.save(entity);
+  }
+
   private UUID seedRsvpAndGetToken(EventJpaEntity event, String name) {
     var rsvp = new RsvpJpaEntity();
     UUID token = UUID.randomUUID();

backend/src/test/java/de/fete/adapter/out/persistence/EventPersistenceAdapterIntegrationTest.java

@@ -42,7 +42,7 @@ class EventPersistenceAdapterIntegrationTest {
 
     eventRepository.deleteExpired();
 
-    assertThat(eventRepository.findByEventToken(saved.getEventToken())).isPresent();
+    assertThat(eventRepository.findByEventToken(saved.eventToken())).isPresent();
   }
 
   @Test
@@ -52,7 +52,7 @@ class EventPersistenceAdapterIntegrationTest {
 
     eventRepository.deleteExpired();
 
-    assertThat(eventRepository.findByEventToken(saved.getEventToken())).isPresent();
+    assertThat(eventRepository.findByEventToken(saved.eventToken())).isPresent();
   }
 
   @Test
@@ -66,16 +66,18 @@ class EventPersistenceAdapterIntegrationTest {
   }
 
   private Event buildEvent(String title, LocalDate expiryDate) {
-    var event = new Event();
+    return new Event(
-    event.setEventToken(EventToken.generate());
+        null,
-    event.setOrganizerToken(OrganizerToken.generate());
+        EventToken.generate(),
-    event.setTitle(title);
+        OrganizerToken.generate(),
-    event.setDescription("Test description");
+        title,
-    event.setDateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+        "Test description",
-    event.setTimezone(ZoneId.of("Europe/Berlin"));
+        OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)),
-    event.setLocation("Test Location");
+        ZoneId.of("Europe/Berlin"),
-    event.setExpiryDate(expiryDate);
+        "Test Location",
-    event.setCreatedAt(OffsetDateTime.now());
+        expiryDate,
-    return event;
+        OffsetDateTime.now(),
+        false,
+        null);
   }
 }

backend/src/test/java/de/fete/adapter/out/persistence/EventPersistenceAdapterTest.java

@@ -30,8 +30,8 @@ class EventPersistenceAdapterTest {
 
     Event saved = eventRepository.save(event);
 
-    assertThat(saved.getId()).isNotNull();
+    assertThat(saved.id()).isNotNull();
-    assertThat(saved.getTitle()).isEqualTo("Test Event");
+    assertThat(saved.title()).isEqualTo("Test Event");
   }
 
   @Test
@@ -39,11 +39,11 @@ class EventPersistenceAdapterTest {
     Event event = buildEvent();
     Event saved = eventRepository.save(event);
 
-    Optional<Event> found = eventRepository.findByEventToken(saved.getEventToken());
+    Optional<Event> found = eventRepository.findByEventToken(saved.eventToken());
 
     assertThat(found).isPresent();
-    assertThat(found.get().getTitle()).isEqualTo("Test Event");
+    assertThat(found.get().title()).isEqualTo("Test Event");
-    assertThat(found.get().getId()).isEqualTo(saved.getId());
+    assertThat(found.get().id()).isEqualTo(saved.id());
   }
 
   @Test
@@ -61,42 +61,47 @@ class EventPersistenceAdapterTest {
     OffsetDateTime createdAt =
         OffsetDateTime.of(2026, 3, 4, 12, 0, 0, 0, ZoneOffset.UTC);
 
-    var event = new Event();
+    var event = new Event(
-    event.setEventToken(EventToken.generate());
+        null,
-    event.setOrganizerToken(OrganizerToken.generate());
+        EventToken.generate(),
-    event.setTitle("Full Event");
+        OrganizerToken.generate(),
-    event.setDescription("A detailed description");
+        "Full Event",
-    event.setDateTime(dateTime);
+        "A detailed description",
-    event.setTimezone(ZoneId.of("Europe/Berlin"));
+        dateTime,
-    event.setLocation("Berlin, Germany");
+        ZoneId.of("Europe/Berlin"),
-    event.setExpiryDate(expiryDate);
+        "Berlin, Germany",
-    event.setCreatedAt(createdAt);
+        expiryDate,
+        createdAt,
+        false,
+        null);
 
     Event saved = eventRepository.save(event);
-    Event found = eventRepository.findByEventToken(saved.getEventToken()).orElseThrow();
+    Event found = eventRepository.findByEventToken(saved.eventToken()).orElseThrow();
 
-    assertThat(found.getEventToken()).isEqualTo(event.getEventToken());
+    assertThat(found.eventToken()).isEqualTo(event.eventToken());
-    assertThat(found.getOrganizerToken()).isEqualTo(event.getOrganizerToken());
+    assertThat(found.organizerToken()).isEqualTo(event.organizerToken());
-    assertThat(found.getTitle()).isEqualTo("Full Event");
+    assertThat(found.title()).isEqualTo("Full Event");
-    assertThat(found.getDescription()).isEqualTo("A detailed description");
+    assertThat(found.description()).isEqualTo("A detailed description");
-    assertThat(found.getDateTime().toInstant()).isEqualTo(dateTime.toInstant());
+    assertThat(found.dateTime().toInstant()).isEqualTo(dateTime.toInstant());
-    assertThat(found.getTimezone()).isEqualTo(ZoneId.of("Europe/Berlin"));
+    assertThat(found.timezone()).isEqualTo(ZoneId.of("Europe/Berlin"));
-    assertThat(found.getLocation()).isEqualTo("Berlin, Germany");
+    assertThat(found.location()).isEqualTo("Berlin, Germany");
-    assertThat(found.getExpiryDate()).isEqualTo(expiryDate);
+    assertThat(found.expiryDate()).isEqualTo(expiryDate);
-    assertThat(found.getCreatedAt().toInstant()).isEqualTo(createdAt.toInstant());
+    assertThat(found.createdAt().toInstant()).isEqualTo(createdAt.toInstant());
   }
 
   private Event buildEvent() {
-    var event = new Event();
+    return new Event(
-    event.setEventToken(EventToken.generate());
+        null,
-    event.setOrganizerToken(OrganizerToken.generate());
+        EventToken.generate(),
-    event.setTitle("Test Event");
+        OrganizerToken.generate(),
-    event.setDescription("Test description");
+        "Test Event",
-    event.setDateTime(OffsetDateTime.now().plusDays(7));
+        "Test description",
-    event.setTimezone(ZoneId.of("Europe/Berlin"));
+        OffsetDateTime.now().plusDays(7),
-    event.setLocation("Somewhere");
+        ZoneId.of("Europe/Berlin"),
-    event.setExpiryDate(LocalDate.now().plusDays(30));
+        "Somewhere",
-    event.setCreatedAt(OffsetDateTime.now());
+        LocalDate.now().plusDays(30),
-    return event;
+        OffsetDateTime.now(),
+        false,
+        null);
   }
 }

backend/src/test/java/de/fete/application/service/EventServiceCancelTest.java

@@ -0,0 +1,133 @@
+package de.fete.application.service;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.never;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+import de.fete.application.service.exception.EventAlreadyCancelledException;
+import de.fete.application.service.exception.EventNotFoundException;
+import de.fete.application.service.exception.InvalidOrganizerTokenException;
+import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
+import de.fete.domain.port.out.EventRepository;
+import java.time.Clock;
+import java.time.Instant;
+import java.time.LocalDate;
+import java.time.ZoneId;
+import java.util.Optional;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.ArgumentCaptor;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+@ExtendWith(MockitoExtension.class)
+class EventServiceCancelTest {
+
+  private static final ZoneId ZONE = ZoneId.of("Europe/Berlin");
+  private static final Instant FIXED_INSTANT =
+      LocalDate.of(2026, 3, 5).atStartOfDay(ZONE).toInstant();
+  private static final Clock FIXED_CLOCK = Clock.fixed(FIXED_INSTANT, ZONE);
+
+  @Mock
+  private EventRepository eventRepository;
+
+  private EventService eventService;
+
+  @BeforeEach
+  void setUp() {
+    eventService = new EventService(eventRepository, FIXED_CLOCK);
+  }
+
+  @Test
+  void cancelEventDelegatesToDomainAndSaves() {
+    EventToken eventToken = EventToken.generate();
+    OrganizerToken organizerToken = OrganizerToken.generate();
+    var event = new Event(null, eventToken, organizerToken, null, null, null, null, null, null,
+        null, false, null);
+
+    when(eventRepository.findByEventToken(eventToken))
+        .thenReturn(Optional.of(event));
+    when(eventRepository.save(any(Event.class)))
+        .thenAnswer(invocation -> invocation.getArgument(0));
+
+    eventService.cancelEvent(eventToken, organizerToken, true, "Venue unavailable");
+
+    ArgumentCaptor<Event> captor = ArgumentCaptor.forClass(Event.class);
+    verify(eventRepository).save(captor.capture());
+    assertThat(captor.getValue().cancelled()).isTrue();
+    assertThat(captor.getValue().cancellationReason()).isEqualTo("Venue unavailable");
+  }
+
+  @Test
+  void cancelEventWithNullReason() {
+    EventToken eventToken = EventToken.generate();
+    OrganizerToken organizerToken = OrganizerToken.generate();
+    var event = new Event(null, eventToken, organizerToken, null, null, null, null, null, null,
+        null, false, null);
+
+    when(eventRepository.findByEventToken(eventToken))
+        .thenReturn(Optional.of(event));
+    when(eventRepository.save(any(Event.class)))
+        .thenAnswer(invocation -> invocation.getArgument(0));
+
+    eventService.cancelEvent(eventToken, organizerToken, true, null);
+
+    ArgumentCaptor<Event> captor = ArgumentCaptor.forClass(Event.class);
+    verify(eventRepository).save(captor.capture());
+    assertThat(captor.getValue().cancelled()).isTrue();
+    assertThat(captor.getValue().cancellationReason()).isNull();
+  }
+
+  @Test
+  void cancelEventThrows404WhenNotFound() {
+    EventToken eventToken = EventToken.generate();
+    OrganizerToken organizerToken = OrganizerToken.generate();
+
+    when(eventRepository.findByEventToken(eventToken))
+        .thenReturn(Optional.empty());
+
+    assertThatThrownBy(() -> eventService.cancelEvent(eventToken, organizerToken, true, null))
+        .isInstanceOf(EventNotFoundException.class);
+
+    verify(eventRepository, never()).save(any());
+  }
+
+  @Test
+  void cancelEventThrows403WhenWrongOrganizerToken() {
+    EventToken eventToken = EventToken.generate();
+    OrganizerToken correctToken = OrganizerToken.generate();
+    var event = new Event(null, eventToken, correctToken, null, null, null, null, null, null,
+        null, false, null);
+
+    when(eventRepository.findByEventToken(eventToken))
+        .thenReturn(Optional.of(event));
+
+    final OrganizerToken wrongToken = OrganizerToken.generate();
+    assertThatThrownBy(() -> eventService.cancelEvent(eventToken, wrongToken, true, null))
+        .isInstanceOf(InvalidOrganizerTokenException.class);
+
+    verify(eventRepository, never()).save(any());
+  }
+
+  @Test
+  void cancelEventThrows409WhenAlreadyCancelled() {
+    EventToken eventToken = EventToken.generate();
+    OrganizerToken organizerToken = OrganizerToken.generate();
+    var event = new Event(null, eventToken, organizerToken, null, null, null, null, null, null,
+        null, true, null);
+
+    when(eventRepository.findByEventToken(eventToken))
+        .thenReturn(Optional.of(event));
+
+    assertThatThrownBy(() -> eventService.cancelEvent(eventToken, organizerToken, true, null))
+        .isInstanceOf(EventAlreadyCancelledException.class);
+
+    verify(eventRepository, never()).save(any());
+  }
+}

backend/src/test/java/de/fete/application/service/EventServiceTest.java

@@ -57,13 +57,13 @@ class EventServiceTest {
 
     Event result = eventService.createEvent(command);
 
-    assertThat(result.getTitle()).isEqualTo("Birthday Party");
+    assertThat(result.title()).isEqualTo("Birthday Party");
-    assertThat(result.getDescription()).isEqualTo("Come celebrate!");
+    assertThat(result.description()).isEqualTo("Come celebrate!");
-    assertThat(result.getTimezone()).isEqualTo(ZONE);
+    assertThat(result.timezone()).isEqualTo(ZONE);
-    assertThat(result.getLocation()).isEqualTo("Berlin");
+    assertThat(result.location()).isEqualTo("Berlin");
-    assertThat(result.getEventToken()).isNotNull();
+    assertThat(result.eventToken()).isNotNull();
-    assertThat(result.getOrganizerToken()).isNotNull();
+    assertThat(result.organizerToken()).isNotNull();
-    assertThat(result.getCreatedAt()).isEqualTo(OffsetDateTime.ofInstant(FIXED_INSTANT, ZONE));
+    assertThat(result.createdAt()).isEqualTo(OffsetDateTime.ofInstant(FIXED_INSTANT, ZONE));
   }
 
   @Test
@@ -80,7 +80,7 @@ class EventServiceTest {
 
     ArgumentCaptor<Event> captor = ArgumentCaptor.forClass(Event.class);
     verify(eventRepository, times(1)).save(captor.capture());
-    assertThat(captor.getValue().getTitle()).isEqualTo("Test");
+    assertThat(captor.getValue().title()).isEqualTo("Test");
   }
 
   @Test
@@ -96,7 +96,7 @@ class EventServiceTest {
 
     Event result = eventService.createEvent(command);
 
-    assertThat(result.getExpiryDate()).isEqualTo(eventDate.plusDays(7));
+    assertThat(result.expiryDate()).isEqualTo(eventDate.plusDays(7));
   }
 
   // --- GetEventUseCase tests (T004) ---
@@ -104,16 +104,15 @@ class EventServiceTest {
   @Test
   void getByEventTokenReturnsEvent() {
     EventToken token = EventToken.generate();
-    var event = new Event();
+    var event = new Event(null, token, null, "Found Event", null, null, null, null, null, null,
-    event.setEventToken(token);
+        false, null);
-    event.setTitle("Found Event");
     when(eventRepository.findByEventToken(token))
         .thenReturn(Optional.of(event));
 
     Optional<Event> result = eventService.getByEventToken(token);
 
     assertThat(result).isPresent();
-    assertThat(result.get().getTitle()).isEqualTo("Found Event");
+    assertThat(result.get().title()).isEqualTo("Found Event");
   }
 
   @Test
@@ -142,6 +141,6 @@ class EventServiceTest {
 
     Event result = eventService.createEvent(command);
 
-    assertThat(result.getTimezone()).isEqualTo(ZoneId.of("America/New_York"));
+    assertThat(result.timezone()).isEqualTo(ZoneId.of("America/New_York"));
   }
 }

backend/src/test/java/de/fete/application/service/RsvpServiceTest.java

@@ -6,6 +6,10 @@ import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.Mockito.verify;
 import static org.mockito.Mockito.when;
 
+import de.fete.application.service.exception.EventCancelledException;
+import de.fete.application.service.exception.EventExpiredException;
+import de.fete.application.service.exception.EventNotFoundException;
+import de.fete.application.service.exception.InvalidOrganizerTokenException;
 import de.fete.domain.model.Event;
 import de.fete.domain.model.EventToken;
 import de.fete.domain.model.OrganizerToken;
@@ -51,23 +55,23 @@ class RsvpServiceTest {
 
   @Test
   void createRsvpSucceedsForActiveEvent() {
-    Event event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.plusDays(30));
-    EventToken token = event.getEventToken();
+    EventToken token = event.eventToken();
     when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
     when(rsvpRepository.save(any(Rsvp.class)))
         .thenAnswer(invocation -> invocation.getArgument(0));
 
     Rsvp result = rsvpService.createRsvp(token, "Max Mustermann");
 
-    assertThat(result.getName()).isEqualTo("Max Mustermann");
+    assertThat(result.name()).isEqualTo("Max Mustermann");
-    assertThat(result.getRsvpToken()).isNotNull();
+    assertThat(result.rsvpToken()).isNotNull();
-    assertThat(result.getEventId()).isEqualTo(event.getId());
+    assertThat(result.eventId()).isEqualTo(event.id());
   }
 
   @Test
   void createRsvpPersistsViaRepository() {
-    Event event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.plusDays(30));
-    EventToken token = event.getEventToken();
+    EventToken token = event.eventToken();
     when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
     when(rsvpRepository.save(any(Rsvp.class)))
         .thenAnswer(invocation -> invocation.getArgument(0));
@@ -76,8 +80,8 @@ class RsvpServiceTest {
 
     ArgumentCaptor<Rsvp> captor = ArgumentCaptor.forClass(Rsvp.class);
     verify(rsvpRepository).save(captor.capture());
-    assertThat(captor.getValue().getName()).isEqualTo("Test Guest");
+    assertThat(captor.getValue().name()).isEqualTo("Test Guest");
-    assertThat(captor.getValue().getEventId()).isEqualTo(event.getId());
+    assertThat(captor.getValue().eventId()).isEqualTo(event.id());
   }
 
   @Test
@@ -91,22 +95,21 @@ class RsvpServiceTest {
 
   @Test
   void createRsvpTrimsName() {
-    Event event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.plusDays(30));
-    EventToken token = event.getEventToken();
+    EventToken token = event.eventToken();
     when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
     when(rsvpRepository.save(any(Rsvp.class)))
         .thenAnswer(invocation -> invocation.getArgument(0));
 
     Rsvp result = rsvpService.createRsvp(token, "  Max  ");
 
-    assertThat(result.getName()).isEqualTo("Max");
+    assertThat(result.name()).isEqualTo("Max");
   }
 
   @Test
   void createRsvpThrowsWhenEventExpired() {
-    var event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.minusDays(1));
-    event.setExpiryDate(TODAY.minusDays(1));
+    EventToken token = event.eventToken();
-    EventToken token = event.getEventToken();
     when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
 
     assertThatThrownBy(() -> rsvpService.createRsvp(token, "Late Guest"))
@@ -115,9 +118,8 @@ class RsvpServiceTest {
 
   @Test
   void createRsvpThrowsWhenEventExpiresToday() {
-    var event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY);
-    event.setExpiryDate(TODAY);
+    EventToken token = event.eventToken();
-    EventToken token = event.getEventToken();
     when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
 
     assertThatThrownBy(() -> rsvpService.createRsvp(token, "Late Guest"))
@@ -126,12 +128,12 @@ class RsvpServiceTest {
 
   @Test
   void getAttendeeNamesReturnsNamesInOrder() {
-    Event event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.plusDays(30));
-    EventToken token = event.getEventToken();
+    EventToken token = event.eventToken();
-    OrganizerToken orgToken = event.getOrganizerToken();
+    OrganizerToken orgToken = event.organizerToken();
     when(eventRepository.findByEventToken(token))
         .thenReturn(Optional.of(event));
-    when(rsvpRepository.findByEventId(event.getId()))
+    when(rsvpRepository.findByEventId(event.id()))
         .thenReturn(List.of(
             buildRsvp(1L, "Alice"),
             buildRsvp(2L, "Bob"),
@@ -144,12 +146,12 @@ class RsvpServiceTest {
 
   @Test
   void getAttendeeNamesReturnsEmptyListWhenNoRsvps() {
-    Event event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.plusDays(30));
-    EventToken token = event.getEventToken();
+    EventToken token = event.eventToken();
-    OrganizerToken orgToken = event.getOrganizerToken();
+    OrganizerToken orgToken = event.organizerToken();
     when(eventRepository.findByEventToken(token))
         .thenReturn(Optional.of(event));
-    when(rsvpRepository.findByEventId(event.getId()))
+    when(rsvpRepository.findByEventId(event.id()))
         .thenReturn(List.of());
 
     List<String> names = rsvpService.getAttendeeNames(token, orgToken);
@@ -171,8 +173,8 @@ class RsvpServiceTest {
 
   @Test
   void getAttendeeNamesThrowsWhenOrganizerTokenInvalid() {
-    Event event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.plusDays(30));
-    EventToken token = event.getEventToken();
+    EventToken token = event.eventToken();
     OrganizerToken wrongToken = OrganizerToken.generate();
     when(eventRepository.findByEventToken(token))
         .thenReturn(Optional.of(event));
@@ -183,38 +185,33 @@ class RsvpServiceTest {
   }
 
   private Rsvp buildRsvp(Long id, String name) {
-    var rsvp = new Rsvp();
+    return new Rsvp(id, RsvpToken.generate(), 1L, name);
-    rsvp.setId(id);
-    rsvp.setRsvpToken(RsvpToken.generate());
-    rsvp.setEventId(1L);
-    rsvp.setName(name);
-    return rsvp;
   }
 
   @Test
   void cancelRsvpDeletesWhenEventAndRsvpExist() {
-    Event event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.plusDays(30));
-    EventToken token = event.getEventToken();
+    EventToken token = event.eventToken();
     RsvpToken rsvpToken = RsvpToken.generate();
     when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
-    when(rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken)).thenReturn(true);
+    when(rsvpRepository.deleteByEventIdAndRsvpToken(event.id(), rsvpToken)).thenReturn(true);
 
     rsvpService.cancelRsvp(token, rsvpToken);
 
-    verify(rsvpRepository).deleteByEventIdAndRsvpToken(event.getId(), rsvpToken);
+    verify(rsvpRepository).deleteByEventIdAndRsvpToken(event.id(), rsvpToken);
   }
 
   @Test
   void cancelRsvpSucceedsWhenRsvpNotFound() {
-    Event event = buildActiveEvent();
+    Event event = buildActiveEvent(TODAY.plusDays(30));
-    EventToken token = event.getEventToken();
+    EventToken token = event.eventToken();
     RsvpToken rsvpToken = RsvpToken.generate();
     when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
-    when(rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken)).thenReturn(false);
+    when(rsvpRepository.deleteByEventIdAndRsvpToken(event.id(), rsvpToken)).thenReturn(false);
 
     rsvpService.cancelRsvp(token, rsvpToken);
 
-    verify(rsvpRepository).deleteByEventIdAndRsvpToken(event.getId(), rsvpToken);
+    verify(rsvpRepository).deleteByEventIdAndRsvpToken(event.id(), rsvpToken);
   }
 
   @Test
@@ -226,16 +223,19 @@ class RsvpServiceTest {
     rsvpService.cancelRsvp(token, rsvpToken);
   }
 
-  private Event buildActiveEvent() {
+  private Event buildActiveEvent(LocalDate expiryDate) {
-    var event = new Event();
+    return new Event(
-    event.setId(1L);
+        1L,
-    event.setEventToken(EventToken.generate());
+        EventToken.generate(),
-    event.setOrganizerToken(OrganizerToken.generate());
+        OrganizerToken.generate(),
-    event.setTitle("Test Event");
+        "Test Event",
-    event.setDateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+        null,
-    event.setTimezone(ZONE);
+        OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)),
-    event.setExpiryDate(TODAY.plusDays(30));
+        ZONE,
-    event.setCreatedAt(OffsetDateTime.now());
+        null,
-    return event;
+        expiryDate,
+        OffsetDateTime.now(),
+        false,
+        null);
   }
 }

frontend/e2e/cancel-event.spec.ts

@@ -0,0 +1,162 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+import type { StoredEvent } from '../src/composables/useEventStorage'
+
+const STORAGE_KEY = 'fete:events'
+
+const fullEvent = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+  cancelled: false,
+  cancellationReason: null,
+}
+
+const organizerToken = '550e8400-e29b-41d4-a716-446655440001'
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+function organizerSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    organizerToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+  }
+}
+
+test.describe('US1: Organizer cancels event with reason', () => {
+  test('organizer opens cancel bottom sheet, enters reason, confirms — event shows as cancelled on reload', async ({
+    page,
+    network,
+  }) => {
+    let cancelled = false
+    network.use(
+      http.get('*/api/events/:token', () => {
+        if (cancelled) {
+          return HttpResponse.json({
+            ...fullEvent,
+            cancelled: true,
+            cancellationReason: 'Venue closed',
+          })
+        }
+        return HttpResponse.json(fullEvent)
+      }),
+      http.patch('*/api/events/:token', ({ request }) => {
+        const url = new URL(request.url)
+        const token = url.searchParams.get('organizerToken')
+        if (token === organizerToken) {
+          cancelled = true
+          return new HttpResponse(null, { status: 204 })
+        }
+        return HttpResponse.json(
+          { type: 'urn:problem-type:invalid-organizer-token', title: 'Forbidden', status: 403 },
+          { status: 403 },
+        )
+      }),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Cancel button visible for organizer
+    const cancelBtn = page.getByRole('button', { name: /Cancel event/i })
+    await expect(cancelBtn).toBeVisible()
+
+    // Open cancel bottom sheet
+    await cancelBtn.click()
+
+    // Fill in reason
+    const reasonField = page.getByLabel(/reason/i)
+    await expect(reasonField).toBeVisible()
+    await reasonField.fill('Venue closed')
+
+    // Confirm cancellation
+    await page.getByRole('button', { name: /Confirm cancellation/i }).click()
+
+    // Event should show as cancelled
+    await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
+    await expect(page.getByText('Venue closed')).toBeVisible()
+
+    // Cancel button should be gone
+    await expect(cancelBtn).not.toBeVisible()
+  })
+})
+
+test.describe('US1: Organizer cancels event without reason', () => {
+  test('organizer cancels without reason — event shows as cancelled', async ({
+    page,
+    network,
+  }) => {
+    let cancelled = false
+    network.use(
+      http.get('*/api/events/:token', () => {
+        if (cancelled) {
+          return HttpResponse.json({
+            ...fullEvent,
+            cancelled: true,
+            cancellationReason: null,
+          })
+        }
+        return HttpResponse.json(fullEvent)
+      }),
+      http.patch('*/api/events/:token', ({ request }) => {
+        const url = new URL(request.url)
+        const token = url.searchParams.get('organizerToken')
+        if (token === organizerToken) {
+          cancelled = true
+          return new HttpResponse(null, { status: 204 })
+        }
+        return HttpResponse.json({}, { status: 403 })
+      }),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    await page.getByRole('button', { name: /Cancel event/i }).click()
+
+    // Don't fill in reason, just confirm
+    await page.getByRole('button', { name: /Confirm cancellation/i }).click()
+
+    // Event should show as cancelled without reason text
+    await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
+  })
+})
+
+test.describe('US1: Cancel API failure', () => {
+  test('cancel API fails — error displayed in bottom sheet, button re-enabled for retry', async ({
+    page,
+    network,
+  }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.patch('*/api/events/:token', () => {
+        return HttpResponse.json(
+          {
+            type: 'about:blank',
+            title: 'Internal Server Error',
+            status: 500,
+            detail: 'Something went wrong',
+          },
+          { status: 500, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    await page.getByRole('button', { name: /Cancel event/i }).click()
+    await page.getByRole('button', { name: /Confirm cancellation/i }).click()
+
+    // Error message in bottom sheet
+    await expect(page.getByText(/Could not cancel event/i)).toBeVisible()
+
+    // Confirm button should be re-enabled
+    await expect(page.getByRole('button', { name: /Confirm cancellation/i })).toBeEnabled()
+  })
+})

frontend/e2e/cancel-rsvp.spec.ts

@@ -43,7 +43,7 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     await expect(statusBar).toBeVisible()
 
     // Cancel button hidden initially
-    await expect(page.getByRole('button', { name: 'Cancel attendance' })).not.toBeVisible()
+    await expect(page.getByRole('button', { name: 'Cancel RSVP' })).not.toBeVisible()
   })
 
   test('tapping status bar reveals cancel button', async ({ page, network }) => {
@@ -57,7 +57,7 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     await page.getByRole('button', { name: /You're attending/ }).click()
 
     // Cancel button appears
-    await expect(page.getByRole('button', { name: 'Cancel attendance' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Cancel RSVP' })).toBeVisible()
   })
 
   test('confirm cancellation → localStorage cleared, count decremented, bar reset', async ({ page, network }) => {
@@ -70,13 +70,13 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     await page.addInitScript(seedEvents([rsvpSeed()]))
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    // Expand → Cancel attendance → Confirm in dialog
+    // Expand → Cancel RSVP → Confirm in dialog
     await page.getByRole('button', { name: /You're attending/ }).click()
     await page.locator('.rsvp-bar__cancel').click()
 
     // Confirm dialog
-    await expect(page.getByText('Your attendance will be permanently cancelled.')).toBeVisible()
+    await expect(page.getByText('The organizer will no longer see you as attending.')).toBeVisible()
-    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // Bar resets to CTA state
     await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
@@ -108,7 +108,7 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     // Expand → Cancel → Confirm in dialog
     await page.getByRole('button', { name: /You're attending/ }).click()
     await page.locator('.rsvp-bar__cancel').click()
-    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // Error message
     await expect(page.getByText('Could not cancel RSVP. Please try again.')).toBeVisible()
@@ -136,7 +136,7 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     // Cancel first
     await page.getByRole('button', { name: /You're attending/ }).click()
     await page.locator('.rsvp-bar__cancel').click()
-    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // CTA should be back
     await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
@@ -244,7 +244,7 @@ test.describe('US3: Cancel RSVP with Stale/Invalid Token', () => {
     // Cancel flow
     await page.getByRole('button', { name: /You're attending/ }).click()
     await page.locator('.rsvp-bar__cancel').click()
-    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // Treated as success — CTA returns
     await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()

frontend/e2e/cancelled-event-visitor.spec.ts

@@ -0,0 +1,74 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+
+const cancelledEventWithReason = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+  cancelled: true,
+  cancellationReason: 'Venue no longer available',
+}
+
+const cancelledEventWithoutReason = {
+  ...cancelledEventWithReason,
+  cancellationReason: null,
+}
+
+test.describe('US2: Visitor sees cancelled event with reason', () => {
+  test('visitor sees red banner with cancellation reason on cancelled event', async ({
+    page,
+    network,
+  }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithReason)),
+    )
+
+    await page.goto(`/events/${cancelledEventWithReason.eventToken}`)
+
+    await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
+    await expect(page.getByText('Venue no longer available')).toBeVisible()
+  })
+})
+
+test.describe('US2: Visitor sees cancelled event without reason', () => {
+  test('visitor sees red banner without reason when no reason was provided', async ({
+    page,
+    network,
+  }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithoutReason)),
+    )
+
+    await page.goto(`/events/${cancelledEventWithoutReason.eventToken}`)
+
+    await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
+    // No reason text shown
+    await expect(page.getByText('Venue no longer available')).not.toBeVisible()
+  })
+})
+
+test.describe('US2: RSVP buttons hidden on cancelled event', () => {
+  test('RSVP buttons hidden on cancelled event, other details remain visible', async ({
+    page,
+    network,
+  }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithReason)),
+    )
+
+    await page.goto(`/events/${cancelledEventWithReason.eventToken}`)
+
+    // Event details are still visible
+    await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
+    await expect(page.getByText('Bring your own drinks!')).toBeVisible()
+    await expect(page.getByText('Central Park, NYC')).toBeVisible()
+    await expect(page.getByText('12 going')).toBeVisible()
+
+    // RSVP bar is NOT visible
+    await expect(page.getByRole('button', { name: "I'm attending" })).not.toBeVisible()
+  })
+})

frontend/e2e/home-events.spec.ts

@@ -139,7 +139,7 @@ test.describe('US5: Visual Distinction for Event Roles', () => {
     const card = page.locator('.event-card').filter({ hasText: 'Summer BBQ' })
     const badge = card.locator('.event-card__badge')
     await expect(badge).toBeVisible()
-    await expect(badge).toHaveText('Organizer')
+    await expect(badge).toHaveText('Organizing')
     await expect(badge).toHaveClass(/event-card__badge--organizer/)
   })
 
@@ -150,16 +150,19 @@ test.describe('US5: Visual Distinction for Event Roles', () => {
     const card = page.locator('.event-card').filter({ hasText: 'Team Meeting' })
     const badge = card.locator('.event-card__badge')
     await expect(badge).toBeVisible()
-    await expect(badge).toHaveText('Attendee')
+    await expect(badge).toHaveText('Attending')
     await expect(badge).toHaveClass(/event-card__badge--attendee/)
   })
 
-  test('shows no badge for events without organizerToken or rsvpToken', async ({ page }) => {
+  test('shows watcher badge for events without organizerToken or rsvpToken', async ({ page }) => {
     await page.addInitScript(seedEvents([pastEvent]))
     await page.goto('/')
 
     const card = page.locator('.event-card').filter({ hasText: 'New Year Party' })
-    await expect(card.locator('.event-card__badge')).toHaveCount(0)
+    const badge = card.locator('.event-card__badge')
+    await expect(badge).toBeVisible()
+    await expect(badge).toHaveText('Watching')
+    await expect(badge).toHaveClass(/event-card__badge--watcher/)
   })
 })
 

frontend/e2e/watch-event.spec.ts

@@ -0,0 +1,218 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+import type { StoredEvent } from '../src/composables/useEventStorage'
+
+const STORAGE_KEY = 'fete:events'
+
+const fullEvent = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+  cancelled: false,
+}
+
+const rsvpToken = 'd4e5f6a7-b8c9-0123-4567-890abcdef012'
+const organizerToken = 'org-token-1234'
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+function watchSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+  }
+}
+
+function rsvpSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+    rsvpToken,
+    rsvpName: 'Anna',
+  }
+}
+
+function organizerSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+    organizerToken,
+  }
+}
+
+test.describe('US1: Watch event from detail page', () => {
+  test('bookmark unfilled by default, tapping watches the event', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).toBeVisible()
+    await expect(bookmark).toHaveAttribute('aria-label', 'Watch this event')
+
+    await bookmark.click()
+
+    await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
+
+    // Navigate to event list via back link
+    await page.getByLabel('Back to home').click()
+
+    // Event appears with "Watching" label
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+    await expect(page.getByText('Watching')).toBeVisible()
+  })
+})
+
+test.describe('US2: Un-watch event from detail page', () => {
+  test('tapping filled bookmark un-watches the event', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([watchSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
+
+    await bookmark.click()
+
+    await expect(bookmark).toHaveAttribute('aria-label', 'Watch this event')
+
+    // Navigate to event list via back link (avoid page.goto re-running addInitScript)
+    await page.getByLabel('Back to home').click()
+
+    // Event is gone
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+  })
+})
+
+test.describe('US3: Bookmark reflects attending status', () => {
+  test('bookmark is not visible when user has RSVPed, list shows Attendee', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Bookmark not shown for attendees — RsvpBar shows status state
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).not.toBeVisible()
+
+    // Navigate to list via back link
+    await page.getByLabel('Back to home').click()
+    await expect(page.getByText('Attending')).toBeVisible()
+    await expect(page.getByText('Watching')).not.toBeVisible()
+  })
+})
+
+test.describe('US4: RSVP cancellation preserves watch status', () => {
+  test('cancel RSVP → bookmark reappears, list shows Watching', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return new HttpResponse(null, { status: 204 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Cancel RSVP
+    await page.getByRole('button', { name: /You're attending/ }).click()
+    await page.locator('.rsvp-bar__cancel').click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
+
+    // Bookmark reappears in CTA state, filled because event is still stored
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).toBeVisible()
+    await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
+
+    // Navigate to list via back link
+    await page.getByLabel('Back to home').click()
+    await expect(page.getByText('Watching')).toBeVisible()
+    await expect(page.getByText('Attending')).not.toBeVisible()
+  })
+})
+
+test.describe('US5: No bookmark for attendees and organizers', () => {
+  test('attendee does not see bookmark', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).not.toBeVisible()
+  })
+
+  test('organizer does not see bookmark', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).not.toBeVisible()
+  })
+})
+
+test.describe('US6: Un-watch from event list', () => {
+  test('deleting a watched event skips confirmation dialog', async ({ page }) => {
+    await page.addInitScript(seedEvents([watchSeed()]))
+    await page.goto('/')
+
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+
+    // No confirmation dialog — event removed immediately
+    await expect(page.getByText('Remove event?')).not.toBeVisible()
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+  })
+})
+
+test.describe('US7: Watcher upgrades to attendee', () => {
+  test('watch → RSVP → bookmark disappears, list shows Attendee', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.post('*/api/events/:token/rsvps', () => {
+        return HttpResponse.json(
+          { rsvpToken: 'new-rsvp-token', name: 'Max' },
+          { status: 201 },
+        )
+      }),
+    )
+    await page.addInitScript(seedEvents([watchSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Verify watching state — bookmark visible
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).toBeVisible()
+    await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
+
+    // RSVP
+    await page.getByRole('button', { name: "I'm attending" }).click()
+    const dialog = page.getByRole('dialog', { name: 'RSVP' })
+    await dialog.getByLabel('Your name').fill('Max')
+    await dialog.getByRole('button', { name: 'Count me in' }).click()
+
+    // Bookmark gone — status bar shown instead
+    await expect(bookmark).not.toBeVisible()
+
+    // Navigate to list via back link
+    await page.getByLabel('Back to home').click()
+    await expect(page.getByText('Attending')).toBeVisible()
+    await expect(page.getByText('Watching')).not.toBeVisible()
+  })
+})

frontend/package-lock.json

@@ -26,7 +26,7 @@
         "@vue/tsconfig": "^0.9.0",
         "eslint": "^10.0.2",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-oxlint": "~1.54.0",
+        "eslint-plugin-oxlint": "~1.55.0",
         "eslint-plugin-vue": "~10.8.0",
         "jiti": "^2.6.1",
         "jsdom": "^28.1.0",
@@ -4725,9 +4725,9 @@
       }
     },
     "node_modules/eslint-plugin-oxlint": {
-      "version": "1.54.0",
+      "version": "1.55.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-oxlint/-/eslint-plugin-oxlint-1.54.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-oxlint/-/eslint-plugin-oxlint-1.55.0.tgz",
-      "integrity": "sha512-bWcHxjvdcFNkPsSRMSBJYVSz4lFA+ZfztejRwp5c2sWRxkDHfkyGQzgus/4Qw75hBZID56Tilf/zzV1znsMr+w==",
+      "integrity": "sha512-5ng7DOuikSE64e7hX2HBqEWdmql+Q4FWppBoBkxKKflLt1j9LXhab5BN3bYJKyrAihuK1/VH2JvfNefeOZAqpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

frontend/package.json

@@ -38,7 +38,7 @@
     "@vue/tsconfig": "^0.9.0",
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-oxlint": "~1.54.0",
+    "eslint-plugin-oxlint": "~1.55.0",
     "eslint-plugin-vue": "~10.8.0",
     "jiti": "^2.6.1",
     "jsdom": "^28.1.0",

frontend/src/App.vue

@@ -1,9 +1,26 @@
 <template>
   <div class="app-container">
+    <header v-if="route.name !== 'home'" class="app-header">
+      <BackLink />
+    </header>
     <RouterView />
   </div>
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import BackLink from '@/components/BackLink.vue'
+
+const route = useRoute()
 </script>
+
+<style scoped>
+.app-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding-top: var(--spacing-lg);
+}
+</style>

frontend/src/assets/main.css

@@ -18,6 +18,17 @@
   --color-card: #ffffff;
   --color-dark-base: #1B1730;
 
+  /* Danger / destructive actions */
+  --color-danger: #fca5a5;
+  --color-danger-bg: rgba(220, 38, 38, 0.15);
+  --color-danger-bg-hover: rgba(220, 38, 38, 0.25);
+  --color-danger-bg-strong: rgba(220, 38, 38, 0.2);
+  --color-danger-border: rgba(220, 38, 38, 0.3);
+  --color-danger-border-strong: rgba(220, 38, 38, 0.4);
+  --color-danger-solid: #d32f2f;
+  --color-danger-solid-hover: #b71c1c;
+  --color-danger-solid-text: #fff;
+
   /* Glass system */
   --color-glass: rgba(255, 255, 255, 0.1);
   --color-glass-strong: rgba(255, 255, 255, 0.15);
@@ -206,7 +217,7 @@ textarea.form-field {
 
 /* Error message */
 .field-error {
-  color: #fff;
+  color: var(--color-danger-solid);
   font-size: 0.875rem;
   font-weight: 600;
   padding-left: 0.25rem;
@@ -317,7 +328,8 @@ textarea.form-field {
   gap: var(--spacing-md);
 }
 
-.rsvp-form__label {
+.rsvp-form__label,
+.cancel-form__label {
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--color-text-on-gradient);
@@ -325,7 +337,7 @@ textarea.form-field {
 }
 
 .rsvp-form__field-error {
-  color: #d32f2f;
+  color: var(--color-danger-solid);
   font-size: 0.875rem;
   font-weight: 600;
   padding-left: 0.25rem;

frontend/src/components/BackLink.vue

@@ -0,0 +1,28 @@
+<template>
+  <RouterLink to="/" class="back-link" aria-label="Back to home">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="15 18 9 12 15 6" />
+    </svg>
+    <span class="back-link__brand">fete</span>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+
+<style scoped>
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  color: var(--color-text-on-gradient);
+  text-decoration: none;
+  line-height: 1;
+}
+
+.back-link__brand {
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+</style>

frontend/src/components/BottomSheet.vue

@@ -2,7 +2,18 @@
   <Teleport to="body">
     <Transition name="sheet">
       <div v-if="open" class="sheet-backdrop" @click.self="$emit('close')" @keydown.escape="$emit('close')">
-        <div class="sheet" role="dialog" aria-modal="true" :aria-label="label" ref="sheetEl" tabindex="-1">
+        <div
+          class="sheet"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="label"
+          ref="sheetEl"
+          tabindex="-1"
+          :style="dragStyle"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+        >
           <div class="sheet__handle" aria-hidden="true" />
           <slot />
         </div>
@@ -12,14 +23,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 
 defineProps<{
   open: boolean
   label: string
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   close: []
 }>()
 
@@ -39,6 +50,45 @@ watch(
     }
   },
 )
+
+/* ── Drag-to-dismiss ── */
+const DISMISS_THRESHOLD = 100
+const dragY = ref(0)
+const dragging = ref(false)
+let startY = 0
+
+const dragStyle = computed(() => {
+  if (!dragging.value || dragY.value <= 0) return undefined
+  return {
+    transform: `translateY(${dragY.value}px)`,
+    transition: 'none',
+  }
+})
+
+function onTouchStart(e: TouchEvent) {
+  const touch = e.touches[0]
+  if (!touch) return
+  startY = touch.clientY
+  dragging.value = true
+  dragY.value = 0
+}
+
+function onTouchMove(e: TouchEvent) {
+  if (!dragging.value) return
+  const touch = e.touches[0]
+  if (!touch) return
+  const delta = touch.clientY - startY
+  if (delta > 0) e.preventDefault()
+  dragY.value = Math.max(0, delta)
+}
+
+function onTouchEnd() {
+  if (dragY.value >= DISMISS_THRESHOLD) {
+    emit('close')
+  }
+  dragging.value = false
+  dragY.value = 0
+}
 </script>
 
 <style scoped>

frontend/src/components/ConfirmDialog.vue

@@ -139,8 +139,8 @@ watch(
 }
 
 .confirm-dialog__btn--confirm {
-  background: #d32f2f;
+  background: var(--color-danger-solid);
-  color: #fff;
+  color: var(--color-danger-solid-text);
 }
 
 .confirm-dialog-enter-active,

frontend/src/components/EventCard.vue

@@ -12,7 +12,7 @@
       <span class="event-card__time">{{ displayTime }}</span>
     </RouterLink>
     <span v-if="eventRole" class="event-card__badge" :class="`event-card__badge--${eventRole}`">
-      {{ eventRole === 'organizer' ? 'Organizer' : 'Attendee' }}
+      {{ eventRole === 'organizer' ? 'Organizing' : eventRole === 'attendee' ? 'Attending' : 'Watching' }}
     </span>
     <button
       class="event-card__delete"
@@ -34,7 +34,7 @@ const props = defineProps<{
   title: string
   relativeTime: string
   isPast: boolean
-  eventRole?: 'organizer' | 'attendee'
+  eventRole?: 'organizer' | 'attendee' | 'watcher'
   timeDisplayMode?: 'clock' | 'relative'
   dateTime?: string
 }>()
@@ -152,6 +152,12 @@ function onTouchEnd() {
   color: var(--color-text-bright);
 }
 
+.event-card__badge--watcher {
+  background: var(--color-glass);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-glass-border);
+}
+
 .event-card__delete {
   flex-shrink: 0;
   width: 28px;
@@ -169,7 +175,7 @@ function onTouchEnd() {
 }
 
 .event-card__delete:hover {
-  color: #d32f2f;
+  color: var(--color-danger-solid);
   background: rgba(211, 47, 47, 0.08);
 }
 

frontend/src/components/EventList.vue

@@ -65,6 +65,11 @@ const deleteDialogMessage = computed(() => {
 
 function requestDelete(eventToken: string) {
   deleteError.value = ''
+  const role = getRole(getStoredEvents().find((e) => e.eventToken === eventToken)!)
+  if (role === 'watcher') {
+    removeEvent(eventToken)
+    return
+  }
   pendingDeleteToken.value = eventToken
 }
 
@@ -76,10 +81,10 @@ async function confirmDelete() {
 
   if (rsvp) {
     try {
-      const { response } = await api.DELETE('/events/{token}/rsvps/{rsvpToken}', {
+      const { response } = await api.DELETE('/events/{eventToken}/rsvps/{rsvpToken}', {
         params: {
           path: {
-            token: eventToken,
+            eventToken: eventToken,
             rsvpToken: rsvp.rsvpToken,
           },
         },
@@ -105,10 +110,10 @@ function cancelDelete() {
   pendingDeleteToken.value = null
 }
 
-function getRole(event: StoredEvent): 'organizer' | 'attendee' | undefined {
+function getRole(event: StoredEvent): 'organizer' | 'attendee' | 'watcher' {
   if (event.organizerToken) return 'organizer'
   if (event.rsvpToken) return 'attendee'
-  return undefined
+  return 'watcher'
 }
 
 const groupedSections = computed(() => {

frontend/src/components/RsvpBar.vue

@@ -25,17 +25,29 @@
             type="button"
             @click="$emit('cancel')"
           >
-            Cancel attendance
+            Cancel RSVP
           </button>
         </Transition>
       </div>
 
       <!-- CTA state: no RSVP yet -->
-      <div v-else class="rsvp-bar__cta glow-border glow-border--animated">
+      <div v-else class="rsvp-bar__row">
+        <div class="rsvp-bar__cta glow-border glow-border--animated">
           <button class="rsvp-bar__cta-inner glass-inner" type="button" @click="$emit('open')">
-          I'm attending
+            I'm attending!
           </button>
         </div>
+        <div class="rsvp-bar__bookmark glow-border glow-border--animated">
+          <button
+            class="rsvp-bar__bookmark-inner glass-inner"
+            type="button"
+            :aria-label="bookmarked ? 'Stop watching this event' : 'Watch this event'"
+            @click="$emit('bookmark')"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" :fill="bookmarked ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -45,11 +57,13 @@ import { ref, watch } from 'vue'
 
 const props = defineProps<{
   hasRsvp?: boolean
+  bookmarked?: boolean
 }>()
 
 defineEmits<{
   open: []
   cancel: []
+  bookmark: []
 }>()
 
 const expanded = ref(false)
@@ -92,8 +106,14 @@ watch(expanded, (isExpanded) => {
   max-width: var(--content-max-width);
 }
 
+.rsvp-bar__row {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
 .rsvp-bar__cta {
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   border-radius: var(--radius-button);
   transition: transform 0.1s ease;
 }
@@ -206,4 +226,37 @@ watch(expanded, (isExpanded) => {
   opacity: 0;
   transform: translateY(-4px);
 }
+
+.rsvp-bar__bookmark {
+  flex-shrink: 0;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.rsvp-bar__bookmark:hover {
+  transform: scale(1.02);
+}
+
+.rsvp-bar__bookmark:active {
+  transform: scale(0.98);
+}
+
+.rsvp-bar__bookmark-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-md);
+  border-radius: calc(var(--radius-button) - 2px);
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-on-gradient);
+  line-height: 0;
+}
+
+.rsvp-bar__bookmark-inner svg {
+  display: block;
+}
+
 </style>

frontend/src/components/__tests__/EventCard.spec.ts

@@ -55,12 +55,18 @@ describe('EventCard', () => {
 
   it('renders organizer badge when eventRole is organizer', () => {
     const wrapper = mountCard({ eventRole: 'organizer' })
-    expect(wrapper.text()).toContain('Organizer')
+    expect(wrapper.text()).toContain('Organizing')
   })
 
   it('renders attendee badge when eventRole is attendee', () => {
     const wrapper = mountCard({ eventRole: 'attendee' })
-    expect(wrapper.text()).toContain('Attendee')
+    expect(wrapper.text()).toContain('Attending')
+  })
+
+  it('renders watcher badge when eventRole is watcher', () => {
+    const wrapper = mountCard({ eventRole: 'watcher' })
+    expect(wrapper.find('.event-card__badge--watcher').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Watching')
   })
 
   it('renders no badge when eventRole is undefined', () => {

frontend/src/components/__tests__/EventList.spec.ts

@@ -20,6 +20,8 @@ const mockEvents = [
   { eventToken: 'today-1', title: 'Today Event', dateTime: '2026-03-11T18:00:00' },
   { eventToken: 'week-1', title: 'This Week Event', dateTime: '2026-03-13T10:00:00' },
   { eventToken: 'nextweek-1', title: 'Next Week Event', dateTime: '2026-03-16T10:00:00' },
+  { eventToken: 'org-1', title: 'Organized Event', dateTime: '2026-03-11T19:00:00', organizerToken: 'org-token' },
+  { eventToken: 'rsvp-1', title: 'Attending Event', dateTime: '2026-03-11T20:00:00', rsvpToken: 'rsvp-token', rsvpName: 'Max' },
 ]
 
 vi.mock('../../composables/useEventStorage', () => ({
@@ -32,6 +34,13 @@ vi.mock('../../composables/useEventStorage', () => ({
   },
   useEventStorage: () => ({
     getStoredEvents: () => mockEvents,
+    getRsvp: (token: string) => {
+      const evt = mockEvents.find((e) => e.eventToken === token)
+      if (evt && 'rsvpToken' in evt && 'rsvpName' in evt) {
+        return { rsvpToken: evt.rsvpToken, rsvpName: evt.rsvpName }
+      }
+      return undefined
+    },
     removeEvent: vi.fn(),
   }),
 }))
@@ -40,7 +49,9 @@ vi.mock('../../composables/useRelativeTime', () => ({
   formatRelativeTime: (dateTime: string) => {
     if (dateTime.includes('03-01')) return '10 days ago'
     if (dateTime.includes('06-15')) return 'in 1 year'
-    if (dateTime.includes('03-11')) return 'in 6 hours'
+    if (dateTime.includes('03-11T18')) return 'in 6 hours'
+    if (dateTime.includes('03-11T19')) return 'in 7 hours'
+    if (dateTime.includes('03-11T20')) return 'in 8 hours'
     if (dateTime.includes('03-13')) return 'in 2 days'
     if (dateTime.includes('03-16')) return 'in 5 days'
     return 'sometime'
@@ -89,7 +100,7 @@ describe('EventList', () => {
   it('renders all valid events as cards', () => {
     const wrapper = mountList()
     const cards = wrapper.findAll('.event-card')
-    expect(cards).toHaveLength(5)
+    expect(cards).toHaveLength(7)
   })
 
   it('marks past events with isPast class', () => {
@@ -137,4 +148,25 @@ describe('EventList', () => {
     const pastSection = wrapper.findAll('.event-section')[4]!
     expect(pastSection.find('.date-subheader').exists()).toBe(true)
   })
+
+  it('assigns watcher role when event has no organizerToken and no rsvpToken', () => {
+    const wrapper = mountList()
+    const badges = wrapper.findAll('.event-card__badge--watcher')
+    expect(badges.length).toBeGreaterThanOrEqual(1)
+    expect(badges[0]!.text()).toBe('Watching')
+  })
+
+  it('assigns organizer role when event has organizerToken', () => {
+    const wrapper = mountList()
+    const badge = wrapper.find('.event-card__badge--organizer')
+    expect(badge.exists()).toBe(true)
+    expect(badge.text()).toBe('Organizing')
+  })
+
+  it('assigns attendee role when event has rsvpToken', () => {
+    const wrapper = mountList()
+    const badge = wrapper.find('.event-card__badge--attendee')
+    expect(badge.exists()).toBe(true)
+    expect(badge.text()).toBe('Attending')
+  })
 })

frontend/src/components/__tests__/RsvpBar.spec.ts

@@ -6,7 +6,7 @@ describe('RsvpBar', () => {
   it('renders CTA button when hasRsvp is false', () => {
     const wrapper = mount(RsvpBar)
     expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(true)
-    expect(wrapper.find('.rsvp-bar__cta-inner').text()).toBe("I'm attending")
+    expect(wrapper.find('.rsvp-bar__cta-inner').text()).toBe("I'm attending!")
     expect(wrapper.find('.rsvp-bar__status').exists()).toBe(false)
   })
 

frontend/src/composables/__tests__/useEventStorage.spec.ts

@@ -194,6 +194,71 @@ describe('useEventStorage', () => {
   })
 })
 
+describe('useEventStorage – saveWatch / isStored', () => {
+  beforeEach(() => {
+    clearStorage()
+  })
+
+  it('saves a watch-only event (no rsvpToken, no organizerToken)', () => {
+    const { saveWatch, getStoredEvents } = useEventStorage()
+
+    saveWatch('watch-1', 'Concert', '2026-07-01T20:00:00+02:00')
+
+    const events = getStoredEvents()
+    expect(events).toHaveLength(1)
+    expect(events[0]!.eventToken).toBe('watch-1')
+    expect(events[0]!.title).toBe('Concert')
+    expect(events[0]!.dateTime).toBe('2026-07-01T20:00:00+02:00')
+    expect(events[0]!.rsvpToken).toBeUndefined()
+    expect(events[0]!.organizerToken).toBeUndefined()
+  })
+
+  it('does not duplicate if event already stored', () => {
+    const { saveWatch, saveRsvp, getStoredEvents } = useEventStorage()
+
+    saveRsvp('evt-1', 'rsvp-1', 'Max', 'Party', '2026-07-01T20:00:00+02:00')
+    saveWatch('evt-1', 'Party', '2026-07-01T20:00:00+02:00')
+
+    expect(getStoredEvents()).toHaveLength(1)
+    expect(getStoredEvents()[0]!.rsvpToken).toBe('rsvp-1')
+  })
+
+  it('isStored returns true for watched events', () => {
+    const { saveWatch, isStored } = useEventStorage()
+
+    saveWatch('watch-1', 'Concert', '2026-07-01T20:00:00+02:00')
+
+    expect(isStored('watch-1')).toBe(true)
+  })
+
+  it('isStored returns true for attended events', () => {
+    const { saveRsvp, isStored } = useEventStorage()
+
+    saveRsvp('evt-1', 'rsvp-1', 'Max', 'Party', '2026-07-01T20:00:00+02:00')
+
+    expect(isStored('evt-1')).toBe(true)
+  })
+
+  it('isStored returns true for organized events', () => {
+    const { saveCreatedEvent, isStored } = useEventStorage()
+
+    saveCreatedEvent({
+      eventToken: 'evt-1',
+      organizerToken: 'org-1',
+      title: 'My Event',
+      dateTime: '2026-07-01T20:00:00+02:00',
+    })
+
+    expect(isStored('evt-1')).toBe(true)
+  })
+
+  it('isStored returns false for unknown tokens', () => {
+    const { isStored } = useEventStorage()
+
+    expect(isStored('unknown')).toBe(false)
+  })
+})
+
 describe('isValidStoredEvent', () => {
   // Import directly since it's an exported function
   let isValidStoredEvent: (e: unknown) => boolean

frontend/src/composables/useEventStorage.ts

@@ -88,10 +88,24 @@ export function useEventStorage() {
     }
   }
 
+  function saveWatch(eventToken: string, title: string, dateTime: string): void {
+    const events = readEvents()
+    const existing = events.find((e) => e.eventToken === eventToken)
+    if (!existing) {
+      events.push({ eventToken, title, dateTime })
+      writeEvents(events)
+    }
+  }
+
+  function isStored(eventToken: string): boolean {
+    void version.value
+    return readEvents().some((e) => e.eventToken === eventToken)
+  }
+
   function removeEvent(eventToken: string): void {
     const events = readEvents().filter((e) => e.eventToken !== eventToken)
     writeEvents(events)
   }
 
-  return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp, removeRsvp, removeEvent }
+  return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp, removeRsvp, saveWatch, isStored, removeEvent }
 }

frontend/src/views/EventCreateView.vue

@@ -1,9 +1,6 @@
 <template>
   <main class="create">
-    <header class="create__header">
+    <h1 class="create__title">Great, a Party!</h1>
-      <RouterLink to="/" class="create__back" aria-label="Back to home">&larr;</RouterLink>
-      <h1 class="create__title">Create</h1>
-    </header>
 
     <form class="create__form" novalidate @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -76,7 +73,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { api } from '@/api/client'
 import { useEventStorage } from '@/composables/useEventStorage'
 
@@ -194,20 +191,7 @@ async function handleSubmit() {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
-  padding-top: var(--spacing-lg);
+  padding-top: calc(var(--spacing-lg) + 2.5rem);
-}
-
-.create__header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.create__back {
-  color: var(--color-text-on-gradient);
-  font-size: 1.5rem;
-  text-decoration: none;
-  line-height: 1;
 }
 
 .create__title {

frontend/src/views/EventDetailView.vue

@@ -8,10 +8,6 @@
         alt=""
       />
       <div class="detail__hero-overlay" />
-      <header class="detail__header">
-        <RouterLink to="/" class="detail__back" aria-label="Back to home">&larr;</RouterLink>
-        <span class="detail__brand">fete</span>
-      </header>
     </div>
 
     <div class="detail__body">
@@ -25,25 +21,31 @@
 
       <!-- Loaded state -->
       <div v-else-if="state === 'loaded' && event" class="detail__content">
+        <!-- Cancellation banner -->
+        <div v-if="event.cancelled" class="detail__cancelled-banner" role="alert">
+          <p class="detail__cancelled-banner-title">This event has been cancelled</p>
+          <p v-if="event.cancellationReason" class="detail__cancelled-banner-reason">{{ event.cancellationReason }}</p>
+        </div>
+
         <h1 class="detail__title">{{ event.title }}</h1>
 
         <dl class="detail__meta">
           <div class="detail__meta-item">
-            <dt class="detail__meta-icon glass" aria-label="Date and time">
+            <dt class="detail__meta-icon" aria-label="Date and time">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ formattedDateTime }}</dd>
           </div>
 
           <div v-if="event.location" class="detail__meta-item">
-            <dt class="detail__meta-icon glass" aria-label="Location">
+            <dt class="detail__meta-icon" aria-label="Location">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ event.location }}</dd>
           </div>
 
           <div class="detail__meta-item">
-            <dt class="detail__meta-icon glass" aria-label="Attendees">
+            <dt class="detail__meta-icon" aria-label="Attendees">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ event.attendeeCount }} going</dd>
@@ -70,25 +72,62 @@
       </div>
     </div>
 
-    <!-- Cancel error message -->
+    <!-- Cancel event button (organizer only, not already cancelled) -->
+    <div v-if="state === 'loaded' && event && isOrganizer && !event.cancelled" class="detail__cancel-event">
+      <button class="detail__cancel-event-btn" type="button" @click="cancelSheetOpen = true">
+        Cancel event
+      </button>
+    </div>
+
+    <!-- Cancel event bottom sheet -->
+    <BottomSheet :open="cancelSheetOpen" label="Cancel event" @close="cancelSheetOpen = false">
+      <h2 class="sheet-title">Cancel event</h2>
+      <form class="cancel-form" @submit.prevent="handleCancelEvent" novalidate>
+        <div class="form-group">
+          <label class="cancel-form__label" for="cancel-reason">Reason (optional)</label>
+          <textarea
+            id="cancel-reason"
+            v-model.trim="cancelReasonInput"
+            class="form-field glass cancel-form__textarea"
+            placeholder="e.g. Venue no longer available"
+            maxlength="2000"
+            rows="3"
+            @input="cancelEventError = ''"
+          />
+          <span class="cancel-form__counter">{{ cancelReasonInput.length }} / 2000</span>
+        </div>
+        <button
+          class="cancel-form__confirm glass-inner"
+          type="submit"
+          :disabled="cancellingEvent"
+        >
+          {{ cancellingEvent ? 'Cancelling…' : 'Confirm cancellation' }}
+        </button>
+        <p v-if="cancelEventError" class="cancel-form__error" role="alert">{{ cancelEventError }}</p>
+      </form>
+    </BottomSheet>
+
+    <!-- Cancel RSVP error message -->
     <div v-if="cancelError" class="detail__cancel-error" role="alert">
       <p>{{ cancelError }}</p>
     </div>
 
-    <!-- RSVP bar -->
+    <!-- RSVP bar (hidden when cancelled) -->
     <RsvpBar
-      v-if="state === 'loaded' && event && !isOrganizer"
+      v-if="state === 'loaded' && event && !isOrganizer && !event.cancelled"
       :has-rsvp="!!rsvpName"
+      :bookmarked="eventIsStored"
       @open="sheetOpen = true"
       @cancel="confirmCancelOpen = true"
+      @bookmark="handleBookmarkClick"
     />
 
     <!-- Cancel confirmation dialog -->
     <ConfirmDialog
       :open="confirmCancelOpen"
-      title="Cancel attendance?"
+      title="Cancel RSVP?"
-      message="Your attendance will be permanently cancelled."
+      message="The organizer will no longer see you as attending."
-      confirm-label="Cancel attendance"
+      confirm-label="Cancel RSVP"
       cancel-label="Keep"
       @confirm="handleCancelRsvp"
       @cancel="confirmCancelOpen = false"
@@ -125,7 +164,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { api } from '@/api/client'
 import { useEventStorage } from '@/composables/useEventStorage'
 import AttendeeList from '@/components/AttendeeList.vue'
@@ -138,7 +177,7 @@ type GetEventResponse = components['schemas']['GetEventResponse']
 type State = 'loading' | 'loaded' | 'not-found' | 'error'
 
 const route = useRoute()
-const { saveRsvp, getRsvp, removeRsvp, getOrganizerToken } = useEventStorage()
+const { saveRsvp, getRsvp, removeRsvp, getOrganizerToken, saveWatch, isStored, removeEvent } = useEventStorage()
 
 const state = ref<State>('loading')
 const event = ref<GetEventResponse | null>(null)
@@ -155,6 +194,26 @@ const cancelError = ref('')
 const isOrganizer = ref(false)
 const attendeeNames = ref<string[] | null>(null)
 
+// Cancel event state
+const cancelSheetOpen = ref(false)
+const cancelReasonInput = ref('')
+const cancelEventError = ref('')
+const cancellingEvent = ref(false)
+
+const eventToken = computed(() => route.params.eventToken as string)
+
+const eventIsStored = computed(() => isStored(eventToken.value))
+
+function handleBookmarkClick() {
+  if (!event.value) return
+  if (isOrganizer.value || rsvpName.value) return
+  if (eventIsStored.value) {
+    removeEvent(eventToken.value)
+  } else {
+    saveWatch(eventToken.value, event.value.title, event.value.dateTime)
+  }
+}
+
 const formattedDateTime = computed(() => {
   if (!event.value) return ''
   const formatted = new Intl.DateTimeFormat(undefined, {
@@ -169,8 +228,8 @@ async function fetchEvent() {
   event.value = null
 
   try {
-    const { data, error, response } = await api.GET('/events/{token}', {
+    const { data, error, response } = await api.GET('/events/{eventToken}', {
-      params: { path: { token: route.params.eventToken as string } },
+      params: { path: { eventToken: route.params.eventToken as string } },
     })
 
     if (error) {
@@ -217,8 +276,8 @@ async function submitRsvp() {
   submitting.value = true
 
   try {
-    const { data, error } = await api.POST('/events/{token}/rsvps', {
+    const { data, error } = await api.POST('/events/{eventToken}/rsvps', {
-      params: { path: { token: route.params.eventToken as string } },
+      params: { path: { eventToken: route.params.eventToken as string } },
       body: { name: nameInput.value },
     })
 
@@ -256,10 +315,10 @@ async function handleCancelRsvp() {
   if (!stored) return
 
   try {
-    const { response } = await api.DELETE('/events/{token}/rsvps/{rsvpToken}', {
+    const { response } = await api.DELETE('/events/{eventToken}/rsvps/{rsvpToken}', {
       params: {
         path: {
-          token: route.params.eventToken as string,
+          eventToken: route.params.eventToken as string,
           rsvpToken: stored.rsvpToken,
         },
       },
@@ -279,11 +338,45 @@ async function handleCancelRsvp() {
   }
 }
 
+async function handleCancelEvent() {
+  cancelEventError.value = ''
+  cancellingEvent.value = true
+
+  const orgToken = getOrganizerToken(route.params.eventToken as string)
+  if (!orgToken) return
+
+  try {
+    const { error } = await api.PATCH('/events/{eventToken}', {
+      params: {
+        path: { eventToken: route.params.eventToken as string },
+        query: { organizerToken: orgToken },
+      },
+      body: {
+        cancelled: true,
+        cancellationReason: cancelReasonInput.value || undefined,
+      },
+    })
+
+    if (error) {
+      cancelEventError.value = 'Could not cancel event. Please try again.'
+      return
+    }
+
+    cancelSheetOpen.value = false
+    cancelReasonInput.value = ''
+    await fetchEvent()
+  } catch {
+    cancelEventError.value = 'Could not cancel event. Please try again.'
+  } finally {
+    cancellingEvent.value = false
+  }
+}
+
 async function fetchAttendees(eventToken: string, organizerToken: string) {
   try {
-    const { data, error } = await api.GET('/events/{token}/attendees', {
+    const { data, error } = await api.GET('/events/{eventToken}/attendees', {
       params: {
-        path: { token: eventToken },
+        path: { eventToken: eventToken },
         query: { organizerToken },
       },
     })
@@ -340,32 +433,7 @@ onMounted(fetchEvent)
     var(--color-glass-overlay) 0%,
     transparent 50%
   );
-}
+  pointer-events: none;
-
-.detail__header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-lg) var(--content-padding);
-  padding-top: env(safe-area-inset-top, var(--spacing-lg));
-  z-index: 1;
-}
-
-.detail__back {
-  color: var(--color-text-on-gradient);
-  font-size: 1.5rem;
-  text-decoration: none;
-  line-height: 1;
-}
-
-.detail__brand {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: var(--color-text-on-gradient);
 }
 
 .detail__body {
@@ -388,6 +456,10 @@ onMounted(fetchEvent)
   padding-top: 4rem;
 }
 
+.detail__meta-icon svg {
+  display: block;
+}
+
 /* Title */
 .detail__title {
   font-size: 2rem;
@@ -420,6 +492,11 @@ onMounted(fetchEvent)
   justify-content: center;
   border-radius: 10px;
   color: var(--color-text-on-gradient);
+  line-height: 0;
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
 }
 
 .detail__meta-text {
@@ -521,4 +598,105 @@ onMounted(fetchEvent)
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+/* Cancellation banner */
+.detail__cancelled-banner {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-card);
+  background: var(--color-danger-bg);
+  border: 1px solid var(--color-danger-border-strong);
+  text-align: center;
+}
+
+.detail__cancelled-banner-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: var(--color-danger);
+}
+
+.detail__cancelled-banner-reason {
+  margin-top: var(--spacing-xs);
+  font-size: 0.85rem;
+  color: var(--color-text-soft);
+  word-break: break-word;
+}
+
+/* Cancel event button */
+.detail__cancel-event {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--spacing-md) var(--content-padding);
+  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
+  display: flex;
+  justify-content: center;
+  z-index: 10;
+}
+
+.detail__cancel-event-btn {
+  width: 100%;
+  max-width: var(--content-max-width);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-button);
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-danger);
+  background: var(--color-danger-bg);
+  border: 1px solid var(--color-danger-border);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.detail__cancel-event-btn:hover {
+  background: var(--color-danger-bg-hover);
+}
+
+/* Cancel event form (inside bottom sheet) */
+.cancel-form__textarea {
+  resize: vertical;
+  min-height: 4rem;
+  font-family: inherit;
+}
+
+.cancel-form__counter {
+  display: block;
+  text-align: right;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  margin-top: var(--spacing-xs);
+}
+
+.cancel-form__confirm {
+  display: block;
+  width: 100%;
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-button);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-danger-solid-text);
+  background: var(--color-danger-solid);
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.cancel-form__confirm:hover {
+  background: var(--color-danger-solid-hover);
+}
+
+.cancel-form__confirm:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.cancel-form__error {
+  margin-top: var(--spacing-sm);
+  font-size: 0.85rem;
+  color: var(--color-danger);
+  text-align: center;
+}
 </style>

frontend/src/views/__tests__/EventCreateView.spec.ts

@@ -164,6 +164,8 @@ describe('EventCreateView', () => {
       saveRsvp: vi.fn(),
       getRsvp: vi.fn(),
       removeRsvp: vi.fn(),
+      saveWatch: vi.fn(),
+      isStored: vi.fn(() => false),
       removeEvent: vi.fn(),
     })
 

frontend/src/views/__tests__/EventDetailView.spec.ts

@@ -14,6 +14,9 @@ vi.mock('@/api/client', () => ({
 const mockSaveRsvp = vi.fn()
 const mockGetRsvp = vi.fn()
 const mockGetOrganizerToken = vi.fn()
+const mockSaveWatch = vi.fn()
+const mockIsStored = vi.fn()
+const mockRemoveEvent = vi.fn()
 
 vi.mock('@/composables/useEventStorage', () => ({
   useEventStorage: vi.fn(() => ({
@@ -22,7 +25,10 @@ vi.mock('@/composables/useEventStorage', () => ({
     getOrganizerToken: mockGetOrganizerToken,
     saveRsvp: mockSaveRsvp,
     getRsvp: mockGetRsvp,
-    removeEvent: vi.fn(),
+    removeRsvp: vi.fn(),
+    saveWatch: mockSaveWatch,
+    isStored: mockIsStored,
+    removeEvent: mockRemoveEvent,
   })),
 }))
 
@@ -68,6 +74,9 @@ beforeEach(() => {
   vi.restoreAllMocks()
   mockGetRsvp.mockReturnValue(undefined)
   mockGetOrganizerToken.mockReturnValue(undefined)
+  mockIsStored.mockReturnValue(false)
+  mockSaveWatch.mockClear()
+  mockRemoveEvent.mockClear()
 })
 
 describe('EventDetailView', () => {
@@ -189,7 +198,7 @@ describe('EventDetailView', () => {
     await flushPromises()
 
     expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(true)
-    expect(wrapper.find('.rsvp-bar__cta').text()).toBe("I'm attending")
+    expect(wrapper.find('.rsvp-bar__cta').text()).toBe("I'm attending!")
     wrapper.unmount()
   })
 
@@ -280,8 +289,8 @@ describe('EventDetailView', () => {
     await flushPromises()
 
     // Verify API call
-    expect(vi.mocked(api.POST)).toHaveBeenCalledWith('/events/{token}/rsvps', {
+    expect(vi.mocked(api.POST)).toHaveBeenCalledWith('/events/{eventToken}/rsvps', {
-      params: { path: { token: 'test-token' } },
+      params: { path: { eventToken: 'test-token' } },
       body: { name: 'Max' },
     })
 
@@ -366,4 +375,89 @@ describe('EventDetailView', () => {
     expect(document.body.textContent).toContain('Could not submit RSVP. Please try again.')
     wrapper.unmount()
   })
+
+  // Bookmark — T007: bookmark state is passed to RsvpBar via props
+  it('passes bookmarked=false to RsvpBar when event is not in storage', async () => {
+    mockIsStored.mockReturnValue(false)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    expect(rsvpBar.props('bookmarked')).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('passes bookmarked=true to RsvpBar when event is in storage', async () => {
+    mockIsStored.mockReturnValue(true)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    expect(rsvpBar.props('bookmarked')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('bookmark event emitted from RsvpBar calls saveWatch', async () => {
+    mockIsStored.mockReturnValue(false)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    rsvpBar.vm.$emit('bookmark')
+    await flushPromises()
+
+    expect(mockSaveWatch).toHaveBeenCalledWith('test-token', 'Summer BBQ', '2026-03-15T20:00:00+01:00')
+    wrapper.unmount()
+  })
+
+  it('bookmark event emitted from RsvpBar calls removeEvent when user is watcher', async () => {
+    mockIsStored.mockReturnValue(true)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    rsvpBar.vm.$emit('bookmark')
+    await flushPromises()
+
+    expect(mockRemoveEvent).toHaveBeenCalledWith('test-token')
+    wrapper.unmount()
+  })
+
+  it('bookmark event ignored when user is attendee', async () => {
+    mockGetRsvp.mockReturnValue({ rsvpToken: 'rsvp-1', rsvpName: 'Max' })
+    mockIsStored.mockReturnValue(true)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    rsvpBar.vm.$emit('bookmark')
+    await flushPromises()
+
+    expect(mockRemoveEvent).not.toHaveBeenCalled()
+    expect(mockSaveWatch).not.toHaveBeenCalled()
+    wrapper.unmount()
+  })
+
+  it('passes bookmarked=true to RsvpBar after removeRsvp (event still in storage)', async () => {
+    mockIsStored.mockReturnValue(true)
+    mockGetRsvp.mockReturnValue(undefined)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    expect(rsvpBar.props('bookmarked')).toBe(true)
+    wrapper.unmount()
+  })
 })

specs/016-cancel-event/checklists/requirements.md

@@ -0,0 +1,36 @@
+# Specification Quality Checklist: Cancel Event
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-12
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All items pass. Spec is ready for `/speckit.clarify` or `/speckit.plan`.
+- Feature scope is deliberately tight: cancel + display. No notifications, no undo, no event-list changes.
+- Both user stories are P1 because they are two sides of the same coin (cancel action + display result).

specs/016-cancel-event/contracts/patch-event-endpoint.yaml

@@ -0,0 +1,78 @@
+# OpenAPI additions for Cancel Event feature
+# To be merged into backend/src/main/resources/openapi/api.yaml
+
+# PATCH method added to existing /events/{eventToken} path
+# Under paths./events/{eventToken}:
+
+# --- Add PATCH method to existing path ---
+# /events/{eventToken}:
+#   patch:
+#     operationId: patchEvent
+#     summary: Update an event (currently: cancel)
+#     description: |
+#       Partial update of an event resource. Currently the only supported operation
+#       is cancellation (setting cancelled to true). Requires the organizer token.
+#       Cancellation is irreversible.
+#     tags: [Events]
+#     parameters:
+#       - $ref: '#/components/parameters/EventToken'
+#     requestBody:
+#       required: true
+#       content:
+#         application/json:
+#           schema:
+#             $ref: '#/components/schemas/PatchEventRequest'
+#     responses:
+#       '204':
+#         description: Event updated successfully
+#       '403':
+#         description: Invalid organizer token
+#         content:
+#           application/json:
+#             schema:
+#               $ref: '#/components/schemas/ErrorResponse'
+#       '404':
+#         description: Event not found
+#         content:
+#           application/json:
+#             schema:
+#               $ref: '#/components/schemas/ErrorResponse'
+#       '409':
+#         description: Event is already cancelled
+#         content:
+#           application/json:
+#             schema:
+#               $ref: '#/components/schemas/ErrorResponse'
+
+# --- New schemas ---
+
+# PatchEventRequest:
+#   type: object
+#   required: [organizerToken, cancelled]
+#   properties:
+#     organizerToken:
+#       type: string
+#       format: uuid
+#       description: The organizer token proving ownership of the event
+#       example: "550e8400-e29b-41d4-a716-446655440001"
+#     cancelled:
+#       type: boolean
+#       description: Set to true to cancel the event (irreversible)
+#       example: true
+#     cancellationReason:
+#       type: string
+#       maxLength: 2000
+#       description: Optional cancellation reason
+#       example: "Unfortunately the venue is no longer available."
+
+# --- Extended schema: GetEventResponse ---
+# Add to existing GetEventResponse properties:
+#   cancelled:
+#     type: boolean
+#     description: Whether the event has been cancelled
+#     example: false
+#   cancellationReason:
+#     type: string
+#     nullable: true
+#     description: Reason for cancellation, if provided
+#     example: null

specs/016-cancel-event/data-model.md

@@ -0,0 +1,82 @@
+# Data Model: Cancel Event
+
+**Feature Branch**: `016-cancel-event` | **Date**: 2026-03-12
+
+## Entity Changes
+
+### Event (extended)
+
+Two new fields added to the existing Event entity:
+
+| Field              | Type           | Constraints                  | Description                                      |
+|--------------------|----------------|------------------------------|--------------------------------------------------|
+| cancelled          | boolean        | NOT NULL, DEFAULT false      | Whether the event has been cancelled              |
+| cancellationReason | String (2000)  | Nullable                     | Optional reason provided by organizer             |
+
+### State Transition
+
+```
+ACTIVE ──cancel()──► CANCELLED
+```
+
+- One-way transition only. No path from CANCELLED back to ACTIVE.
+- `cancel()` sets `cancelled = true` and optionally sets `cancellationReason`.
+- Once cancelled, the event remains visible but RSVP creation is blocked.
+
+### Validation Rules
+
+- `cancellationReason` max length: 2000 characters (matches description field).
+- `cancellationReason` is plain text only (no HTML/markdown).
+- `cancelled` can only transition from `false` to `true`, never back.
+- Existing RSVPs are preserved when an event is cancelled (no cascade).
+
+## Database Migration (Liquibase Changeset 004)
+
+```xml
+<changeSet id="004-add-cancellation-columns" author="fete">
+    <addColumn tableName="events">
+        <column name="cancelled" type="BOOLEAN" defaultValueBoolean="false">
+            <constraints nullable="false"/>
+        </column>
+        <column name="cancellation_reason" type="VARCHAR(2000)"/>
+    </addColumn>
+</changeSet>
+```
+
+## Domain Model Impact
+
+### Event.java (domain)
+
+Add fields:
+```java
+private boolean cancelled;
+private String cancellationReason;
+```
+
+Add method:
+```java
+public void cancel(String reason) {
+    if (this.cancelled) {
+        throw new EventAlreadyCancelledException();
+    }
+    this.cancelled = true;
+    this.cancellationReason = reason;
+}
+```
+
+### EventJpaEntity.java (persistence)
+
+Add columns:
+```java
+@Column(name = "cancelled", nullable = false)
+private boolean cancelled;
+
+@Column(name = "cancellation_reason", length = 2000)
+private String cancellationReason;
+```
+
+## RSVP Impact
+
+- `POST /events/{eventToken}/rsvps` must check `event.isCancelled()` before accepting.
+- If cancelled → return `409 Conflict`.
+- Existing RSVPs remain untouched — no delete, no status change.

specs/016-cancel-event/plan.md

@@ -0,0 +1,79 @@
+# Implementation Plan: Cancel Event
+
+**Branch**: `016-cancel-event` | **Date**: 2026-03-12 | **Spec**: [spec.md](spec.md)
+**Input**: Feature specification from `/specs/016-cancel-event/spec.md`
+
+## Summary
+
+Allow organizers to permanently cancel events via a bottom sheet UI. Cancelled events display a red banner to visitors and block new RSVPs. Implementation adds a `PATCH /events/{eventToken}` endpoint, extends the Event entity with `cancelled` and `cancellationReason` fields, and reuses the existing `BottomSheet.vue` component for the cancel interaction.
+
+## Technical Context
+
+**Language/Version**: Java 25 (backend), TypeScript 5.9 (frontend)
+**Primary Dependencies**: Spring Boot 3.5.x, Vue 3, Vue Router 5, openapi-fetch, openapi-typescript
+**Storage**: PostgreSQL (JPA via Spring Data, Liquibase migrations)
+**Testing**: JUnit (backend), Vitest (frontend unit), Playwright + MSW (frontend E2E)
+**Target Platform**: Self-hosted Linux server, mobile-first PWA
+**Project Type**: Web application (REST API + SPA)
+**Performance Goals**: N/A — simple state transition, no performance-critical path
+**Constraints**: Privacy by design (no analytics/tracking), WCAG AA, mobile-first
+**Scale/Scope**: Single new endpoint, 2 new DB columns, 1 view extension
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|-----------|--------|-------|
+| I. Privacy by Design | PASS | No new data collection beyond organizer-provided reason. No analytics. |
+| II. Test-Driven Methodology | PASS | TDD enforced: tests before implementation, E2E mandatory for both user stories. |
+| III. API-First Development | PASS | OpenAPI spec updated first, types generated before implementation. `example:` fields included. |
+| IV. Simplicity & Quality | PASS | Minimal change: 2 columns, 1 endpoint, reuse existing BottomSheet. No over-engineering. |
+| V. Dependency Discipline | PASS | No new dependencies required. |
+| VI. Accessibility | PASS | Reuses accessible BottomSheet component. Banner uses semantic HTML + ARIA. |
+
+**Gate result: PASS** — no violations.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/016-cancel-event/
+├── plan.md              # This file
+├── spec.md              # Feature specification
+├── research.md          # Phase 0 output — design decisions
+├── data-model.md        # Phase 1 output — entity changes
+├── quickstart.md        # Phase 1 output — implementation overview
+├── contracts/           # Phase 1 output — API contract additions
+│   └── patch-event-endpoint.yaml
+└── tasks.md             # Phase 2 output (/speckit.tasks command)
+```
+
+### Source Code (repository root)
+
+```text
+backend/
+├── src/main/java/de/fete/
+│   ├── domain/model/Event.java                          # + cancelled, cancellationReason, cancel()
+│   ├── application/service/EventService.java            # + CancelEventUseCase implementation
+│   ├── adapter/in/web/EventController.java              # + cancelEvent endpoint
+│   └── adapter/out/persistence/
+│       ├── EventJpaEntity.java                          # + cancelled, cancellation_reason columns
+│       └── EventPersistenceAdapter.java                 # + mapper updates
+├── src/main/resources/
+│   ├── openapi/api.yaml                                 # + cancel endpoint, request/response schemas
+│   └── db/changelog/004-add-cancellation-columns.xml    # New migration
+└── src/test/java/de/fete/                               # Unit + integration tests
+
+frontend/
+├── src/
+│   └── views/EventDetailView.vue                        # + cancel button, bottom sheet, banner
+└── e2e/                                                 # E2E tests for both user stories
+```
+
+**Structure Decision**: Web application (Option 2) — matches existing project layout with `backend/` and `frontend/` at repository root.
+
+## Complexity Tracking
+
+> No violations — table not applicable.

specs/016-cancel-event/quickstart.md

@@ -0,0 +1,48 @@
+# Quickstart: Cancel Event
+
+**Feature Branch**: `016-cancel-event`
+
+## What This Feature Does
+
+Adds the ability for an organizer to permanently cancel an event. Cancelled events display a red banner to visitors and block new RSVPs.
+
+## Implementation Scope
+
+### Backend
+1. **Liquibase migration** (003): Add `cancelled` (boolean) and `cancellation_reason` (varchar 2000) columns to `events` table.
+2. **Domain model**: Extend `Event.java` with `cancelled` and `cancellationReason` fields + `cancel()` method.
+3. **JPA entity**: Extend `EventJpaEntity.java` with matching columns and mapper updates.
+4. **OpenAPI spec**: Add `PATCH /events/{eventToken}` endpoint + extend `GetEventResponse` with cancellation fields.
+5. **Use case**: New `CancelEventUseCase` interface + implementation in `EventService`.
+6. **Controller**: Implement `cancelEvent` in `EventController`.
+7. **RSVP guard**: Add cancelled check to RSVP creation (return 409).
+
+### Frontend
+1. **Cancel bottom sheet**: Add cancel button (organizer-only) + bottom sheet with textarea and confirm button in `EventDetailView.vue`.
+2. **Cancellation banner**: Red banner at top of event detail when `cancelled === true`.
+3. **RSVP hiding**: Hide `RsvpBar` when event is cancelled.
+4. **API client**: Use generated types from updated OpenAPI spec.
+
+### Testing
+1. **Backend unit tests**: Cancel use case, RSVP rejection on cancelled events.
+2. **Backend integration tests**: Full cancel flow via API.
+3. **Frontend unit tests**: Cancel bottom sheet, banner display, RSVP hiding.
+4. **E2E tests**: Organizer cancels event, attendee sees cancelled event.
+
+## Key Files to Modify
+
+| File | Change |
+|------|--------|
+| `backend/src/main/resources/openapi/api.yaml` | New endpoint + schema extensions |
+| `backend/src/main/resources/db/changelog/` | New changeset 003 |
+| `backend/src/main/java/de/fete/domain/model/Event.java` | Add cancelled fields + cancel() |
+| `backend/src/main/java/de/fete/adapter/out/persistence/EventJpaEntity.java` | Add columns |
+| `backend/src/main/java/de/fete/application/service/EventService.java` | Implement cancel |
+| `backend/src/main/java/de/fete/adapter/in/web/EventController.java` | Implement endpoint |
+| `frontend/src/views/EventDetailView.vue` | Cancel button, bottom sheet, banner |
+
+## Prerequisites
+
+- Existing RSVP bottom sheet pattern (already implemented)
+- Organizer token stored in localStorage (already implemented)
+- `BottomSheet.vue` component (already exists)

specs/016-cancel-event/research.md

@@ -0,0 +1,87 @@
+# Research: Cancel Event
+
+**Feature Branch**: `016-cancel-event` | **Date**: 2026-03-12
+
+## Decision 1: API Endpoint Design
+
+**Decision**: Use `PATCH /events/{eventToken}` with organizer token and cancellation fields in request body.
+
+**Rationale**:
+- PATCH is standard REST for partial resource updates — cancellation is a state change on the event resource.
+- The event is not removed, so DELETE is not appropriate. The event remains visible with a cancellation banner.
+- The organizer token is sent in the request body to keep it out of URL/query strings and server access logs.
+- Request body: `{ "organizerToken": "uuid", "cancelled": true, "cancellationReason": "optional string" }`.
+- Response: `204 No Content` on success.
+- Error responses: `404` if event not found, `403` if organizer token is wrong, `409` if already cancelled.
+- Currently the only supported PATCH operation is cancellation. The endpoint validates that `cancelled` is `true` and rejects requests that attempt to set other fields.
+
+**Alternatives considered**:
+- `POST /events/{eventToken}/cancel` — rejected because a dedicated sub-resource endpoint is RPC-style, not RESTful. PATCH on the resource itself is the standard approach.
+- `DELETE /events/{eventToken}` — rejected because the event is not deleted, it remains visible with a cancellation banner.
+
+## Decision 2: Database Schema Extension
+
+**Decision**: Add two columns to the `events` table: `cancelled BOOLEAN NOT NULL DEFAULT FALSE` and `cancellation_reason VARCHAR(2000)`.
+
+**Rationale**:
+- Boolean flag is the simplest representation of the cancelled state.
+- 2000 chars matches the existing description field limit — consistent and generous.
+- DEFAULT FALSE ensures backward compatibility with existing rows.
+- A Liquibase changeset (003) adds both columns.
+
+**Alternatives considered**:
+- Enum status field (`ACTIVE`, `CANCELLED`) — rejected as over-engineering for a binary state with no other planned transitions.
+- Separate cancellation table — rejected as unnecessary complexity for two columns.
+
+## Decision 3: RSVP Blocking on Cancelled Events
+
+**Decision**: The RSVP creation endpoint (`POST /events/{eventToken}/rsvps`) checks the event's cancelled flag and returns `409 Conflict` if the event is cancelled.
+
+**Rationale**:
+- Server-side enforcement is required (FR-006) — frontend hiding the button is not sufficient.
+- 409 Conflict is semantically correct: the request conflicts with the current state of the resource.
+- Existing RSVPs are preserved (FR-007) — no cascade or cleanup needed.
+
+**Alternatives considered**:
+- 400 Bad Request — rejected because the request itself is well-formed; the conflict is with resource state.
+- 422 Unprocessable Entity — rejected because the issue is not validation but state conflict.
+
+## Decision 4: Frontend Cancel Bottom Sheet
+
+**Decision**: Reuse the existing `BottomSheet.vue` component. Add cancel-specific content (textarea + confirm button) directly in `EventDetailView.vue`, similar to how the RSVP form is embedded.
+
+**Rationale**:
+- The spec explicitly requires the bottom sheet pattern consistent with RSVP flow (FR-002).
+- `BottomSheet.vue` is already a generic, accessible, glassmorphism-styled container.
+- No need for a separate component — the cancel form is simple (textarea + button + error message).
+- Error handling follows the same pattern as RSVP: inline error in the sheet, button re-enabled.
+
+**Alternatives considered**:
+- Separate `CancelBottomSheet.vue` component — rejected as unnecessary extraction for a simple form.
+- ConfirmDialog instead of BottomSheet — rejected because spec explicitly requires bottom sheet.
+
+## Decision 5: Organizer Token Authorization
+
+**Decision**: The cancel endpoint receives the organizer token in the request body. The frontend retrieves it from localStorage via `useEventStorage.getOrganizerToken()`.
+
+**Rationale**:
+- Consistent with how organizer identity works throughout the app — token-based, no auth system.
+- The organizer token is already stored in localStorage when the event is created.
+- Body parameter keeps the token out of URL/query strings and server access logs.
+
+**Alternatives considered**:
+- Authorization header — rejected because there's no auth system; the organizer token is not a session token.
+- Query parameter — rejected to keep token out of server logs (same reason the attendee endpoint should eventually be migrated away from query params).
+
+## Decision 6: GetEventResponse Extension
+
+**Decision**: Add `cancelled: boolean` and `cancellationReason: string | null` to the `GetEventResponse` schema.
+
+**Rationale**:
+- The frontend needs to know whether an event is cancelled to show the banner and hide RSVP buttons.
+- Both fields are always returned (no separate endpoint needed).
+- `cancelled` defaults to `false` for existing events.
+
+**Alternatives considered**:
+- Separate endpoint for cancellation status — rejected as unnecessary network overhead.
+- Only return cancellation info for cancelled events — rejected because the frontend needs the boolean regardless to decide UI state.

specs/016-cancel-event/spec.md

@@ -0,0 +1,97 @@
+# Feature Specification: Cancel Event
+
+**Feature Branch**: `016-cancel-event`
+**Created**: 2026-03-12
+**Status**: Draft
+**Input**: User description: "As an organizer, I want to cancel an event so that attendees know the event will not take place"
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Organizer Cancels an Event (Priority: P1)
+
+An organizer navigates to their event page (identified by having the organizer token). They decide to cancel the event. They tap a "Cancel Event" button, which opens a bottom sheet (visually similar to the attend/RSVP flow). The bottom sheet contains a text area for an optional cancellation reason and a confirm button. After confirming, the event is permanently marked as cancelled. This action is irreversible.
+
+**Why this priority**: This is the core action of the feature. Without it, nothing else matters.
+
+**Independent Test**: Can be fully tested by viewing the event with the organizer token, tapping cancel, optionally entering a reason, and confirming. The event's cancelled state persists on reload.
+
+**Acceptance Scenarios**:
+
+1. **Given** an active event viewed by someone who has the organizer token, **When** the organizer taps "Cancel Event", **Then** a bottom sheet opens with a text area and a confirm button.
+2. **Given** the cancel bottom sheet is open, **When** the organizer enters a cancellation reason and taps the confirm button, **Then** the event is marked as cancelled with the provided reason.
+3. **Given** the cancel bottom sheet is open, **When** the organizer taps confirm without entering a reason, **Then** the event is marked as cancelled without a reason.
+4. **Given** a cancelled event, **When** the organizer revisits the event page, **Then** the event remains cancelled (irreversible).
+5. **Given** the cancel bottom sheet is open, **When** the organizer taps confirm and the API call fails, **Then** an error message is displayed in the bottom sheet, the sheet remains open, and the confirm button is re-enabled for retry.
+
+---
+
+### User Story 2 - Attendee Sees Cancelled Event (Priority: P1)
+
+An attendee (or any visitor) opens the event detail page for a cancelled event. A prominent red banner is displayed at the top of the page, clearly communicating that the event has been cancelled. If the organizer provided a cancellation reason, it is shown within the banner. The RSVP buttons are hidden — no new RSVPs can be submitted.
+
+**Why this priority**: Equal to P1 because the cancellation must be visible to attendees for the feature to deliver value. Without this, cancelling has no effect from the attendee's perspective.
+
+**Independent Test**: Can be tested by viewing a cancelled event's detail page and verifying the banner appears, the reason is displayed (if provided), and RSVP buttons are hidden.
+
+**Acceptance Scenarios**:
+
+1. **Given** a cancelled event with a cancellation reason, **When** a visitor opens the event detail page, **Then** a prominent red banner is displayed showing that the event is cancelled along with the reason.
+2. **Given** a cancelled event without a cancellation reason, **When** a visitor opens the event detail page, **Then** a prominent red banner is displayed showing that the event is cancelled, without a reason text.
+3. **Given** a cancelled event, **When** a visitor opens the event detail page, **Then** the RSVP buttons are not visible.
+4. **Given** a cancelled event, **When** a visitor opens the event detail page, **Then** all other event details (title, date, location, description) remain visible.
+
+---
+
+### Edge Cases
+
+- What happens when the organizer tries to cancel an already cancelled event? The cancel button is not available on an already cancelled event.
+- What happens to existing RSVPs when an event is cancelled? They are preserved as-is but no new RSVPs can be submitted.
+- What happens when the event is both cancelled and expired? The auto-delete mechanism (feature 013) continues to apply normally — cancelled events are deleted on the same schedule as non-cancelled events.
+- What happens when the cancellation API call fails (network error, server error)? The bottom sheet remains open, a visible error message is displayed within the sheet, and the confirm button is re-enabled so the organizer can retry.
+- How are cancelled events displayed in the event list? Out of scope for this feature — the event list view is not affected.
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: System MUST allow the organizer to cancel an event via the organizer view.
+- **FR-002**: The cancellation interaction MUST use a bottom sheet pattern consistent with the existing RSVP/attend flow.
+- **FR-003**: The bottom sheet MUST contain a text area for an optional cancellation reason and a confirm button.
+- **FR-004**: Cancellation MUST be irreversible — once cancelled, there is no way to undo it.
+- **FR-005**: System MUST store a cancelled flag and an optional cancellation reason for the event.
+- **FR-006**: System MUST NOT allow new RSVPs for a cancelled event.
+- **FR-007**: System MUST preserve existing RSVPs when an event is cancelled.
+- **FR-008**: The event detail page MUST display a prominent red banner for cancelled events.
+- **FR-009**: The banner MUST include the cancellation reason when one was provided.
+- **FR-010**: The RSVP buttons MUST be hidden on a cancelled event's detail page.
+- **FR-011**: All other event information MUST remain visible on a cancelled event's detail page.
+- **FR-012**: The cancel button MUST NOT be shown on an already cancelled event.
+- **FR-013**: There MUST be no push notifications, emails, or any active notification mechanism for cancellations.
+- **FR-014**: If the cancellation API call fails, the bottom sheet MUST remain open, display an error message, and allow the organizer to retry.
+- **FR-015**: Changes to the event list view for cancelled events are explicitly OUT OF SCOPE for this feature.
+
+### Key Entities
+
+- **Event** (extended): Gains a cancelled state (boolean) and an optional cancellation reason (free text). An event can transition from active to cancelled, but not back.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Organizer can cancel an event in under 30 seconds (open bottom sheet, optionally type reason, confirm).
+- **SC-002**: 100% of visitors to a cancelled event's detail page see the cancellation banner without scrolling.
+- **SC-003**: 0% of cancelled events accept new RSVPs.
+- **SC-004**: Existing RSVPs are fully preserved after cancellation (no data loss).
+
+## Clarifications
+
+### Session 2026-03-12
+
+- Q: How should cancelled events appear in the event list view? → A: Out of scope for this feature — event list view is not affected.
+- Q: What should happen when the cancellation API call fails? → A: Error message displayed in the bottom sheet, sheet remains open, confirm button re-enabled for retry.
+
+## Assumptions
+
+- The bottom sheet component pattern already exists from the RSVP/attend flow and can be reused.
+- The cancellation reason has a maximum length of 2000 characters (consistent with the event description field).
+- The cancellation reason is plain text (no formatting or markup).

specs/016-cancel-event/tasks.md

@@ -0,0 +1,96 @@
+# Tasks: Cancel Event
+
+**Input**: Design documents from `/specs/016-cancel-event/`
+**Prerequisites**: plan.md, spec.md, research.md, data-model.md, contracts/patch-event-endpoint.yaml
+
+**Tests**: Included — constitution mandates TDD (tests before implementation) and E2E for every frontend user story.
+
+**Organization**: Tasks grouped by user story. Both stories are P1 but US2 depends on US1's backend work.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies)
+- **[Story]**: Which user story this task belongs to (e.g., US1, US2)
+- Include exact file paths in descriptions
+
+---
+
+## Phase 1: Setup (Shared Infrastructure)
+
+**Purpose**: OpenAPI spec, database migration, and domain model changes that both user stories depend on.
+
+- [X] T001 Update OpenAPI spec with PATCH endpoint on `/events/{eventToken}` (organizerToken as query param), PatchEventRequest schema (`cancelled`, `cancellationReason`), and extend GetEventResponse with `cancelled`/`cancellationReason` fields in `backend/src/main/resources/openapi/api.yaml`
+- [X] T002 Add Liquibase changeset 004 adding `cancelled` (BOOLEAN NOT NULL DEFAULT FALSE) and `cancellation_reason` (VARCHAR 2000) columns to `events` table in `backend/src/main/resources/db/changelog/004-add-cancellation-columns.xml` and register it in `db.changelog-master.xml`
+- [X] T003 [P] Extend domain model `Event.java` with `cancelled`, `cancellationReason` fields and `cancel(String reason)` method (throws `EventAlreadyCancelledException`). Create `EventAlreadyCancelledException` in `backend/src/main/java/de/fete/domain/model/`. Domain model: `backend/src/main/java/de/fete/domain/model/Event.java`
+- [X] T004 [P] Extend JPA entity `EventJpaEntity.java` with `cancelled` and `cancellation_reason` columns and update mapper in `backend/src/main/java/de/fete/adapter/out/persistence/EventPersistenceAdapter.java`
+- [X] T005 Regenerate frontend TypeScript types from updated OpenAPI spec via `cd frontend && npm run generate:api`
+
+**Checkpoint**: Schema, migration, and domain model ready. Both user stories can now proceed.
+
+---
+
+## Phase 2: User Story 1 — Organizer Cancels an Event (Priority: P1) MVP
+
+**Goal**: Organizer can cancel an event via a bottom sheet with optional reason. Cancellation is irreversible and persists on reload.
+
+**Independent Test**: View event with organizer token, tap cancel, optionally enter reason, confirm. Event remains cancelled on reload.
+
+### Tests for User Story 1
+
+> **Write these tests FIRST — ensure they FAIL before implementation**
+
+- [X] ~~T006~~ Removed (EventTest.java unnecessary — cancel() tested via service/integration tests)
+- [X] T007 [P] [US1] Write unit test for cancel use case in EventService (delegates to domain, saves, 403/404/409 cases) in `backend/src/test/java/de/fete/application/service/EventServiceCancelTest.java`
+- [X] T008 [P] [US1] Write integration tests for `PATCH /events/{eventToken}` endpoint (204 success, 403 wrong token, 404 not found, 409 already cancelled) in `backend/src/test/java/de/fete/adapter/in/web/EventControllerIntegrationTest.java`
+- [X] T009 [P] [US1] Write E2E test: organizer opens cancel bottom sheet, enters reason, confirms — event shows as cancelled on reload in `frontend/e2e/cancel-event.spec.ts`
+- [X] T010 [P] [US1] Write E2E test: organizer cancels without reason — event shows as cancelled in `frontend/e2e/cancel-event.spec.ts`
+- [X] T011 [P] [US1] Write E2E test: cancel API fails — error displayed in bottom sheet, button re-enabled for retry in `frontend/e2e/cancel-event.spec.ts`
+
+### Implementation for User Story 1
+
+- [X] T012 [US1] Create `UpdateEventUseCase` interface in `backend/src/main/java/de/fete/domain/port/in/UpdateEventUseCase.java`
+- [X] T013 [US1] Implement cancel logic in `EventService.java` — load event, verify organizer token, call `event.cancel(reason)`, persist in `backend/src/main/java/de/fete/application/service/EventService.java`
+- [X] T014 [US1] Implement `patchEvent` endpoint in `EventController.java` — PATCH handler, query param organizerToken, request body binding, error mapping (403/404/409) in `backend/src/main/java/de/fete/adapter/in/web/EventController.java`
+- [X] T015 [US1] Add cancel button (visible only when organizer token exists and event not cancelled — covers FR-012) and cancel bottom sheet (textarea with 2000 char limit + confirm button + inline error) to `frontend/src/views/EventDetailView.vue`
+- [X] T016 [US1] Wire cancel bottom sheet confirm action to `PATCH /events/{eventToken}` API call via openapi-fetch, handle success (reload event data) and error (show inline message, re-enable button) in `frontend/src/views/EventDetailView.vue`
+
+**Checkpoint**: Organizer can cancel an event. All US1 acceptance scenarios pass.
+
+---
+
+## Phase 3: User Story 2 — Attendee Sees Cancelled Event (Priority: P1)
+
+**Goal**: Visitors see a prominent red cancellation banner on cancelled events. RSVP buttons are hidden. All other event details remain visible.
+
+**Independent Test**: View a cancelled event's detail page — banner visible (with reason if provided), RSVP buttons hidden, other details intact.
+
+### Tests for User Story 2
+
+> **Write these tests FIRST — ensure they FAIL before implementation**
+
+- [X] ~~T017~~ Removed (RsvpServiceCancelledTest unnecessary — covered by integration test)
+- [X] T018 [P] [US2] Write integration test for `POST /events/{eventToken}/rsvps` returning 409 when event is cancelled in `backend/src/test/java/de/fete/adapter/in/web/EventControllerIntegrationTest.java`
+- [X] T019 [P] [US2] Write E2E test: visitor sees red banner with cancellation reason on cancelled event in `frontend/e2e/cancelled-event-visitor.spec.ts`
+- [X] T020 [P] [US2] Write E2E test: visitor sees red banner without reason when no reason was provided in `frontend/e2e/cancelled-event-visitor.spec.ts`
+- [X] T021 [P] [US2] Write E2E test: RSVP buttons hidden on cancelled event, other details remain visible in `frontend/e2e/cancelled-event-visitor.spec.ts`
+
+### Implementation for User Story 2
+
+- [X] T022 [US2] Add cancelled-event guard to RSVP creation — check `event.isCancelled()`, return 409 Conflict in `backend/src/main/java/de/fete/application/service/RsvpService.java`
+- [X] T023 [US2] Add cancellation banner component/section (red, prominent, includes reason if present, WCAG AA contrast) to `frontend/src/views/EventDetailView.vue`
+- [X] T024 [US2] Hide RSVP buttons (`RsvpBar` or equivalent) when `event.cancelled === true` in `frontend/src/views/EventDetailView.vue`
+- [X] ~~T025~~ Merged into T015 (cancel button v-if already handles FR-012)
+
+**Checkpoint**: Both user stories fully functional. All acceptance scenarios pass.
+
+---
+
+## Phase 4: Polish & Cross-Cutting Concerns
+
+**Purpose**: Validation, edge cases, and final cleanup.
+
+- [X] T026 Verify cancellationReason max length (2000 chars) is enforced at API level (OpenAPI `maxLength`), domain level in `Event.java`, and UI level (textarea maxlength/counter)
+- [X] T027 Run full backend test suite (`cd backend && ./mvnw verify`) and fix any failures
+- [X] T028 Run full frontend test suite (`cd frontend && npm run test:unit`) and fix any failures
+- [X] T029 Run E2E tests (`cd frontend && npx playwright test`) and fix any failures
+- [X] T030 Run backend checkstyle (`cd backend && ./mvnw checkstyle:check`) and fix violations

specs/017-watch-event/checklists/requirements.md

@@ -0,0 +1,35 @@
+# Specification Quality Checklist: Watch Event
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-12
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All items pass. Spec is ready for `/speckit.clarify` or `/speckit.plan`.
+- localStorage is mentioned as a storage mechanism — this is an existing project convention (not an implementation detail introduced by this spec).

specs/017-watch-event/data-model.md

@@ -0,0 +1,61 @@
+# Data Model: Watch Event
+
+**Feature**: 017-watch-event
+**Date**: 2026-03-12
+
+## Entities
+
+### StoredEvent (existing — localStorage)
+
+No schema change. The existing `StoredEvent` interface already supports the watcher state:
+
+```
+StoredEvent {
+  eventToken: string        # Required — event identifier
+  organizerToken?: string   # Present → organizer role
+  title: string             # Required — display in event list
+  dateTime: string          # Required — grouping/sorting
+  rsvpToken?: string        # Present → attendee role
+  rsvpName?: string         # Present with rsvpToken
+}
+```
+
+**Watcher state**: A `StoredEvent` with only `eventToken`, `title`, and `dateTime` populated (no `organizerToken`, no `rsvpToken`). This state already occurs naturally after RSVP cancellation.
+
+## Role Hierarchy
+
+```
+organizerToken present  →  "Organizer"  (highest precedence)
+rsvpToken present       →  "Attendee"
+neither present         →  "Watching"   (new label, lowest precedence)
+```
+
+## State Transitions
+
+```
+                    ┌──────────────┐
+         watch()    │              │   un-watch()
+  (not stored) ───► │   Watching   │ ───► (not stored)
+                    │              │
+                    └──────┬───────┘
+                           │ RSVP
+                           ▼
+                    ┌──────────────┐
+                    │              │
+                    │  Attending   │
+                    │              │
+                    └──────┬───────┘
+                           │ Cancel RSVP
+                           ▼
+                    ┌──────────────┐
+                    │              │   un-watch()
+                    │   Watching   │ ───► (not stored)
+                    │              │
+                    └──────────────┘
+```
+
+Note: Organizer state is set at event creation and cannot be removed through this feature. The bookmark icon is non-interactive for organizers.
+
+## No Backend Changes
+
+This feature does not introduce any new database entities, API endpoints, or server-side logic. All data is stored in the browser's localStorage.

specs/017-watch-event/issues.md

@@ -0,0 +1,72 @@
+# Visual Issues: Bookmark Icon on Event Detail Page
+
+**Date**: 2026-03-12
+**Branch**: `017-watch-event`
+**File**: `frontend/src/views/EventDetailView.vue`
+
+## Issue 1: Meta icons have hover effect
+
+**Problem**: The `<dt class="detail__meta-icon glass">` elements (date, location, attendees) change background/border color on hover. These are non-interactive `<dt>` elements — they should not react to hover.
+
+**Root cause**: The global `.glass:hover` rule in `frontend/src/assets/main.css:247`:
+```css
+.glass:hover:not(input):not(textarea):not(.btn-primary) {
+  background: var(--color-glass-hover);
+  border-color: var(--color-glass-border-hover);
+}
+```
+This applies to ALL `.glass` elements including the static meta icons. Scoped CSS overrides don't win because the global rule has equal or higher specificity.
+
+**Fix options**:
+- A) Remove `glass` class from meta icons, replicate the static glass styles in scoped CSS
+- B) Add `.glass--static` modifier that opts out of hover, use it on meta icons
+- C) Add `:not(.detail__meta-icon)` to the global rule (leaks component knowledge into global CSS — bad)
+
+Option A is cleanest — meta icons only need the static glass background, not the full interactive glass behavior.
+
+## Issue 2: Glow effect on bookmark is ugly
+
+**Problem**: The accent-colored `box-shadow` glow around the bookmark icon looks bad visually.
+
+**Current CSS**:
+```css
+.detail__bookmark {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 6px rgba(255, 112, 67, 0.15);
+}
+.detail__bookmark--filled {
+  box-shadow: 0 0 8px rgba(255, 112, 67, 0.3);
+}
+```
+
+**Fix**: Remove the glow entirely. Differentiate the bookmark from inert meta icons through a different, subtler approach — e.g. a slightly brighter/different border color, or rely solely on the cursor change and active/focus states.
+
+## Issue 3: Filled bookmark should use same icon color as unfilled
+
+**Problem**: Filled bookmark uses `color: var(--color-accent)` (orange), unfilled uses `color: var(--color-text-on-gradient)` (white/light). User wants both states to use the same color.
+
+**Current CSS**:
+```css
+.detail__bookmark--filled {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+```
+
+**Fix**: Remove `color: var(--color-accent)` from `.detail__bookmark--filled`. The SVG `fill` attribute is already controlled by `:fill="eventIsStored ? 'currentColor' : 'none'"` in the template — so filled state will use `currentColor` (which inherits from the parent), and unfilled state will be outline-only. Both will be the same color (`--color-text-on-gradient`).
+
+## Issue 4: Icons not centered in their boxes
+
+**Problem**: SVGs inside the 36x36 glass boxes (both bookmark and meta icons) are shifted slightly to the right. The centering is off despite `display: flex; align-items: center; justify-content: center`.
+
+**Root cause**: SVGs rendered inline have implicit `line-height` whitespace. The `line-height: 0` fix was added to `.detail__bookmark` and `.detail__meta-icon` but the meta icon override may not be applying due to specificity issues with the `glass` class, or the SVGs themselves may need `display: block`.
+
+**Context**: The `<dt>` element defaults to `display: block` but the SVG inside is inline. The flex container should handle it, but browser rendering of inline SVGs inside flex containers can be inconsistent.
+
+**Fix options**:
+- Add `display: block` to the SVGs directly via a scoped rule: `.detail__meta-icon svg, .detail__bookmark svg { display: block; }`
+- Or ensure `line-height: 0` is actually applying (check specificity)
+
+## Screenshot reference
+
+User-provided screenshot showing the issues: `/home/nitrix/Pictures/Screenshot_20260312_215543.png`

specs/017-watch-event/plan.md

@@ -0,0 +1,77 @@
+# Implementation Plan: Watch Event
+
+**Branch**: `017-watch-event` | **Date**: 2026-03-12 | **Spec**: [spec.md](spec.md)
+**Input**: Feature specification from `/specs/017-watch-event/spec.md`
+
+## Summary
+
+Add a bookmark icon to the event detail page (left of event title) that lets users save events to localStorage without RSVPing. Watched events appear in the event list with a "Watching" label. The feature is entirely client-side — no backend changes required.
+
+## Technical Context
+
+**Language/Version**: TypeScript 5.9 (frontend only)
+**Primary Dependencies**: Vue 3, Vue Router 5
+**Storage**: localStorage via `useEventStorage.ts` composable (existing)
+**Testing**: Vitest for unit tests, Playwright + MSW for E2E
+**Target Platform**: Mobile-first PWA (browser)
+**Project Type**: Web application (frontend-only change)
+**Performance Goals**: Instant toggle (no network requests)
+**Constraints**: No backend involvement, no new dependencies
+**Scale/Scope**: 4 modified files, 0 new files
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|-----------|--------|-------|
+| I. Privacy by Design | PASS | No data sent to server. Watch is purely localStorage. No tracking. |
+| II. Test-Driven Methodology | PASS | Unit tests for composable changes, E2E tests for user stories. |
+| III. API-First Development | PASS | No API changes needed. Feature is client-side only. |
+| IV. Simplicity & Quality | PASS | Minimal changes to existing code. No new abstractions. |
+| V. Dependency Discipline | PASS | No new dependencies introduced. |
+| VI. Accessibility | PASS | Bookmark icon will use semantic button/ARIA, keyboard-operable. |
+
+No violations. Gate passes.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/017-watch-event/
+├── plan.md              # This file
+├── spec.md              # Feature specification
+├── research.md          # Phase 0 output
+├── data-model.md        # Phase 1 output
+├── quickstart.md        # Phase 1 output
+└── tasks.md             # Phase 2 output (/speckit.tasks)
+```
+
+### Source Code (files to modify)
+
+```text
+frontend/src/
+├── composables/
+│   ├── useEventStorage.ts        # Add saveWatch(), isStored() methods
+│   └── __tests__/
+│       └── useEventStorage.spec.ts  # Tests for new methods
+├── components/
+│   ├── EventCard.vue              # Add 'watcher' role + badge styling
+│   ├── EventList.vue              # Update getRole() to return 'watcher', adjust delete flow
+│   └── __tests__/
+│       ├── EventCard.spec.ts      # Tests for watcher badge
+│       └── EventList.spec.ts      # Tests for watcher delete behavior
+├── views/
+│   ├── EventDetailView.vue        # Add bookmark icon next to title
+│   └── __tests__/
+│       └── EventDetailView.spec.ts  # Tests for bookmark behavior
+└── e2e/
+    └── watch-event.spec.ts        # E2E tests for all user stories
+```
+
+**Structure Decision**: Frontend-only changes. No new files needed — all modifications go into existing components and composables. One new E2E test file.
+
+## Complexity Tracking
+
+No constitution violations. No complexity justifications needed.

specs/017-watch-event/quickstart.md

@@ -0,0 +1,33 @@
+# Quickstart: Watch Event
+
+**Feature**: 017-watch-event
+**Date**: 2026-03-12
+
+## What This Feature Does
+
+Adds a bookmark icon to the event detail page that lets users save events locally without RSVPing. Saved events appear in the event list with a "Watching" label.
+
+## Files to Modify
+
+| File | Change |
+|------|--------|
+| `frontend/src/composables/useEventStorage.ts` | Add `saveWatch()` and `isStored()` methods |
+| `frontend/src/views/EventDetailView.vue` | Add bookmark icon left of title, shake animation trigger |
+| `frontend/src/components/EventList.vue` | Update `getRole()` to return `'watcher'`, skip confirmation for watchers |
+| `frontend/src/components/EventCard.vue` | Add `'watcher'` to role type, add badge styling |
+
+## Implementation Order
+
+1. **useEventStorage** — Add `saveWatch()` and `isStored()` (unit tests first)
+2. **EventCard** — Extend role type, add "Watching" badge with styling (unit tests first)
+3. **EventList** — Update `getRole()`, adjust delete flow for watchers (unit tests first)
+4. **EventDetailView** — Add bookmark icon with all states and shake animation
+5. **E2E tests** — Cover all 7 user stories from spec
+
+## Key Design Decisions
+
+- **No new StoredEvent fields** — watcher state is the absence of both `organizerToken` and `rsvpToken`
+- **No backend changes** — entirely client-side
+- **Bookmark icon left of title** — flex container, vertically centered
+- **Non-interactive for attendees/organizers** — tapping shakes the relevant bottom action button
+- **No confirmation dialog for watcher deletion** from event list

specs/017-watch-event/research.md

@@ -0,0 +1,56 @@
+# Research: Watch Event
+
+**Feature**: 017-watch-event
+**Date**: 2026-03-12
+
+## Research Questions
+
+### 1. How does the current role detection work?
+
+**Finding**: `EventList.vue` has a `getRole()` function that checks `organizerToken` first, then `rsvpToken`. Returns `undefined` when neither is present. `EventCard.vue` accepts an `eventRole` prop typed as `'organizer' | 'attendee' | undefined`.
+
+**Decision**: Extend `getRole()` to return `'watcher'` when the event is in localStorage but has no `organizerToken` and no `rsvpToken`. Extend `EventCard` prop type to include `'watcher'`.
+
+**Rationale**: This is the minimal change — the existing priority chain (organizer > attendee) already handles precedence. Adding watcher as the fallback case is natural.
+
+### 2. How to detect "is this event stored?" on the detail page?
+
+**Finding**: `useEventStorage` has `getStoredEvents()` which returns all events, and `getRsvp(eventToken)` / `getOrganizerToken(eventToken)` for specific lookups. There is no direct `isStored(eventToken)` check.
+
+**Decision**: Add a `isStored(eventToken)` method to `useEventStorage` that checks if an event exists in localStorage regardless of role. Add a `saveWatch(eventToken, title, dateTime)` method that creates a minimal StoredEvent entry (no rsvpToken, no organizerToken).
+
+**Rationale**: `saveWatch()` is semantically distinct from `saveRsvp()` and `saveCreatedEvent()`. The `isStored()` helper avoids filtering through the full event list for a simple boolean check.
+
+### 3. What happens to events after RSVP cancellation?
+
+**Finding**: `removeRsvp(eventToken)` deletes `rsvpToken` and `rsvpName` but keeps the event in localStorage. After cancellation, the event has no `rsvpToken` and no `organizerToken` — identical to a watched event.
+
+**Decision**: No change needed. The existing `removeRsvp()` behavior already produces the correct state for a "watcher" after cancellation. The `getRole()` update will automatically label these as "Watching".
+
+**Rationale**: This is the key insight — the post-RSVP-cancellation state is already semantically equivalent to "watching". We just need to label it.
+
+### 4. Bookmark icon placement and glow conflict
+
+**Finding**: The event title is a plain `<h1 class="detail__title">`. The RsvpBar CTA uses `glow-border glow-border--animated` with a `::before` pseudo-element that extends 12px beyond the button via `inset: -4px` + `blur(8px)`. The bookmark icon is positioned at the title area (top of page), far from the RsvpBar (fixed at bottom). No glow conflict.
+
+**Decision**: Place bookmark icon in a flex container with the title: `display: flex; align-items: center; gap: var(--spacing-sm)`. Icon to the left, title takes remaining space.
+
+**Rationale**: Vertically centered with flex is the simplest approach. No glow interference since the icon is nowhere near the RsvpBar.
+
+### 5. Delete confirmation behavior per role
+
+**Finding**: `EventList.vue` shows a `ConfirmDialog` for all deletions. The message text varies based on RSVP status. For events without RSVP, the message is generic ("This event will be removed from your list.").
+
+**Decision**: Skip the confirmation dialog entirely for watchers (no `rsvpToken`, no `organizerToken`). Call `removeEvent()` directly on swipe/delete.
+
+**Rationale**: Watching is low-commitment. The spec explicitly requires no confirmation for watcher deletion.
+
+### 6. Shake animation implementation
+
+**Finding**: No existing shake animation in the codebase. The RsvpBar status and cancel-event button are both `position: fixed; bottom: 0`.
+
+**Decision**: Add a CSS `@keyframes shake` animation (short horizontal oscillation, ~300ms). Apply via a reactive class that is toggled on bookmark tap when user is attendee/organizer. Use a ref + setTimeout to remove the class after animation completes.
+
+**Alternatives considered**:
+- Web Animations API: More flexible but overkill for a simple shake.
+- CSS transition: Insufficient for a multi-step oscillation.

specs/017-watch-event/spec.md

@@ -0,0 +1,153 @@
+# Feature Specification: Watch Event
+
+**Feature Branch**: `017-watch-event`
+**Created**: 2026-03-12
+**Status**: Draft
+**Input**: Watch/bookmark events locally without RSVPing — bookmark icon on event detail page, watching label on event list
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Watch an event from the detail page (Priority: P1)
+
+A user receives a link to an event and opens the detail page. They are not ready to RSVP yet but want to save the event for later. They tap the bookmark icon to the left of the event title. The icon fills in, and the event is saved to their local device. Next time they open the app, the event appears in their event list with a "Watching" label.
+
+**Why this priority**: This is the core feature — without it, the only way to save an event is to RSVP. Many users want to "bookmark" events they're considering without committing.
+
+**Independent Test**: Can be fully tested by opening an event detail page, tapping the bookmark icon, verifying it fills in, and checking the event list shows the event with a "Watching" label.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user visits an event detail page for the first time (no RSVP, no watch), **When** they look at the bookmark icon next to the title, **Then** the icon is displayed as an unfilled outline.
+2. **Given** the bookmark icon is unfilled, **When** the user taps it, **Then** the icon becomes filled, and the event is saved to localStorage.
+3. **Given** the user has watched an event, **When** they open the event list, **Then** the event appears with a "Watching" label.
+
+---
+
+### User Story 2 - Un-watch an event from the detail page (Priority: P1)
+
+A user who is watching an event (but not attending) decides they are no longer interested. They tap the filled bookmark icon on the event detail page. The icon reverts to an outline, and the event is removed from localStorage. It disappears from the event list.
+
+**Why this priority**: Users must be able to undo the watch action. Without this, there is no way to remove a watched event from the detail page.
+
+**Independent Test**: Can be fully tested by watching an event, then tapping the bookmark icon again to un-watch, verifying the icon becomes unfilled and the event disappears from the event list.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user is watching an event (not attending), **When** they tap the filled bookmark icon, **Then** the icon becomes unfilled and the event is removed from localStorage.
+2. **Given** a user has un-watched an event, **When** they open the event list, **Then** the event no longer appears.
+
+---
+
+### User Story 3 - Bookmark icon reflects attending status (Priority: P1)
+
+When a user RSVPs to an event, the event is automatically saved to localStorage. The bookmark icon on the detail page reflects this by appearing filled. Attending supersedes watching — the event list shows "Attendee" (not "Watching") as the label.
+
+**Why this priority**: Consistency — attending inherently means the event is saved locally, so the bookmark must reflect that. Without this, users would see a confusing unfilled bookmark despite having RSVPed.
+
+**Independent Test**: Can be fully tested by RSVPing to an event, verifying the bookmark icon is filled, and checking that the event list shows "Attendee" as the label.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user has RSVPed to an event, **When** they view the event detail page, **Then** the bookmark icon is filled.
+2. **Given** a user has RSVPed to an event, **When** they view the event list, **Then** the event shows "Attendee" as its label (not "Watching").
+
+---
+
+### User Story 4 - RSVP cancellation preserves watch status (Priority: P2)
+
+A user who RSVPed to an event cancels their attendance. The event remains in localStorage (existing behavior). The bookmark icon stays filled. The event list label changes from "Attendee" to "Watching".
+
+**Why this priority**: This ensures a smooth transition from attending to watching. Without it, users who cancel would see an event in their list with no label and an ambiguous bookmark state.
+
+**Independent Test**: Can be fully tested by RSVPing, cancelling the RSVP, then verifying the bookmark stays filled and the event list shows "Watching".
+
+**Acceptance Scenarios**:
+
+1. **Given** a user has RSVPed and then cancelled their RSVP, **When** they view the event detail page, **Then** the bookmark icon remains filled.
+2. **Given** a user has RSVPed and then cancelled their RSVP, **When** they view the event list, **Then** the event shows "Watching" as its label.
+3. **Given** a user cancelled their RSVP and the bookmark is filled, **When** they tap the bookmark icon, **Then** the icon becomes unfilled and the event is removed from localStorage.
+
+---
+
+### User Story 5 - Bookmark icon is non-interactive for attendees and organizers (Priority: P2)
+
+When a user is an attendee or organizer, the bookmark icon is filled but not clickable (no pointer cursor, no hover effect). Tapping it triggers a short shake animation on the relevant fixed action button at the bottom of the screen (the "You're attending" bar for attendees, the "Cancel event" button for organizers) to signal that the user must act there first.
+
+**Why this priority**: Prevents confusion — removing a saved event while attending or organizing must go through the proper flow (cancel RSVP or cancel event), not through the bookmark.
+
+**Independent Test**: Can be fully tested by RSVPing to an event, tapping the bookmark icon, and verifying nothing happens except the bottom bar shaking briefly.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user is an attendee, **When** they tap the bookmark icon, **Then** nothing changes, and the "You're attending" bar shakes briefly.
+2. **Given** a user is an organizer, **When** they tap the bookmark icon, **Then** nothing changes, and the "Cancel event" button shakes briefly.
+3. **Given** a user is an attendee or organizer, **When** they hover/focus the bookmark icon, **Then** no pointer cursor or interactive hover style is shown.
+
+---
+
+### User Story 6 - Un-watch from event list (Priority: P2)
+
+A watcher removes an event from the event list using the existing swipe-to-delete gesture. Unlike attendees (who see a confirmation dialog warning about RSVP cancellation), watchers see no confirmation dialog — the event is removed immediately.
+
+**Why this priority**: Watching is a low-commitment action, so removing a watched event should be frictionless.
+
+**Independent Test**: Can be fully tested by watching an event, going to the event list, swiping to delete, and verifying the event is removed without a confirmation dialog.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user is watching an event (no RSVP), **When** they swipe to delete it from the event list, **Then** the event is removed immediately without a confirmation dialog.
+2. **Given** a user is attending an event, **When** they swipe to delete it from the event list, **Then** a confirmation dialog appears warning about RSVP cancellation (existing behavior, unchanged).
+
+---
+
+### User Story 7 - Watcher upgrades to attendee (Priority: P2)
+
+A user who is watching an event decides to attend. They tap the "I'm attending" CTA button and complete the RSVP flow as usual. The bookmark icon remains filled. The event list label changes from "Watching" to "Attendee".
+
+**Why this priority**: Natural flow from browsing to commitment. The watch-to-attend transition must be seamless.
+
+**Independent Test**: Can be fully tested by watching an event, then RSVPing, and verifying the bookmark stays filled and the label updates.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user is watching an event, **When** they complete the RSVP flow, **Then** the bookmark icon remains filled.
+2. **Given** a user was watching and then RSVPed, **When** they view the event list, **Then** the event shows "Attendee" as its label (not "Watching").
+
+---
+
+### Edge Cases
+
+- What happens when a user opens an event that has been cancelled — can they still watch it? **Yes, watching is purely local and independent of event status.**
+- What happens when a user watches an event that has expired? **Same behavior — expired events can be watched. They will appear in the "Past" section of the event list.**
+- What happens when a user clears their browser localStorage? **All watched (and attended) events are lost. This is expected behavior for client-side-only storage.**
+- What happens if the user visits the event page on a different device? **The watch status is device-specific. The bookmark appears unfilled on the new device.**
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: The system MUST display a bookmark icon to the left of the event title on the event detail page, vertically centered with the title text.
+- **FR-002**: The bookmark icon MUST appear as an unfilled outline when the event is not saved in localStorage.
+- **FR-003**: The bookmark icon MUST appear as a filled icon when the event is saved in localStorage (regardless of whether the user is watching, attending, or organizing).
+- **FR-004**: Tapping the unfilled bookmark icon MUST save the event to localStorage (eventToken, title, dateTime) and fill the icon.
+- **FR-005**: Tapping the filled bookmark icon MUST remove the event from localStorage and revert the icon to unfilled — but only when the user is a watcher (no RSVP, no organizer token).
+- **FR-006**: The bookmark icon MUST NOT be interactive (no pointer cursor, no hover effect) when the user is an attendee or organizer.
+- **FR-007**: Tapping the bookmark icon as an attendee MUST trigger a brief shake animation on the fixed "You're attending" bar at the bottom.
+- **FR-008**: Tapping the bookmark icon as an organizer MUST trigger a brief shake animation on the fixed "Cancel event" button at the bottom.
+- **FR-009**: The event list MUST display a "Watching" label on events that are in localStorage but have no rsvpToken and no organizerToken.
+- **FR-010**: The "Watching" label MUST have lower precedence than "Attendee" and "Organizer" labels.
+- **FR-011**: Deleting a watched event (no RSVP) from the event list MUST NOT show a confirmation dialog — the event is removed immediately.
+- **FR-012**: Deleting an attended event from the event list MUST continue to show the existing confirmation dialog with the RSVP cancellation warning.
+- **FR-013**: The watch feature MUST be entirely client-side — no server requests are made when watching or un-watching.
+- **FR-014**: When an attendee cancels their RSVP, the event MUST remain in localStorage and the bookmark icon MUST remain filled. The event list label MUST change from "Attendee" to "Watching".
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Users can watch an event in a single tap from the detail page.
+- **SC-002**: Watched events appear in the event list with a "Watching" label immediately upon returning to the list.
+- **SC-003**: Un-watching an event from the detail page takes a single tap and immediately updates the icon.
+- **SC-004**: Deleting a watched event from the event list completes instantly with no confirmation step.
+- **SC-005**: The bookmark icon correctly reflects the stored state on every page load (filled if saved, unfilled if not).
+- **SC-006**: The transition from watching to attending (and back via RSVP cancellation) updates both the bookmark icon and the event list label without requiring a page reload.

specs/017-watch-event/tasks.md

@@ -0,0 +1,235 @@
+# Tasks: Watch Event
+
+**Input**: Design documents from `/specs/017-watch-event/`
+**Prerequisites**: plan.md, spec.md, research.md, data-model.md, quickstart.md
+
+**Tests**: Included — constitution mandates TDD (Red → Green → Refactor).
+
+**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies)
+- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3)
+- Include exact file paths in descriptions
+
+---
+
+## Phase 1: Foundational (Composable & Data Layer)
+
+**Purpose**: Extend `useEventStorage` with watch capabilities and update role detection across list components. These changes are required by all user stories.
+
+**⚠️ CRITICAL**: No user story work can begin until this phase is complete.
+
+### Tests
+
+- [x] T001 [P] Unit tests for `saveWatch()` and `isStored()` methods in `frontend/src/composables/__tests__/useEventStorage.spec.ts` — test saving a watch-only event (no rsvpToken, no organizerToken), test `isStored()` returns true for watched/attended/organized events and false for unknown tokens
+- [x] T002 [P] Unit tests for watcher role detection in `frontend/src/components/__tests__/EventList.spec.ts` — test `getRole()` returns `'watcher'` when event has no organizerToken and no rsvpToken
+- [x] T003 [P] Unit tests for watcher badge display in `frontend/src/components/__tests__/EventCard.spec.ts` — test that `eventRole="watcher"` renders badge with text "Watching"
+
+### Implementation
+
+- [x] T004 Add `saveWatch(eventToken, title, dateTime)` and `isStored(eventToken)` methods to `frontend/src/composables/useEventStorage.ts` — `saveWatch` creates a StoredEvent with only eventToken/title/dateTime, `isStored` checks if eventToken exists in storage
+- [x] T005 Update `getRole()` in `frontend/src/components/EventList.vue` to return `'watcher'` as fallback when event has no organizerToken and no rsvpToken (role hierarchy: organizer > attendee > watcher)
+- [x] T006 [P] Extend `eventRole` prop type in `frontend/src/components/EventCard.vue` from `'organizer' | 'attendee'` to `'organizer' | 'attendee' | 'watcher'`, add "Watching" label text and `.event-card__badge--watcher` styling (glass style, matching design system)
+
+**Checkpoint**: Composable supports watch storage, role detection returns 'watcher', event cards display "Watching" badge.
+
+---
+
+## Phase 2: User Story 1 & 2 — Watch / Un-watch from Detail Page (Priority: P1) 🎯 MVP
+
+**Goal**: Add bookmark icon left of event title on detail page. Unfilled = not stored, filled = stored. Tapping toggles watch state for non-attendee/non-organizer users.
+
+**Independent Test**: Open an event detail page, tap bookmark to watch (icon fills, event appears in list with "Watching" label), tap again to un-watch (icon unfills, event disappears from list).
+
+### Tests
+
+- [x] T007 Unit tests for bookmark icon in `frontend/src/views/__tests__/EventDetailView.spec.ts` — test icon renders unfilled when event not in storage, test icon renders filled when event is in storage, test tapping unfilled icon calls `saveWatch()`, test tapping filled icon calls `removeEvent()` when user is watcher
+- [x] T008 E2E test for US1 (watch) in `frontend/e2e/watch-event.spec.ts` — visit event detail page, verify bookmark is unfilled, tap bookmark, verify it fills, navigate to event list, verify event appears with "Watching" label
+- [x] T009 E2E test for US2 (un-watch) in `frontend/e2e/watch-event.spec.ts` — watch an event, tap filled bookmark, verify it unfills, navigate to event list, verify event is gone
+
+### Implementation
+
+- [x] T010 [US1] [US2] Add bookmark icon to `frontend/src/views/EventDetailView.vue` — wrap title in flex container (`display: flex; align-items: center; gap: var(--spacing-sm)`), add bookmark button to the left of `<h1>`, icon is unfilled outline when `!isStored(eventToken)` and filled when `isStored(eventToken)`. Tapping calls `saveWatch()` or `removeEvent()` based on current state. Use semantic `<button>` with `aria-label` ("Watch this event" / "Stop watching this event"). Include keyboard support (Enter/Space).
+
+**Checkpoint**: Users can watch and un-watch events from the detail page. Watched events appear in the event list with "Watching" label.
+
+---
+
+## Phase 3: User Story 3 — Bookmark Reflects Attending Status (Priority: P1)
+
+**Goal**: Bookmark icon appears filled when user has RSVPed (attending = automatically watched). Event list shows "Attendee" label, not "Watching".
+
+**Independent Test**: RSVP to an event, verify bookmark is filled on detail page, verify event list shows "Attendee" label.
+
+### Tests
+
+- [x] T011 Unit test in `frontend/src/views/__tests__/EventDetailView.spec.ts` — test bookmark icon is filled when event has rsvpToken in storage
+- [x] T012 E2E test for US3 in `frontend/e2e/watch-event.spec.ts` — RSVP to event, verify bookmark is filled, navigate to list, verify "Attendee" label (not "Watching")
+
+### Implementation
+
+- [x] T013 [US3] Verify bookmark icon state in `frontend/src/views/EventDetailView.vue` correctly uses `isStored(eventToken)` which returns true for RSVPed events (since `saveRsvp()` already stores the event). No code change expected — this should work from T010 implementation. If not, adjust `isStored()` logic.
+
+**Checkpoint**: Attending users see filled bookmark. Label priority (Attendee > Watching) works correctly.
+
+---
+
+## Phase 4: User Story 4 — RSVP Cancellation Preserves Watch Status (Priority: P2)
+
+**Goal**: After cancelling RSVP, event stays in localStorage, bookmark stays filled, list label changes from "Attendee" to "Watching".
+
+**Independent Test**: RSVP, cancel RSVP, verify bookmark stays filled and list shows "Watching". Then un-watch via bookmark.
+
+### Tests
+
+- [x] T014 Unit test in `frontend/src/views/__tests__/EventDetailView.spec.ts` — test bookmark stays filled after `removeRsvp()` is called (event still in storage)
+- [x] T015 E2E test for US4 in `frontend/e2e/watch-event.spec.ts` — RSVP, cancel attendance, verify bookmark filled, verify list label is "Watching", tap bookmark to un-watch, verify unfilled
+
+### Implementation
+
+- [x] T016 [US4] Verify existing `removeRsvp()` behavior in `frontend/src/composables/useEventStorage.ts` preserves event in storage. No code change expected — `removeRsvp()` already only deletes rsvpToken/rsvpName. The `getRole()` update from T005 will automatically label these as "watcher". If behavior differs, adjust.
+
+**Checkpoint**: RSVP cancel → watch transition works seamlessly.
+
+---
+
+## Phase 5: User Story 5 — Non-Interactive Bookmark for Attendees & Organizers (Priority: P2)
+
+**Goal**: Bookmark icon is visually filled but non-clickable for attendees and organizers. Tapping triggers a shake animation on the relevant fixed bottom button.
+
+**Independent Test**: RSVP to event, tap bookmark, verify nothing changes and "You're attending" bar shakes. Same test for organizer with "Cancel event" button.
+
+### Tests
+
+- [x] T017 Unit test in `frontend/src/views/__tests__/EventDetailView.spec.ts` — test bookmark has no pointer cursor when user is attendee, test tapping bookmark as attendee does not call `removeEvent()`, test shake class is applied to RsvpBar ref
+- [x] T018 E2E test for US5 in `frontend/e2e/watch-event.spec.ts` — RSVP to event, tap bookmark, verify bookmark unchanged, verify attending bar has shake animation class. Test organizer: open as organizer, tap bookmark, verify cancel-event button shakes.
+
+### Implementation
+
+- [x] T019 [US5] Add shake animation CSS keyframes in `frontend/src/views/EventDetailView.vue` — `@keyframes shake` with short horizontal oscillation (~300ms). Add `.detail__shake` class that applies the animation.
+- [x] T020 [US5] Update bookmark icon behavior in `frontend/src/views/EventDetailView.vue` — when user is attendee or organizer: remove pointer cursor, remove hover effects, on tap apply shake class to the RsvpBar (attendee) or cancel-event button (organizer) via template ref. Use `setTimeout` to remove shake class after animation completes.
+
+**Checkpoint**: Attendees and organizers cannot un-watch via bookmark. Clear visual feedback via shake.
+
+---
+
+## Phase 6: User Story 6 — Un-watch from Event List (Priority: P2)
+
+**Goal**: Swiping to delete a watched event removes it immediately without a confirmation dialog.
+
+**Independent Test**: Watch an event, go to event list, swipe to delete, verify event removed instantly (no dialog).
+
+### Tests
+
+- [x] T021 Unit test in `frontend/src/components/__tests__/EventList.spec.ts` — test that deleting a watcher event (no rsvpToken) calls `removeEvent()` directly without showing ConfirmDialog
+- [x] T022 E2E test for US6 in `frontend/e2e/watch-event.spec.ts` — watch event, navigate to list, swipe to delete, verify no confirmation dialog appears, verify event removed
+
+### Implementation
+
+- [x] T023 [US6] Update delete flow in `frontend/src/components/EventList.vue` — when event has no rsvpToken and no organizerToken (watcher role), skip `showConfirmDialog` and call `removeEvent()` directly. Keep existing confirmation for attendees.
+
+**Checkpoint**: Watcher deletion is frictionless. Attendee deletion unchanged.
+
+---
+
+## Phase 7: User Story 7 — Watcher Upgrades to Attendee (Priority: P2)
+
+**Goal**: A watcher who RSVPs sees bookmark stay filled and list label change from "Watching" to "Attendee".
+
+**Independent Test**: Watch event, RSVP, verify bookmark stays filled, verify list shows "Attendee".
+
+### Tests
+
+- [x] T024 E2E test for US7 in `frontend/e2e/watch-event.spec.ts` — watch event (verify "Watching" in list), RSVP (verify bookmark stays filled), navigate to list (verify "Attendee" label)
+
+### Implementation
+
+- [x] T025 [US7] Verify watch-to-attend transition in `frontend/src/views/EventDetailView.vue` — existing `saveRsvp()` call updates the StoredEvent with rsvpToken/rsvpName. The `getRole()` update from T005 gives "attendee" precedence over "watcher". No code change expected — verify via E2E test.
+
+**Checkpoint**: Watch → attend transition is seamless.
+
+---
+
+## Phase 8: Polish & Cross-Cutting Concerns
+
+**Purpose**: Accessibility, visual refinement, and final validation
+
+- [x] T026 Accessibility audit of bookmark icon in `frontend/src/views/EventDetailView.vue` — verify ARIA labels update reactively ("Watch this event" ↔ "Stop watching this event"), verify keyboard navigation (Tab focus, Enter/Space activation), verify WCAG AA contrast for icon in both states
+- [x] T027 Visual consistency check — verify "Watching" badge styling is consistent with existing "Organizer" and "Attendee" badges in `frontend/src/components/EventCard.vue`, follows design system tokens
+- [x] T028 Run full E2E suite `frontend/e2e/watch-event.spec.ts` to verify all 7 user stories pass together
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Foundational (Phase 1)**: No dependencies — can start immediately
+- **US1/US2 (Phase 2)**: Depends on Phase 1 — BLOCKS all other user stories
+- **US3 (Phase 3)**: Depends on Phase 2 (bookmark icon must exist)
+- **US4 (Phase 4)**: Depends on Phase 2 (bookmark icon must exist)
+- **US5 (Phase 5)**: Depends on Phase 2 (bookmark icon must exist)
+- **US6 (Phase 6)**: Depends on Phase 1 (getRole must return 'watcher')
+- **US7 (Phase 7)**: Depends on Phase 2 (bookmark icon must exist)
+- **Polish (Phase 8)**: Depends on all phases complete
+
+### User Story Dependencies
+
+- **US1/US2 (P1)**: Core MVP — can start after Foundational
+- **US3 (P1)**: Can start after US1/US2
+- **US4 (P2)**: Can start after US1/US2 — independent of US3
+- **US5 (P2)**: Can start after US1/US2 — independent of US3/US4
+- **US6 (P2)**: Can start after Foundational — independent of all other stories
+- **US7 (P2)**: Can start after US1/US2 — independent of US3-US6
+
+### Parallel Opportunities
+
+- **Phase 1**: T001, T002, T003 can run in parallel (different test files)
+- **Phase 1**: T005 and T006 can run in parallel (different component files)
+- **After Phase 2**: US3, US4, US5, US7 can run in parallel (independent stories)
+- **US6**: Can run in parallel with Phase 2 (only depends on Phase 1)
+
+---
+
+## Parallel Example: Phase 1
+
+```text
+# All unit tests in parallel:
+T001: "Unit tests for saveWatch/isStored in useEventStorage.spec.ts"
+T002: "Unit tests for watcher role in EventList.spec.ts"
+T003: "Unit tests for watcher badge in EventCard.spec.ts"
+
+# Implementation in parallel (after tests):
+T005: "Update getRole() in EventList.vue"
+T006: "Extend eventRole in EventCard.vue"
+# T004 (useEventStorage) should go first — T005/T006 depend on its types
+```
+
+---
+
+## Implementation Strategy
+
+### MVP First (US1 + US2 Only)
+
+1. Complete Phase 1: Foundational (composable + card + list)
+2. Complete Phase 2: US1/US2 (bookmark icon toggle)
+3. **STOP and VALIDATE**: Watch/un-watch works, "Watching" label appears
+4. This alone delivers the core value
+
+### Incremental Delivery
+
+1. Phase 1 → Foundational ready
+2. Phase 2 → US1/US2 → Watch/un-watch from detail page (MVP!)
+3. Phase 3 → US3 → Bookmark reflects attending (consistency)
+4. Phase 4-7 → US4-US7 → Edge cases and transitions
+5. Phase 8 → Polish → Accessibility and visual refinement
+
+---
+
+## Notes
+
+- Most "implementation" in US3, US4, US7 is verification — the foundational changes in Phase 1 and the bookmark icon in Phase 2 handle the logic. These stories primarily need E2E tests to confirm correct behavior.
+- No backend changes. No new files except `frontend/e2e/watch-event.spec.ts`.
+- Total: 28 tasks across 8 phases.