Merge pull request 'Update dependency @vitest/eslint-plugin to v1.6.11' (#34) from renovate/vitest-eslint-plugin-1.x-lockfile into master

Merge pull request 'Update dependency @vitest/eslint-plugin to v1.6.11' (#34)

.specify/memory/research/modern-ui-effects.md

@@ -0,0 +1,37 @@
+# Modern UI Effects Research (2025-2026)
+
+## Liquid Glass (Apple WWDC 2025)
+Evolved glassmorphism with directional lighting. Three-layer approach: highlight, shadow, illumination.
+- `backdrop-filter: blur(20px) saturate(1.5)` — higher saturation than basic glass
+- `inset 0 1px 0 rgba(255,255,255,0.15)` — top highlight (light direction)
+- `inset 0 -1px 0 rgba(0,0,0,0.1)` — bottom shadow
+- Outer drop shadow for depth: `0 8px 32px rgba(0,0,0,0.3)`
+- Advanced: SVG `feTurbulence` + `feSpecularLighting` for refraction (Chromium only)
+- Browser support: `backdrop-filter` ~88%, Firefox since v103
+
+## Aurora / Gradient Mesh Backgrounds
+Stacked animated radial gradients simulating northern lights. Pairs well with glass cards on dark backgrounds.
+- Multiple `radial-gradient(ellipse ...)` layers with partial opacity
+- Animated via `background-position` shift (GPU-friendly)
+- `@property` rule enables direct gradient color animation (broad support since 2024)
+- Best for ambient background movement, not for content areas
+
+## Animated Glow Borders
+Rotating `conic-gradient` borders with blur halo. Striking on dark backgrounds.
+- Outer wrapper with `conic-gradient(from var(--angle), color1, color2, color3, color1)`
+- `::before` pseudo with `filter: blur(12px)` and `opacity: 0.5` for glow halo
+- `@property --angle` trick to animate custom property inside `conic-gradient`
+- Use sparingly — best for single highlight elements (FAB, CTA), not all cards
+
+## Modern Neumorphism (2025-2026 revision)
+Subtler than the original trend. Higher contrast, less extreme extrusion, combined with accent colors.
+- Light and dark shadow pair: `6px 6px 12px rgba(0,0,0,0.5)` + `-6px -6px 12px rgba(60,50,80,0.15)`
+- `border: 1px solid rgba(255,255,255,0.05)` for definition
+- Works on dark backgrounds with slightly lighter "uplift" shadow direction
+- Better suited for interactive elements (buttons, toggles) than content cards
+
+## Sources
+- Apple Liquid Glass CSS: dev.to/gruszdev, dev.to/kevinbism, css-tricks.com, kube.io
+- Aurora: dev.to/oobleck, daltonwalsh.com, github.com/mattnewdavid
+- Glow borders: frontendmasters.com (Kevin Powell), docode.co.in
+- Trends overview: medium.com/design-bootcamp, index.dev, bighuman.com

CLAUDE.md

@@ -55,6 +55,8 @@ The following skills are available and should be used for their respective purpo
 - 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

README.md

@@ -1,6 +1,25 @@
-# fete
+<p align="center">
+  <img src="frontend/public/og-image.png" alt="fete" width="100%" />
+</p>
 
-A privacy-focused, self-hostable web app for event announcements and RSVPs. An alternative to Facebook Events or Telegram groups — reduced to the essentials.
+<p align="center">
+  <strong>Privacy-focused, self-hostable event announcements and RSVPs.</strong><br>
+  An alternative to Facebook Events or Telegram groups — reduced to the essentials.
+</p>
+
+<p align="center">
+  <img src="docs/screenshots/01-create-event.png" alt="Create Event" width="230" />
+  &nbsp;&nbsp;&nbsp;
+  <img src="docs/screenshots/02-event-detail.png" alt="Event Detail" width="230" />
+  &nbsp;&nbsp;&nbsp;
+  <img src="docs/screenshots/03-rsvp.png" alt="RSVP" width="230" />
+</p>
+
+<p align="center">
+  <sub>Create events &middot; Share with guests &middot; Collect RSVPs</sub>
+</p>
+
+---
 
 ## What it does
 

backend/.mvn/wrapper/maven-wrapper.properties

@@ -1,3 +1,3 @@
 wrapperVersion=3.3.4
 distributionType=only-script
-distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.13/apache-maven-3.9.13-bin.zip
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.14/apache-maven-3.9.14-bin.zip

backend/spotbugs-exclude.xml

@@ -7,4 +7,8 @@
     <Match>
         <Package name="de.fete.adapter.in.web.model"/>
     </Match>
+    <!-- Constructor-injected Spring beans storing interfaces/proxies are not a real exposure risk -->
+    <Match>
+        <Bug pattern="EI_EXPOSE_REP2"/>
+    </Match>
 </FindBugsFilter>

backend/src/main/java/de/fete/FeteApplication.java

@@ -2,9 +2,11 @@ package de.fete;
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.scheduling.annotation.EnableScheduling;
 
 /** Spring Boot entry point for the fete application. */
 @SpringBootApplication
+@EnableScheduling
 public class FeteApplication {
 
   /** Starts the application. */

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

@@ -15,14 +15,14 @@ import de.fete.domain.model.Event;
 import de.fete.domain.model.EventToken;
 import de.fete.domain.model.OrganizerToken;
 import de.fete.domain.model.Rsvp;
+import de.fete.domain.model.RsvpToken;
+import de.fete.domain.port.in.CancelRsvpUseCase;
 import de.fete.domain.port.in.CountAttendeesByEventUseCase;
 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 java.time.Clock;
 import java.time.DateTimeException;
-import java.time.LocalDate;
 import java.time.ZoneId;
 import java.util.List;
 import java.util.UUID;
@@ -37,24 +37,24 @@ public class EventController implements EventsApi {
   private final CreateEventUseCase createEventUseCase;
   private final GetEventUseCase getEventUseCase;
   private final CreateRsvpUseCase createRsvpUseCase;
+  private final CancelRsvpUseCase cancelRsvpUseCase;
   private final CountAttendeesByEventUseCase countAttendeesByEventUseCase;
   private final GetAttendeesUseCase getAttendeesUseCase;
-  private final Clock clock;
 
-  /** Creates a new controller with the given use cases and clock. */
+  /** Creates a new controller with the given use cases. */
   public EventController(
       CreateEventUseCase createEventUseCase,
       GetEventUseCase getEventUseCase,
       CreateRsvpUseCase createRsvpUseCase,
+      CancelRsvpUseCase cancelRsvpUseCase,
       CountAttendeesByEventUseCase countAttendeesByEventUseCase,
-      GetAttendeesUseCase getAttendeesUseCase,
-      Clock clock) {
+      GetAttendeesUseCase getAttendeesUseCase) {
     this.createEventUseCase = createEventUseCase;
     this.getEventUseCase = getEventUseCase;
     this.createRsvpUseCase = createRsvpUseCase;
+    this.cancelRsvpUseCase = cancelRsvpUseCase;
     this.countAttendeesByEventUseCase = countAttendeesByEventUseCase;
     this.getAttendeesUseCase = getAttendeesUseCase;
-    this.clock = clock;
   }
 
   @Override
@@ -67,8 +67,7 @@ public class EventController implements EventsApi {
         request.getDescription(),
         request.getDateTime(),
         zoneId,
-        request.getLocation(),
-        request.getExpiryDate()
+        request.getLocation()
     );
 
     Event event = createEventUseCase.createEvent(command);
@@ -79,7 +78,6 @@ public class EventController implements EventsApi {
     response.setTitle(event.getTitle());
     response.setDateTime(event.getDateTime());
     response.setTimezone(event.getTimezone().getId());
-    response.setExpiryDate(event.getExpiryDate());
 
     return ResponseEntity.status(HttpStatus.CREATED).body(response);
   }
@@ -99,8 +97,6 @@ public class EventController implements EventsApi {
     response.setLocation(event.getLocation());
     response.setAttendeeCount(
         (int) countAttendeesByEventUseCase.countByEvent(eventToken));
-    response.setExpired(
-        event.getExpiryDate().isBefore(LocalDate.now(clock)));
 
     return ResponseEntity.ok(response);
   }
@@ -137,6 +133,12 @@ public class EventController implements EventsApi {
     return ResponseEntity.status(HttpStatus.CREATED).body(response);
   }
 
+  @Override
+  public ResponseEntity<Void> cancelRsvp(UUID token, UUID rsvpToken) {
+    cancelRsvpUseCase.cancelRsvp(new EventToken(token), new RsvpToken(rsvpToken));
+    return ResponseEntity.noContent().build();
+  }
+
   private static ZoneId parseTimezone(String timezone) {
     try {
       return ZoneId.of(timezone);

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

@@ -0,0 +1,188 @@
+package de.fete.adapter.in.web;
+
+import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.port.in.GetEventUseCase;
+import jakarta.annotation.PostConstruct;
+import jakarta.servlet.http.HttpServletRequest;
+import java.io.IOException;
+import java.nio.charset.StandardCharsets;
+import java.time.ZonedDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.LinkedHashMap;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Optional;
+import java.util.UUID;
+import org.springframework.core.io.ClassPathResource;
+import org.springframework.http.MediaType;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.servlet.support.ServletUriComponentsBuilder;
+
+/** Serves the SPA index.html with injected Open Graph and Twitter Card meta-tags. */
+@Controller
+public class SpaController {
+
+  private static final String PLACEHOLDER = "<!-- OG_META_TAGS -->";
+  private static final int MAX_TITLE_LENGTH = 70;
+  private static final int MAX_DESCRIPTION_LENGTH = 200;
+  private static final String GENERIC_TITLE = "fete";
+  private static final String GENERIC_DESCRIPTION =
+      "Privacy-focused event planning. Create and share events without accounts.";
+  private static final DateTimeFormatter DATE_FORMAT =
+      DateTimeFormatter.ofPattern("EEEE, MMMM d, yyyy 'at' h:mm a", Locale.ENGLISH);
+
+  private final GetEventUseCase getEventUseCase;
+  private String htmlTemplate;
+
+  /** Creates a new SpaController. */
+  public SpaController(GetEventUseCase getEventUseCase) {
+    this.getEventUseCase = getEventUseCase;
+  }
+
+  /** Loads and caches the index.html template at startup. */
+  @PostConstruct
+  void loadTemplate() throws IOException {
+    var resource = new ClassPathResource("/static/index.html");
+    if (resource.exists()) {
+      htmlTemplate = resource.getContentAsString(StandardCharsets.UTF_8);
+    }
+  }
+
+  /** Serves SPA HTML with generic meta-tags for non-event routes. */
+  @GetMapping(
+      value = {"/", "/create", "/events"},
+      produces = MediaType.TEXT_HTML_VALUE
+  )
+  @ResponseBody
+  public String serveGenericPage(HttpServletRequest request) {
+    if (htmlTemplate == null) {
+      return "";
+    }
+    String baseUrl = getBaseUrl(request);
+    return htmlTemplate.replace(PLACEHOLDER, renderTags(buildGenericMeta(baseUrl)));
+  }
+
+  /** Serves SPA HTML with event-specific meta-tags. */
+  @GetMapping(
+      value = "/events/{token}",
+      produces = MediaType.TEXT_HTML_VALUE
+  )
+  @ResponseBody
+  public String serveEventPage(@PathVariable String token,
+      HttpServletRequest request) {
+    if (htmlTemplate == null) {
+      return "";
+    }
+    String baseUrl = getBaseUrl(request);
+    Map<String, String> meta = resolveEventMeta(token, baseUrl);
+    return htmlTemplate.replace(PLACEHOLDER, renderTags(meta));
+  }
+
+  // --- Meta-tag composition ---
+
+  private Map<String, String> buildEventMeta(Event event, String baseUrl) {
+    var tags = new LinkedHashMap<String, String>();
+    String title = truncateTitle(event.getTitle());
+    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:type", "website");
+    tags.put("og:site_name", GENERIC_TITLE);
+    tags.put("og:image", baseUrl + "/og-image.png");
+    tags.put("twitter:card", "summary");
+    tags.put("twitter:title", title);
+    tags.put("twitter:description", description);
+    return tags;
+  }
+
+  private Map<String, String> buildGenericMeta(String baseUrl) {
+    var tags = new LinkedHashMap<String, String>();
+    tags.put("og:title", GENERIC_TITLE);
+    tags.put("og:description", GENERIC_DESCRIPTION);
+    tags.put("og:url", baseUrl);
+    tags.put("og:type", "website");
+    tags.put("og:site_name", GENERIC_TITLE);
+    tags.put("og:image", baseUrl + "/og-image.png");
+    tags.put("twitter:card", "summary");
+    tags.put("twitter:title", GENERIC_TITLE);
+    tags.put("twitter:description", GENERIC_DESCRIPTION);
+    return tags;
+  }
+
+  private Map<String, String> resolveEventMeta(String token, String baseUrl) {
+    try {
+      UUID uuid = UUID.fromString(token);
+      Optional<Event> event =
+          getEventUseCase.getByEventToken(new EventToken(uuid));
+      if (event.isPresent()) {
+        return buildEventMeta(event.get(), baseUrl);
+      }
+    } catch (IllegalArgumentException ignored) {
+      // Invalid UUID — fall back to generic
+    }
+    return buildGenericMeta(baseUrl);
+  }
+
+  // --- Description formatting ---
+
+  private String truncateTitle(String title) {
+    if (title.length() <= MAX_TITLE_LENGTH) {
+      return title;
+    }
+    return title.substring(0, MAX_TITLE_LENGTH - 3) + "...";
+  }
+
+  private String formatDescription(Event event) {
+    ZonedDateTime zoned = event.getDateTime().atZoneSameInstant(event.getTimezone());
+    var sb = new StringBuilder();
+    sb.append("📅 ").append(zoned.format(DATE_FORMAT));
+
+    if (event.getLocation() != null && !event.getLocation().isBlank()) {
+      sb.append(" · 📍 ").append(event.getLocation());
+    }
+
+    if (event.getDescription() != null && !event.getDescription().isBlank()) {
+      sb.append(" — ").append(event.getDescription());
+    }
+
+    String result = sb.toString();
+    if (result.length() > MAX_DESCRIPTION_LENGTH) {
+      return result.substring(0, MAX_DESCRIPTION_LENGTH - 3) + "...";
+    }
+    return result;
+  }
+
+  // --- HTML rendering ---
+
+  private String renderTags(Map<String, String> tags) {
+    var sb = new StringBuilder();
+    for (var entry : tags.entrySet()) {
+      String key = entry.getKey();
+      String value = escapeHtml(entry.getValue());
+      String attr = key.startsWith("twitter:") ? "name" : "property";
+      sb.append("<meta ").append(attr).append("=\"").append(key)
+          .append("\" content=\"").append(value).append("\">\n");
+    }
+    return sb.toString().stripTrailing();
+  }
+
+  private String escapeHtml(String input) {
+    return input
+        .replace("&", "&amp;")
+        .replace("\"", "&quot;")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;");
+  }
+
+  private String getBaseUrl(HttpServletRequest request) {
+    return ServletUriComponentsBuilder.fromRequestUri(request)
+        .replacePath("")
+        .build()
+        .toUriString();
+  }
+}

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

@@ -3,10 +3,17 @@ package de.fete.adapter.out.persistence;
 import java.util.Optional;
 import java.util.UUID;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
 
 /** Spring Data JPA repository for event entities. */
 public interface EventJpaRepository extends JpaRepository<EventJpaEntity, Long> {
 
   /** Finds an event by its public event token. */
   Optional<EventJpaEntity> findByEventToken(UUID eventToken);
+
+  /** Deletes all events whose expiry date is before today. Returns the number of deleted rows. */
+  @Modifying
+  @Query(value = "DELETE FROM events WHERE expiry_date < CURRENT_DATE", nativeQuery = true)
+  int deleteExpired();
 }

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

@@ -31,6 +31,11 @@ public class EventPersistenceAdapter implements EventRepository {
     return jpaRepository.findByEventToken(eventToken.value()).map(this::toDomain);
   }
 
+  @Override
+  public int deleteExpired() {
+    return jpaRepository.deleteExpired();
+  }
+
   private EventJpaEntity toEntity(Event event) {
     var entity = new EventJpaEntity();
     entity.setId(event.getId());

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

@@ -14,4 +14,7 @@ public interface RsvpJpaRepository extends JpaRepository<RsvpJpaEntity, Long> {
 
   /** Finds all RSVPs for the given event, ordered by ID ascending. */
   java.util.List<RsvpJpaEntity> findAllByEventIdOrderByIdAsc(Long eventId);
+
+  /** Deletes an RSVP by event ID and RSVP token. Returns count of deleted rows. */
+  long deleteByEventIdAndRsvpToken(Long eventId, UUID rsvpToken);
 }

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

@@ -36,6 +36,11 @@ public class RsvpPersistenceAdapter implements RsvpRepository {
         .toList();
   }
 
+  @Override
+  public boolean deleteByEventIdAndRsvpToken(Long eventId, RsvpToken rsvpToken) {
+    return jpaRepository.deleteByEventIdAndRsvpToken(eventId, rsvpToken.value()) > 0;
+  }
+
   private RsvpJpaEntity toEntity(Rsvp rsvp) {
     var entity = new RsvpJpaEntity();
     entity.setId(rsvp.getId());

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

@@ -17,6 +17,8 @@ import org.springframework.stereotype.Service;
 @Service
 public class EventService implements CreateEventUseCase, GetEventUseCase {
 
+  private static final int EXPIRY_DAYS_AFTER_EVENT = 7;
+
   private final EventRepository eventRepository;
   private final Clock clock;
 
@@ -28,13 +30,7 @@ public class EventService implements CreateEventUseCase, GetEventUseCase {
 
   @Override
   public Event createEvent(CreateEventCommand command) {
-    if (!command.expiryDate().isAfter(LocalDate.now(clock))) {
-      throw new ExpiryDateInPastException(command.expiryDate());
-    }
-
-    if (!command.expiryDate().isAfter(command.dateTime().toLocalDate())) {
-      throw new ExpiryDateBeforeEventException(command.expiryDate(), command.dateTime());
-    }
+    LocalDate expiryDate = command.dateTime().toLocalDate().plusDays(EXPIRY_DAYS_AFTER_EVENT);
 
     var event = new Event();
     event.setEventToken(EventToken.generate());
@@ -44,7 +40,7 @@ public class EventService implements CreateEventUseCase, GetEventUseCase {
     event.setDateTime(command.dateTime());
     event.setTimezone(command.timezone());
     event.setLocation(command.location());
-    event.setExpiryDate(command.expiryDate());
+    event.setExpiryDate(expiryDate);
     event.setCreatedAt(OffsetDateTime.now(clock));
 
     return eventRepository.save(event);

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

@@ -0,0 +1,30 @@
+package de.fete.application.service;
+
+import de.fete.domain.port.out.EventRepository;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.stereotype.Component;
+import org.springframework.transaction.annotation.Transactional;
+
+/** Scheduled job that deletes events whose expiry date is in the past. */
+@Component
+public class ExpiredEventCleanupJob {
+
+  private static final Logger log = LoggerFactory.getLogger(ExpiredEventCleanupJob.class);
+
+  private final EventRepository eventRepository;
+
+  /** Creates a new cleanup job with the given event repository. */
+  public ExpiredEventCleanupJob(EventRepository eventRepository) {
+    this.eventRepository = eventRepository;
+  }
+
+  /** Runs daily at 03:00 and deletes all expired events. */
+  @Scheduled(cron = "0 0 3 * * *")
+  @Transactional
+  public void deleteExpiredEvents() {
+    int deleted = eventRepository.deleteExpired();
+    log.info("Expired event cleanup: deleted {} event(s)", deleted);
+  }
+}

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

@@ -5,11 +5,13 @@ import de.fete.domain.model.EventToken;
 import de.fete.domain.model.OrganizerToken;
 import de.fete.domain.model.Rsvp;
 import de.fete.domain.model.RsvpToken;
+import de.fete.domain.port.in.CancelRsvpUseCase;
 import de.fete.domain.port.in.CountAttendeesByEventUseCase;
 import de.fete.domain.port.in.CreateRsvpUseCase;
 import de.fete.domain.port.in.GetAttendeesUseCase;
 import de.fete.domain.port.out.EventRepository;
 import de.fete.domain.port.out.RsvpRepository;
+import jakarta.transaction.Transactional;
 import java.time.Clock;
 import java.time.LocalDate;
 import java.util.List;
@@ -18,7 +20,8 @@ import org.springframework.stereotype.Service;
 /** Application service implementing RSVP operations. */
 @Service
 public class RsvpService
-    implements CreateRsvpUseCase, CountAttendeesByEventUseCase, GetAttendeesUseCase {
+    implements CreateRsvpUseCase, CancelRsvpUseCase, CountAttendeesByEventUseCase,
+    GetAttendeesUseCase {
 
   private final EventRepository eventRepository;
   private final RsvpRepository rsvpRepository;
@@ -51,6 +54,14 @@ public class RsvpService
     return rsvpRepository.save(rsvp);
   }
 
+  @Override
+  @Transactional
+  public void cancelRsvp(EventToken eventToken, RsvpToken rsvpToken) {
+    eventRepository.findByEventToken(eventToken)
+        .ifPresent(event ->
+            rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken));
+  }
+
   @Override
   public long countByEvent(EventToken eventToken) {
     Event event = eventRepository.findByEventToken(eventToken)

backend/src/main/java/de/fete/config/WebConfig.java

@@ -1,21 +1,17 @@
 package de.fete.config;
 
-import java.io.IOException;
 import java.time.Clock;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
-import org.springframework.core.io.ClassPathResource;
-import org.springframework.core.io.Resource;
 import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
-import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
-import org.springframework.web.servlet.resource.PathResourceResolver;
 
-/** Configures API path prefix and SPA static resource serving. */
+/** Configures API path prefix. Static resources served by default Spring Boot handler. */
 @Configuration
 public class WebConfig implements WebMvcConfigurer {
 
+  /** Provides a system clock bean for time-dependent services. */
   @Bean
   Clock clock() {
     return Clock.systemDefaultZone();
@@ -25,23 +21,4 @@ public class WebConfig implements WebMvcConfigurer {
   public void configurePathMatch(PathMatchConfigurer configurer) {
     configurer.addPathPrefix("/api", c -> c.isAnnotationPresent(RestController.class));
   }
-
-  @Override
-  public void addResourceHandlers(ResourceHandlerRegistry registry) {
-    registry.addResourceHandler("/**")
-        .addResourceLocations("classpath:/static/")
-        .resourceChain(true)
-        .addResolver(new PathResourceResolver() {
-          @Override
-          protected Resource getResource(String resourcePath,
-              Resource location) throws IOException {
-            Resource requested = location.createRelative(resourcePath);
-            if (requested.exists() && requested.isReadable()) {
-              return requested;
-            }
-            Resource index = new ClassPathResource("/static/index.html");
-            return (index.exists() && index.isReadable()) ? index : null;
-          }
-        });
-  }
 }

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

@@ -10,6 +10,5 @@ public record CreateEventCommand(
     String description,
     OffsetDateTime dateTime,
     ZoneId timezone,
-    String location,
-    LocalDate expiryDate
+    String location
 ) {}

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

@@ -0,0 +1,11 @@
+package de.fete.domain.port.in;
+
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.RsvpToken;
+
+/** Inbound port for cancelling an RSVP. */
+public interface CancelRsvpUseCase {
+
+  /** Cancels the RSVP identified by the given tokens. Idempotent — no error if not found. */
+  void cancelRsvp(EventToken eventToken, RsvpToken rsvpToken);
+}

backend/src/main/java/de/fete/domain/port/out/EventRepository.java

@@ -12,4 +12,7 @@ public interface EventRepository {
 
   /** Finds an event by its public event token. */
   Optional<Event> findByEventToken(EventToken eventToken);
+
+  /** Deletes all events whose expiry date is in the past. Returns the number of deleted events. */
+  int deleteExpired();
 }

backend/src/main/java/de/fete/domain/port/out/RsvpRepository.java

@@ -1,6 +1,7 @@
 package de.fete.domain.port.out;
 
 import de.fete.domain.model.Rsvp;
+import de.fete.domain.model.RsvpToken;
 import java.util.List;
 
 /** Outbound port for persisting and querying RSVPs. */
@@ -14,4 +15,7 @@ public interface RsvpRepository {
 
   /** Finds all RSVPs for the given event, ordered by ID ascending. */
   List<Rsvp> findByEventId(Long eventId);
+
+  /** Deletes an RSVP by event ID and RSVP token. Returns true if a record was deleted. */
+  boolean deleteByEventIdAndRsvpToken(Long eventId, RsvpToken rsvpToken);
 }

backend/src/main/resources/application.properties

@@ -7,6 +7,9 @@ spring.jpa.open-in-view=false
 # Liquibase
 spring.liquibase.change-log=classpath:db/changelog/db.changelog-master.xml
 
+# Proxy headers
+server.forward-headers-strategy=framework
+
 # Actuator
 management.endpoints.web.exposure.include=health
 management.endpoint.health.show-details=never

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

@@ -37,6 +37,38 @@ paths:
               schema:
                 $ref: "#/components/schemas/ValidationProblemDetail"
 
+  /events/{token}/rsvps/{rsvpToken}:
+    delete:
+      operationId: cancelRsvp
+      summary: Cancel RSVP
+      description: |
+        Permanently deletes an RSVP identified by the RSVP token.
+        Idempotent: returns 204 whether the RSVP existed or not.
+      tags:
+        - events
+      parameters:
+        - name: token
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: Event token (UUID)
+        - name: rsvpToken
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: RSVP token (UUID) identifying the attendance to cancel
+      responses:
+        "204":
+          description: >
+            RSVP successfully cancelled (or was already cancelled).
+            No response body.
+        "500":
+          description: Internal server error
+
   /events/{token}/rsvps:
     post:
       operationId: createRsvp
@@ -160,7 +192,6 @@ components:
         - title
         - dateTime
         - timezone
-        - expiryDate
       properties:
         title:
           type: string
@@ -181,11 +212,6 @@ components:
         location:
           type: string
           maxLength: 500
-        expiryDate:
-          type: string
-          format: date
-          description: Date after which event data is deleted. Must be in the future.
-          example: "2026-06-15"
 
     CreateEventResponse:
       type: object
@@ -195,7 +221,6 @@ components:
         - title
         - dateTime
         - timezone
-        - expiryDate
       properties:
         eventToken:
           type: string
@@ -218,10 +243,6 @@ components:
           type: string
           description: IANA timezone of the organizer
           example: "Europe/Berlin"
-        expiryDate:
-          type: string
-          format: date
-          example: "2026-06-15"
 
     GetEventResponse:
       type: object
@@ -231,7 +252,6 @@ components:
         - dateTime
         - timezone
         - attendeeCount
-        - expired
       properties:
         eventToken:
           type: string
@@ -264,10 +284,6 @@ components:
           minimum: 0
           description: Number of confirmed attendees (attending=true)
           example: 12
-        expired:
-          type: boolean
-          description: Whether the event's expiry date has passed
-          example: false
 
     CreateRsvpRequest:
       type: object

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

@@ -1,6 +1,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.post;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
@@ -55,8 +56,7 @@ class EventControllerIntegrationTest {
         .description("Come celebrate!")
         .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
         .timezone("Europe/Berlin")
-        .location("Berlin")
-        .expiryDate(LocalDate.of(2026, 6, 16));
+        .location("Berlin");
 
     var result = mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
@@ -67,7 +67,6 @@ class EventControllerIntegrationTest {
         .andExpect(jsonPath("$.title").value("Birthday Party"))
         .andExpect(jsonPath("$.timezone").value("Europe/Berlin"))
         .andExpect(jsonPath("$.dateTime").isNotEmpty())
-        .andExpect(jsonPath("$.expiryDate").isNotEmpty())
         .andReturn();
 
     var response = objectMapper.readValue(
@@ -79,7 +78,7 @@ class EventControllerIntegrationTest {
     assertThat(persisted.getDescription()).isEqualTo("Come celebrate!");
     assertThat(persisted.getTimezone()).isEqualTo("Europe/Berlin");
     assertThat(persisted.getLocation()).isEqualTo("Berlin");
-    assertThat(persisted.getExpiryDate()).isEqualTo(request.getExpiryDate());
+    assertThat(persisted.getExpiryDate()).isEqualTo(LocalDate.of(2026, 6, 22));
     assertThat(persisted.getDateTime().toInstant())
         .isEqualTo(request.getDateTime().toInstant());
     assertThat(persisted.getOrganizerToken()).isNotNull();
@@ -91,8 +90,7 @@ class EventControllerIntegrationTest {
     var request = new CreateEventRequest()
         .title("Minimal Event")
         .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
-        .timezone("UTC")
-        .expiryDate(LocalDate.of(2026, 6, 16));
+        .timezone("UTC");
 
     var result = mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
@@ -119,8 +117,7 @@ class EventControllerIntegrationTest {
 
     var request = new CreateEventRequest()
         .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
-        .timezone("Europe/Berlin")
-        .expiryDate(LocalDate.of(2026, 6, 16));
+        .timezone("Europe/Berlin");
 
     mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
@@ -139,26 +136,6 @@ class EventControllerIntegrationTest {
 
     var request = new CreateEventRequest()
         .title("No Date")
-        .timezone("Europe/Berlin")
-        .expiryDate(LocalDate.of(2026, 6, 16));
-
-    mockMvc.perform(post("/api/events")
-            .contentType(MediaType.APPLICATION_JSON)
-            .content(objectMapper.writeValueAsString(request)))
-        .andExpect(status().isBadRequest())
-        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
-        .andExpect(jsonPath("$.fieldErrors").isArray());
-
-    assertThat(jpaRepository.count()).isEqualTo(countBefore);
-  }
-
-  @Test
-  void createEventMissingExpiryDateReturns400() throws Exception {
-    long countBefore = jpaRepository.count();
-
-    var request = new CreateEventRequest()
-        .title("No Expiry")
-        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
         .timezone("Europe/Berlin");
 
     mockMvc.perform(post("/api/events")
@@ -171,93 +148,12 @@ class EventControllerIntegrationTest {
     assertThat(jpaRepository.count()).isEqualTo(countBefore);
   }
 
-  @Test
-  void createEventExpiryDateInPastReturns400() throws Exception {
-    long countBefore = jpaRepository.count();
-
-    var request = new CreateEventRequest()
-        .title("Past Expiry")
-        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
-        .timezone("Europe/Berlin")
-        .expiryDate(LocalDate.of(2025, 1, 1));
-
-    mockMvc.perform(post("/api/events")
-            .contentType(MediaType.APPLICATION_JSON)
-            .content(objectMapper.writeValueAsString(request)))
-        .andExpect(status().isBadRequest())
-        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
-        .andExpect(jsonPath("$.type").value("urn:problem-type:expiry-date-in-past"));
-
-    assertThat(jpaRepository.count()).isEqualTo(countBefore);
-  }
-
-  @Test
-  void createEventExpiryDateTodayReturns400() throws Exception {
-    long countBefore = jpaRepository.count();
-
-    var request = new CreateEventRequest()
-        .title("Today Expiry")
-        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
-        .timezone("Europe/Berlin")
-        .expiryDate(LocalDate.now());
-
-    mockMvc.perform(post("/api/events")
-            .contentType(MediaType.APPLICATION_JSON)
-            .content(objectMapper.writeValueAsString(request)))
-        .andExpect(status().isBadRequest())
-        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
-        .andExpect(jsonPath("$.type").value("urn:problem-type:expiry-date-in-past"));
-
-    assertThat(jpaRepository.count()).isEqualTo(countBefore);
-  }
-
-  @Test
-  void createEventExpiryDateBeforeEventDateReturns400() throws Exception {
-    long countBefore = jpaRepository.count();
-
-    var request = new CreateEventRequest()
-        .title("Bad Expiry")
-        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
-        .timezone("Europe/Berlin")
-        .expiryDate(LocalDate.of(2026, 6, 10));
-
-    mockMvc.perform(post("/api/events")
-            .contentType(MediaType.APPLICATION_JSON)
-            .content(objectMapper.writeValueAsString(request)))
-        .andExpect(status().isBadRequest())
-        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
-        .andExpect(jsonPath("$.type").value("urn:problem-type:expiry-date-before-event"));
-
-    assertThat(jpaRepository.count()).isEqualTo(countBefore);
-  }
-
-  @Test
-  void createEventExpiryDateSameAsEventDateReturns400() throws Exception {
-    long countBefore = jpaRepository.count();
-
-    var request = new CreateEventRequest()
-        .title("Same Day Expiry")
-        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
-        .timezone("Europe/Berlin")
-        .expiryDate(LocalDate.of(2026, 6, 15));
-
-    mockMvc.perform(post("/api/events")
-            .contentType(MediaType.APPLICATION_JSON)
-            .content(objectMapper.writeValueAsString(request)))
-        .andExpect(status().isBadRequest())
-        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
-        .andExpect(jsonPath("$.type").value("urn:problem-type:expiry-date-before-event"));
-
-    assertThat(jpaRepository.count()).isEqualTo(countBefore);
-  }
-
   @Test
   void errorResponseContentTypeIsProblemJson() throws Exception {
     var request = new CreateEventRequest()
         .title("")
         .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
-        .timezone("Europe/Berlin")
-        .expiryDate(LocalDate.of(2026, 6, 16));
+        .timezone("Europe/Berlin");
 
     mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
@@ -273,8 +169,7 @@ class EventControllerIntegrationTest {
     var request = new CreateEventRequest()
         .title("Bad TZ")
         .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
-        .timezone("Not/A/Zone")
-        .expiryDate(LocalDate.of(2026, 6, 16));
+        .timezone("Not/A/Zone");
 
     mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
@@ -302,7 +197,6 @@ class EventControllerIntegrationTest {
         .andExpect(jsonPath("$.timezone").value("Europe/Berlin"))
         .andExpect(jsonPath("$.location").value("Central Park"))
         .andExpect(jsonPath("$.attendeeCount").value(0))
-        .andExpect(jsonPath("$.expired").value(false))
         .andExpect(jsonPath("$.dateTime").isNotEmpty());
   }
 
@@ -327,18 +221,6 @@ class EventControllerIntegrationTest {
         .andExpect(jsonPath("$.type").value("urn:problem-type:event-not-found"));
   }
 
-  @Test
-  void getExpiredEventReturnsExpiredTrue() throws Exception {
-    EventJpaEntity entity = seedEvent(
-        "Past Event", "It happened", "Europe/Berlin",
-        "Old Venue", LocalDate.now().minusDays(1));
-
-    mockMvc.perform(get("/api/events/" + entity.getEventToken()))
-        .andExpect(status().isOk())
-        .andExpect(jsonPath("$.title").value("Past Event"))
-        .andExpect(jsonPath("$.expired").value(true));
-  }
-
   // --- RSVP tests ---
 
   @Test
@@ -493,6 +375,72 @@ class EventControllerIntegrationTest {
             "application/problem+json"));
   }
 
+  // --- Cancel RSVP tests ---
+
+  @Test
+  void cancelRsvpReturns204AndDeletesRow() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Cancel Event", null, "Europe/Berlin",
+        null, LocalDate.now().plusDays(30));
+    UUID rsvpToken = seedRsvpAndGetToken(event, "Departing Guest");
+
+    long countBefore = rsvpJpaRepository.count();
+
+    mockMvc.perform(delete("/api/events/" + event.getEventToken()
+            + "/rsvps/" + rsvpToken))
+        .andExpect(status().isNoContent());
+
+    assertThat(rsvpJpaRepository.count()).isEqualTo(countBefore - 1);
+    assertThat(rsvpJpaRepository.findByRsvpToken(rsvpToken)).isEmpty();
+  }
+
+  @Test
+  void cancelRsvpReturns204WhenAlreadyDeleted() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Idempotent Event", null, "Europe/Berlin",
+        null, LocalDate.now().plusDays(30));
+
+    mockMvc.perform(delete("/api/events/" + event.getEventToken()
+            + "/rsvps/" + UUID.randomUUID()))
+        .andExpect(status().isNoContent());
+  }
+
+  @Test
+  void cancelRsvpReturns204WhenEventNotFound() throws Exception {
+    mockMvc.perform(delete("/api/events/" + UUID.randomUUID()
+            + "/rsvps/" + UUID.randomUUID()))
+        .andExpect(status().isNoContent());
+  }
+
+  @Test
+  void attendeeCountDecreasesAfterCancelRsvp() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Count Cancel Event", null, "Europe/Berlin",
+        null, LocalDate.now().plusDays(30));
+    UUID rsvpToken = seedRsvpAndGetToken(event, "Leaving Guest");
+    seedRsvp(event, "Staying Guest");
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()))
+        .andExpect(jsonPath("$.attendeeCount").value(2));
+
+    mockMvc.perform(delete("/api/events/" + event.getEventToken()
+            + "/rsvps/" + rsvpToken))
+        .andExpect(status().isNoContent());
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()))
+        .andExpect(jsonPath("$.attendeeCount").value(1));
+  }
+
+  private UUID seedRsvpAndGetToken(EventJpaEntity event, String name) {
+    var rsvp = new RsvpJpaEntity();
+    UUID token = UUID.randomUUID();
+    rsvp.setRsvpToken(token);
+    rsvp.setEventId(event.getId());
+    rsvp.setName(name);
+    rsvpJpaRepository.save(rsvp);
+    return token;
+  }
+
   private void seedRsvp(EventJpaEntity event, String name) {
     var rsvp = new RsvpJpaEntity();
     rsvp.setRsvpToken(UUID.randomUUID());

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

@@ -0,0 +1,281 @@
+package de.fete.adapter.in.web;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import de.fete.TestcontainersConfig;
+import de.fete.adapter.out.persistence.EventJpaEntity;
+import de.fete.adapter.out.persistence.EventJpaRepository;
+import java.time.LocalDate;
+import java.time.OffsetDateTime;
+import java.time.ZoneOffset;
+import java.util.UUID;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.context.annotation.Import;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+
+@SpringBootTest
+@AutoConfigureMockMvc
+@Import(TestcontainersConfig.class)
+class SpaControllerTest {
+
+  @Autowired
+  private MockMvc mockMvc;
+
+  @Autowired
+  private EventJpaRepository eventJpaRepository;
+
+  // --- Phase 2: Base functionality ---
+
+  @Test
+  void rootServesHtml() throws Exception {
+    mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  @Test
+  void rootHtmlDoesNotContainPlaceholder() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).doesNotContain("<!-- OG_META_TAGS -->");
+  }
+
+  @Test
+  void createRouteServesHtml() throws Exception {
+    mockMvc.perform(get("/create").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  @Test
+  void eventsRouteServesHtml() throws Exception {
+    mockMvc.perform(get("/events").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  // --- Phase 4 (US2): Generic OG meta-tags ---
+
+  @Test
+  void rootContainsGenericOgTitle() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("content=\"fete\"");
+  }
+
+  @Test
+  void createRouteContainsGenericOgDescription() throws Exception {
+    String html = mockMvc.perform(get("/create").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:description");
+    assertThat(html).contains("Privacy-focused event planning");
+  }
+
+  @Test
+  void unknownRouteReturns404() throws Exception {
+    mockMvc.perform(get("/unknown/path").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isNotFound());
+  }
+
+  // --- Phase 5 (US3): Twitter Card meta-tags ---
+
+  @Test
+  void eventRouteContainsTwitterCardTags() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Twitter Test", "Testing cards",
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("twitter:card");
+    assertThat(html).contains("twitter:title");
+    assertThat(html).contains("twitter:description");
+  }
+
+  @Test
+  void genericRouteContainsTwitterCardTags() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("twitter:card");
+    assertThat(html).contains("content=\"summary\"");
+  }
+
+  // --- Phase 3 (US1): Event-specific OG meta-tags ---
+
+  @Test
+  void eventRouteContainsEventSpecificOgTitle() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Birthday Party", "Come celebrate!",
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("Birthday Party");
+  }
+
+  @Test
+  void eventRouteContainsOgDescription() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "BBQ", "Bring drinks!",
+        "Europe/Berlin", "Central Park", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:description");
+    assertThat(html).contains("Central Park");
+    assertThat(html).contains("Bring drinks!");
+  }
+
+  @Test
+  void eventRouteContainsOgUrl() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Party", null,
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:url");
+    assertThat(html).contains("/events/" + event.getEventToken());
+  }
+
+  @Test
+  void eventRouteContainsOgImage() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Party", null,
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:image");
+    assertThat(html).contains("/og-image.png");
+  }
+
+  @Test
+  void unknownEventTokenFallsBackToGenericMeta() throws Exception {
+    String html = mockMvc.perform(
+            get("/events/" + UUID.randomUUID()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("content=\"fete\"");
+  }
+
+  // --- HTML escaping ---
+
+  @Test
+  void specialCharactersAreHtmlEscaped() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Tom & Jerry's \"Party\"", "Fun <times> & more",
+        "Europe/Berlin", "O'Brien's Pub", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("Tom &amp; Jerry");
+    assertThat(html).contains("&amp; more");
+    assertThat(html).contains("&lt;times&gt;");
+    assertThat(html).doesNotContain("content=\"Tom & Jerry");
+  }
+
+  // --- Title truncation ---
+
+  @Test
+  void longTitleIsTruncatedTo70Chars() throws Exception {
+    String longTitle = "A".repeat(80);
+    EventJpaEntity event = seedEvent(
+        longTitle, "Desc",
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("A".repeat(67) + "...");
+    assertThat(html).doesNotContain("A".repeat(68));
+  }
+
+  // --- Description formatting ---
+
+  @Test
+  void eventWithoutLocationOmitsPinEmoji() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Online Meetup", "Virtual gathering",
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).doesNotContain("📍");
+  }
+
+  @Test
+  void eventWithoutDescriptionOmitsDash() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Silent Event", null,
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("📅");
+    assertThat(html).contains("Berlin");
+    assertThat(html).doesNotContain(" — ");
+  }
+
+  private EventJpaEntity seedEvent(
+      String title, String description, String timezone,
+      String location, LocalDate expiryDate) {
+    var entity = new EventJpaEntity();
+    entity.setEventToken(UUID.randomUUID());
+    entity.setOrganizerToken(UUID.randomUUID());
+    entity.setTitle(title);
+    entity.setDescription(description);
+    entity.setDateTime(
+        OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+    entity.setTimezone(timezone);
+    entity.setLocation(location);
+    entity.setExpiryDate(expiryDate);
+    entity.setCreatedAt(OffsetDateTime.now());
+    return eventJpaRepository.save(entity);
+  }
+}

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

@@ -0,0 +1,81 @@
+package de.fete.adapter.out.persistence;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import de.fete.TestcontainersConfig;
+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.LocalDate;
+import java.time.OffsetDateTime;
+import java.time.ZoneId;
+import java.time.ZoneOffset;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.context.annotation.Import;
+import org.springframework.transaction.annotation.Transactional;
+
+@SpringBootTest
+@Import(TestcontainersConfig.class)
+@Transactional
+class EventPersistenceAdapterIntegrationTest {
+
+  @Autowired
+  private EventRepository eventRepository;
+
+  @Test
+  void deleteExpiredRemovesExpiredEvents() {
+    Event expired = buildEvent("Expired Party", LocalDate.now().minusDays(1));
+    eventRepository.save(expired);
+
+    int deleted = eventRepository.deleteExpired();
+
+    assertThat(deleted).isGreaterThanOrEqualTo(1);
+  }
+
+  @Test
+  void deleteExpiredKeepsNonExpiredEvents() {
+    Event future = buildEvent("Future Party", LocalDate.now().plusDays(30));
+    Event saved = eventRepository.save(future);
+
+    eventRepository.deleteExpired();
+
+    assertThat(eventRepository.findByEventToken(saved.getEventToken())).isPresent();
+  }
+
+  @Test
+  void deleteExpiredKeepsEventsExpiringToday() {
+    Event today = buildEvent("Today Party", LocalDate.now());
+    Event saved = eventRepository.save(today);
+
+    eventRepository.deleteExpired();
+
+    assertThat(eventRepository.findByEventToken(saved.getEventToken())).isPresent();
+  }
+
+  @Test
+  void deleteExpiredReturnsZeroWhenNoneExpired() {
+    // Only save a future event
+    buildEvent("Future Only", LocalDate.now().plusDays(60));
+
+    int deleted = eventRepository.deleteExpired();
+
+    assertThat(deleted).isGreaterThanOrEqualTo(0);
+  }
+
+  private Event buildEvent(String title, LocalDate expiryDate) {
+    var event = new Event();
+    event.setEventToken(EventToken.generate());
+    event.setOrganizerToken(OrganizerToken.generate());
+    event.setTitle(title);
+    event.setDescription("Test description");
+    event.setDateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+    event.setTimezone(ZoneId.of("Europe/Berlin"));
+    event.setLocation("Test Location");
+    event.setExpiryDate(expiryDate);
+    event.setCreatedAt(OffsetDateTime.now());
+    return event;
+  }
+}

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

@@ -1,7 +1,6 @@
 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.times;
 import static org.mockito.Mockito.verify;
@@ -53,8 +52,7 @@ class EventServiceTest {
         "Come celebrate!",
         TODAY.plusDays(90).atStartOfDay(ZONE).toOffsetDateTime(),
         ZONE,
-        "Berlin",
-        TODAY.plusDays(120)
+        "Berlin"
     );
 
     Event result = eventService.createEvent(command);
@@ -75,8 +73,7 @@ class EventServiceTest {
 
     var command = new CreateEventCommand(
         "Test", null,
-        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(), ZONE, null,
-        TODAY.plusDays(11)
+        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(), ZONE, null
     );
 
     eventService.createEvent(command);
@@ -87,86 +84,19 @@ class EventServiceTest {
   }
 
   @Test
-  void expiryDateTodayThrowsException() {
-    var command = new CreateEventCommand(
-        "Test", null,
-        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(), ZONE, null,
-        TODAY
-    );
-
-    assertThatThrownBy(() -> eventService.createEvent(command))
-        .isInstanceOf(ExpiryDateInPastException.class);
-  }
-
-  @Test
-  void expiryDateInPastThrowsException() {
-    var command = new CreateEventCommand(
-        "Test", null,
-        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(), ZONE, null,
-        TODAY.minusDays(5)
-    );
-
-    assertThatThrownBy(() -> eventService.createEvent(command))
-        .isInstanceOf(ExpiryDateInPastException.class);
-  }
-
-  @Test
-  void expiryDateTomorrowSucceeds() {
+  void expiryDateIsEventDatePlusSevenDays() {
     when(eventRepository.save(any(Event.class)))
         .thenAnswer(invocation -> invocation.getArgument(0));
 
+    var eventDate = TODAY.plusDays(10);
     var command = new CreateEventCommand(
         "Test", null,
-        TODAY.plusDays(1).atStartOfDay(ZONE).toOffsetDateTime(), ZONE, null,
-        TODAY.plusDays(2)
+        eventDate.atStartOfDay(ZONE).toOffsetDateTime(), ZONE, null
     );
 
     Event result = eventService.createEvent(command);
 
-    assertThat(result.getExpiryDate()).isEqualTo(TODAY.plusDays(2));
-  }
-
-  @Test
-  void expiryDateSameAsEventDateThrowsException() {
-    var command = new CreateEventCommand(
-        "Test", null,
-        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(),
-        ZONE, null,
-        TODAY.plusDays(10)
-    );
-
-    assertThatThrownBy(() -> eventService.createEvent(command))
-        .isInstanceOf(ExpiryDateBeforeEventException.class);
-  }
-
-  @Test
-  void expiryDateBeforeEventDateThrowsException() {
-    var command = new CreateEventCommand(
-        "Test", null,
-        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(),
-        ZONE, null,
-        TODAY.plusDays(5)
-    );
-
-    assertThatThrownBy(() -> eventService.createEvent(command))
-        .isInstanceOf(ExpiryDateBeforeEventException.class);
-  }
-
-  @Test
-  void expiryDateDayAfterEventDateSucceeds() {
-    when(eventRepository.save(any(Event.class)))
-        .thenAnswer(invocation -> invocation.getArgument(0));
-
-    var command = new CreateEventCommand(
-        "Test", null,
-        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(),
-        ZONE, null,
-        TODAY.plusDays(11)
-    );
-
-    Event result = eventService.createEvent(command);
-
-    assertThat(result.getExpiryDate()).isEqualTo(TODAY.plusDays(11));
+    assertThat(result.getExpiryDate()).isEqualTo(eventDate.plusDays(7));
   }
 
   // --- GetEventUseCase tests (T004) ---
@@ -207,8 +137,7 @@ class EventServiceTest {
     var command = new CreateEventCommand(
         "Test", null,
         TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(),
-        ZoneId.of("America/New_York"), null,
-        TODAY.plusDays(11)
+        ZoneId.of("America/New_York"), null
     );
 
     Event result = eventService.createEvent(command);

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

@@ -191,6 +191,41 @@ class RsvpServiceTest {
     return rsvp;
   }
 
+  @Test
+  void cancelRsvpDeletesWhenEventAndRsvpExist() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    RsvpToken rsvpToken = RsvpToken.generate();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+    when(rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken)).thenReturn(true);
+
+    rsvpService.cancelRsvp(token, rsvpToken);
+
+    verify(rsvpRepository).deleteByEventIdAndRsvpToken(event.getId(), rsvpToken);
+  }
+
+  @Test
+  void cancelRsvpSucceedsWhenRsvpNotFound() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    RsvpToken rsvpToken = RsvpToken.generate();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+    when(rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken)).thenReturn(false);
+
+    rsvpService.cancelRsvp(token, rsvpToken);
+
+    verify(rsvpRepository).deleteByEventIdAndRsvpToken(event.getId(), rsvpToken);
+  }
+
+  @Test
+  void cancelRsvpSucceedsWhenEventNotFound() {
+    EventToken token = EventToken.generate();
+    RsvpToken rsvpToken = RsvpToken.generate();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.empty());
+
+    rsvpService.cancelRsvp(token, rsvpToken);
+  }
+
   private Event buildActiveEvent() {
     var event = new Event();
     event.setId(1L);

backend/src/test/java/de/fete/config/WebConfigTest.java

@@ -29,8 +29,10 @@ class WebConfigTest {
 
   @Test
   void apiPrefixNotAccessibleWithoutIt() throws Exception {
-    // /events without /api prefix should not resolve to the API endpoint
-    mockMvc.perform(get("/events"))
-        .andExpect(status().isNotFound());
+    // /events without /api prefix should not resolve to the REST API endpoint;
+    // it is served by SpaController as HTML instead
+    mockMvc.perform(get("/events")
+            .accept("text/html"))
+        .andExpect(status().isOk());
   }
 }

backend/src/test/resources/static/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!-- OG_META_TAGS -->
+    <title>fete</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

frontend/e2e/cancel-rsvp.spec.ts

@@ -0,0 +1,276 @@
+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,
+}
+
+const rsvpToken = 'd4e5f6a7-b8c9-0123-4567-890abcdef012'
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+function rsvpSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+    rsvpToken,
+    rsvpName: 'Anna',
+  }
+}
+
+test.describe('US1: Cancel RSVP from Event Detail View', () => {
+  test('status bar shows cancel affordance when RSVP\'d', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Status bar visible
+    const statusBar = page.getByRole('button', { name: /You're attending/ })
+    await expect(statusBar).toBeVisible()
+
+    // Cancel button hidden initially
+    await expect(page.getByRole('button', { name: 'Cancel attendance' })).not.toBeVisible()
+  })
+
+  test('tapping status bar reveals cancel button', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Tap status bar
+    await page.getByRole('button', { name: /You're attending/ }).click()
+
+    // Cancel button appears
+    await expect(page.getByRole('button', { name: 'Cancel attendance' })).toBeVisible()
+  })
+
+  test('confirm cancellation → localStorage cleared, count decremented, bar reset', 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}`)
+
+    // Expand → Cancel attendance → 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 page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+
+    // Bar resets to CTA state
+    await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
+    await expect(page.getByText("You're attending!")).not.toBeVisible()
+
+    // Attendee count decremented
+    await expect(page.getByText('11 going')).toBeVisible()
+
+    // localStorage cleared
+    const stored = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete:events')
+      return raw ? JSON.parse(raw) : null
+    })
+    const event = stored?.find((e: StoredEvent) => e.eventToken === fullEvent.eventToken)
+    expect(event?.rsvpToken).toBeUndefined()
+    expect(event?.rsvpName).toBeUndefined()
+  })
+
+  test('server error → error message, state unchanged', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return HttpResponse.json({ error: 'fail' }, { status: 500 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // 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()
+
+    // Error message
+    await expect(page.getByText('Could not cancel RSVP. Please try again.')).toBeVisible()
+
+    // Attendee count unchanged
+    await expect(page.getByText('12 going')).toBeVisible()
+  })
+
+  test('re-RSVP after cancel works', 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 })
+      }),
+      http.post('*/api/events/:token/rsvps', () => {
+        return HttpResponse.json(
+          { rsvpToken: 'new-rsvp-token', name: 'Max' },
+          { status: 201 },
+        )
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // 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()
+
+    // CTA should be back
+    await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
+
+    // Re-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()
+
+    // Status bar returns
+    await expect(page.getByText("You're attending!")).toBeVisible()
+  })
+})
+
+test.describe('US2: Auto-Cancel on Event List Removal', () => {
+  test('removal of RSVP\'d event shows attendance warning in dialog', async ({ page }) => {
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+
+    await expect(page.getByText('your attendance will be cancelled')).toBeVisible()
+  })
+
+  test('removal of non-RSVP\'d event shows standard dialog', async ({ page }) => {
+    const noRsvp: StoredEvent = {
+      eventToken: 'no-rsvp-token',
+      title: 'No RSVP Event',
+      dateTime: '2027-06-15T18:00:00Z',
+      organizerToken: 'org-123',
+    }
+    await page.addInitScript(seedEvents([noRsvp]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove No RSVP Event/ }).click()
+
+    await expect(page.getByText('This event will be removed from your list.')).toBeVisible()
+    await expect(page.getByText('attendance will be cancelled')).not.toBeVisible()
+  })
+
+  test('confirm removal → DELETE called → event removed from list', async ({ page, network }) => {
+    network.use(
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return new HttpResponse(null, { status: 204 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event gone
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+
+    // localStorage updated
+    const stored = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete:events')
+      return raw ? JSON.parse(raw) : null
+    })
+    const found = stored?.find((e: StoredEvent) => e.eventToken === fullEvent.eventToken)
+    expect(found).toBeUndefined()
+  })
+
+  test('server error on DELETE → error message, event stays in list', async ({ page, network }) => {
+    network.use(
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return HttpResponse.json({ error: 'fail' }, { status: 500 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event still in list
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+
+  test('dismiss dialog → no changes', async ({ page }) => {
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await page.getByRole('button', { name: 'Cancel' }).click()
+
+    // Event still there
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+})
+
+test.describe('US3: Cancel RSVP with Stale/Invalid Token', () => {
+  test('cancel from detail view with stale token (404) → treated as success', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return HttpResponse.json({ error: 'not found' }, { status: 404 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // 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()
+
+    // Treated as success — CTA returns
+    await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
+
+    // localStorage cleaned
+    const stored = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete:events')
+      return raw ? JSON.parse(raw) : null
+    })
+    const event = stored?.find((e: StoredEvent) => e.eventToken === fullEvent.eventToken)
+    expect(event?.rsvpToken).toBeUndefined()
+  })
+
+  test('event list removal with stale token (404) → treated as success', async ({ page, network }) => {
+    network.use(
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return HttpResponse.json({ error: 'not found' }, { status: 404 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event removed from list
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+  })
+})

frontend/e2e/event-create.spec.ts

@@ -9,7 +9,6 @@ test.describe('US-1: Create an event', () => {
 
     await expect(page.getByText('Title is required.')).toBeVisible()
     await expect(page.getByText('Date and time are required.')).toBeVisible()
-    await expect(page.getByText('Expiry date is required.')).toBeVisible()
   })
 
   test('creates an event and redirects to event detail page', async ({ page }) => {
@@ -19,7 +18,6 @@ test.describe('US-1: Create an event', () => {
     await page.getByLabel(/description/i).fill('Bring your own drinks')
     await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
     await page.getByLabel(/location/i).fill('Central Park')
-    await page.getByLabel(/expiry/i).fill('2026-06-15')
 
     await page.getByRole('button', { name: /create event/i }).click()
 
@@ -31,7 +29,6 @@ test.describe('US-1: Create an event', () => {
 
     await page.getByLabel(/title/i).fill('Summer BBQ')
     await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
-    await page.getByLabel(/expiry/i).fill('2026-06-15')
 
     await page.getByRole('button', { name: /create event/i }).click()
     await expect(page).toHaveURL(/\/events\/.+/)
@@ -59,7 +56,6 @@ test.describe('US-1: Create an event', () => {
     await page.goto('/create')
     await page.getByLabel(/title/i).fill('Test')
     await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
-    await page.getByLabel(/expiry/i).fill('2026-06-15')
 
     await page.getByRole('button', { name: /create event/i }).click()
 

frontend/e2e/event-rsvp.spec.ts

@@ -9,7 +9,6 @@ const fullEvent = {
   timezone: 'Europe/Berlin',
   location: 'Central Park, NYC',
   attendeeCount: 12,
-  expired: false,
 }
 
 test.describe('US1: RSVP submission flow', () => {
@@ -170,16 +169,4 @@ test.describe('US1: RSVP submission flow', () => {
     await expect(page.getByText("You're attending!")).not.toBeVisible()
   })
 
-  test('does not show RSVP bar on expired event', async ({ page, network }) => {
-    network.use(
-      http.get('*/api/events/:token', () => {
-        return HttpResponse.json({ ...fullEvent, expired: true })
-      }),
-    )
-
-    await page.goto(`/events/${fullEvent.eventToken}`)
-
-    await expect(page.getByText('This event has ended.')).toBeVisible()
-    await expect(page.getByRole('button', { name: "I'm attending" })).not.toBeVisible()
-  })
 })

frontend/e2e/event-view.spec.ts

@@ -9,7 +9,6 @@ const fullEvent = {
   timezone: 'Europe/Berlin',
   location: 'Central Park, NYC',
   attendeeCount: 12,
-  expired: false,
 }
 
 test.describe('US-1: View event details', () => {
@@ -52,20 +51,6 @@ test.describe('US-1: View event details', () => {
   })
 })
 
-test.describe('US-2: View expired event', () => {
-  test('shows "event has ended" banner for expired event', async ({ page, network }) => {
-    network.use(
-      http.get('*/api/events/:token', () => {
-        return HttpResponse.json({ ...fullEvent, expired: true })
-      }),
-    )
-
-    await page.goto(`/events/${fullEvent.eventToken}`)
-
-    await expect(page.getByText('This event has ended.')).toBeVisible()
-  })
-})
-
 test.describe('US-4: Event not found', () => {
   test('shows "event not found" for unknown token', async ({ page, network }) => {
     network.use(

frontend/e2e/home-events.spec.ts

@@ -7,7 +7,6 @@ const futureEvent1: StoredEvent = {
   eventToken: 'future-aaa',
   title: 'Summer BBQ',
   dateTime: '2027-06-15T18:00:00Z',
-  expiryDate: '2027-06-16T00:00:00Z',
   organizerToken: 'org-token-1',
 }
 
@@ -15,7 +14,6 @@ const futureEvent2: StoredEvent = {
   eventToken: 'future-bbb',
   title: 'Team Meeting',
   dateTime: '2027-01-10T09:00:00Z',
-  expiryDate: '2027-01-11T00:00:00Z',
   rsvpToken: 'rsvp-token-1',
   rsvpName: 'Alice',
 }
@@ -24,7 +22,6 @@ const pastEvent: StoredEvent = {
   eventToken: 'past-ccc',
   title: 'New Year Party',
   dateTime: '2025-01-01T00:00:00Z',
-  expiryDate: '2025-01-02T00:00:00Z',
 }
 
 function seedEvents(events: StoredEvent[]): string {
@@ -85,7 +82,6 @@ test.describe('US4: Past Events Appear Faded', () => {
           location: '',
           timezone: 'UTC',
           attendeeCount: 0,
-          expired: true,
         })
       }),
     )
@@ -199,13 +195,11 @@ test.describe('Temporal Grouping: Section Headers', () => {
       eventToken: 'today-1',
       title: 'Today Standup',
       dateTime: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0).toISOString(),
-      expiryDate: '',
     }
     const laterEvent: StoredEvent = {
       eventToken: 'later-1',
       title: 'Future Conference',
       dateTime: new Date(now.getFullYear() + 1, 0, 15, 10, 0, 0).toISOString(),
-      expiryDate: '',
     }
     await page.addInitScript(seedEvents([todayEvent, laterEvent, pastEvent]))
     await page.goto('/')
@@ -245,7 +239,6 @@ test.describe('Temporal Grouping: Section Headers', () => {
       eventToken: 'today-emph',
       title: 'Emphasis Test',
       dateTime: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 20, 0, 0).toISOString(),
-      expiryDate: '',
     }
     await page.addInitScript(seedEvents([todayEvent]))
     await page.goto('/')
@@ -262,7 +255,6 @@ test.describe('Temporal Grouping: Date Subheaders', () => {
       eventToken: 'today-sub',
       title: 'No Subheader Test',
       dateTime: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 19, 0, 0).toISOString(),
-      expiryDate: '',
     }
     await page.addInitScript(seedEvents([todayEvent]))
     await page.goto('/')
@@ -355,7 +347,6 @@ test.describe('US1: View My Events', () => {
           location: '',
           timezone: 'UTC',
           attendeeCount: 0,
-          expired: false,
         })
       }),
     )

frontend/index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!-- OG_META_TAGS -->
     <title>fete</title>
   </head>
   <body>

frontend/package-lock.json

@@ -26,14 +26,14 @@
         "@vue/tsconfig": "^0.9.0",
         "eslint": "^10.0.2",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-oxlint": "~1.51.0",
+        "eslint-plugin-oxlint": "~1.54.0",
         "eslint-plugin-vue": "~10.8.0",
         "jiti": "^2.6.1",
         "jsdom": "^28.1.0",
         "msw": "^2.12.10",
         "npm-run-all2": "^8.0.4",
         "openapi-typescript": "^7.13.0",
-        "oxlint": "~1.51.0",
+        "oxlint": "~1.55.0",
         "prettier": "3.8.1",
         "typescript": "~5.9.3",
         "vite": "^7.3.1",
@@ -1727,9 +1727,9 @@
       "license": "MIT"
     },
     "node_modules/@oxlint/binding-android-arm-eabi": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.51.0.tgz",
-      "integrity": "sha512-jJYIqbx4sX+suIxWstc4P7SzhEwb4ArWA2KVrmEuu9vH2i0qM6QIHz/ehmbGE4/2fZbpuMuBzTl7UkfNoqiSgw==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.55.0.tgz",
+      "integrity": "sha512-NhvgAhncTSOhRahQSCnkK/4YIGPjTmhPurQQ2dwt2IvwCMTvZRW5vF2K10UBOxFve4GZDMw6LtXZdC2qeuYIVQ==",
       "cpu": [
         "arm"
       ],
@@ -1744,9 +1744,9 @@
       }
     },
     "node_modules/@oxlint/binding-android-arm64": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.51.0.tgz",
-      "integrity": "sha512-GtXyBCcH4ti98YdiMNCrpBNGitx87EjEWxevnyhcBK12k/Vu4EzSB45rzSC4fGFUD6sQgeaxItRCEEWeVwPafw==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.55.0.tgz",
+      "integrity": "sha512-P9iWRh+Ugqhg+D7rkc7boHX8o3H2h7YPcZHQIgvVBgnua5tk4LR2L+IBlreZs58/95cd2x3/004p5VsQM9z4SA==",
       "cpu": [
         "arm64"
       ],
@@ -1761,9 +1761,9 @@
       }
     },
     "node_modules/@oxlint/binding-darwin-arm64": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.51.0.tgz",
-      "integrity": "sha512-3QJbeYaMHn6Bh2XeBXuITSsbnIctyTjvHf5nRjKYrT9pPeErNIpp5VDEeAXC0CZSwSVTsc8WOSDwgrAI24JolQ==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.55.0.tgz",
+      "integrity": "sha512-esakkJIt7WFAhT30P/Qzn96ehFpzdZ1mNuzpOb8SCW7lI4oB8VsyQnkSHREM671jfpuBb/o2ppzBCx5l0jpgMA==",
       "cpu": [
         "arm64"
       ],
@@ -1778,9 +1778,9 @@
       }
     },
     "node_modules/@oxlint/binding-darwin-x64": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.51.0.tgz",
-      "integrity": "sha512-NzErhMaTEN1cY0E8C5APy74lw5VwsNfJfVPBMWPVQLqAbO0k4FFLjvHURvkUL+Y18Wu+8Vs1kbqPh2hjXYA4pg==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.55.0.tgz",
+      "integrity": "sha512-xDMFRCCAEK9fOH6As2z8ELsC+VDGSFRHwIKVSilw+xhgLwTDFu37rtmRbmUlx8rRGS6cWKQPTc47AVxAZEVVPQ==",
       "cpu": [
         "x64"
       ],
@@ -1795,9 +1795,9 @@
       }
     },
     "node_modules/@oxlint/binding-freebsd-x64": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.51.0.tgz",
-      "integrity": "sha512-msAIh3vPAoKoHlOE/oe6Q5C/n9umypv/k81lED82ibrJotn+3YG2Qp1kiR8o/Dg5iOEU97c6tl0utxcyFenpFw==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.55.0.tgz",
+      "integrity": "sha512-mYZqnwUD7ALCRxGenyLd1uuG+rHCL+OTT6S8FcAbVm/ZT2AZMGjvibp3F6k1SKOb2aeqFATmwRykrE41Q0GWVw==",
       "cpu": [
         "x64"
       ],
@@ -1812,9 +1812,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-arm-gnueabihf": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.51.0.tgz",
-      "integrity": "sha512-CqQPcvqYyMe9ZBot2stjGogEzk1z8gGAngIX7srSzrzexmXixwVxBdFZyxTVM0CjGfDeV+Ru0w25/WNjlMM2Hw==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.55.0.tgz",
+      "integrity": "sha512-LcX6RYcF9vL9ESGwJW3yyIZ/d/ouzdOKXxCdey1q0XJOW1asrHsIg5MmyKdEBR4plQx+shvYeQne7AzW5f3T1w==",
       "cpu": [
         "arm"
       ],
@@ -1829,9 +1829,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-arm-musleabihf": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.51.0.tgz",
-      "integrity": "sha512-dstrlYQgZMnyOssxSbolGCge/sDbko12N/35RBNuqLpoPbft2aeBidBAb0dvQlyBd9RJ6u8D4o4Eh8Un6iTgyQ==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.55.0.tgz",
+      "integrity": "sha512-C+8GS1rPtK+dI7mJFkqoRBkDuqbrNihnyYQsJPS9ez+8zF9JzfvU19lawqt4l/Y23o5uQswE/DORa8aiXUih3w==",
       "cpu": [
         "arm"
       ],
@@ -1846,9 +1846,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-arm64-gnu": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.51.0.tgz",
-      "integrity": "sha512-QEjUpXO7d35rP1/raLGGbAsBLLGZIzV3ZbeSjqWlD3oRnxpRIZ6iL4o51XQHkconn3uKssc+1VKdtHJ81BBhDA==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.55.0.tgz",
+      "integrity": "sha512-ErLE4XbmcCopA4/CIDiH6J1IAaDOMnf/KSx/aFObs4/OjAAM3sFKWGZ57pNOMxhhyBdcmcXwYymph9GwcpcqgQ==",
       "cpu": [
         "arm64"
       ],
@@ -1863,9 +1863,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-arm64-musl": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.51.0.tgz",
-      "integrity": "sha512-YSJua5irtG4DoMAjUapDTPhkQLHhBIY0G9JqlZS6/SZPzqDkPku/1GdWs0D6h/wyx0Iz31lNCfIaWKBQhzP0wQ==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.55.0.tgz",
+      "integrity": "sha512-/kp65avi6zZfqEng56TTuhiy3P/3pgklKIdf38yvYeJ9/PgEeRA2A2AqKAKbZBNAqUzrzHhz9jF6j/PZvhJzTQ==",
       "cpu": [
         "arm64"
       ],
@@ -1880,9 +1880,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-ppc64-gnu": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.51.0.tgz",
-      "integrity": "sha512-7L4Wj2IEUNDETKssB9IDYt16T6WlF+X2jgC/hBq3diGHda9vJLpAgb09+D3quFq7TdkFtI7hwz/jmuQmQFPc1Q==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.55.0.tgz",
+      "integrity": "sha512-A6pTdXwcEEwL/nmz0eUJ6WxmxcoIS+97GbH96gikAyre3s5deC7sts38ZVVowjS2QQFuSWkpA4ZmQC0jZSNvJQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1897,9 +1897,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-riscv64-gnu": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.51.0.tgz",
-      "integrity": "sha512-cBUHqtOXy76G41lOB401qpFoKx1xq17qYkhWrLSM7eEjiHM9sOtYqpr6ZdqCnN9s6ZpzudX4EkeHOFH2E9q0vA==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.55.0.tgz",
+      "integrity": "sha512-clj0lnIN+V52G9tdtZl0LbdTSurnZ1NZj92Je5X4lC7gP5jiCSW+Y/oiDiSauBAD4wrHt2S7nN3pA0zfKYK/6Q==",
       "cpu": [
         "riscv64"
       ],
@@ -1914,9 +1914,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-riscv64-musl": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.51.0.tgz",
-      "integrity": "sha512-WKbg8CysgZcHfZX0ixQFBRSBvFZUHa3SBnEjHY2FVYt2nbNJEjzTxA3ZR5wMU0NOCNKIAFUFvAh5/XJKPRJuJg==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.55.0.tgz",
+      "integrity": "sha512-NNu08pllN5x/O94/sgR3DA8lbrGBnTHsINZZR0hcav1sj79ksTiKKm1mRzvZvacwQ0hUnGinFo+JO75ok2PxYg==",
       "cpu": [
         "riscv64"
       ],
@@ -1931,9 +1931,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-s390x-gnu": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.51.0.tgz",
-      "integrity": "sha512-N1QRUvJTxqXNSu35YOufdjsAVmKVx5bkrggOWAhTWBc3J4qjcBwr1IfyLh/6YCg8sYRSR1GraldS9jUgJL/U4A==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.55.0.tgz",
+      "integrity": "sha512-BvfQz3PRlWZRoEZ17dZCqgQsMRdpzGZomJkVATwCIGhHVVeHJMQdmdXPSjcT1DCNUrOjXnVyj1RGDj5+/Je2+Q==",
       "cpu": [
         "s390x"
       ],
@@ -1948,9 +1948,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-x64-gnu": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.51.0.tgz",
-      "integrity": "sha512-e0Mz0DizsCoqNIjeOg6OUKe8JKJWZ5zZlwsd05Bmr51Jo3AOL4UJnPvwKumr4BBtBrDZkCmOLhCvDGm95nJM2g==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.55.0.tgz",
+      "integrity": "sha512-ngSOoFCSBMKVQd24H8zkbcBNc7EHhjnF1sv3mC9NNXQ/4rRjI/4Dj9+9XoDZeFEkF1SX1COSBXF1b2Pr9rqdEw==",
       "cpu": [
         "x64"
       ],
@@ -1965,9 +1965,9 @@
       }
     },
     "node_modules/@oxlint/binding-linux-x64-musl": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.51.0.tgz",
-      "integrity": "sha512-wD8HGTWhYBKXvRDvoBVB1y+fEYV01samhWQSy1Zkxq2vpezvMnjaFKRuiP6tBNITLGuffbNDEXOwcAhJ3gI5Ug==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.55.0.tgz",
+      "integrity": "sha512-BDpP7W8GlaG7BR6QjGZAleYzxoyKc/D24spZIF2mB3XsfALQJJT/OBmP8YpeTb1rveFSBHzl8T7l0aqwkWNdGA==",
       "cpu": [
         "x64"
       ],
@@ -1982,9 +1982,9 @@
       }
     },
     "node_modules/@oxlint/binding-openharmony-arm64": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.51.0.tgz",
-      "integrity": "sha512-5NSwQ2hDEJ0GPXqikjWtwzgAQCsS7P9aLMNenjjKa+gknN3lTCwwwERsT6lKXSirfU3jLjexA2XQvQALh5h27w==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.55.0.tgz",
+      "integrity": "sha512-PS6GFvmde/pc3fCA2Srt51glr8Lcxhpf6WIBFfLphndjRrD34NEcses4TSxQrEcxYo6qVywGfylM0ZhSCF2gGA==",
       "cpu": [
         "arm64"
       ],
@@ -1999,9 +1999,9 @@
       }
     },
     "node_modules/@oxlint/binding-win32-arm64-msvc": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.51.0.tgz",
-      "integrity": "sha512-JEZyah1M0RHMw8d+jjSSJmSmO8sABA1J1RtrHYujGPeCkYg1NeH0TGuClpe2h5QtioRTaF57y/TZfn/2IFV6fA==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.55.0.tgz",
+      "integrity": "sha512-P6JcLJGs/q1UOvDLzN8otd9JsH4tsuuPDv+p7aHqHM3PrKmYdmUvkNj4K327PTd35AYcznOCN+l4ZOaq76QzSw==",
       "cpu": [
         "arm64"
       ],
@@ -2016,9 +2016,9 @@
       }
     },
     "node_modules/@oxlint/binding-win32-ia32-msvc": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.51.0.tgz",
-      "integrity": "sha512-q3cEoKH6kwjz/WRyHwSf0nlD2F5Qw536kCXvmlSu+kaShzgrA0ojmh45CA81qL+7udfCaZL2SdKCZlLiGBVFlg==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.55.0.tgz",
+      "integrity": "sha512-gzkk4zE2zsE+WmRxFOiAZHpCpUNDFytEakqNXoNHW+PnYEOTPKDdW6nrzgSeTbGKVPXNAKQnRnMgrh7+n3Xueg==",
       "cpu": [
         "ia32"
       ],
@@ -2033,9 +2033,9 @@
       }
     },
     "node_modules/@oxlint/binding-win32-x64-msvc": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.51.0.tgz",
-      "integrity": "sha512-Q14+fOGb9T28nWF/0EUsYqERiRA7cl1oy4TJrGmLaqhm+aO2cV+JttboHI3CbdeMCAyDI1+NoSlrM7Melhp/cw==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.55.0.tgz",
+      "integrity": "sha512-ZFALNow2/og75gvYzNP7qe+rREQ5xunktwA+lgykoozHZ6hw9bqg4fn5j2UvG4gIn1FXqrZHkOAXuPf5+GOYTQ==",
       "cpu": [
         "x64"
       ],
@@ -2947,9 +2947,9 @@
       }
     },
     "node_modules/@vitest/eslint-plugin": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.6.9.tgz",
-      "integrity": "sha512-9WfPx1OwJ19QLCSRLkqVO7//1WcWnK3fE/3fJhKMAmDe8+9G4rB47xCNIIeCq3FdEzkIoLTfDlwDlPBaUTMhow==",
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.6.11.tgz",
+      "integrity": "sha512-/m7cyD2x/TMJt6SmW6X9ZQWThCROa3AgBXJKVzTDG6MIRQkxBGLlwi4Vi+F5bcKnRKI17b3aeUzOhqBwnsjiHg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3204,13 +3204,13 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.29.tgz",
-      "integrity": "sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.30.tgz",
+      "integrity": "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
-        "@vue/shared": "3.5.29",
+        "@vue/shared": "3.5.30",
         "entities": "^7.0.1",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
@@ -3229,40 +3229,40 @@
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz",
-      "integrity": "sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.30.tgz",
+      "integrity": "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.29",
-        "@vue/shared": "3.5.29"
+        "@vue/compiler-core": "3.5.30",
+        "@vue/shared": "3.5.30"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz",
-      "integrity": "sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.30.tgz",
+      "integrity": "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
-        "@vue/compiler-core": "3.5.29",
-        "@vue/compiler-dom": "3.5.29",
-        "@vue/compiler-ssr": "3.5.29",
-        "@vue/shared": "3.5.29",
+        "@vue/compiler-core": "3.5.30",
+        "@vue/compiler-dom": "3.5.30",
+        "@vue/compiler-ssr": "3.5.30",
+        "@vue/shared": "3.5.30",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.21",
-        "postcss": "^8.5.6",
+        "postcss": "^8.5.8",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz",
-      "integrity": "sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.30.tgz",
+      "integrity": "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.29",
-        "@vue/shared": "3.5.29"
+        "@vue/compiler-dom": "3.5.30",
+        "@vue/shared": "3.5.30"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -3362,53 +3362,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.29.tgz",
-      "integrity": "sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.30.tgz",
+      "integrity": "sha512-179YNgKATuwj9gB+66snskRDOitDiuOZqkYia7mHKJaidOMo/WJxHKF8DuGc4V4XbYTJANlfEKb0yxTQotnx4Q==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.29"
+        "@vue/shared": "3.5.30"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.29.tgz",
-      "integrity": "sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.30.tgz",
+      "integrity": "sha512-e0Z+8PQsUTdwV8TtEsLzUM7SzC7lQwYKePydb7K2ZnmS6jjND+WJXkmmfh/swYzRyfP1EY3fpdesyYoymCzYfg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.29",
-        "@vue/shared": "3.5.29"
+        "@vue/reactivity": "3.5.30",
+        "@vue/shared": "3.5.30"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz",
-      "integrity": "sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.30.tgz",
+      "integrity": "sha512-2UIGakjU4WSQ0T4iwDEW0W7vQj6n7AFn7taqZ9Cvm0Q/RA2FFOziLESrDL4GmtI1wV3jXg5nMoJSYO66egDUBw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.29",
-        "@vue/runtime-core": "3.5.29",
-        "@vue/shared": "3.5.29",
+        "@vue/reactivity": "3.5.30",
+        "@vue/runtime-core": "3.5.30",
+        "@vue/shared": "3.5.30",
         "csstype": "^3.2.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.29.tgz",
-      "integrity": "sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.30.tgz",
+      "integrity": "sha512-v+R34icapydRwbZRD0sXwtHqrQJv38JuMB4JxbOxd8NEpGLny7cncMp53W9UH/zo4j8eDHjQ1dEJXwzFQknjtQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.29",
-        "@vue/shared": "3.5.29"
+        "@vue/compiler-ssr": "3.5.30",
+        "@vue/shared": "3.5.30"
       },
       "peerDependencies": {
-        "vue": "3.5.29"
+        "vue": "3.5.30"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.29.tgz",
-      "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.30.tgz",
+      "integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
       "license": "MIT"
     },
     "node_modules/@vue/test-utils": {
@@ -4376,9 +4376,9 @@
       }
     },
     "node_modules/eslint-plugin-oxlint": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-oxlint/-/eslint-plugin-oxlint-1.51.0.tgz",
-      "integrity": "sha512-lct8LD1AxfHF1PcsuK6mFYals+zX0mx/WP2G4i16h0iR8jpT3xCfGTmTNwXiImcevzGIiJ/VDBgQ7t0B9z2Jeg==",
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-oxlint/-/eslint-plugin-oxlint-1.54.0.tgz",
+      "integrity": "sha512-bWcHxjvdcFNkPsSRMSBJYVSz4lFA+ZfztejRwp5c2sWRxkDHfkyGQzgus/4Qw75hBZID56Tilf/zzV1znsMr+w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5776,9 +5776,9 @@
       "license": "MIT"
     },
     "node_modules/oxlint": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.51.0.tgz",
-      "integrity": "sha512-g6DNPaV9/WI9MoX2XllafxQuxwY1TV++j7hP8fTJByVBuCoVtm3dy9f/2vtH/HU40JztcgWF4G7ua+gkainklQ==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.55.0.tgz",
+      "integrity": "sha512-T+FjepiyWpaZMhekqRpH8Z3I4vNM610p6w+Vjfqgj5TZUxHXl7N8N5IPvmOU8U4XdTRxqtNNTh9Y4hLtr7yvFg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -5791,25 +5791,25 @@
         "url": "https://github.com/sponsors/Boshen"
       },
       "optionalDependencies": {
-        "@oxlint/binding-android-arm-eabi": "1.51.0",
-        "@oxlint/binding-android-arm64": "1.51.0",
-        "@oxlint/binding-darwin-arm64": "1.51.0",
-        "@oxlint/binding-darwin-x64": "1.51.0",
-        "@oxlint/binding-freebsd-x64": "1.51.0",
-        "@oxlint/binding-linux-arm-gnueabihf": "1.51.0",
-        "@oxlint/binding-linux-arm-musleabihf": "1.51.0",
-        "@oxlint/binding-linux-arm64-gnu": "1.51.0",
-        "@oxlint/binding-linux-arm64-musl": "1.51.0",
-        "@oxlint/binding-linux-ppc64-gnu": "1.51.0",
-        "@oxlint/binding-linux-riscv64-gnu": "1.51.0",
-        "@oxlint/binding-linux-riscv64-musl": "1.51.0",
-        "@oxlint/binding-linux-s390x-gnu": "1.51.0",
-        "@oxlint/binding-linux-x64-gnu": "1.51.0",
-        "@oxlint/binding-linux-x64-musl": "1.51.0",
-        "@oxlint/binding-openharmony-arm64": "1.51.0",
-        "@oxlint/binding-win32-arm64-msvc": "1.51.0",
-        "@oxlint/binding-win32-ia32-msvc": "1.51.0",
-        "@oxlint/binding-win32-x64-msvc": "1.51.0"
+        "@oxlint/binding-android-arm-eabi": "1.55.0",
+        "@oxlint/binding-android-arm64": "1.55.0",
+        "@oxlint/binding-darwin-arm64": "1.55.0",
+        "@oxlint/binding-darwin-x64": "1.55.0",
+        "@oxlint/binding-freebsd-x64": "1.55.0",
+        "@oxlint/binding-linux-arm-gnueabihf": "1.55.0",
+        "@oxlint/binding-linux-arm-musleabihf": "1.55.0",
+        "@oxlint/binding-linux-arm64-gnu": "1.55.0",
+        "@oxlint/binding-linux-arm64-musl": "1.55.0",
+        "@oxlint/binding-linux-ppc64-gnu": "1.55.0",
+        "@oxlint/binding-linux-riscv64-gnu": "1.55.0",
+        "@oxlint/binding-linux-riscv64-musl": "1.55.0",
+        "@oxlint/binding-linux-s390x-gnu": "1.55.0",
+        "@oxlint/binding-linux-x64-gnu": "1.55.0",
+        "@oxlint/binding-linux-x64-musl": "1.55.0",
+        "@oxlint/binding-openharmony-arm64": "1.55.0",
+        "@oxlint/binding-win32-arm64-msvc": "1.55.0",
+        "@oxlint/binding-win32-ia32-msvc": "1.55.0",
+        "@oxlint/binding-win32-x64-msvc": "1.55.0"
       },
       "peerDependencies": {
         "oxlint-tsgolint": ">=0.15.0"
@@ -7319,16 +7319,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz",
-      "integrity": "sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==",
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz",
+      "integrity": "sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.29",
-        "@vue/compiler-sfc": "3.5.29",
-        "@vue/runtime-dom": "3.5.29",
-        "@vue/server-renderer": "3.5.29",
-        "@vue/shared": "3.5.29"
+        "@vue/compiler-dom": "3.5.30",
+        "@vue/compiler-sfc": "3.5.30",
+        "@vue/runtime-dom": "3.5.30",
+        "@vue/server-renderer": "3.5.30",
+        "@vue/shared": "3.5.30"
       },
       "peerDependencies": {
         "typescript": "*"

frontend/package.json

@@ -38,14 +38,14 @@
     "@vue/tsconfig": "^0.9.0",
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-oxlint": "~1.51.0",
+    "eslint-plugin-oxlint": "~1.54.0",
     "eslint-plugin-vue": "~10.8.0",
     "jiti": "^2.6.1",
     "jsdom": "^28.1.0",
     "msw": "^2.12.10",
     "npm-run-all2": "^8.0.4",
     "openapi-typescript": "^7.13.0",
-    "oxlint": "~1.51.0",
+    "oxlint": "~1.55.0",
     "prettier": "3.8.1",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",

frontend/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text y="0.9em" font-size="80" x="50%" text-anchor="middle">🎉</text>
+</svg>

frontend/src/assets/main.css

@@ -16,6 +16,26 @@
   --color-text-on-gradient: #ffffff;
   --color-surface: #fff5f8;
   --color-card: #ffffff;
+  --color-dark-base: #1B1730;
+
+  /* Glass system */
+  --color-glass: rgba(255, 255, 255, 0.1);
+  --color-glass-strong: rgba(255, 255, 255, 0.15);
+  --color-glass-subtle: rgba(255, 255, 255, 0.05);
+  --color-glass-border: rgba(255, 255, 255, 0.18);
+  --color-glass-border-hover: rgba(255, 255, 255, 0.3);
+  --color-glass-hover: rgba(255, 255, 255, 0.18);
+  --color-glass-inner: rgba(27, 23, 48, 0.55);
+  --color-glass-overlay: rgba(27, 23, 48, 0.4);
+
+  /* Text on gradient (opacity variants) */
+  --color-text-muted: rgba(255, 255, 255, 0.5);
+  --color-text-secondary: rgba(255, 255, 255, 0.7);
+  --color-text-soft: rgba(255, 255, 255, 0.85);
+  --color-text-bright: rgba(255, 255, 255, 0.9);
+
+  /* Glow border */
+  --gradient-glow: conic-gradient(from 135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
 
   /* Gradient */
   --gradient-primary: linear-gradient(135deg, #f06292 0%, #ab47bc 50%, #5c6bc0 100%);
@@ -33,7 +53,7 @@
   --radius-button: 14px;
 
   /* Shadows */
-  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.12);
   --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.15);
 
   /* Layout */
@@ -60,7 +80,22 @@ html {
 
 body {
   min-height: 100vh;
-  background: var(--gradient-primary);
+  background-color: var(--color-dark-base);
+  position: relative;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-dark-base);
+  background-image:
+    radial-gradient(at 70% 20%, rgba(240, 98, 146, 0.55) 0px, transparent 50%),
+    radial-gradient(at 25% 50%, rgba(171, 71, 188, 0.5) 0px, transparent 55%),
+    radial-gradient(at 80% 70%, rgba(92, 107, 192, 0.55) 0px, transparent 50%),
+    radial-gradient(at 35% 85%, rgba(255, 112, 67, 0.3) 0px, transparent 40%);
+  filter: blur(80px);
+  z-index: -1;
 }
 
 #app {
@@ -82,28 +117,35 @@ body {
 /* Card-style form fields */
 .form-field {
   background: var(--color-card);
-  border: none;
+  border: 1px solid #e0e0e0;
   border-radius: var(--radius-card);
   padding: var(--spacing-md) var(--spacing-md);
-  box-shadow: var(--shadow-card);
   width: 100%;
   font-family: inherit;
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--color-text);
   outline: none;
-  transition: box-shadow 0.2s ease;
+  transition: border-color 0.2s ease;
+}
+
+.form-field.glass {
+  color: var(--color-text-on-gradient);
 }
 
 .form-field:focus {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+  border-color: var(--color-glass-border-hover);
 }
 
 .form-field::placeholder {
-  color: #999;
+  color: var(--color-text-muted);
   font-weight: 400;
 }
 
+.form-field.glass::placeholder {
+  color: var(--color-text-muted);
+}
+
 textarea.form-field {
   resize: vertical;
   min-height: 5rem;
@@ -128,22 +170,29 @@ textarea.form-field {
   display: block;
   width: 100%;
   padding: var(--spacing-md) var(--spacing-lg);
-  background: var(--color-accent);
+  background: var(--color-card);
   color: var(--color-text);
-  border: none;
+  border: 1px solid #e0e0e0;
   border-radius: var(--radius-button);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
-  box-shadow: var(--shadow-button);
-  transition: opacity 0.2s ease, transform 0.1s ease;
+  transition: border-color 0.2s ease, transform 0.1s ease;
   text-align: center;
   text-decoration: none;
 }
 
+.btn-primary.glass {
+  color: var(--color-text-on-gradient);
+  border: 2px solid transparent;
+  background:
+    linear-gradient(var(--color-glass-inner), var(--color-glass-inner)) padding-box,
+    var(--gradient-glow) border-box;
+}
+
 .btn-primary:hover {
-  opacity: 0.92;
+  border-color: var(--color-glass-border-hover);
 }
 
 .btn-primary:active {
@@ -176,6 +225,68 @@ textarea.form-field {
   100% { background-position: -200% 0; }
 }
 
+/* ── Glass System ── */
+
+/* Glass surface: passive containers on gradient (cards, icon boxes) */
+.glass {
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.glass:hover:not(input):not(textarea):not(.btn-primary) {
+  background: var(--color-glass-hover);
+  border-color: var(--color-glass-border-hover);
+}
+
+/* Glass interactive inner: dark translucent fill for interactive elements (FAB, CTA) */
+.glass-inner {
+  background: var(--color-glass-inner);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+/* Glow border: conic gradient wrapper with halo (static) */
+.glow-border {
+  background: var(--gradient-glow);
+  padding: 2px;
+  position: relative;
+}
+
+.glow-border::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: inherit;
+  background: var(--gradient-glow);
+  filter: blur(8px);
+  opacity: 0.3;
+  z-index: -1;
+}
+
+/* Glow border animated variant */
+@property --glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.glow-border--animated {
+  background: conic-gradient(from var(--glow-angle), var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
+  animation: glow-rotate 4s linear infinite;
+}
+
+.glow-border--animated::before {
+  background: conic-gradient(from var(--glow-angle), var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
+  animation: glow-rotate 4s linear infinite;
+}
+
+@keyframes glow-rotate {
+  to { --glow-angle: 360deg; }
+}
+
 /* Utility */
 .text-center {
   text-align: center;
@@ -197,7 +308,7 @@ textarea.form-field {
 .sheet-title {
   font-size: 1.2rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
 }
 
 .rsvp-form {
@@ -209,7 +320,7 @@ textarea.form-field {
 .rsvp-form__label {
   font-size: 0.85rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
   padding-left: 0.25rem;
 }
 

frontend/src/components/AttendeeList.vue

@@ -28,7 +28,7 @@ defineProps<{
 .attendee-list__heading {
   font-size: 0.75rem;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
@@ -44,7 +44,7 @@ defineProps<{
 
 .attendee-list__item {
   font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--color-text-soft);
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -53,7 +53,7 @@ defineProps<{
 
 .attendee-list__empty {
   font-size: 0.9rem;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
   font-style: italic;
 }
 </style>

frontend/src/components/BottomSheet.vue

@@ -45,7 +45,7 @@ watch(
 .sheet-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--color-glass-overlay);
   display: flex;
   align-items: flex-end;
   justify-content: center;
@@ -53,7 +53,11 @@ watch(
 }
 
 .sheet {
-  background: var(--color-card);
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  border-bottom: none;
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   border-radius: 20px 20px 0 0;
   padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
   width: 100%;
@@ -67,7 +71,7 @@ watch(
 .sheet__handle {
   width: 36px;
   height: 4px;
-  background: #ccc;
+  background: var(--color-glass-border-hover);
   border-radius: 2px;
   align-self: center;
   flex-shrink: 0;

frontend/src/components/ConfirmDialog.vue

@@ -75,7 +75,7 @@ watch(
 .confirm-dialog__overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--color-glass-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -84,9 +84,12 @@ watch(
 }
 
 .confirm-dialog {
-  background: var(--color-card);
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   border-radius: var(--radius-card);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   padding: var(--spacing-xl);
   max-width: 320px;
   width: 100%;
@@ -98,13 +101,13 @@ watch(
 .confirm-dialog__title {
   font-size: 1.05rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
 }
 
 .confirm-dialog__message {
   font-size: 0.9rem;
   font-weight: 400;
-  color: #666;
+  color: var(--color-text-soft);
 }
 
 .confirm-dialog__actions {
@@ -130,8 +133,9 @@ watch(
 }
 
 .confirm-dialog__btn--cancel {
-  background: #e8e8e8;
-  color: #555;
+  background: var(--color-glass);
+  border: 1px solid var(--color-glass-border);
+  color: var(--color-text-on-gradient);
 }
 
 .confirm-dialog__btn--confirm {

frontend/src/components/CreateEventFab.vue

@@ -1,6 +1,8 @@
 <template>
-  <RouterLink to="/create" class="fab" aria-label="Create event">
-    <span class="fab__icon" aria-hidden="true">+</span>
+  <RouterLink to="/create" class="fab glow-border" aria-label="Create event">
+    <span class="fab__inner glass-inner">
+      <span class="fab__icon" aria-hidden="true">+</span>
+    </span>
   </RouterLink>
 </template>
 
@@ -16,20 +18,26 @@ import { RouterLink } from 'vue-router'
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-gradient);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   text-decoration: none;
   z-index: 100;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  transition: transform 0.15s ease;
+}
+
+.fab__inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .fab:hover {
   transform: scale(1.08);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
 }
 
 .fab:active {
@@ -41,6 +49,7 @@ import { RouterLink } from 'vue-router'
   outline-offset: 3px;
 }
 
+
 .fab__icon {
   font-size: 1.8rem;
   font-weight: 300;

frontend/src/components/DateSubheader.vue

@@ -12,7 +12,7 @@ defineProps<{
 .date-subheader {
   font-size: 0.85rem;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--color-text-soft);
   margin: 0;
   padding: var(--spacing-xs) 0;
 }

frontend/src/components/EmptyState.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="empty-state">
     <p class="empty-state__message">No events yet.<br />Create your first one!</p>
-    <RouterLink to="/create" class="btn-primary empty-state__cta">+ Create Event</RouterLink>
+    <RouterLink to="/create" class="empty-state__cta glow-border glow-border--animated">
+      <span class="empty-state__cta-inner glass-inner">Create Event</span>
+    </RouterLink>
   </div>
 </template>
 
@@ -27,5 +29,34 @@ import { RouterLink } from 'vue-router'
 
 .empty-state__cta {
   max-width: 280px;
+  width: 100%;
+  border-radius: var(--radius-button);
+  text-decoration: none;
+  transition: transform 0.1s ease;
+}
+
+.empty-state__cta-inner {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  text-align: center;
+}
+
+.empty-state__cta:hover {
+  transform: scale(1.02);
+}
+
+.empty-state__cta:active {
+  transform: scale(0.98);
+}
+
+.empty-state__cta:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 3px;
 }
 </style>

frontend/src/components/EventCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="event-card"
+    class="event-card glass"
     :class="{ 'event-card--past': isPast, 'event-card--swiping': isSwiping }"
     :style="swipeStyle"
     @touchstart="onTouchStart"
@@ -93,11 +93,10 @@ function onTouchEnd() {
 .event-card {
   display: flex;
   align-items: center;
-  background: var(--color-card);
   border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
   padding: var(--spacing-md) var(--spacing-lg);
   gap: var(--spacing-sm);
+  transition: background 0.2s ease, border-color 0.2s ease;
 }
 
 .event-card--past {
@@ -122,7 +121,7 @@ function onTouchEnd() {
 .event-card__title {
   font-size: 0.95rem;
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -131,7 +130,7 @@ function onTouchEnd() {
 .event-card__time {
   font-size: 0.8rem;
   font-weight: 400;
-  color: #888;
+  color: var(--color-text-secondary);
 }
 
 .event-card__badge {
@@ -145,12 +144,12 @@ function onTouchEnd() {
 
 .event-card__badge--organizer {
   background: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-gradient);
 }
 
 .event-card__badge--attendee {
-  background: #e0e0e0;
-  color: #555;
+  background: var(--color-glass-strong);
+  color: var(--color-text-bright);
 }
 
 .event-card__delete {
@@ -163,7 +162,7 @@ function onTouchEnd() {
   background: none;
   border: none;
   font-size: 1.2rem;
-  color: #bbb;
+  color: var(--color-text-muted);
   cursor: pointer;
   border-radius: 50%;
   transition: color 0.15s ease, background 0.15s ease;

frontend/src/components/EventList.vue

@@ -28,7 +28,7 @@
     <ConfirmDialog
       :open="!!pendingDeleteToken"
       title="Remove event?"
-      message="This event will be removed from your list."
+      :message="deleteDialogMessage"
       confirm-label="Remove"
       cancel-label="Cancel"
       @confirm="confirmDelete"
@@ -42,24 +42,62 @@ import { computed, ref } from 'vue'
 import { useEventStorage, isValidStoredEvent } from '../composables/useEventStorage'
 import { useEventGrouping } from '../composables/useEventGrouping'
 import { formatRelativeTime } from '../composables/useRelativeTime'
+import { api } from '../api/client'
 import EventCard from './EventCard.vue'
 import SectionHeader from './SectionHeader.vue'
 import DateSubheader from './DateSubheader.vue'
 import ConfirmDialog from './ConfirmDialog.vue'
 import type { StoredEvent } from '../composables/useEventStorage'
 
-const { getStoredEvents, removeEvent } = useEventStorage()
+const { getStoredEvents, getRsvp, removeEvent } = useEventStorage()
 
 const pendingDeleteToken = ref<string | null>(null)
+const deleteError = ref('')
+
+const deleteDialogMessage = computed(() => {
+  if (!pendingDeleteToken.value) return ''
+  const rsvp = getRsvp(pendingDeleteToken.value)
+  if (rsvp) {
+    return 'This event will be removed from your list and your attendance will be cancelled.'
+  }
+  return 'This event will be removed from your list.'
+})
 
 function requestDelete(eventToken: string) {
+  deleteError.value = ''
   pendingDeleteToken.value = eventToken
 }
 
-function confirmDelete() {
-  if (pendingDeleteToken.value) {
-    removeEvent(pendingDeleteToken.value)
+async function confirmDelete() {
+  if (!pendingDeleteToken.value) return
+
+  const eventToken = pendingDeleteToken.value
+  const rsvp = getRsvp(eventToken)
+
+  if (rsvp) {
+    try {
+      const { response } = await api.DELETE('/events/{token}/rsvps/{rsvpToken}', {
+        params: {
+          path: {
+            token: eventToken,
+            rsvpToken: rsvp.rsvpToken,
+          },
+        },
+      })
+
+      if (response.status !== 204 && response.status !== 404) {
+        deleteError.value = 'Could not cancel attendance. Please try again.'
+        pendingDeleteToken.value = null
+        return
+      }
+    } catch {
+      deleteError.value = 'Could not cancel attendance. Please try again.'
+      pendingDeleteToken.value = null
+      return
+    }
   }
+
+  removeEvent(eventToken)
   pendingDeleteToken.value = null
 }
 

frontend/src/components/RsvpBar.vue

@@ -2,27 +2,76 @@
   <div class="rsvp-bar">
     <div class="rsvp-bar__inner">
       <!-- Status state: already RSVPed -->
-      <div v-if="hasRsvp" class="rsvp-bar__status">
-        <span class="rsvp-bar__check" aria-hidden="true">✓</span>
-        <span class="rsvp-bar__text">You're attending!</span>
+      <div v-if="hasRsvp" class="rsvp-bar__status-wrapper">
+        <div
+          class="rsvp-bar__status"
+          role="button"
+          tabindex="0"
+          :aria-expanded="expanded"
+          aria-label="You're attending. Tap to show cancel option."
+          @click="expanded = !expanded"
+          @keydown.enter.prevent="expanded = !expanded"
+          @keydown.space.prevent="expanded = !expanded"
+          @keydown.escape="expanded = false"
+        >
+          <span class="rsvp-bar__check" aria-hidden="true">✓</span>
+          <span class="rsvp-bar__text">You're attending!</span>
+          <span class="rsvp-bar__chevron" :class="{ 'rsvp-bar__chevron--open': expanded }" aria-hidden="true">›</span>
+        </div>
+        <Transition name="rsvp-bar-cancel">
+          <button
+            v-if="expanded"
+            class="rsvp-bar__cancel"
+            type="button"
+            @click="$emit('cancel')"
+          >
+            Cancel attendance
+          </button>
+        </Transition>
       </div>
 
       <!-- CTA state: no RSVP yet -->
-      <button v-else class="btn-primary rsvp-bar__cta" type="button" @click="$emit('open')">
-        I'm attending
-      </button>
+      <div v-else 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
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
   hasRsvp?: boolean
 }>()
 
 defineEmits<{
   open: []
+  cancel: []
 }>()
+
+const expanded = ref(false)
+
+watch(() => props.hasRsvp, () => {
+  expanded.value = false
+})
+
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.rsvp-bar__status-wrapper')) {
+    expanded.value = false
+  }
+}
+
+watch(expanded, (isExpanded) => {
+  if (isExpanded) {
+    document.addEventListener('click', onClickOutside, { capture: true })
+  } else {
+    document.removeEventListener('click', onClickOutside, { capture: true })
+  }
+})
 </script>
 
 <style scoped>
@@ -45,6 +94,36 @@ defineEmits<{
 
 .rsvp-bar__cta {
   width: 100%;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.rsvp-bar__cta:hover {
+  transform: scale(1.02);
+}
+
+.rsvp-bar__cta:active {
+  transform: scale(0.98);
+}
+
+.rsvp-bar__cta-inner {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  text-align: center;
+  border: none;
+  cursor: pointer;
+}
+
+.rsvp-bar__status-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
 }
 
 .rsvp-bar__status {
@@ -52,13 +131,23 @@ defineEmits<{
   align-items: center;
   justify-content: center;
   gap: var(--spacing-xs);
-  background: var(--color-card);
+  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);
   border-radius: var(--radius-card);
   padding: var(--spacing-md) var(--spacing-lg);
   box-shadow: var(--shadow-card);
   font-weight: 600;
   font-size: 0.95rem;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.rsvp-bar__status:hover {
+  background: linear-gradient(135deg, var(--color-glass-hover) 0%, var(--color-glass-strong) 100%);
 }
 
 .rsvp-bar__check {
@@ -72,4 +161,49 @@ defineEmits<{
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.rsvp-bar__chevron {
+  font-size: 1.2rem;
+  font-weight: 700;
+  transition: transform 0.2s ease;
+  transform: rotate(0deg);
+  margin-left: auto;
+}
+
+.rsvp-bar__chevron--open {
+  transform: rotate(90deg);
+}
+
+.rsvp-bar__cancel {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-card);
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #ef5350;
+  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);
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s ease;
+}
+
+.rsvp-bar__cancel:hover {
+  background: linear-gradient(135deg, var(--color-glass-hover) 0%, var(--color-glass-strong) 100%);
+}
+
+.rsvp-bar-cancel-enter-active,
+.rsvp-bar-cancel-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.rsvp-bar-cancel-enter-from,
+.rsvp-bar-cancel-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
 </style>

frontend/src/components/SectionHeader.vue

@@ -15,7 +15,7 @@ defineProps<{
 .section-header {
   font-size: 1rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
   margin: 0;
   padding: var(--spacing-sm) 0;
 }

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

@@ -15,11 +15,11 @@ const router = createRouter({
 const NOW = new Date(2026, 2, 11, 12, 0, 0)
 
 const mockEvents = [
-  { eventToken: 'past-1', title: 'Past Event', dateTime: '2026-03-01T10:00:00', expiryDate: '' },
-  { eventToken: 'later-1', title: 'Later Event', dateTime: '2027-06-15T10:00:00', expiryDate: '' },
-  { eventToken: 'today-1', title: 'Today Event', dateTime: '2026-03-11T18:00:00', expiryDate: '' },
-  { eventToken: 'week-1', title: 'This Week Event', dateTime: '2026-03-13T10:00:00', expiryDate: '' },
-  { eventToken: 'nextweek-1', title: 'Next Week Event', dateTime: '2026-03-16T10:00:00', expiryDate: '' },
+  { eventToken: 'past-1', title: 'Past Event', dateTime: '2026-03-01T10:00:00' },
+  { eventToken: 'later-1', title: 'Later Event', dateTime: '2027-06-15T10:00:00' },
+  { 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' },
 ]
 
 vi.mock('../../composables/useEventStorage', () => ({

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').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)
   })
 
@@ -19,7 +19,7 @@ describe('RsvpBar', () => {
 
   it('emits open when CTA button is clicked', async () => {
     const wrapper = mount(RsvpBar)
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     expect(wrapper.emitted('open')).toHaveLength(1)
   })
 

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

@@ -6,7 +6,6 @@ function makeEvent(overrides: Partial<StoredEvent> & { dateTime: string }): Stor
   return {
     eventToken: `evt-${Math.random().toString(36).slice(2, 8)}`,
     title: 'Test Event',
-    expiryDate: '',
     ...overrides,
   }
 }

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

@@ -43,7 +43,6 @@ describe('useEventStorage', () => {
       organizerToken: 'org-456',
       title: 'Birthday',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     const events = getStoredEvents()
@@ -61,7 +60,6 @@ describe('useEventStorage', () => {
       organizerToken: 'org-456',
       title: 'Test',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     expect(getOrganizerToken('abc-123')).toBe('org-456')
@@ -79,14 +77,12 @@ describe('useEventStorage', () => {
       eventToken: 'event-1',
       title: 'First',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     saveCreatedEvent({
       eventToken: 'event-2',
       title: 'Second',
       dateTime: '2026-07-15T20:00:00+02:00',
-      expiryDate: '2026-08-15',
     })
 
     const events = getStoredEvents()
@@ -102,14 +98,12 @@ describe('useEventStorage', () => {
       eventToken: 'abc-123',
       title: 'Old Title',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     saveCreatedEvent({
       eventToken: 'abc-123',
       title: 'New Title',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     const events = getStoredEvents()
@@ -124,7 +118,6 @@ describe('useEventStorage', () => {
       eventToken: 'abc-123',
       title: 'Birthday',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     saveRsvp('abc-123', 'rsvp-token-1', 'Max', 'Birthday', '2026-06-15T20:00:00+02:00')
@@ -154,7 +147,6 @@ describe('useEventStorage', () => {
       eventToken: 'abc-123',
       title: 'Test',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     expect(getRsvp('abc-123')).toBeUndefined()
@@ -172,14 +164,12 @@ describe('useEventStorage', () => {
       eventToken: 'event-1',
       title: 'First',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     saveCreatedEvent({
       eventToken: 'event-2',
       title: 'Second',
       dateTime: '2026-07-15T20:00:00+02:00',
-      expiryDate: '2026-08-15',
     })
 
     removeEvent('event-1')
@@ -196,7 +186,6 @@ describe('useEventStorage', () => {
       eventToken: 'event-1',
       title: 'First',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     removeEvent('nonexistent')
@@ -220,8 +209,7 @@ describe('isValidStoredEvent', () => {
         eventToken: 'abc-123',
         title: 'Birthday',
         dateTime: '2026-06-15T20:00:00+02:00',
-        expiryDate: '2026-07-15',
-      }),
+        }),
     ).toBe(true)
   })
 

frontend/src/composables/useEventStorage.ts

@@ -3,7 +3,6 @@ export interface StoredEvent {
   organizerToken?: string
   title: string
   dateTime: string
-  expiryDate: string
   rsvpToken?: string
   rsvpName?: string
 }
@@ -66,7 +65,7 @@ export function useEventStorage() {
       existing.rsvpToken = rsvpToken
       existing.rsvpName = rsvpName
     } else {
-      events.push({ eventToken, title, dateTime, expiryDate: '', rsvpToken, rsvpName })
+      events.push({ eventToken, title, dateTime, rsvpToken, rsvpName })
     }
     writeEvents(events)
   }
@@ -79,10 +78,20 @@ export function useEventStorage() {
     return undefined
   }
 
+  function removeRsvp(eventToken: string): void {
+    const events = readEvents()
+    const event = events.find((e) => e.eventToken === eventToken)
+    if (event) {
+      delete event.rsvpToken
+      delete event.rsvpName
+      writeEvents(events)
+    }
+  }
+
   function removeEvent(eventToken: string): void {
     const events = readEvents().filter((e) => e.eventToken !== eventToken)
     writeEvents(events)
   }
 
-  return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp, removeEvent }
+  return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp, removeRsvp, removeEvent }
 }

frontend/src/views/EventCreateView.vue

@@ -12,7 +12,7 @@
           id="title"
           v-model="form.title"
           type="text"
-          class="form-field"
+          class="form-field glass"
           required
           maxlength="200"
           placeholder="What's the event?"
@@ -27,7 +27,7 @@
         <textarea
           id="description"
           v-model="form.description"
-          class="form-field"
+          class="form-field glass"
           maxlength="2000"
           placeholder="Tell people more about it…"
           :aria-invalid="!!errors.description"
@@ -42,7 +42,7 @@
           id="dateTime"
           v-model="form.dateTime"
           type="datetime-local"
-          class="form-field"
+          class="form-field glass"
           required
           :aria-invalid="!!errors.dateTime"
           :aria-describedby="errors.dateTime ? 'dateTime-error' : undefined"
@@ -56,7 +56,7 @@
           id="location"
           v-model="form.location"
           type="text"
-          class="form-field"
+          class="form-field glass"
           maxlength="500"
           placeholder="Where is it?"
           :aria-invalid="!!errors.location"
@@ -65,22 +65,7 @@
         <span v-if="errors.location" id="location-error" class="field-error" role="alert">{{ errors.location }}</span>
       </div>
 
-      <div class="form-group">
-        <label for="expiryDate" class="form-label">Expiry Date *</label>
-        <input
-          id="expiryDate"
-          v-model="form.expiryDate"
-          type="date"
-          class="form-field"
-          required
-          :min="tomorrow"
-          :aria-invalid="!!errors.expiryDate"
-          :aria-describedby="errors.expiryDate ? 'expiryDate-error' : undefined"
-        />
-        <span v-if="errors.expiryDate" id="expiryDate-error" class="field-error" role="alert">{{ errors.expiryDate }}</span>
-      </div>
-
-      <button type="submit" class="btn-primary" :disabled="submitting">
+      <button type="submit" class="btn-primary glass" :disabled="submitting">
         {{ submitting ? 'Creating…' : 'Create Event' }}
       </button>
 
@@ -90,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, computed, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import { api } from '@/api/client'
 import { useEventStorage } from '@/composables/useEventStorage'
@@ -103,7 +88,6 @@ const form = reactive({
   description: '',
   dateTime: '',
   location: '',
-  expiryDate: '',
 })
 
 const errors = reactive({
@@ -111,31 +95,22 @@ const errors = reactive({
   description: '',
   dateTime: '',
   location: '',
-  expiryDate: '',
 })
 
 const submitting = ref(false)
 const serverError = ref('')
 
-const tomorrow = computed(() => {
-  const d = new Date()
-  d.setDate(d.getDate() + 1)
-  return d.toISOString().split('T')[0]
-})
-
 function clearErrors() {
   errors.title = ''
   errors.description = ''
   errors.dateTime = ''
   errors.location = ''
-  errors.expiryDate = ''
   serverError.value = ''
 }
 
 // Clear individual field errors when the user types
 watch(() => form.title, () => { errors.title = ''; serverError.value = '' })
 watch(() => form.dateTime, () => { errors.dateTime = ''; serverError.value = '' })
-watch(() => form.expiryDate, () => { errors.expiryDate = ''; serverError.value = '' })
 watch(() => form.description, () => { serverError.value = '' })
 watch(() => form.location, () => { serverError.value = '' })
 
@@ -153,14 +128,6 @@ function validate(): boolean {
     valid = false
   }
 
-  if (!form.expiryDate) {
-    errors.expiryDate = 'Expiry date is required.'
-    valid = false
-  } else if (form.expiryDate <= (new Date().toISOString().split('T')[0] ?? '')) {
-    errors.expiryDate = 'Expiry date must be in the future.'
-    valid = false
-  }
-
   return valid
 }
 
@@ -186,7 +153,6 @@ async function handleSubmit() {
         dateTime: dateTimeWithOffset,
         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         location: form.location.trim() || undefined,
-        expiryDate: form.expiryDate,
       },
     })
 
@@ -212,7 +178,6 @@ async function handleSubmit() {
         organizerToken: data.organizerToken,
         title: data.title,
         dateTime: data.dateTime,
-        expiryDate: data.expiryDate,
       })
 
       router.push({ name: 'event', params: { eventToken: data.eventToken } })

frontend/src/views/EventDetailView.vue

@@ -25,29 +25,25 @@
 
       <!-- Loaded state -->
       <div v-else-if="state === 'loaded' && event" class="detail__content">
-        <div v-if="event.expired" class="detail__banner detail__banner--expired" role="status">
-          This event has ended.
-        </div>
-
         <h1 class="detail__title">{{ event.title }}</h1>
 
         <dl class="detail__meta">
           <div class="detail__meta-item">
-            <dt class="detail__meta-icon" aria-label="Date and time">
+            <dt class="detail__meta-icon glass" 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" aria-label="Location">
+            <dt class="detail__meta-icon glass" 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" aria-label="Attendees">
+            <dt class="detail__meta-icon glass" 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,15 +66,32 @@
       <!-- Error state -->
       <div v-else-if="state === 'error'" class="detail__content detail__content--center" role="alert">
         <p class="detail__message">Something went wrong.</p>
-        <button class="btn-primary" type="button" @click="fetchEvent">Retry</button>
+        <button class="btn-primary glass" type="button" @click="fetchEvent">Retry</button>
       </div>
     </div>
 
-    <!-- RSVP bar (only for loaded, non-expired events) -->
+    <!-- Cancel error message -->
+    <div v-if="cancelError" class="detail__cancel-error" role="alert">
+      <p>{{ cancelError }}</p>
+    </div>
+
+    <!-- RSVP bar -->
     <RsvpBar
-      v-if="state === 'loaded' && event && !event.expired && !isOrganizer"
+      v-if="state === 'loaded' && event && !isOrganizer"
       :has-rsvp="!!rsvpName"
       @open="sheetOpen = true"
+      @cancel="confirmCancelOpen = true"
+    />
+
+    <!-- Cancel confirmation dialog -->
+    <ConfirmDialog
+      :open="confirmCancelOpen"
+      title="Cancel attendance?"
+      message="Your attendance will be permanently cancelled."
+      confirm-label="Cancel attendance"
+      cancel-label="Keep"
+      @confirm="handleCancelRsvp"
+      @cancel="confirmCancelOpen = false"
     />
 
     <!-- RSVP bottom sheet -->
@@ -90,7 +103,7 @@
           <input
             id="rsvp-name"
             v-model.trim="nameInput"
-            class="form-field"
+            class="form-field glass"
             type="text"
             placeholder="e.g. Max Mustermann"
             maxlength="100"
@@ -99,9 +112,11 @@
           />
           <span v-if="nameError" class="rsvp-form__field-error" role="alert">{{ nameError }}</span>
         </div>
-        <button class="btn-primary" type="submit" :disabled="submitting">
-          {{ submitting ? 'Sending…' : "Count me in" }}
-        </button>
+        <div class="rsvp-form__submit glow-border glow-border--animated">
+          <button class="rsvp-form__submit-inner glass-inner" type="submit" :disabled="submitting">
+            {{ submitting ? 'Sending…' : "Count me in" }}
+          </button>
+        </div>
         <p v-if="submitError" class="rsvp-form__field-error rsvp-form__error" role="alert">{{ submitError }}</p>
       </form>
     </BottomSheet>
@@ -115,6 +130,7 @@ import { api } from '@/api/client'
 import { useEventStorage } from '@/composables/useEventStorage'
 import AttendeeList from '@/components/AttendeeList.vue'
 import BottomSheet from '@/components/BottomSheet.vue'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import RsvpBar from '@/components/RsvpBar.vue'
 import type { components } from '@/api/schema'
 
@@ -122,7 +138,7 @@ type GetEventResponse = components['schemas']['GetEventResponse']
 type State = 'loading' | 'loaded' | 'not-found' | 'error'
 
 const route = useRoute()
-const { saveRsvp, getRsvp, getOrganizerToken } = useEventStorage()
+const { saveRsvp, getRsvp, removeRsvp, getOrganizerToken } = useEventStorage()
 
 const state = ref<State>('loading')
 const event = ref<GetEventResponse | null>(null)
@@ -134,6 +150,8 @@ const nameError = ref('')
 const submitError = ref('')
 const submitting = ref(false)
 const rsvpName = ref<string | undefined>(undefined)
+const confirmCancelOpen = ref(false)
+const cancelError = ref('')
 const isOrganizer = ref(false)
 const attendeeNames = ref<string[] | null>(null)
 
@@ -230,6 +248,37 @@ async function submitRsvp() {
   }
 }
 
+async function handleCancelRsvp() {
+  confirmCancelOpen.value = false
+  cancelError.value = ''
+
+  const stored = getRsvp(route.params.eventToken as string)
+  if (!stored) return
+
+  try {
+    const { response } = await api.DELETE('/events/{token}/rsvps/{rsvpToken}', {
+      params: {
+        path: {
+          token: route.params.eventToken as string,
+          rsvpToken: stored.rsvpToken,
+        },
+      },
+    })
+
+    if (response.status === 204 || response.status === 404) {
+      removeRsvp(route.params.eventToken as string)
+      rsvpName.value = undefined
+      if (event.value) {
+        event.value.attendeeCount = Math.max(0, event.value.attendeeCount - 1)
+      }
+    } else {
+      cancelError.value = 'Could not cancel RSVP. Please try again.'
+    }
+  } catch {
+    cancelError.value = 'Could not cancel RSVP. Please try again.'
+  }
+}
+
 async function fetchAttendees(eventToken: string, organizerToken: string) {
   try {
     const { data, error } = await api.GET('/events/{token}/attendees', {
@@ -268,15 +317,19 @@ onMounted(fetchEvent)
 .detail__hero {
   position: relative;
   width: 100%;
-  height: 260px;
-  overflow: hidden;
+  height: 420px;
+  overflow: visible;
   flex-shrink: 0;
 }
 
 .detail__hero-img {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
 }
 
 .detail__hero-overlay {
@@ -284,9 +337,8 @@ onMounted(fetchEvent)
   inset: 0;
   background: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0.4) 0%,
-    transparent 50%,
-    var(--color-gradient-start) 100%
+    var(--color-glass-overlay) 0%,
+    transparent 50%
   );
 }
 
@@ -366,7 +418,6 @@ onMounted(fetchEvent)
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.15);
   border-radius: 10px;
   color: var(--color-text-on-gradient);
 }
@@ -387,14 +438,14 @@ onMounted(fetchEvent)
 .detail__section-title {
   font-size: 0.75rem;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
 .detail__description {
   font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--color-text-soft);
   line-height: 1.6;
   word-break: break-word;
 }
@@ -408,12 +459,6 @@ onMounted(fetchEvent)
   text-align: center;
 }
 
-.detail__banner--expired {
-  background: rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(4px);
-}
-
 /* Error / not-found message */
 .detail__message {
   font-size: 1.1rem;
@@ -423,7 +468,7 @@ onMounted(fetchEvent)
 
 /* Skeleton – shimmer on gradient */
 .skeleton {
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background: linear-gradient(90deg, var(--color-glass) 25%, var(--color-glass-hover) 50%, var(--color-glass) 75%);
   background-size: 200% 100%;
 }
 
@@ -442,4 +487,38 @@ onMounted(fetchEvent)
 .skeleton--short {
   width: 45%;
 }
+
+/* RSVP submit button (glow border wrapper) */
+.rsvp-form__submit {
+  width: 100%;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.rsvp-form__submit:hover {
+  transform: scale(1.02);
+}
+
+.rsvp-form__submit:active {
+  transform: scale(0.98);
+}
+
+.rsvp-form__submit-inner {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  text-align: center;
+  border: none;
+  cursor: pointer;
+}
+
+.rsvp-form__submit-inner:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 </style>

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

@@ -44,7 +44,6 @@ describe('EventCreateView', () => {
     expect(wrapper.find('#description').exists()).toBe(true)
     expect(wrapper.find('#dateTime').exists()).toBe(true)
     expect(wrapper.find('#location').exists()).toBe(true)
-    expect(wrapper.find('#expiryDate').exists()).toBe(true)
   })
 
   it('has required attribute on required fields', async () => {
@@ -58,7 +57,6 @@ describe('EventCreateView', () => {
 
     expect(wrapper.find('#title').attributes('required')).toBeDefined()
     expect(wrapper.find('#dateTime').attributes('required')).toBeDefined()
-    expect(wrapper.find('#expiryDate').attributes('required')).toBeDefined()
   })
 
   it('does not have required attribute on optional fields', async () => {
@@ -102,7 +100,6 @@ describe('EventCreateView', () => {
     // Fill required fields
     await wrapper.find('#title').setValue('My Event')
     await wrapper.find('#dateTime').setValue('2026-12-25T18:00')
-    await wrapper.find('#expiryDate').setValue('2026-12-24')
 
     await wrapper.find('form').trigger('submit')
     await flushPromises()
@@ -127,7 +124,7 @@ describe('EventCreateView', () => {
     await wrapper.find('form').trigger('submit')
 
     const errorsBefore = wrapper.findAll('[role="alert"]').map((el) => el.text()).filter((t) => t.length > 0)
-    expect(errorsBefore.length).toBeGreaterThanOrEqual(3)
+    expect(errorsBefore.length).toBeGreaterThanOrEqual(2)
 
     // Type into title field
     await wrapper.find('#title').setValue('My Event')
@@ -138,9 +135,6 @@ describe('EventCreateView', () => {
 
     const dateTimeError = wrapper.find('#dateTime').element.closest('.form-group')!.querySelector('[role="alert"]')!
     expect(dateTimeError.textContent).not.toBe('')
-
-    const expiryError = wrapper.find('#expiryDate').element.closest('.form-group')!.querySelector('[role="alert"]')!
-    expect(expiryError.textContent).not.toBe('')
   })
 
   it('shows validation errors when submitting empty form', async () => {
@@ -156,7 +150,7 @@ describe('EventCreateView', () => {
 
     const errorElements = wrapper.findAll('[role="alert"]')
     const errorTexts = errorElements.map((el) => el.text()).filter((t) => t.length > 0)
-    expect(errorTexts.length).toBeGreaterThanOrEqual(3)
+    expect(errorTexts.length).toBeGreaterThanOrEqual(2)
   })
 
   it('submits successfully, saves to storage, and navigates to event page', async () => {
@@ -169,6 +163,7 @@ describe('EventCreateView', () => {
       getOrganizerToken: vi.fn(),
       saveRsvp: vi.fn(),
       getRsvp: vi.fn(),
+      removeRsvp: vi.fn(),
       removeEvent: vi.fn(),
     })
 
@@ -179,7 +174,6 @@ describe('EventCreateView', () => {
         title: 'Birthday Party',
         dateTime: '2026-12-25T18:00:00+01:00',
         timezone: 'Europe/Berlin',
-        expiryDate: '2026-12-24',
       },
       error: undefined,
       response: new Response(),
@@ -198,7 +192,6 @@ describe('EventCreateView', () => {
     await wrapper.find('#description').setValue('Come celebrate!')
     await wrapper.find('#dateTime').setValue('2026-12-25T18:00')
     await wrapper.find('#location').setValue('Berlin')
-    await wrapper.find('#expiryDate').setValue('2026-12-24')
 
     await wrapper.find('form').trigger('submit')
     await flushPromises()
@@ -208,7 +201,6 @@ describe('EventCreateView', () => {
         title: 'Birthday Party',
         description: 'Come celebrate!',
         location: 'Berlin',
-        expiryDate: '2026-12-24',
       }),
     })
 
@@ -217,7 +209,6 @@ describe('EventCreateView', () => {
       organizerToken: 'org-456',
       title: 'Birthday Party',
       dateTime: '2026-12-25T18:00:00+01:00',
-      expiryDate: '2026-12-24',
     })
 
     expect(pushSpy).toHaveBeenCalledWith({
@@ -245,7 +236,6 @@ describe('EventCreateView', () => {
 
     await wrapper.find('#title').setValue('Duplicate Event')
     await wrapper.find('#dateTime').setValue('2026-12-25T18:00')
-    await wrapper.find('#expiryDate').setValue('2026-12-24')
 
     await wrapper.find('form').trigger('submit')
     await flushPromises()
@@ -256,6 +246,5 @@ describe('EventCreateView', () => {
 
     // Other field errors should not be present
     expect(wrapper.find('#dateTime-error').exists()).toBe(false)
-    expect(wrapper.find('#expiryDate-error').exists()).toBe(false)
   })
 })

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

@@ -54,7 +54,6 @@ const fullEvent = {
   timezone: 'Europe/Berlin',
   location: 'Central Park, NYC',
   attendeeCount: 12,
-  expired: false,
 }
 
 function mockLoadedEvent(eventOverrides = {}) {
@@ -124,29 +123,6 @@ describe('EventDetailView', () => {
     wrapper.unmount()
   })
 
-  // Expired state
-  it('renders "event has ended" banner when expired', async () => {
-    mockLoadedEvent({ expired: true })
-
-    const wrapper = await mountWithToken()
-    await flushPromises()
-
-    expect(wrapper.text()).toContain('This event has ended.')
-    expect(wrapper.find('.detail__banner--expired').exists()).toBe(true)
-    wrapper.unmount()
-  })
-
-  // No expired banner when not expired
-  it('does not render expired banner when event is active', async () => {
-    mockLoadedEvent()
-
-    const wrapper = await mountWithToken()
-    await flushPromises()
-
-    expect(wrapper.find('.detail__banner--expired').exists()).toBe(false)
-    wrapper.unmount()
-  })
-
   // Not found state
   it('renders "event not found" when API returns 404', async () => {
     vi.mocked(api.GET).mockResolvedValue({
@@ -229,17 +205,6 @@ describe('EventDetailView', () => {
     wrapper.unmount()
   })
 
-  it('does not show RSVP bar on expired event', async () => {
-    mockLoadedEvent({ expired: true })
-
-    const wrapper = await mountWithToken()
-    await flushPromises()
-
-    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(false)
-    expect(wrapper.find('.rsvp-bar').exists()).toBe(false)
-    wrapper.unmount()
-  })
-
   it('shows RSVP status bar when localStorage has RSVP', async () => {
     mockGetRsvp.mockReturnValue({ rsvpToken: 'rsvp-1', rsvpName: 'Max' })
     mockLoadedEvent()
@@ -262,7 +227,7 @@ describe('EventDetailView', () => {
 
     expect(document.body.querySelector('[role="dialog"]')).toBeNull()
 
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     await flushPromises()
 
     expect(document.body.querySelector('[role="dialog"]')).not.toBeNull()
@@ -275,7 +240,7 @@ describe('EventDetailView', () => {
     const wrapper = await mountWithToken()
     await flushPromises()
 
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     await flushPromises()
 
     // Form is inside Teleport — find via document.body
@@ -300,7 +265,7 @@ describe('EventDetailView', () => {
     await flushPromises()
 
     // Open sheet
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     await flushPromises()
 
     // Fill name via Teleported input
@@ -386,7 +351,7 @@ describe('EventDetailView', () => {
     const wrapper = await mountWithToken()
     await flushPromises()
 
-    await wrapper.find('.rsvp-bar__cta').trigger('click')
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
     await flushPromises()
 
     const input = document.body.querySelector('#rsvp-name')! as HTMLInputElement

specs/012-link-preview/checklists/requirements.md

@@ -0,0 +1,36 @@
+# Specification Quality Checklist: Link Preview (Open Graph Meta-Tags)
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-09
+**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`.
+- Assumptions section documents the key technical consideration (SPA vs. server-rendered meta-tags) without prescribing a solution.
+- `og:image` explicitly deferred to future scope.

specs/012-link-preview/contracts/html-meta-tags.md

@@ -0,0 +1,98 @@
+# Contract: HTML Meta-Tags
+
+**Feature**: 012-link-preview | **Date**: 2026-03-09
+
+## Overview
+
+This feature does not add new REST API endpoints. The contract is the HTML meta-tag structure injected into the server-rendered `index.html`.
+
+## Meta-Tag Contract: Event Pages
+
+For requests to `/events/{eventToken}` where the event exists:
+
+```html
+<!-- Open Graph -->
+<meta property="og:title" content="{event title, max 70 chars}">
+<meta property="og:description" content="{formatted description, max 200 chars}">
+<meta property="og:url" content="{absolute canonical URL}">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="fete">
+<meta property="og:image" content="{absolute URL}/og-image.png">
+
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="{event title, max 70 chars}">
+<meta name="twitter:description" content="{formatted description, max 200 chars}">
+```
+
+### Description Format
+
+Full event data:
+```
+📅 Saturday, March 15, 2026 at 7:00 PM · 📍 Berlin — First 200 chars of description...
+```
+
+No location:
+```
+📅 Saturday, March 15, 2026 at 7:00 PM — First 200 chars of description...
+```
+
+No description:
+```
+📅 Saturday, March 15, 2026 at 7:00 PM · 📍 Berlin
+```
+
+No location, no description:
+```
+📅 Saturday, March 15, 2026 at 7:00 PM
+```
+
+### Title Truncation
+
+- Titles ≤ 70 characters: used as-is.
+- Titles > 70 characters: truncated to 67 characters + "..."
+
+### HTML Escaping
+
+All meta-tag `content` values MUST be HTML-escaped:
+- `"` → `&quot;`
+- `&` → `&amp;`
+- `<` → `&lt;`
+- `>` → `&gt;`
+
+## Meta-Tag Contract: Non-Event Pages
+
+For requests to `/`, `/create`, or any other non-event, non-API, non-static route:
+
+```html
+<!-- Open Graph -->
+<meta property="og:title" content="fete">
+<meta property="og:description" content="Privacy-focused event planning. Create and share events without accounts.">
+<meta property="og:url" content="{absolute canonical URL}">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="fete">
+<meta property="og:image" content="{absolute URL}/og-image.png">
+
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="fete">
+<meta name="twitter:description" content="Privacy-focused event planning. Create and share events without accounts.">
+```
+
+## Meta-Tag Contract: Event Not Found
+
+For requests to `/events/{eventToken}` where the event does NOT exist, fall back to generic meta-tags (same as non-event pages). The Vue SPA will handle the 404 UI client-side.
+
+## Injection Mechanism
+
+The `index.html` template contains a placeholder:
+
+```html
+<head>
+  ...
+  <!-- OG_META_TAGS -->
+  ...
+</head>
+```
+
+The server replaces `<!-- OG_META_TAGS -->` with the generated meta-tag block before sending the response.

specs/012-link-preview/data-model.md

@@ -0,0 +1,83 @@
+# Data Model: Link Preview (Open Graph Meta-Tags)
+
+**Feature**: 012-link-preview | **Date**: 2026-03-09
+
+## Overview
+
+This feature does NOT introduce new database entities. It reads existing event data and projects it into HTML meta-tags. The "model" here is the meta-tag value object used during HTML generation.
+
+## Meta-Tag Value Objects
+
+### OpenGraphMeta
+
+Represents the set of Open Graph meta-tags to inject into the HTML response.
+
+| Field | Type | Source | Rules |
+|---|---|---|---|
+| `title` | String | Event title or "fete" | Max 70 chars, truncated with "..." |
+| `description` | String | Composed from event fields or generic text | Max 200 chars |
+| `url` | String | Canonical URL from request | Absolute URL |
+| `type` | String | Always "website" | Constant |
+| `siteName` | String | Always "fete" | Constant |
+| `image` | String | Static brand image URL | Absolute URL to `/og-image.png` |
+
+### TwitterCardMeta
+
+| Field | Type | Source | Rules |
+|---|---|---|---|
+| `card` | String | Always "summary" | Constant |
+| `title` | String | Same as OG title | Max 70 chars |
+| `description` | String | Same as OG description | Max 200 chars |
+
+## Data Flow
+
+```
+Request for /events/{token}
+    │
+    ▼
+LinkPreviewController
+    │
+    ├── Resolve event token → Event domain object (existing EventRepository)
+    │
+    ├── Build OpenGraphMeta from Event fields:
+    │     title     ← event.title (truncated)
+    │     description ← formatDescription(event.dateTime, event.timezone, event.location, event.description)
+    │     url       ← request base URL + /events/{token}
+    │     image     ← request base URL + /og-image.png
+    │
+    ├── Build TwitterCardMeta (mirrors OG values)
+    │
+    ├── Inject meta-tags into cached index.html template
+    │
+    └── Return modified HTML
+
+Request for / or /create (non-event pages)
+    │
+    ▼
+LinkPreviewController
+    │
+    ├── Build generic OpenGraphMeta:
+    │     title       ← "fete"
+    │     description ← "Privacy-focused event planning. Create and share events without accounts."
+    │     url         ← request URL
+    │     image       ← request base URL + /og-image.png
+    │
+    ├── Build generic TwitterCardMeta
+    │
+    ├── Inject meta-tags into cached index.html template
+    │
+    └── Return modified HTML
+```
+
+## Existing Entities Used (Read-Only)
+
+### Event (from `de.fete.domain.model.Event`)
+
+| Field | Used For |
+|---|---|
+| `title` | `og:title`, `twitter:title` |
+| `description` | Part of `og:description`, `twitter:description` |
+| `dateTime` | Part of `og:description` (formatted) |
+| `timezone` | Date formatting context |
+| `location` | Part of `og:description` |
+| `eventToken` | URL construction |

specs/012-link-preview/plan.md

@@ -0,0 +1,83 @@
+# Implementation Plan: Link Preview (Open Graph Meta-Tags)
+
+**Branch**: `012-link-preview` | **Date**: 2026-03-09 | **Spec**: `specs/012-link-preview/spec.md`
+**Input**: Feature specification from `/specs/012-link-preview/spec.md`
+
+## Summary
+
+Inject Open Graph and Twitter Card meta-tags into the server-rendered HTML so that shared event links display rich preview cards in messengers and on social media. The Spring Boot backend replaces its current static SPA fallback with a controller that dynamically injects event-specific or generic meta-tags into the cached `index.html` template before serving it.
+
+## Technical Context
+
+**Language/Version**: Java 25 (backend), TypeScript 5.9 (frontend — minimal changes)
+**Primary Dependencies**: Spring Boot 3.5.x (existing), Vue 3 (existing) — no new dependencies
+**Storage**: PostgreSQL via JPA (existing event data, read-only access)
+**Testing**: JUnit 5 + Spring MockMvc (backend), Playwright (E2E)
+**Target Platform**: Self-hosted Docker container (Linux)
+**Project Type**: Web application (SPA + REST API)
+**Performance Goals**: N/A — meta-tag injection adds negligible overhead (<1ms string replacement)
+**Constraints**: Meta-tags MUST be in initial HTML response (no client-side JS injection). No external services or CDNs.
+**Scale/Scope**: Affects all HTML page responses. No new database tables or API endpoints.
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|---|---|---|
+| I. Privacy by Design | ✅ PASS | No tracking, analytics, or external services. Meta-tags contain only public event info (title, date, location). No PII exposed. `og:image` is a self-hosted static asset. |
+| II. Test-Driven Methodology | ✅ PLAN | Unit tests for meta-tag generation, integration tests for controller, E2E tests for full HTML verification. TDD enforced. |
+| III. API-First Development | ✅ N/A | No new API endpoints. This feature modifies HTML serving, not the REST API. Existing OpenAPI spec unchanged. |
+| IV. Simplicity & Quality | ✅ PASS | Simple string replacement in cached HTML template. No SSR framework, no prerendering service, no user-agent sniffing. Minimal moving parts. |
+| V. Dependency Discipline | ✅ PASS | Zero new dependencies. Uses only Spring Boot's existing capabilities. |
+| VI. Accessibility | ✅ N/A | Meta-tags are invisible to users. No UI changes. |
+
+**Gate result: PASS** — No violations. No complexity tracking needed.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/012-link-preview/
+├── plan.md              # This file
+├── research.md          # Phase 0 output — technical decisions
+├── data-model.md        # Phase 1 output — meta-tag value objects
+├── quickstart.md        # Phase 1 output — implementation guide
+├── contracts/
+│   └── html-meta-tags.md  # Phase 1 output — meta-tag HTML contract
+└── tasks.md             # Phase 2 output (created by /speckit.tasks)
+```
+
+### Source Code (repository root)
+
+```text
+backend/
+├── src/main/java/de/fete/
+│   ├── adapter/in/web/
+│   │   └── SpaController.java            # NEW — serves index.html with injected meta-tags
+│   ├── application/
+│   │   └── OpenGraphService.java          # NEW — composes meta-tag values from event data
+│   └── config/
+│       └── WebConfig.java                 # MODIFIED — remove PathResourceResolver SPA fallback
+├── src/main/resources/
+│   └── application.properties             # MODIFIED — add forward-headers-strategy
+└── src/test/java/de/fete/
+    ├── adapter/in/web/
+    │   └── SpaControllerTest.java         # NEW — integration tests
+    └── application/
+        └── OpenGraphServiceTest.java      # NEW — unit tests
+
+frontend/
+├── index.html                             # MODIFIED — add <!-- OG_META_TAGS --> placeholder
+├── public/
+│   └── og-image.png                       # NEW — brand image for og:image (1200x630)
+└── e2e/
+    └── link-preview.spec.ts               # NEW — E2E tests
+```
+
+**Structure Decision**: Web application structure (existing). Backend changes in adapter/web and application layers. Frontend changes minimal (HTML placeholder + static asset).
+
+## Complexity Tracking
+
+> No violations — section intentionally empty.

specs/012-link-preview/quickstart.md

@@ -0,0 +1,57 @@
+# Quickstart: Link Preview (Open Graph Meta-Tags)
+
+**Feature**: 012-link-preview | **Date**: 2026-03-09
+
+## What This Feature Does
+
+Injects Open Graph and Twitter Card meta-tags into the HTML response so that shared links display rich preview cards in messengers (WhatsApp, Telegram, Signal, etc.) and on social media (Twitter/X).
+
+## How It Works
+
+1. **All HTML page requests** go through a new `SpaController` (replaces the current `PathResourceResolver` SPA fallback).
+2. The controller reads the compiled `index.html` template once at startup and caches it.
+3. For event pages (`/events/{token}`): fetches event data, generates event-specific meta-tags, injects them into the HTML.
+4. For non-event pages: injects generic fete branding meta-tags.
+5. Static files (`/assets/*`, `/favicon.svg`, `/og-image.png`) continue to be served directly by Spring Boot's default static resource handler.
+
+## Key Files to Create/Modify
+
+### Backend (New)
+
+| File | Purpose |
+|---|---|
+| `SpaController.java` | Controller handling all non-API/non-static HTML requests, injecting meta-tags |
+| `OpenGraphService.java` | Service composing meta-tag values from event data |
+| `MetaTagRenderer.java` | Utility rendering meta-tag value objects into HTML `<meta>` strings |
+
+### Backend (Modified)
+
+| File | Change |
+|---|---|
+| `WebConfig.java` | Remove `PathResourceResolver` SPA fallback (replaced by `SpaController`) |
+| `application.properties` | Add `server.forward-headers-strategy=framework` for correct URL construction behind proxies |
+
+### Frontend (Modified)
+
+| File | Change |
+|---|---|
+| `index.html` | Add `<!-- OG_META_TAGS -->` placeholder comment in `<head>` |
+
+### Static Assets (New)
+
+| File | Purpose |
+|---|---|
+| `frontend/public/og-image.png` | Brand image for `og:image` (1200x630 PNG) |
+
+## Testing Strategy
+
+- **Unit tests**: `OpenGraphService` — verify meta-tag values for various event states (full data, no location, no description, long title, special characters).
+- **Unit tests**: `MetaTagRenderer` — verify HTML escaping, correct meta-tag format.
+- **Integration tests**: `SpaController` — verify correct HTML response with meta-tags for event URLs, generic URLs, and 404 events.
+- **E2E tests**: Fetch event page HTML without JavaScript, parse meta-tags, verify values match event data.
+
+## Local Development Notes
+
+- In dev mode (Vite dev server), meta-tags won't be injected since Vite serves its own `index.html`. This is expected — meta-tag injection only works when the backend serves the frontend.
+- To test locally: build the frontend (`npm run build`), copy `dist/` contents to `backend/src/main/resources/static/`, then run the backend.
+- Alternatively, test via the Docker build which assembles everything automatically.

specs/012-link-preview/research.md

@@ -0,0 +1,115 @@
+# Research: Link Preview (Open Graph Meta-Tags)
+
+**Feature**: 012-link-preview | **Date**: 2026-03-09
+
+## R1: How to Serve Dynamic Meta-Tags from a Vue SPA
+
+### Problem
+
+Vue SPA serves a single `index.html` for all routes via Spring Boot's `PathResourceResolver` fallback in `WebConfig.java`. Social media crawlers (WhatsApp, Telegram, Signal, Twitter/X) do NOT execute JavaScript — they only read the initial HTML response. The current `index.html` contains no Open Graph meta-tags.
+
+### Decision: Server-Side HTML Template Injection
+
+Intercept HTML page requests in the Spring Boot backend. Before serving `index.html`, parse the route, fetch event data if applicable, and inject `<meta>` tags into the `<head>` section.
+
+### Rationale
+
+- **No new dependencies**: Uses Spring Boot's existing resource serving + simple string manipulation.
+- **No SSR framework needed**: Avoids adding Nuxt, Vite SSR, or a prerendering service.
+- **Universal**: Works for all clients (not just crawlers), improving SEO for all visitors.
+- **Simple**: The backend already serves `index.html` for all non-API/non-static routes. We just need to modify *what* HTML is returned.
+
+### Alternatives Considered
+
+| Alternative | Rejected Because |
+|---|---|
+| **Vue SSR (Nuxt/Vite SSR)** | Massive architectural change. Overkill for injecting a few meta-tags. Violates KISS. |
+| **Prerendering service (prerender.io, rendertron)** | External dependency that may phone home. Violates Privacy by Design. Adds operational complexity. |
+| **User-agent sniffing** | Fragile — crawler UA strings change frequently. Serving different content to crawlers vs. users is considered cloaking by some search engines. |
+| **Static prerendering at build time** | Events are dynamic — created at runtime. Cannot prerender at build time. |
+| **`<noscript>` fallback** | Crawlers don't read `<noscript>` content for meta-tags. Only `<meta>` tags in `<head>` are parsed. |
+
+## R2: Implementation Strategy — Where to Inject
+
+### Decision: Custom Controller Replacing SPA Fallback
+
+Replace the current `PathResourceResolver` SPA fallback in `WebConfig.java` with a dedicated `@Controller` that:
+
+1. Reads the compiled `index.html` from `classpath:/static/index.html` once at startup (cached as a template string).
+2. For requests matching `/events/{token}`: fetches the event from the database, generates meta-tags, injects them into the HTML template.
+3. For all other non-API, non-static-file requests: injects generic fete meta-tags.
+4. Returns the modified HTML with `Content-Type: text/html`.
+
+### Rationale
+
+- The existing `PathResourceResolver` approach cannot modify the HTML content — it only resolves files.
+- A controller gives full programmatic control over the response.
+- Template caching avoids repeated file I/O.
+- Event lookup is a single DB query (already exists via `EventRepository`).
+
+### Template Injection Point
+
+The `index.html` will contain a placeholder comment `<!-- OG_META_TAGS -->` in the `<head>` section. The controller replaces this placeholder with the generated meta-tags. This is done in the Vite source `index.html` and preserved through the build.
+
+## R3: Meta-Tag Content Strategy
+
+### Decision: Structured Description Format
+
+For event pages, `og:description` follows this pattern:
+```
+📅 {formatted date} · 📍 {location} — {truncated description}
+```
+
+If location is missing:
+```
+📅 {formatted date} — {truncated description}
+```
+
+If description is missing:
+```
+📅 {formatted date} · 📍 {location}
+```
+
+Date format: `EEEE, MMMM d, yyyy 'at' h:mm a` (e.g., "Saturday, March 15, 2026 at 7:00 PM") using the event's timezone.
+
+### Title truncation
+
+`og:title` = event title, truncated to 70 characters with "..." suffix if exceeded.
+
+### Description truncation
+
+Total `og:description` max 200 characters. The event description portion is truncated to fit within this limit after the date/location prefix.
+
+## R4: Brand Image for og:image
+
+### Decision: Use Existing Favicon SVG
+
+The project already has a `favicon.svg` (tada emoji). For `og:image`, we'll create a PNG version (1200x630 recommended for OG) as a static asset.
+
+### Rationale
+
+- SVG is not universally supported as `og:image` (WhatsApp and some crawlers require raster formats).
+- A simple static PNG avoids runtime image generation complexity.
+- The brand image is the same for all pages (event-specific images are out of scope per spec).
+
+### Implementation
+
+- Add a static `og-image.png` (1200x630) to `frontend/public/` so it's included in the build output.
+- The `og:image` URL will be an absolute URL: `{baseUrl}/og-image.png`.
+- The image needs to be created manually (design task) or generated from the favicon.
+
+## R5: Absolute URL Construction
+
+### Decision: Derive from Request
+
+The `og:url` and `og:image` tags require absolute URLs. These will be constructed from the incoming HTTP request's scheme, host, and port using `ServletUriComponentsBuilder`.
+
+### Rationale
+
+- Works correctly behind reverse proxies when `X-Forwarded-*` headers are configured (Spring Boot handles this by default with `server.forward-headers-strategy=framework`).
+- No need for hardcoded base URL configuration.
+- Adapts automatically to different deployment environments.
+
+### Note
+
+Spring Boot's `server.forward-headers-strategy` should be set to `framework` in production to trust proxy headers. This is typically already handled in containerized deployments.

specs/012-link-preview/spec.md

@@ -0,0 +1,104 @@
+# Feature Specification: Link Preview (Open Graph Meta-Tags)
+
+**Feature Branch**: `012-link-preview`
+**Created**: 2026-03-09
+**Status**: Draft
+**Input**: User description: "When people share an event link, the users messenger should show information about the site in the messenger"
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Event Link Preview in Messenger (Priority: P1)
+
+A user copies the link to a specific event page and pastes it into a messenger (WhatsApp, Telegram, Signal, iMessage, etc.). The messenger automatically fetches metadata from the link and displays a rich preview card showing the event title, a short description, and the fete branding. The recipient sees this information without having to open the link.
+
+**Why this priority**: This is the core feature. Without proper meta-tags on the event page, shared links appear as bare URLs with no context, reducing click-through rates and making events harder to discover.
+
+**Independent Test**: Can be fully tested by sharing an event link in any messenger and verifying the preview card shows the correct event title, description with date and location, and the fete app name.
+
+**Acceptance Scenarios**:
+
+1. **Given** an event exists with title, date, location, and description, **When** a user shares the event URL in a messenger, **Then** the messenger displays a preview card showing the event title, a summary of the event (including date and location), and the fete app name.
+2. **Given** an event exists with all details, **When** a social media crawler fetches the event URL, **Then** the response includes Open Graph meta-tags (`og:title`, `og:description`, `og:url`, `og:type`, `og:site_name`) with correct event-specific values.
+3. **Given** an event exists, **When** a crawler fetches the event URL, **Then** the `og:description` includes the event date, location, and a truncated version of the event description (max 200 characters).
+
+---
+
+### User Story 2 - Fallback Preview for Generic Pages (Priority: P2)
+
+When a user shares a non-event page (e.g., the homepage or event list), the messenger still shows a meaningful preview with the app name and a generic description of what fete is.
+
+**Why this priority**: Users may share the main app link rather than a specific event. A generic fallback ensures every shared link looks polished.
+
+**Independent Test**: Can be tested by sharing the homepage URL in a messenger and verifying a sensible default preview appears.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user shares the app homepage URL, **When** a messenger fetches the link, **Then** the preview shows the app name "fete" as the title and a generic description (e.g., "Privacy-focused event planning. Create and share events without accounts.").
+2. **Given** a user shares the event list URL, **When** a messenger fetches the link, **Then** the preview shows default app-level metadata.
+
+---
+
+### User Story 3 - Twitter/X Card Support (Priority: P3)
+
+In addition to Open Graph tags, the system provides Twitter Card meta-tags so that links shared on Twitter/X also display rich preview cards.
+
+**Why this priority**: Twitter/X uses its own card format alongside Open Graph. Adding these tags broadens the platforms where previews work correctly.
+
+**Independent Test**: Can be tested by validating the HTML source contains `twitter:card`, `twitter:title`, and `twitter:description` meta-tags.
+
+**Acceptance Scenarios**:
+
+1. **Given** an event page, **When** a Twitter/X crawler fetches the URL, **Then** the response includes `twitter:card` (set to "summary"), `twitter:title`, and `twitter:description` meta-tags with correct values.
+
+---
+
+### Edge Cases
+
+- What happens when an event has no description? The preview shows the event title, date, and location. The description meta-tag falls back to date and location only.
+- What happens when an event has no location? The description meta-tag includes the date and whatever other details are available.
+- What happens when the event title contains special characters (quotes, ampersands, angle brackets)? Meta-tag values are properly HTML-escaped.
+- How does the system handle very long event titles or descriptions? Titles are truncated at 70 characters, descriptions at 200 characters.
+- What happens when crawlers don't execute JavaScript? Meta-tags are served in the initial HTML response from the server, not injected client-side.
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: The system MUST include Open Graph meta-tags (`og:title`, `og:description`, `og:url`, `og:type`, `og:site_name`) on every event page.
+- **FR-002**: The system MUST populate `og:title` with the event title, truncated to 70 characters if necessary.
+- **FR-003**: The system MUST populate `og:description` with a summary that includes the event date, location (if available), and a truncated event description (max 200 characters total).
+- **FR-004**: The system MUST set `og:type` to "website" for all pages.
+- **FR-005**: The system MUST set `og:site_name` to "fete".
+- **FR-006**: The system MUST include fallback Open Graph meta-tags on non-event pages (homepage, event list) with a generic app description.
+- **FR-007**: The system MUST include Twitter Card meta-tags (`twitter:card`, `twitter:title`, `twitter:description`) on every page.
+- **FR-008**: The system MUST properly HTML-escape all meta-tag values to prevent rendering issues with special characters.
+- **FR-009**: The system MUST serve meta-tags in the initial HTML response (not rely on client-side JavaScript rendering) so that crawlers can read them.
+- **FR-010**: The system MUST set `og:url` to the canonical URL of the current page.
+- **FR-011**: The system MUST include an `og:image` meta-tag on every page, pointing to a generic fete brand image (logo/icon).
+
+### Key Entities
+
+- **Event Metadata**: The subset of event information used for link previews — title, date, location, description. These are read-only projections of existing event data.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: 100% of event page links display a rich preview card (with title and description) when shared in WhatsApp, Telegram, and Signal.
+- **SC-002**: All meta-tag values are correctly populated with event-specific data — verified by automated tests against the HTML output.
+- **SC-003**: Non-event pages display a meaningful generic preview when shared in messengers.
+- **SC-004**: Meta-tags are present in the initial server response (not injected by client-side JavaScript), verifiable by fetching the page without JavaScript execution.
+
+## Clarifications
+
+### Session 2026-03-09
+
+- Q: Should a generic fete brand image be included as `og:image` fallback? → A: Yes, include a generic fete brand image as `og:image` on all pages (logo/icon).
+- Q: In which language should meta-tag texts (generic description, site name) be? → A: English for all meta-tag texts.
+
+## Assumptions
+
+- The backend can serve or pre-render HTML with event-specific meta-tags for event detail pages. Since this is a Vue SPA, server-side rendering or a dedicated server-side mechanism will be needed for crawlers that don't execute JavaScript.
+- A generic fete brand image (logo/icon) is used as `og:image` on all pages. Event-specific cover images are out of scope and can be added later.
+- The date format in `og:description` uses a human-readable English format.
+- All meta-tag texts (generic descriptions, site name, fallback content) are in English.

specs/012-link-preview/tasks.md

@@ -0,0 +1,201 @@
+# Tasks: Link Preview (Open Graph Meta-Tags)
+
+**Input**: Design documents from `/specs/012-link-preview/`
+**Prerequisites**: plan.md, spec.md, research.md, data-model.md, contracts/
+
+**Tests**: Included — constitution mandates TDD (Red → Green → Refactor).
+
+**Organization**: Tasks grouped by user story for independent implementation and testing.
+
+## 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: Setup
+
+**Purpose**: Prepare frontend template and static assets for meta-tag injection
+
+- [x] T001 Add `<!-- OG_META_TAGS -->` placeholder comment in `<head>` of `frontend/index.html`
+- [x] T002 [P] Create `og-image.png` brand image (1200x630) in `frontend/public/og-image.png`
+- [x] T003 [P] Add `server.forward-headers-strategy=framework` to `backend/src/main/resources/application.properties`
+
+---
+
+## Phase 2: Foundational (Blocking Prerequisites)
+
+**Purpose**: Core infrastructure for HTML meta-tag injection that ALL user stories depend on
+
+**⚠️ CRITICAL**: No user story work can begin until this phase is complete
+
+- [x] T004 Write unit tests for `MetaTagRenderer` (HTML escaping, meta-tag HTML output) in `backend/src/test/java/de/fete/adapter/in/web/MetaTagRendererTest.java` — tests MUST fail (Red)
+- [x] T005 Implement `MetaTagRenderer` utility that renders meta-tag key-value pairs into HTML `<meta>` strings with proper HTML escaping in `backend/src/main/java/de/fete/adapter/in/web/MetaTagRenderer.java`
+- [x] T006 Write integration tests for `SpaController` base functionality (serves index.html, replaces placeholder) in `backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java` — tests MUST fail (Red)
+- [x] T007 Implement `SpaController` that caches `index.html` template at startup and replaces `<!-- OG_META_TAGS -->` placeholder before serving in `backend/src/main/java/de/fete/adapter/in/web/SpaController.java`
+- [x] T008 Remove `PathResourceResolver` SPA fallback from `backend/src/main/java/de/fete/config/WebConfig.java` (replaced by `SpaController`)
+
+**Checkpoint**: SPA still works (index.html served for all non-API/non-static routes), but now through `SpaController` with placeholder replacement ready
+
+---
+
+## Phase 3: User Story 1 — Event Link Preview in Messenger (Priority: P1) 🎯 MVP
+
+**Goal**: Shared event links display rich preview cards with event title, date, location, and description in messengers
+
+**Independent Test**: Share an event URL — messenger shows event title and formatted description with date/location
+
+### Tests for User Story 1 ⚠️
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [x] T009 [P] [US1] Unit tests for `OpenGraphService.buildEventMeta()` — full event data, no location, no description, long title truncation, special characters in `backend/src/test/java/de/fete/application/OpenGraphServiceTest.java`
+- [x] T010 [P] [US1] Integration tests for `SpaController` event routes — GET `/events/{token}` returns HTML with event-specific OG meta-tags, event not found falls back to generic in `backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java`
+
+### Implementation for User Story 1
+
+- [x] T011 [US1] Implement `OpenGraphService.buildEventMeta()` — fetch event by token, compose `og:title` (truncated 70 chars), `og:description` (date + location + description, max 200 chars), `og:url`, `og:type`, `og:site_name`, `og:image` in `backend/src/main/java/de/fete/application/service/OpenGraphService.java`
+- [x] T012 [US1] Wire `SpaController` to call `OpenGraphService` for `/events/{token}` routes, inject event-specific meta-tags via `MetaTagRenderer` in `backend/src/main/java/de/fete/adapter/in/web/SpaController.java`
+- [ ] T013 [US1] E2E test — deferred (requires running backend; covered by integration tests)
+
+**Checkpoint**: Event links show rich OG preview cards in messengers. MVP complete.
+
+---
+
+## Phase 4: User Story 2 — Fallback Preview for Generic Pages (Priority: P2)
+
+**Goal**: Non-event pages (homepage, event list, create) show a meaningful generic fete preview when shared
+
+**Independent Test**: Share the homepage URL — messenger shows "fete" as title and generic app description
+
+### Tests for User Story 2 ⚠️
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [x] T014 [P] [US2] Unit tests for `OpenGraphService.buildGenericMeta()` — verify generic title "fete", generic description, correct URL, image URL in `backend/src/test/java/de/fete/application/service/OpenGraphServiceTest.java`
+- [x] T015 [P] [US2] Integration tests for `SpaController` generic routes — GET `/`, GET `/create` return HTML with generic OG meta-tags in `backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java`
+
+### Implementation for User Story 2
+
+- [x] T016 [US2] Implement `OpenGraphService.buildGenericMeta()` — title "fete", description "Privacy-focused event planning. Create and share events without accounts.", type "website", site_name "fete" in `backend/src/main/java/de/fete/application/service/OpenGraphService.java`
+- [x] T017 [US2] Wire `SpaController` to call `OpenGraphService.buildGenericMeta()` for all non-event HTML routes in `backend/src/main/java/de/fete/adapter/in/web/SpaController.java`
+- [ ] T018 [US2] E2E test — deferred (requires running backend; covered by integration tests)
+
+**Checkpoint**: All shared fete links (event-specific and generic) show rich preview cards
+
+---
+
+## Phase 5: User Story 3 — Twitter/X Card Support (Priority: P3)
+
+**Goal**: Links shared on Twitter/X also display rich preview cards via Twitter Card meta-tags
+
+**Independent Test**: Verify HTML source contains `twitter:card`, `twitter:title`, `twitter:description` meta-tags
+
+### Tests for User Story 3 ⚠️
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [x] T019 [P] [US3] Unit tests for Twitter Card meta-tag generation — verify `twitter:card` = "summary", `twitter:title`, `twitter:description` match OG values in `backend/src/test/java/de/fete/application/service/OpenGraphServiceTest.java`
+- [x] T020 [P] [US3] Integration tests for `SpaController` — event and generic routes include Twitter Card meta-tags in `backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java`
+
+### Implementation for User Story 3
+
+- [x] T021 [US3] Extend `OpenGraphService` to include Twitter Card meta-tags (`twitter:card`, `twitter:title`, `twitter:description`) alongside OG tags in `backend/src/main/java/de/fete/application/service/OpenGraphService.java`
+- [x] T022 [US3] Extend `MetaTagRenderer` to render `<meta name="twitter:*">` tags (using `name` attribute instead of `property`) in `backend/src/main/java/de/fete/adapter/in/web/MetaTagRenderer.java`
+- [ ] T023 [US3] E2E test — fetch event page and homepage, verify Twitter Card meta-tags present alongside OG tags in `frontend/e2e/link-preview.spec.ts`
+
+**Checkpoint**: All three user stories complete — OG tags, generic fallback, and Twitter Cards all working
+
+---
+
+## Phase 6: Polish & Cross-Cutting Concerns
+
+**Purpose**: Edge cases, hardening, and final verification
+
+- [x] T024 [P] Verify HTML escaping for special characters (quotes, ampersands, angle brackets) in meta-tag values across all routes — edge-case tests in MetaTagRendererTest.java
+- [x] T025 [P] Verify `SpaController` does not intercept static asset requests — SpaController only handles explicit routes, not wildcard
+- [x] T026 Run full backend test suite (`cd backend && ./mvnw verify`) and fix any regressions — 97 tests, 0 bugs
+- [x] T027 Run full frontend test suite (`cd frontend && npm run test:unit`) — 133 tests passed
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Setup (Phase 1)**: No dependencies — can start immediately
+- **Foundational (Phase 2)**: Depends on T001 (placeholder in index.html) — BLOCKS all user stories
+- **US1 (Phase 3)**: Depends on Foundational phase completion
+- **US2 (Phase 4)**: Depends on Foundational phase completion — can run in parallel with US1
+- **US3 (Phase 5)**: Depends on US1 or US2 (extends their meta-tag output)
+- **Polish (Phase 6)**: Depends on all user stories being complete
+
+### User Story Dependencies
+
+- **User Story 1 (P1)**: Can start after Foundational (Phase 2) — no dependencies on other stories
+- **User Story 2 (P2)**: Can start after Foundational (Phase 2) — independent from US1
+- **User Story 3 (P3)**: Depends on US1 or US2 — extends existing OG meta-tag output with Twitter tags
+
+### Within Each User Story
+
+- Tests MUST be written and FAIL before implementation (TDD Red phase)
+- Service layer before controller wiring
+- Unit tests before integration tests before E2E tests
+- Story complete before moving to next priority
+
+### Parallel Opportunities
+
+- T001, T002, T003 can all run in parallel (Setup phase)
+- T004 and T006 can run in parallel (Foundational tests — different files)
+- T009, T010 can run in parallel (US1 tests — different files)
+- T014, T015 can run in parallel (US2 tests — different files)
+- T019, T020 can run in parallel (US3 tests — different files)
+- US1 and US2 can be worked on in parallel after Foundational phase
+
+---
+
+## Parallel Example: User Story 1
+
+```bash
+# Launch US1 tests in parallel (Red phase):
+Task: "Unit tests for OpenGraphService.buildEventMeta() in OpenGraphServiceTest.java"
+Task: "Integration tests for SpaController event routes in SpaControllerTest.java"
+
+# Then implement sequentially:
+Task: "Implement OpenGraphService.buildEventMeta()"
+Task: "Wire SpaController for /events/{token} routes"
+Task: "E2E test for event page meta-tags"
+```
+
+---
+
+## Implementation Strategy
+
+### MVP First (User Story 1 Only)
+
+1. Complete Phase 1: Setup (T001–T003)
+2. Complete Phase 2: Foundational (T004–T008)
+3. Complete Phase 3: User Story 1 (T009–T013)
+4. **STOP and VALIDATE**: Share an event link in a messenger, verify preview card
+5. Deploy/demo if ready
+
+### Incremental Delivery
+
+1. Setup + Foundational → SpaController serving index.html with placeholder replacement
+2. Add US1 → Event links show rich previews → Deploy (MVP!)
+3. Add US2 → Generic pages also show previews → Deploy
+4. Add US3 → Twitter/X cards work too → Deploy
+5. Polish → Edge cases hardened → Final release
+
+---
+
+## Notes
+
+- [P] tasks = different files, no dependencies
+- [Story] label maps task to specific user story for traceability
+- Each user story is independently completable and testable
+- TDD enforced: write tests first, verify they fail, then implement
+- Commit after each task or logical group
+- Stop at any checkpoint to validate story independently

specs/013-auto-delete-expired/checklists/requirements.md

@@ -0,0 +1,34 @@
+# Specification Quality Checklist: Auto-Delete Expired Events
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-09
+**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`.

specs/013-auto-delete-expired/data-model.md

@@ -0,0 +1,38 @@
+# Data Model: Auto-Delete Expired Events
+
+**Feature**: 013-auto-delete-expired | **Date**: 2026-03-09
+
+## Existing Entities (no changes)
+
+### Event
+
+| Field | Type | Notes |
+|-------|------|-------|
+| id | BIGSERIAL | PK, internal |
+| event_token | UUID | Public identifier |
+| organizer_token | UUID | Organizer access |
+| title | VARCHAR(200) | Required |
+| description | VARCHAR(2000) | Optional |
+| date_time | TIMESTAMPTZ | Event date/time |
+| location | VARCHAR(500) | Optional |
+| expiry_date | DATE | **Deletion trigger** — indexed (`idx_events_expiry_date`) |
+| created_at | TIMESTAMPTZ | Auto-set |
+
+### RSVP
+
+| Field | Type | Notes |
+|-------|------|-------|
+| id | BIGSERIAL | PK, internal |
+| rsvp_token | UUID | Public identifier |
+| event_id | BIGINT | FK → events(id), **ON DELETE CASCADE** |
+| name | VARCHAR(100) | Guest name |
+
+## Deletion Behavior
+
+- `DELETE FROM events WHERE expiry_date < CURRENT_DATE` removes expired events.
+- RSVPs are automatically cascade-deleted by the FK constraint `fk_rsvps_event_id` with `ON DELETE CASCADE`.
+- No new tables, columns, or migrations required.
+
+## Indexes Used
+
+- `idx_events_expiry_date` on `events(expiry_date)` — ensures the cleanup query is efficient.

specs/013-auto-delete-expired/plan.md

@@ -0,0 +1,90 @@
+# Implementation Plan: Auto-Delete Expired Events
+
+**Branch**: `013-auto-delete-expired` | **Date**: 2026-03-09 | **Spec**: [spec.md](spec.md)
+**Input**: Feature specification from `/specs/013-auto-delete-expired/spec.md`
+
+## Summary
+
+Add a scheduled background job that runs daily and deletes all events whose `expiryDate` has passed. Deletion is performed via a native SQL query (`DELETE FROM events WHERE expiry_date < CURRENT_DATE`). Cascade deletion of RSVPs is handled by the existing `ON DELETE CASCADE` FK constraint. No API or frontend changes required.
+
+## Technical Context
+
+**Language/Version**: Java 25, Spring Boot 3.5.x
+**Primary Dependencies**: Spring Scheduling (`@Scheduled`), Spring Data JPA (for native query)
+**Storage**: PostgreSQL (existing, Liquibase migrations)
+**Testing**: JUnit 5, Spring Boot Test, Testcontainers (existing)
+**Target Platform**: Linux server (Docker)
+**Project Type**: Web service (backend only for this feature)
+**Performance Goals**: N/A — daily batch job on small dataset
+**Constraints**: Single native DELETE query, no entity loading
+**Scale/Scope**: Self-hosted, small-scale — typically < 100 events total
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|-----------|--------|-------|
+| I. Privacy by Design | PASS | Deleting expired data supports privacy goals. No PII logged. |
+| II. Test-Driven Methodology | PASS | Tests written before implementation (TDD). |
+| III. API-First Development | N/A | No API changes — this is a backend-internal job. |
+| IV. Simplicity & Quality | PASS | Single query, no over-engineering. |
+| V. Dependency Discipline | PASS | Uses only existing Spring dependencies (`@Scheduled`). |
+| VI. Accessibility | N/A | No frontend changes. |
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/013-auto-delete-expired/
+├── plan.md              # This file
+├── spec.md              # Feature specification
+├── research.md          # Phase 0 output (minimal — no unknowns)
+├── data-model.md        # Phase 1 output
+└── checklists/
+    └── requirements.md  # Spec quality checklist
+```
+
+### Source Code (repository root)
+
+```text
+backend/src/main/java/de/fete/
+├── application/service/
+│   └── ExpiredEventCleanupJob.java          # NEW: Scheduled job
+├── domain/port/out/
+│   └── EventRepository.java                 # MODIFIED: Add deleteExpired method
+└── adapter/out/persistence/
+    ├── EventJpaRepository.java              # MODIFIED: Add native DELETE query
+    └── EventPersistenceAdapter.java         # MODIFIED: Implement deleteExpired
+
+backend/src/test/java/de/fete/
+├── application/service/
+│   └── ExpiredEventCleanupJobTest.java      # NEW: Unit test for job
+└── adapter/out/persistence/
+    └── EventPersistenceAdapterIntegrationTest.java  # NEW or MODIFIED: Integration test for native query
+```
+
+**Structure Decision**: Backend-only change. Follows existing hexagonal architecture: port defines the contract, adapter implements with native query, service layer schedules the job.
+
+## Design
+
+### Hexagonal Flow
+
+```
+@Scheduled trigger
+    → ExpiredEventCleanupJob (application/service)
+        → EventRepository.deleteExpired() (domain/port/out)
+            → EventPersistenceAdapter.deleteExpired() (adapter/out/persistence)
+                → EventJpaRepository native query (adapter/out/persistence)
+                    → DELETE FROM events WHERE expiry_date < CURRENT_DATE
+```
+
+### Key Decisions
+
+1. **Port method**: `int deleteExpired()` on `EventRepository` — returns count of deleted events for logging.
+2. **Native query**: `@Modifying @Query(value = "DELETE FROM events WHERE expiry_date < CURRENT_DATE", nativeQuery = true)` on `EventJpaRepository`.
+3. **Schedule**: `@Scheduled(cron = "0 0 3 * * *")` — runs daily at 03:00 server time. Low-traffic window.
+4. **Logging**: INFO-level log after each run: `"Deleted {count} expired event(s)"`. No log if count is 0 (or DEBUG-level).
+5. **Transaction**: The native DELETE runs in a single transaction — atomic, no partial state.
+6. **Enable scheduling**: Add `@EnableScheduling` to `FeteApplication` (or a config class).

specs/013-auto-delete-expired/research.md

@@ -0,0 +1,31 @@
+# Research: Auto-Delete Expired Events
+
+**Feature**: 013-auto-delete-expired | **Date**: 2026-03-09
+
+## Deletion Strategy
+
+- **Decision**: Direct native SQL DELETE query via Spring Data JPA `@Query`.
+- **Rationale**: Simplest approach. No entity loading overhead. The existing `ON DELETE CASCADE` FK constraint on `fk_rsvps_event_id` (migration `003-create-rsvps-table.xml`) handles cascading deletion of RSVPs automatically. The existing `idx_events_expiry_date` index ensures the WHERE clause is efficient.
+- **Alternatives considered**:
+  - JPA repository `deleteAll(findExpired())`: Loads entities into memory first, unnecessary overhead.
+  - Database-level cron (`pg_cron`): Less portable, adds external dependency.
+  - Soft delete with lazy cleanup: Over-engineered for fete's scale and privacy goals.
+  - No deletion (filter only): Contradicts privacy-by-design principle.
+
+## Scheduling Mechanism
+
+- **Decision**: Spring `@Scheduled(cron = ...)` annotation.
+- **Rationale**: Already available in Spring Boot, no additional dependencies. Simple, declarative, well-tested.
+- **Alternatives considered**:
+  - Quartz Scheduler: Too heavy for a single daily job.
+  - External cron (OS-level): Requires separate process management, harder to test.
+
+## Transaction Behavior
+
+- **Decision**: Single transaction for the DELETE statement.
+- **Rationale**: A single `DELETE FROM events WHERE expiry_date < CURRENT_DATE` is atomic. If the DB connection drops mid-execution, the transaction rolls back and no events are partially deleted. The next run picks up all expired events.
+
+## Enabling @Scheduled
+
+- **Decision**: Add `@EnableScheduling` to `FeteApplication.java`.
+- **Rationale**: Simplest approach. Only one scheduled job exists, no need for a separate config class.

specs/013-auto-delete-expired/spec.md

@@ -0,0 +1,71 @@
+# Feature Specification: Auto-Delete Expired Events
+
+**Feature Branch**: `013-auto-delete-expired`
+**Created**: 2026-03-09
+**Status**: Draft
+**Input**: User description: "Delete events automatically after they expired"
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Automatic Cleanup of Expired Events (Priority: P1)
+
+As a self-hoster, I want expired events to be automatically deleted from the database so that personal data is removed without manual intervention and storage stays clean.
+
+A scheduled background job periodically checks all events. Any event whose `expiryDate` is in the past gets permanently deleted — including all associated data (RSVPs, tokens). No user action is required; the system handles this autonomously.
+
+**Why this priority**: This is the core and only feature — automated, hands-off cleanup of expired events. It directly supports the privacy promise of fete.
+
+**Independent Test**: Can be fully tested by creating events with past expiry dates, triggering the cleanup job, and verifying the events are gone from the database.
+
+**Acceptance Scenarios**:
+
+1. **Given** an event with an `expiryDate` in the past, **When** the scheduled cleanup job runs, **Then** the event and all its associated data (RSVPs, tokens) are permanently deleted.
+2. **Given** an event with an `expiryDate` in the future, **When** the scheduled cleanup job runs, **Then** the event remains untouched.
+3. **Given** multiple expired events exist, **When** the cleanup job runs, **Then** all expired events are deleted in a single run.
+4. **Given** no expired events exist, **When** the cleanup job runs, **Then** nothing is deleted and the job completes without error.
+
+---
+
+### Edge Cases
+
+- What happens if the cleanup job fails mid-deletion (e.g., database connection lost)? Events that were not yet deleted remain and will be picked up in the next run. No partial state.
+- What happens if the server was offline for an extended period? On the next run, all accumulated expired events are deleted — no special catch-up logic needed.
+- What happens if an organizer is viewing their event page while it gets deleted? The page shows a "not found" state on next interaction. This is acceptable because the event has expired.
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: System MUST automatically delete events whose `expiryDate` is before the current date/time.
+- **FR-002**: When an event is deleted, all associated data (RSVPs, organizer tokens, event tokens) MUST be deleted as well (cascade delete).
+- **FR-003**: The cleanup job MUST run on a recurring schedule (default: once daily).
+- **FR-004**: The cleanup job MUST be idempotent — running it multiple times produces the same result.
+- **FR-005**: The cleanup job MUST log how many events were deleted per run.
+- **FR-006**: Events that have not yet expired MUST NOT be affected by the cleanup job.
+
+### Key Entities
+
+- **Event**: The primary entity being cleaned up. Has an `expiryDate` field that determines when it becomes eligible for deletion.
+- **RSVP**: Associated guest responses linked to an event. Deleted when the parent event is deleted.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Expired events are deleted within 24 hours of their expiry date without manual intervention.
+- **SC-002**: Zero data residue — when an event is deleted, no orphaned RSVPs or tokens remain in the system.
+- **SC-003**: The cleanup process completes without errors under normal operating conditions.
+- **SC-004**: Non-expired events are never affected by the cleanup process.
+
+## Clarifications
+
+### Session 2026-03-09
+
+- Q: How should deletion be implemented — application code (JPA) or direct database query? → A: Direct database query. A single native `DELETE FROM events WHERE expiry_date < CURRENT_DATE` is sufficient. The existing `ON DELETE CASCADE` on the RSVPs foreign key ensures associated data is removed automatically. The existing `idx_events_expiry_date` index ensures the query is performant.
+
+## Assumptions
+
+- The `expiryDate` field already exists on events and is auto-set to `eventDate + 7 days` (implemented in the previous feature).
+- Cascade deletion of associated data (RSVPs, tokens) is handled at the database level via foreign key constraints (`ON DELETE CASCADE` on `fk_rsvps_event_id`, verified in migration `003-create-rsvps-table.xml`).
+- The daily schedule is sufficient — there is no requirement for near-real-time deletion.
+- No "grace period" or "soft delete" is needed — events are permanently removed once expired.

specs/013-auto-delete-expired/tasks.md

@@ -0,0 +1,101 @@
+# Tasks: Auto-Delete Expired Events
+
+**Input**: Design documents from `/specs/013-auto-delete-expired/`
+**Prerequisites**: plan.md, spec.md, research.md, data-model.md
+
+**Tests**: Included — constitution mandates TDD (Principle II).
+
+**Organization**: Single user story (US1), so phases are compact.
+
+## 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)
+- Include exact file paths in descriptions
+
+---
+
+## Phase 1: Setup
+
+**Purpose**: Enable Spring scheduling in the application.
+
+- [x] T001 Add `@EnableScheduling` annotation to `backend/src/main/java/de/fete/FeteApplication.java`
+
+---
+
+## Phase 2: User Story 1 — Automatic Cleanup of Expired Events (Priority: P1)
+
+**Goal**: A daily scheduled job deletes all events whose `expiryDate` is in the past, including cascaded RSVPs.
+
+**Independent Test**: Create events with past expiry dates, trigger the cleanup job, verify events and RSVPs are gone.
+
+### Tests for User Story 1
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [x] T002 [P] [US1] Unit test for `ExpiredEventCleanupJob` in `backend/src/test/java/de/fete/application/service/ExpiredEventCleanupJobTest.java` — verify job calls `deleteExpired()` on repository and logs the count
+- [x] T003 [P] [US1] Integration test for native DELETE query in `backend/src/test/java/de/fete/adapter/out/persistence/EventPersistenceAdapterIntegrationTest.java` — verify expired events + RSVPs are deleted, non-expired events survive
+
+### Implementation for User Story 1
+
+- [x] T004 [P] [US1] Add `int deleteExpired()` method to port interface `backend/src/main/java/de/fete/domain/port/out/EventRepository.java`
+- [x] T005 [P] [US1] Add native `@Modifying @Query("DELETE FROM events WHERE expiry_date < CURRENT_DATE")` method to `backend/src/main/java/de/fete/adapter/out/persistence/EventJpaRepository.java`
+- [x] T006 [US1] Implement `deleteExpired()` in `backend/src/main/java/de/fete/adapter/out/persistence/EventPersistenceAdapter.java` — delegates to JPA repository native query
+- [x] T007 [US1] Create `ExpiredEventCleanupJob` with `@Scheduled(cron = "0 0 3 * * *")` in `backend/src/main/java/de/fete/application/service/ExpiredEventCleanupJob.java` — calls `deleteExpired()`, logs count at INFO level
+
+**Checkpoint**: All tests pass. Expired events are automatically deleted daily at 03:00.
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Setup (Phase 1)**: No dependencies — can start immediately
+- **User Story 1 (Phase 2)**: Depends on Setup completion
+
+### Within User Story 1
+
+- T002, T003 (tests) can run in parallel — write first, must fail (RED)
+- T004, T005 (port + JPA query) can run in parallel — different files
+- T006 depends on T004 + T005 (adapter implements port, delegates to JPA)
+- T007 depends on T006 (job calls adapter via port)
+- After T007: all tests should pass (GREEN)
+
+### Parallel Opportunities
+
+```
+T002 ──┐
+       ├── (tests written, failing)
+T003 ──┘
+
+T004 ──┐
+       ├── T006 ── T007 ── (all tests green)
+T005 ──┘
+```
+
+---
+
+## Implementation Strategy
+
+### MVP (this is the MVP — single story)
+
+1. T001: Enable scheduling
+2. T002 + T003: Write failing tests (RED)
+3. T004 + T005: Port interface + native query (parallel)
+4. T006: Adapter implementation
+5. T007: Scheduled job
+6. Verify all tests pass (GREEN)
+7. Done — commit and ship
+
+---
+
+## Notes
+
+- Total tasks: 7
+- User Story 1 tasks: 6 (T002–T007)
+- Setup tasks: 1 (T001)
+- Parallel opportunities: T002||T003, T004||T005
+- No frontend changes needed
+- No API/OpenAPI changes needed
+- No new migrations needed (existing schema + FK constraints sufficient)

specs/014-cancel-rsvp/checklists/requirements.md

@@ -0,0 +1,36 @@
+# Specification Quality Checklist: Cancel RSVP
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-09
+**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`.
+- The "Design Proposals" section is intentionally included as requested by the user — these are UX options, not implementation details.
+- One decision point remains: which design option (A, B, or C) for the cancel UI. This is deferred to discussion with the user rather than marked as [NEEDS CLARIFICATION] since the user explicitly requested proposals.

specs/014-cancel-rsvp/contracts/cancel-rsvp.yaml

@@ -0,0 +1,40 @@
+# Cancel RSVP — API Contract
+# This contract will be merged into backend/src/main/resources/openapi/api.yaml
+
+# Path: /events/{token}/rsvps/{rsvpToken}
+# Method: DELETE
+
+path:
+  /events/{token}/rsvps/{rsvpToken}:
+    delete:
+      summary: Cancel RSVP
+      description: |
+        Permanently deletes an RSVP identified by the RSVP token.
+        Idempotent: returns 204 whether the RSVP existed or not.
+      operationId: cancelRsvp
+      tags:
+        - Events
+      parameters:
+        - name: token
+          in: path
+          required: true
+          description: Event token (UUID)
+          schema:
+            type: string
+            format: uuid
+            example: "550e8400-e29b-41d4-a716-446655440000"
+        - name: rsvpToken
+          in: path
+          required: true
+          description: RSVP token (UUID) identifying the attendance to cancel
+          schema:
+            type: string
+            format: uuid
+            example: "7c9e6679-7425-40de-944b-e07fc1f90ae7"
+      responses:
+        "204":
+          description: >
+            RSVP successfully cancelled (or was already cancelled).
+            No response body.
+        "500":
+          description: Internal server error

specs/014-cancel-rsvp/data-model.md

@@ -0,0 +1,74 @@
+# Data Model: Cancel RSVP
+
+**Feature**: 014-cancel-rsvp | **Date**: 2026-03-09
+
+## Entities
+
+### RSVP (existing — no schema changes)
+
+| Field | Type | Constraints | Notes |
+|-------|------|-------------|-------|
+| id | BIGSERIAL | PK, auto-generated | Internal DB ID, never exposed |
+| rsvp_token | UUID | UNIQUE, NOT NULL | Bearer credential for the guest |
+| event_id | BIGINT | FK → events.id, NOT NULL | Links RSVP to event |
+| name | VARCHAR(100) | NOT NULL | Guest display name |
+
+**No migration needed.** The cancel feature only deletes existing rows — no new columns or tables.
+
+## State Transitions
+
+```
+┌──────────┐    POST /events/{token}/rsvps    ┌──────────┐
+│ No RSVP  │ ──────────────────────────────► │ Attending │
+│ (guest)  │ ◄────────────────────────────── │  (guest)  │
+└──────────┘  DELETE /events/{token}/rsvps/   └──────────┘
+                    {rsvpToken}
+```
+
+The transition is fully reversible: after cancellation, the guest can create a new RSVP (new token generated).
+
+## Client-Side Storage (localStorage)
+
+### StoredEvent (existing interface — no changes)
+
+```typescript
+interface StoredEvent {
+  eventToken: string      // always present
+  title: string           // always present
+  dateTime: string        // always present
+  organizerToken?: string // present if organizer
+  rsvpToken?: string      // present if RSVP'd — CLEARED on cancel
+  rsvpName?: string       // present if RSVP'd — CLEARED on cancel
+}
+```
+
+### Cancel Effects on localStorage
+
+| Action | rsvpToken | rsvpName | Event in list |
+|--------|-----------|----------|---------------|
+| Cancel from detail view | Removed | Removed | Kept |
+| Remove from event list | Removed | Removed | Removed |
+
+## Repository Changes
+
+### RsvpRepository (domain port)
+
+New method:
+
+```java
+/**
+ * Delete an RSVP by event ID and RSVP token.
+ * @return true if a record was deleted, false if not found
+ */
+boolean deleteByEventIdAndRsvpToken(Long eventId, RsvpToken rsvpToken);
+```
+
+### RsvpJpaRepository
+
+New method:
+
+```java
+long deleteByEventIdAndRsvpToken(Long eventId, UUID rsvpToken);
+```
+
+Returns count of deleted rows (0 or 1). Spring Data JPA auto-implements this derived query.

specs/014-cancel-rsvp/plan.md

@@ -0,0 +1,90 @@
+# Implementation Plan: Cancel RSVP
+
+**Branch**: `014-cancel-rsvp` | **Date**: 2026-03-09 | **Spec**: [spec.md](spec.md)
+**Input**: Feature specification from `/specs/014-cancel-rsvp/spec.md`
+
+## Summary
+
+Allow guests to cancel their RSVP either explicitly from the event detail view (tap-to-reveal pattern on the RSVP bar) or implicitly when removing an RSVP'd event from their event list. The backend provides an idempotent DELETE endpoint; the frontend handles confirmation, API call, localStorage cleanup, and UI state reset.
+
+## 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 + Mockito (backend unit), MockMvc + Testcontainers (backend integration), Vitest (frontend unit), Playwright + MSW (frontend E2E)
+**Target Platform**: Self-hosted PWA (web browser, mobile-first)
+**Project Type**: Web application (hexagonal backend + SPA frontend)
+**Performance Goals**: Cancel operation < 500ms server-side
+**Constraints**: Privacy by design (no analytics), token-based auth (no login), idempotent delete
+**Scale/Scope**: Single new endpoint, 3 modified frontend components, 1 new composable method
+
+## 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 PII stored. Delete operation removes data. No analytics. |
+| II. Test-Driven Methodology | PASS | Plan includes TDD cycle: tests before implementation. E2E mandatory. |
+| III. API-First Development | PASS | OpenAPI spec updated first, types generated before implementation. |
+| IV. Simplicity & Quality | PASS | Minimal changes to existing code. No new abstractions. Idempotent delete is the simplest correct approach. |
+| V. Dependency Discipline | PASS | No new dependencies required. |
+| VI. Accessibility | PASS | Interactive elements will use semantic HTML, ARIA, keyboard navigation. Confirm dialog already accessible. |
+
+**Gate result**: ALL PASS — proceed to Phase 0.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/014-cancel-rsvp/
+├── plan.md              # This file
+├── research.md          # Phase 0 output
+├── data-model.md        # Phase 1 output
+├── contracts/           # Phase 1 output
+│   └── cancel-rsvp.yaml # DELETE endpoint contract
+└── tasks.md             # Phase 2 output (by /speckit.tasks)
+```
+
+### Source Code (repository root)
+
+```text
+backend/
+├── src/main/java/de/fete/
+│   ├── domain/
+│   │   ├── model/Rsvp.java                          # existing (no changes)
+│   │   ├── model/RsvpToken.java                     # existing (no changes)
+│   │   └── port/
+│   │       ├── in/CancelRsvpUseCase.java            # NEW use case port
+│   │       └── out/RsvpRepository.java              # MODIFY (add deleteByRsvpToken)
+│   ├── application/service/RsvpService.java          # MODIFY (implement cancel)
+│   └── adapter/
+│       ├── in/web/EventController.java               # MODIFY (add DELETE handler)
+│       └── out/persistence/
+│           ├── RsvpJpaRepository.java                # MODIFY (add deleteByRsvpToken)
+│           └── RsvpPersistenceAdapter.java           # MODIFY (implement delete)
+├── src/main/resources/openapi/api.yaml               # MODIFY (add DELETE endpoint)
+└── src/test/java/de/fete/
+    ├── application/service/RsvpServiceTest.java      # MODIFY (add cancel tests)
+    └── adapter/in/web/EventControllerIntegrationTest.java  # MODIFY (add cancel tests)
+
+frontend/
+├── src/
+│   ├── api/schema.d.ts                               # REGENERATE (from updated OpenAPI)
+│   ├── components/
+│   │   ├── RsvpBar.vue                               # MODIFY (tap-to-reveal cancel)
+│   │   ├── EventList.vue                             # MODIFY (conditional dialog msg)
+│   │   └── ConfirmDialog.vue                         # existing (no changes)
+│   ├── composables/useEventStorage.ts                # MODIFY (add removeRsvp)
+│   └── views/EventDetailView.vue                     # MODIFY (add cancel logic)
+└── e2e/
+    └── cancel-rsvp.spec.ts                           # NEW (E2E tests)
+```
+
+**Structure Decision**: Follows existing hexagonal architecture. New use case port + implementation in existing service. Single new endpoint added to existing controller.
+
+## Complexity Tracking
+
+No constitution violations — table not needed.

specs/014-cancel-rsvp/quickstart.md

@@ -0,0 +1,57 @@
+# Quickstart: Cancel RSVP
+
+**Feature**: 014-cancel-rsvp | **Date**: 2026-03-09
+
+## Implementation Order
+
+1. **OpenAPI spec** — Add DELETE endpoint to `api.yaml`
+2. **Regenerate types** — Backend (Maven generate) + Frontend (`npm run generate:api`)
+3. **Backend TDD** — Write tests → implement repository → service → controller
+4. **Frontend composable** — Add `removeRsvp()` to `useEventStorage.ts`
+5. **Frontend US-1** — RsvpBar tap-to-reveal + EventDetailView cancel logic
+6. **Frontend US-2** — EventList conditional dialog + server-side cancel before removal
+7. **Frontend US-3** — Edge case handling (stale tokens treated as success)
+8. **E2E tests** — Playwright tests for all three user stories
+
+## Key Commands
+
+```bash
+# Backend
+cd backend && ./mvnw test                    # Run backend tests
+cd backend && ./mvnw verify                  # Full verify (checkstyle + tests)
+cd backend && ./mvnw spring-boot:run         # Run backend locally
+
+# Frontend
+cd frontend && npm run generate:api          # Regenerate types from OpenAPI
+cd frontend && npm run test:unit             # Run unit tests
+cd frontend && npx playwright test           # Run E2E tests
+cd frontend && npm run dev                   # Dev server
+
+# Both
+cd backend && ./mvnw test && cd ../frontend && npm run test:unit  # Quick check
+```
+
+## Key Files to Modify
+
+| File | Change |
+|------|--------|
+| `backend/src/main/resources/openapi/api.yaml` | Add DELETE `/events/{token}/rsvps/{rsvpToken}` |
+| `backend/.../port/in/CancelRsvpUseCase.java` | New use case interface |
+| `backend/.../port/out/RsvpRepository.java` | Add `deleteByEventIdAndRsvpToken()` |
+| `backend/.../RsvpJpaRepository.java` | Add derived delete query |
+| `backend/.../RsvpPersistenceAdapter.java` | Implement delete |
+| `backend/.../RsvpService.java` | Implement `CancelRsvpUseCase` |
+| `backend/.../EventController.java` | Add `cancelRsvp()` handler |
+| `frontend/src/composables/useEventStorage.ts` | Add `removeRsvp()` |
+| `frontend/src/components/RsvpBar.vue` | Tap-to-reveal cancel button |
+| `frontend/src/views/EventDetailView.vue` | Cancel logic + confirm dialog |
+| `frontend/src/components/EventList.vue` | Conditional dialog message + server cancel |
+| `frontend/e2e/cancel-rsvp.spec.ts` | E2E tests for all scenarios |
+
+## Gotchas
+
+- The JPA `deleteBy...` method requires `@Transactional` on the calling service method.
+- The `@Transactional` import must be `jakarta.transaction.Transactional` (not Spring's).
+- After updating OpenAPI spec, run `npm run generate:api` in frontend AND Maven generate-sources in backend.
+- The RsvpBar component currently has no click handler on the status state — this needs to be added carefully with proper accessibility (role, aria-expanded, keyboard support).
+- The EventList's `confirmDelete` currently calls `removeEvent()` synchronously — it needs to become async for the server call.

specs/014-cancel-rsvp/research.md

@@ -0,0 +1,82 @@
+# Research: Cancel RSVP
+
+**Feature**: 014-cancel-rsvp | **Date**: 2026-03-09
+
+## 1. Idempotent DELETE Semantics
+
+**Decision**: Return 204 No Content for both successful deletion and "already deleted" cases.
+
+**Rationale**: HTTP DELETE is defined as idempotent (RFC 9110 §9.3.5). Returning 204 regardless of whether the RSVP existed simplifies client logic — the client doesn't need to distinguish "deleted now" from "was already gone." This directly satisfies FR-002 and US-3.
+
+**Alternatives considered**:
+- Return 404 for "not found" RSVP: Violates idempotency expectations, forces client to handle two success paths.
+- Return 200 with body: Unnecessary — no useful information to return after deletion.
+
+## 2. Authorization Model for Delete
+
+**Decision**: DELETE requires both event token (path) and RSVP token (path). The RSVP token acts as a bearer credential — possession equals authorization.
+
+**Rationale**: Consistent with the existing privacy model. The RSVP token is a UUID v4 generated server-side, unguessable. No additional auth needed. The event token scopes the operation to prevent cross-event token collision (defense in depth).
+
+**Alternatives considered**:
+- RSVP token only: Sufficient in practice (UUIDs are globally unique) but loses the event context in the URL, making the API less RESTful.
+- Require organizer token: Would prevent guests from self-cancelling — contradicts the spec.
+
+## 3. Backend Delete Implementation Pattern
+
+**Decision**: Use `deleteByRsvpToken(UUID)` on the JPA repository. Return the count of deleted rows (0 or 1) to determine if a record was actually removed (needed for attendee count response).
+
+**Rationale**: Spring Data JPA supports `deleteBy...` derived queries returning `long` (count of deleted rows). This is a single query, no need to fetch-then-delete. The existing `findByRsvpToken()` method confirms the naming convention.
+
+**Alternatives considered**:
+- `findByRsvpToken()` then `delete(entity)`: Two queries instead of one. Unnecessary.
+- Native `@Query` DELETE: Overkill for a simple single-column delete.
+
+## 4. Backend Validation: Event Token Check
+
+**Decision**: Validate that the RSVP belongs to the specified event before deleting. If the RSVP token exists but belongs to a different event, return 404.
+
+**Rationale**: Defense in depth. Prevents accidental or malicious cross-event RSVP deletion via URL manipulation. The combined lookup (`findByEventIdAndRsvpToken`) is a single indexed query.
+
+**Alternatives considered**:
+- Skip event validation: Simpler but allows deleting RSVPs via wrong event URLs. Minor security concern but violates principle of least surprise.
+
+## 5. Frontend: Tap-to-Reveal Pattern for Cancel
+
+**Decision**: The "You're attending!" bar becomes tappable. Tapping reveals a slide-out "Cancel attendance" button. Tapping outside or pressing Escape collapses it. A subtle chevron/icon hints at interactivity.
+
+**Rationale**: Specified in the feature spec's design decision. Prevents accidental cancellation (two-step: reveal + confirm dialog). Keeps the default state clean and positive.
+
+**Alternatives considered**:
+- Always-visible cancel button: Too prominent, encourages cancellation over attendance.
+- Long-press to reveal: Not discoverable, no established mobile convention for this.
+- Swipe gesture: Already used for event list deletion — would create gesture ambiguity.
+
+## 6. Frontend: removeRsvp vs removeEvent in localStorage
+
+**Decision**: Add `removeRsvp(eventToken)` method to `useEventStorage.ts` that clears only `rsvpToken` and `rsvpName` from a stored event, keeping the event itself in the list.
+
+**Rationale**: Cancel from event detail view should NOT remove the event from the list — the guest may still want to see event details. Only the RSVP fields need clearing. The existing `removeEvent()` method is used for event list removal (US-2).
+
+**Alternatives considered**:
+- Reuse `removeEvent()` for both: Would remove the event from the list when cancelling from detail view — unexpected behavior.
+
+## 7. Frontend: Event List Removal with RSVP
+
+**Decision**: When removing an event that has an RSVP token, call DELETE on the server FIRST. On success (or 404), then remove from localStorage. On server error, show error and keep the event.
+
+**Rationale**: Server-first ensures data consistency (FR-007). If we removed from localStorage first and the server call failed, the RSVP would remain on the server with no way for the guest to cancel it.
+
+**Alternatives considered**:
+- Optimistic removal (remove from localStorage, fire-and-forget server call): Risks data inconsistency if server call fails.
+- Remove from localStorage first, retry server call: Complex retry logic, still risks inconsistency.
+
+## 8. Attendee Count After Cancellation
+
+**Decision**: After successful DELETE, decrement the local attendee count by 1 in the event detail view. Do not re-fetch the event.
+
+**Rationale**: Avoids an extra GET request. The count is deterministic — if the delete succeeded, exactly one attendee was removed. The same pattern is used for RSVP creation (increment by 1).
+
+**Alternatives considered**:
+- Re-fetch event data: Extra network request, slower UX, unnecessary.
+- Return updated count from DELETE endpoint: Adds response body to a 204 — semantically wrong.

specs/014-cancel-rsvp/spec.md

@@ -0,0 +1,114 @@
+# Feature Specification: Cancel RSVP
+
+**Feature Branch**: `014-cancel-rsvp`
+**Created**: 2026-03-09
+**Status**: Draft
+**Input**: User description: "A guest can cancel their attendance if they still have their RSVP token in localStorage. The event detail view should offer this functionality (design proposals needed). The RSVP is permanently deleted from the database by RSVP token. When a guest removes an entry from their event list, attendance is automatically cancelled. The confirmation dialog informs the guest about this behavior."
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Cancel RSVP from Event Detail View (Priority: P1)
+
+A guest who previously RSVP'd to an event visits the event detail page. The sticky bottom bar shows their attendance status ("You're attending!"). The guest can cancel their attendance directly from this view. After cancellation, their RSVP is permanently removed from the server and from localStorage. The attendee count decreases by one, and the RSVP bar returns to the initial "I'm attending" call-to-action state, allowing the guest to re-RSVP if desired.
+
+**Why this priority**: This is the core feature — the explicit, intentional cancellation flow. It gives guests direct control over their attendance and is the primary interaction point.
+
+**Independent Test**: Can be fully tested by navigating to an event detail page as an RSVP'd guest, cancelling, and verifying the RSVP is deleted server-side and the UI resets.
+
+**Acceptance Scenarios**:
+
+1. **Given** a guest has an RSVP token stored in localStorage for an event, **When** they view the event detail page, **Then** they see a way to cancel their attendance alongside their attendance status.
+2. **Given** the guest initiates cancellation, **When** the system presents a confirmation prompt, **Then** the prompt clearly states that attendance will be permanently cancelled.
+3. **Given** the guest confirms cancellation, **When** the server successfully deletes the RSVP, **Then** the RSVP token and name are removed from localStorage, the attendee count decreases by one, and the RSVP bar returns to the initial call-to-action state.
+4. **Given** the guest confirms cancellation, **When** the server returns an error, **Then** the guest sees an error message and their attendance status remains unchanged.
+5. **Given** the guest cancels and the RSVP bar resets, **When** the guest taps the call-to-action, **Then** they can submit a new RSVP as normal.
+
+---
+
+### User Story 2 - Auto-Cancel on Event List Removal (Priority: P2)
+
+A guest removes an event from their personal event list (via delete button or swipe gesture on the event card). If the guest has an RSVP token for that event, the confirmation dialog informs them that removing the event will also cancel their attendance on the server. Upon confirmation, the RSVP is deleted from the server before the event is removed from localStorage.
+
+**Why this priority**: This ensures data consistency between client and server. Without it, a guest could believe they cancelled but their name would remain on the attendee list.
+
+**Independent Test**: Can be fully tested by adding an RSVP'd event to the list, removing it via the event list, and verifying the RSVP is deleted server-side.
+
+**Acceptance Scenarios**:
+
+1. **Given** a guest has an event in their list with an RSVP token, **When** they initiate removal (delete button or swipe), **Then** the confirmation dialog explicitly mentions that their attendance will also be cancelled.
+2. **Given** a guest has an event in their list without an RSVP token (organizer-only or link-only), **When** they initiate removal, **Then** the confirmation dialog does not mention attendance cancellation (existing behavior unchanged).
+3. **Given** the guest confirms removal of an RSVP'd event, **When** the server successfully deletes the RSVP, **Then** the event is removed from localStorage (including RSVP token) and disappears from the list.
+4. **Given** the guest confirms removal of an RSVP'd event, **When** the server fails to delete the RSVP, **Then** the guest sees an error message and the event remains in the list unchanged.
+5. **Given** the guest dismisses the confirmation dialog, **When** no action is taken, **Then** the event and RSVP remain unchanged.
+
+---
+
+### User Story 3 - Cancel RSVP with Expired/Invalid Token (Priority: P3)
+
+A guest attempts to cancel their RSVP, but the token is no longer valid on the server (e.g., the event was deleted, or the RSVP was already removed by another means). The system handles this gracefully.
+
+**Why this priority**: Edge case handling — less common but important for a smooth user experience.
+
+**Independent Test**: Can be tested by manipulating localStorage to contain a stale RSVP token and attempting cancellation.
+
+**Acceptance Scenarios**:
+
+1. **Given** a guest has a stale RSVP token in localStorage, **When** they attempt to cancel from the event detail view, **Then** the system treats a "not found" server response as a successful cancellation (the RSVP is already gone), cleans up localStorage, and resets the UI.
+2. **Given** a guest has a stale RSVP token in localStorage, **When** they remove the event from their list, **Then** the system treats a "not found" server response as success and removes the event from localStorage.
+
+---
+
+### Edge Cases
+
+- What happens when the guest has no internet connection during cancellation? → Show an error message; do not modify localStorage or UI state.
+- What happens if the event itself has been deleted? → The event detail view already handles the "not found" state. For list removal, treat the 404 as success and clean up localStorage.
+- What happens if multiple browser tabs are open? → localStorage changes propagate across tabs; the RSVP bar should reflect the current localStorage state on visibility/focus.
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: System MUST provide a cancellation endpoint that permanently deletes an RSVP record identified by event token and RSVP token.
+- **FR-002**: System MUST return a success response when the RSVP is deleted, including when the RSVP does not exist (idempotent delete).
+- **FR-003**: The event detail view MUST display a cancel option when the guest has an RSVP token in localStorage for the current event.
+- **FR-004**: The cancel option MUST require explicit confirmation before proceeding.
+- **FR-005**: After successful cancellation, the system MUST remove the RSVP token and RSVP name from localStorage for that event.
+- **FR-006**: After successful cancellation on the event detail view, the attendee count MUST decrease by one and the RSVP bar MUST return to its initial call-to-action state.
+- **FR-007**: When a guest removes an RSVP'd event from their event list, the system MUST attempt to delete the RSVP on the server before removing it from localStorage.
+- **FR-008**: The event list removal confirmation dialog MUST inform the guest that their attendance will be cancelled when an RSVP token is present.
+- **FR-009**: If the server returns an error (other than "not found") during cancellation, the system MUST show an error message and leave the local state unchanged.
+- **FR-010**: The cancellation endpoint MUST only delete the RSVP matching the provided RSVP token — no other RSVPs or event data may be affected.
+
+### Key Entities
+
+- **RSVP**: An attendance record linking a guest name to an event. Identified by a unique RSVP token (UUID). Existence indicates attendance; deletion indicates cancellation.
+- **Stored Event (client-side)**: A localStorage entry containing event metadata, and optionally an RSVP token and name if the guest has RSVP'd.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: A guest can cancel their RSVP from the event detail view in under 5 seconds (two taps: cancel + confirm).
+- **SC-002**: After cancellation, the guest's name no longer appears in the attendee list when viewed by the organizer.
+- **SC-003**: Removing an RSVP'd event from the event list results in server-side RSVP deletion 100% of the time when the server is reachable.
+- **SC-004**: The confirmation dialog clearly communicates the consequence (attendance cancellation) — no guest should be surprised by the side effect.
+- **SC-005**: A guest can re-RSVP after cancellation without any issues.
+
+## Design Decision: Cancel UI on Event Detail View
+
+**Chosen**: Tap-to-Reveal Pattern
+
+The current RSVP bar (sticky bottom) shows "You're attending!" after an RSVP. The status bar becomes tappable. Tapping it reveals a slide-out or expand animation with a "Cancel attendance" button. Tapping outside collapses it back. A subtle visual hint (chevron or icon) indicates the bar is interactive.
+
+## Assumptions
+
+- The existing `findByRsvpToken()` repository method can be leveraged for the delete operation.
+- The RSVP token alone (combined with the event token in the URL) is sufficient authorization for deletion — consistent with the project's token-based privacy model.
+- The delete operation is idempotent: deleting an already-deleted RSVP returns success (not an error).
+- The event list confirmation dialog already exists and can be extended with conditional messaging.
+
+## Dependencies
+
+- **008-rsvp**: The RSVP creation flow and localStorage storage pattern (completed).
+- **007-view-event**: The event detail view and RSVP bar component (completed).
+- **009-list-events**: The event list with delete functionality (completed).

specs/014-cancel-rsvp/tasks.md

@@ -0,0 +1,206 @@
+# Tasks: Cancel RSVP
+
+**Input**: Design documents from `/specs/014-cancel-rsvp/`
+**Prerequisites**: plan.md (required), spec.md (required), research.md, data-model.md, contracts/
+
+**Tests**: Included — constitution mandates TDD (Red → Green → Refactor). E2E tests mandatory per principle II.
+
+**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: Setup (API Contract & Type Generation)
+
+**Purpose**: Define the DELETE endpoint contract and regenerate types for both backend and frontend.
+
+- [x] T001 Add DELETE `/events/{token}/rsvps/{rsvpToken}` endpoint to `backend/src/main/resources/openapi/api.yaml` per `specs/014-cancel-rsvp/contracts/cancel-rsvp.yaml` — operationId `cancelRsvp`, responses 204 (success/idempotent) and 500
+- [x] T002 Regenerate backend API interfaces from updated OpenAPI spec via `cd backend && ./mvnw generate-sources`
+- [x] T003 Regenerate frontend TypeScript types from updated OpenAPI spec via `cd frontend && npm run generate:api`
+
+---
+
+## Phase 2: Foundational (Backend Delete Infrastructure)
+
+**Purpose**: Backend repository and service layer for RSVP deletion — blocks all user stories.
+
+**⚠️ CRITICAL**: No user story work can begin until this phase is complete.
+
+### Tests (write FIRST, must FAIL before implementation)
+
+- [x] T004 [P] Write unit test for `cancelRsvp()` in `backend/src/test/java/de/fete/application/service/RsvpServiceTest.java` — test cases: successful delete (returns true), RSVP not found (returns false), event not found (returns false)
+- [x] T005 [P] Write integration test for `DELETE /api/events/{token}/rsvps/{rsvpToken}` in `backend/src/test/java/de/fete/adapter/in/web/EventControllerIntegrationTest.java` — test cases: 204 on successful delete, 204 on already-deleted RSVP (idempotent), 204 when event not found (idempotent), verify RSVP row actually removed from DB
+
+### Implementation
+
+- [x] T006 Create `CancelRsvpUseCase` interface in `backend/src/main/java/de/fete/domain/port/in/CancelRsvpUseCase.java` — single method `cancelRsvp(EventToken, RsvpToken)` returning void
+- [x] T007 Add `deleteByEventIdAndRsvpToken(Long eventId, RsvpToken rsvpToken)` to domain port `backend/src/main/java/de/fete/domain/port/out/RsvpRepository.java`
+- [x] T008 Add `deleteByEventIdAndRsvpToken(Long eventId, UUID rsvpToken)` derived delete query to `backend/src/main/java/de/fete/adapter/out/persistence/RsvpJpaRepository.java`
+- [x] T009 Implement `deleteByEventIdAndRsvpToken()` in `backend/src/main/java/de/fete/adapter/out/persistence/RsvpPersistenceAdapter.java` — delegate to JPA repository, return boolean (deleted count > 0)
+- [x] T010 Implement `CancelRsvpUseCase` in `backend/src/main/java/de/fete/application/service/RsvpService.java` — look up event by token, if found call repository delete, no error on not-found (idempotent). Add `@Transactional`
+- [x] T011 Implement `cancelRsvp()` handler in `backend/src/main/java/de/fete/adapter/in/web/EventController.java` — accept event token and RSVP token path params, call use case, return 204 No Content
+- [x] T012 Run `cd backend && ./mvnw verify` — all tests (existing + new) must pass
+
+**Checkpoint**: Backend DELETE endpoint functional and tested. Verify via integration tests.
+
+---
+
+## Phase 3: User Story 1 — Cancel RSVP from Event Detail View (Priority: P1) 🎯 MVP
+
+**Goal**: Guest can tap the "You're attending!" bar to reveal a cancel button, confirm cancellation, and have RSVP deleted server-side with UI reset.
+
+**Independent Test**: Navigate to event detail as RSVP'd guest → tap status bar → tap cancel → confirm → verify RSVP deleted, attendee count decremented, bar reset to CTA state. Then re-RSVP to verify flow works again.
+
+### Tests (write FIRST, must FAIL before implementation)
+
+- [x] T013 [US1] Write E2E test file `frontend/e2e/cancel-rsvp.spec.ts` — US1 scenarios: (1) status bar shows cancel affordance when RSVP'd, (2) tap reveals cancel button, (3) confirm cancellation → 204 → localStorage cleared + count decremented + bar reset, (4) server error → error message + state unchanged, (5) re-RSVP after cancel works
+
+### Implementation
+
+- [x] T014 [US1] Add `removeRsvp(eventToken: string)` method to `frontend/src/composables/useEventStorage.ts` — clears `rsvpToken` and `rsvpName` from the stored event without removing the event from the list
+- [x] T015 [US1] Modify `frontend/src/components/RsvpBar.vue` — make status state tappable with tap-to-reveal pattern: (1) add `expanded` state, (2) tapping "You're attending!" toggles expanded, (3) expanded state shows "Cancel attendance" button, (4) emit `cancel` event on button click, (5) collapse on outside click/Escape, (6) add subtle chevron icon hint, (7) ARIA: `role="button"`, `aria-expanded`, keyboard support (Enter/Space to toggle, Escape to collapse)
+- [x] T016 [US1] Add cancel RSVP logic to `frontend/src/views/EventDetailView.vue` — (1) handle `cancel` emit from RsvpBar, (2) show ConfirmDialog with message "Your attendance will be permanently cancelled.", (3) on confirm: call `api.DELETE('/events/{token}/rsvps/{rsvpToken}')`, (4) on 204: call `removeRsvp()`, decrement attendee count, reset RSVP state (`rsvpName = ''`), (5) on error: show error message "Could not cancel RSVP. Please try again.", (6) keep local state unchanged on error
+- [x] T017 [US1] Run frontend unit tests `cd frontend && npm run test:unit` and E2E tests `cd frontend && npx playwright test cancel-rsvp` — all must pass
+
+**Checkpoint**: US1 fully functional. Guest can cancel RSVP from event detail view and re-RSVP.
+
+---
+
+## Phase 4: User Story 2 — Auto-Cancel on Event List Removal (Priority: P2)
+
+**Goal**: When a guest removes an RSVP'd event from their event list, the confirmation dialog warns about attendance cancellation and the RSVP is deleted server-side before localStorage cleanup.
+
+**Independent Test**: Add RSVP'd event to list → initiate removal → verify dialog mentions attendance → confirm → verify server DELETE called → event removed from list. Also test: event without RSVP shows standard dialog (no mention of attendance).
+
+### Tests (write FIRST, must FAIL before implementation)
+
+- [x] T018 [US2] Add US2 E2E scenarios to `frontend/e2e/cancel-rsvp.spec.ts` — (1) removal of RSVP'd event shows "attendance will be cancelled" in dialog, (2) removal of non-RSVP'd event shows standard dialog (no attendance mention), (3) confirm removal → DELETE called → event removed from list, (4) server error on DELETE → error message + event stays in list, (5) dismiss dialog → no changes
+
+### Implementation
+
+- [x] T019 [US2] Modify `frontend/src/components/EventList.vue` — (1) detect if pending-delete event has RSVP token via `getRsvp(eventToken)`, (2) set conditional dialog message: with RSVP → "This event will be removed from your list and your attendance will be cancelled." / without RSVP → existing message, (3) make `confirmDelete()` async: if RSVP exists, call `api.DELETE('/events/{token}/rsvps/{rsvpToken}')` first, (4) on success or 404: proceed with `removeEvent()`, (5) on other error: show error message, abort removal
+- [x] T020 [US2] Import API client and `getRsvp` from `useEventStorage` in `frontend/src/components/EventList.vue` — ensure API client is available for server calls
+- [x] T021 [US2] Run E2E tests `cd frontend && npx playwright test cancel-rsvp` — all US1 + US2 scenarios must pass
+
+**Checkpoint**: US1 + US2 functional. Both cancel paths work independently.
+
+---
+
+## Phase 5: User Story 3 — Cancel RSVP with Expired/Invalid Token (Priority: P3)
+
+**Goal**: Gracefully handle stale RSVP tokens — treat "not found" server responses as successful cancellation.
+
+**Independent Test**: Set stale RSVP token in localStorage → attempt cancel from detail view → verify 404 treated as success → localStorage cleaned. Same for event list removal.
+
+### Tests (write FIRST, must FAIL before implementation)
+
+- [x] T022 [US3] Add US3 E2E scenarios to `frontend/e2e/cancel-rsvp.spec.ts` — (1) cancel from detail view with stale token (server 404) → treated as success, localStorage cleaned, UI reset, (2) event list removal with stale token (server 404) → treated as success, event removed
+
+### Implementation
+
+- [x] T023 (already implemented in T016 — 404 treated as success) [US3] Update cancel logic in `frontend/src/views/EventDetailView.vue` — treat 404 response from DELETE as success (RSVP already gone): clean up localStorage and reset UI same as 204
+- [x] T024 (already implemented in T019 — 404 treated as success) [US3] Update cancel logic in `frontend/src/components/EventList.vue` — treat 404 response from DELETE as success: proceed with `removeEvent()` (note: this may already be handled if T019 implemented "success or 404" correctly — verify and adjust if needed)
+- [x] T025 [US3] Run all E2E tests `cd frontend && npx playwright test cancel-rsvp` — all US1 + US2 + US3 scenarios must pass
+
+**Checkpoint**: All user stories functional. Edge cases handled gracefully.
+
+---
+
+## Phase 6: Polish & Cross-Cutting Concerns
+
+**Purpose**: Final verification and cleanup across all stories.
+
+- [x] T026 Run full backend verify `cd backend && ./mvnw verify` — checkstyle + all tests
+- [x] T027 Run full frontend test suite `cd frontend && npm run test:unit && npx playwright test` — all unit + E2E tests
+- [x] T028 Verify accessibility: RsvpBar cancel interaction is keyboard-navigable (Tab, Enter/Space, Escape), ARIA attributes correct, confirm dialog focus management works
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Setup (Phase 1)**: No dependencies — start immediately
+- **Foundational (Phase 2)**: Depends on Phase 1 (generated API interfaces needed)
+- **US1 (Phase 3)**: Depends on Phase 2 (backend endpoint must exist)
+- **US2 (Phase 4)**: Depends on Phase 2 (backend endpoint must exist). Independent of US1.
+- **US3 (Phase 5)**: Depends on US1 and US2 (refines their error handling)
+- **Polish (Phase 6)**: Depends on all stories complete
+
+### User Story Dependencies
+
+- **US1 (P1)**: Independent after Phase 2 — core cancel flow
+- **US2 (P2)**: Independent after Phase 2 — can be implemented in parallel with US1
+- **US3 (P3)**: Depends on US1 + US2 — refines error handling in both
+
+### Within Each User Story
+
+- Tests MUST be written and FAIL before implementation
+- Composable/model changes before component changes
+- Component changes before view integration
+- Story complete before moving to next priority
+
+### Parallel Opportunities
+
+- T004 + T005 (backend tests) can run in parallel
+- T006 + T007 (use case + repository port) can run in parallel
+- US1 and US2 can be implemented in parallel after Phase 2 (different files)
+- T026 + T027 (backend verify + frontend tests) can run in parallel
+
+---
+
+## Parallel Example: Phase 2 (Foundational)
+
+```bash
+# Write tests in parallel:
+Task T004: "Unit test for cancelRsvp in RsvpServiceTest.java"
+Task T005: "Integration test for DELETE endpoint in EventControllerIntegrationTest.java"
+
+# Then implement sequentially: T006 → T007 → T008 → T009 → T010 → T011 → T012
+```
+
+## Parallel Example: US1 + US2
+
+```bash
+# After Phase 2 completes, launch in parallel:
+# Stream A (US1): T013 → T014 → T015 → T016 → T017
+# Stream B (US2): T018 → T019 → T020 → T021
+```
+
+---
+
+## Implementation Strategy
+
+### MVP First (User Story 1 Only)
+
+1. Complete Phase 1: Setup (OpenAPI + type generation)
+2. Complete Phase 2: Foundational (backend DELETE endpoint)
+3. Complete Phase 3: User Story 1 (cancel from detail view)
+4. **STOP and VALIDATE**: Test cancel flow end-to-end
+5. Deploy/demo if ready
+
+### Incremental Delivery
+
+1. Setup + Foundational → Backend ready
+2. Add US1 → Cancel from detail view works → Deploy (MVP!)
+3. Add US2 → Auto-cancel on list removal → Deploy
+4. Add US3 → Stale token edge cases handled → Deploy
+5. Each story adds value without breaking previous stories
+
+---
+
+## Notes
+
+- [P] tasks = different files, no dependencies
+- [Story] label maps task to specific user story for traceability
+- Each user story should be independently completable and testable
+- Verify tests fail before implementing
+- Commit after each task or logical group
+- Stop at any checkpoint to validate story independently
+- Backend idempotent DELETE (204 always) simplifies all frontend error handling
+- The `@Transactional` annotation is required on the service method calling JPA `deleteBy...`