feat: add task editing

Reviewed-on: #11

README.md

@@ -10,7 +10,10 @@ Backend använder en lokal H2-databas i minnet. Databasschemat hanteras med
 Flyway, och lokal utvecklingsdata återställs när backend startas om.
 
 API:t innehåller endpoints under `/api/users` för användare och `/api/tasks` för
-att skapa, lista, tilldela och ändra status på gemensamma hushållsuppgifter.
+att skapa, lista, redigera, tilldela, ändra status på och permanent radera
+gemensamma hushållsuppgifter. Uppgiftskort kan flyttas mellan brädans
+statuskolumner med drag-and-drop eller med de befintliga statusknapparna.
+Redigering och radering genomförs först när backend har bekräftat operationen.
 
 ## Starta backend
 

backend/src/main/java/se/rubble/hemhub/task/Task.java

@@ -112,6 +112,17 @@ class Task {
         status = targetStatus;
     }
 
+    void changeDetails(String title, String description, int points) {
+        if (points < 1 || points > 99) {
+            throw new InvalidTaskException(
+                    "Poäng måste vara ett heltal mellan 1 och 99.");
+        }
+
+        this.title = title;
+        this.description = description;
+        this.points = points;
+    }
+
     Instant getCreatedAt() {
         return createdAt;
     }

backend/src/main/java/se/rubble/hemhub/task/TaskController.java

@@ -4,6 +4,7 @@ import java.util.List;
 import java.util.UUID;
 
 import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.PutMapping;
@@ -65,4 +66,25 @@ public class TaskController {
                 request.parsedStatus(),
                 request.parsedActiveUserId().value());
     }
+
+    @PutMapping("/{taskId}/details")
+    public TaskResponse updateDetails(
+            @PathVariable UUID taskId,
+            @RequestBody(required = false) UpdateTaskDetailsRequest request) {
+        if (request == null) {
+            throw new InvalidTaskException("Requesten måste innehålla uppgiftsdetaljer.");
+        }
+
+        return taskService.updateDetails(
+                taskId,
+                request.parsedTitle(),
+                request.parsedDescription(),
+                request.parsedPoints());
+    }
+
+    @DeleteMapping("/{taskId}")
+    @ResponseStatus(HttpStatus.NO_CONTENT)
+    public void delete(@PathVariable UUID taskId) {
+        taskService.delete(taskId);
+    }
 }

backend/src/main/java/se/rubble/hemhub/task/TaskService.java

@@ -43,23 +43,9 @@ class TaskService {
             String requestedDescription,
             Integer requestedPoints,
             UUID requestedAssigneeId) {
-        String title = requestedTitle == null ? "" : requestedTitle.trim();
+        String title = validateTitle(requestedTitle);
-        String description = normalizeDescription(requestedDescription);
+        String description = validateDescription(requestedDescription);
-
+        int points = validatePoints(requestedPoints);
-        if (title.isEmpty() || codePointLength(title) > 100) {
-            throw new InvalidTaskException(
-                    "Titeln måste innehålla mellan 1 och 100 tecken.");
-        }
-
-        if (description != null && codePointLength(description) > 500) {
-            throw new InvalidTaskException(
-                    "Beskrivningen får innehålla högst 500 tecken.");
-        }
-
-        if (requestedPoints == null) {
-            throw new InvalidTaskException(
-                    "Poäng måste vara ett heltal mellan 1 och 99.");
-        }
 
         User assignee = findAssignee(requestedAssigneeId);
         Task task = new Task(
@@ -67,7 +53,7 @@ class TaskService {
                 title,
                 description,
                 TaskStatus.WAITING,
-                requestedPoints,
+                points,
                 assignee,
                 Instant.now(clock));
 
@@ -104,6 +90,29 @@ class TaskService {
         return TaskResponse.from(task);
     }
 
+    @Transactional
+    TaskResponse updateDetails(
+            UUID taskId,
+            String requestedTitle,
+            String requestedDescription,
+            Integer requestedPoints) {
+        Task task = taskRepository.findOneById(taskId)
+                .orElseThrow(TaskNotFoundException::new);
+        String title = validateTitle(requestedTitle);
+        String description = validateDescription(requestedDescription);
+        int points = validatePoints(requestedPoints);
+
+        task.changeDetails(title, description, points);
+        return TaskResponse.from(task);
+    }
+
+    @Transactional
+    void delete(UUID taskId) {
+        Task task = taskRepository.findById(taskId)
+                .orElseThrow(TaskNotFoundException::new);
+        taskRepository.delete(task);
+    }
+
     private User findAssignee(UUID requestedAssigneeId) {
         if (requestedAssigneeId == null) {
             return null;
@@ -113,13 +122,37 @@ class TaskService {
                 .orElseThrow(AssigneeNotFoundException::new);
     }
 
-    private static String normalizeDescription(String requestedDescription) {
+    private static String validateTitle(String requestedTitle) {
+        String title = requestedTitle == null ? "" : requestedTitle.trim();
+        if (title.isEmpty() || codePointLength(title) > 100) {
+            throw new InvalidTaskException(
+                    "Titeln måste innehålla mellan 1 och 100 tecken.");
+        }
+        return title;
+    }
+
+    private static String validateDescription(String requestedDescription) {
         if (requestedDescription == null) {
             return null;
         }
 
         String description = requestedDescription.trim();
-        return description.isEmpty() ? null : description;
+        if (description.isEmpty()) {
+            return null;
+        }
+        if (codePointLength(description) > 500) {
+            throw new InvalidTaskException(
+                    "Beskrivningen får innehålla högst 500 tecken.");
+        }
+        return description;
+    }
+
+    private static int validatePoints(Integer requestedPoints) {
+        if (requestedPoints == null || requestedPoints < 1 || requestedPoints > 99) {
+            throw new InvalidTaskException(
+                    "Poäng måste vara ett heltal mellan 1 och 99.");
+        }
+        return requestedPoints;
     }
 
     private static int codePointLength(String value) {

backend/src/main/java/se/rubble/hemhub/task/UpdateTaskDetailsRequest.java

@@ -0,0 +1,40 @@
+package se.rubble.hemhub.task;
+
+import tools.jackson.databind.JsonNode;
+import tools.jackson.databind.node.JsonNodeType;
+
+public record UpdateTaskDetailsRequest(
+        JsonNode title,
+        JsonNode description,
+        JsonNode points) {
+
+    String parsedTitle() {
+        if (title == null || title.getNodeType() != JsonNodeType.STRING) {
+            throw new InvalidTaskException(
+                    "Titeln måste innehålla mellan 1 och 100 tecken.");
+        }
+        return title.stringValue();
+    }
+
+    String parsedDescription() {
+        if (description == null) {
+            throw new InvalidTaskException("Fältet description måste anges.");
+        }
+        if (description.isNull()) {
+            return null;
+        }
+        if (description.getNodeType() != JsonNodeType.STRING) {
+            throw new InvalidTaskException(
+                    "Beskrivningen får innehålla högst 500 tecken.");
+        }
+        return description.stringValue();
+    }
+
+    Integer parsedPoints() {
+        if (points == null || !points.isIntegralNumber() || !points.canConvertToInt()) {
+            throw new InvalidTaskException(
+                    "Poäng måste vara ett heltal mellan 1 och 99.");
+        }
+        return points.intValue();
+    }
+}

backend/src/test/java/se/rubble/hemhub/task/TaskDeletionApiTest.java

@@ -0,0 +1,128 @@
+package se.rubble.hemhub.task;
+
+import java.time.Instant;
+import java.util.UUID;
+
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.params.ParameterizedTest;
+import org.junit.jupiter.params.provider.EnumSource;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.test.web.servlet.setup.MockMvcBuilders;
+import org.springframework.web.context.WebApplicationContext;
+
+import se.rubble.hemhub.user.User;
+import se.rubble.hemhub.user.UserRepository;
+
+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;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+@SpringBootTest
+class TaskDeletionApiTest {
+
+    @Autowired
+    private WebApplicationContext context;
+
+    @Autowired
+    private TaskRepository taskRepository;
+
+    @Autowired
+    private UserRepository userRepository;
+
+    private MockMvc mockMvc;
+
+    @BeforeEach
+    void setUp() {
+        taskRepository.deleteAll();
+        userRepository.deleteAll();
+        mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
+    }
+
+    @ParameterizedTest
+    @EnumSource(TaskStatus.class)
+    void deletesTaskInEveryStatus(TaskStatus statusValue) throws Exception {
+        User assignee = createUser();
+        Task task = saveTask(statusValue, assignee);
+
+        mockMvc.perform(delete("/api/tasks/{taskId}", task.getId()))
+                .andExpect(status().isNoContent())
+                .andExpect(content().string(""));
+
+        mockMvc.perform(get("/api/tasks"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$").isEmpty());
+        org.junit.jupiter.api.Assertions.assertTrue(userRepository.existsById(assignee.getId()));
+    }
+
+    @Test
+    void deletesOnlyRequestedTask() throws Exception {
+        User assignee = createUser();
+        Task deleted = saveTask(TaskStatus.WAITING, assignee);
+        Task remaining = saveTask(TaskStatus.COMPLETED, null);
+
+        mockMvc.perform(delete("/api/tasks/{taskId}", deleted.getId()))
+                .andExpect(status().isNoContent());
+
+        mockMvc.perform(get("/api/tasks"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.length()").value(1))
+                .andExpect(jsonPath("$[0].id").value(remaining.getId().toString()))
+                .andExpect(jsonPath("$[0].status").value("COMPLETED"));
+        org.junit.jupiter.api.Assertions.assertTrue(userRepository.existsById(assignee.getId()));
+    }
+
+    @Test
+    void returnsNotFoundForUnknownAndAlreadyDeletedTask() throws Exception {
+        Task task = saveTask(TaskStatus.WAITING, null);
+
+        mockMvc.perform(delete("/api/tasks/{taskId}", task.getId()))
+                .andExpect(status().isNoContent());
+        mockMvc.perform(delete("/api/tasks/{taskId}", task.getId()))
+                .andExpect(status().isNotFound())
+                .andExpect(jsonPath("$.code").value("TASK_NOT_FOUND"));
+        mockMvc.perform(delete(
+                        "/api/tasks/{taskId}",
+                        "00000000-0000-0000-0000-000000000099"))
+                .andExpect(status().isNotFound())
+                .andExpect(jsonPath("$.code").value("TASK_NOT_FOUND"));
+    }
+
+    @Test
+    void keepsExistingBadRequestForInvalidUuid() throws Exception {
+        mockMvc.perform(delete("/api/tasks/{taskId}", "inte-ett-uuid"))
+                .andExpect(status().isBadRequest())
+                .andExpect(jsonPath("$.code").value("INVALID_TASK_ASSIGNMENT"));
+    }
+
+    private User createUser() throws Exception {
+        String response = mockMvc.perform(post("/api/users")
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content("""
+                                {"name": "Urban"}
+                                """))
+                .andExpect(status().isCreated())
+                .andReturn()
+                .getResponse()
+                .getContentAsString();
+        String id = com.jayway.jsonpath.JsonPath.read(response, "$.id");
+        return userRepository.findById(UUID.fromString(id)).orElseThrow();
+    }
+
+    private Task saveTask(TaskStatus statusValue, User assignee) {
+        return taskRepository.save(new Task(
+                UUID.randomUUID(),
+                "Dammsuga",
+                "Bottenvåningen",
+                statusValue,
+                7,
+                assignee,
+                Instant.parse("2026-07-28T09:00:00Z")));
+    }
+}

backend/src/test/java/se/rubble/hemhub/task/TaskEditingApiTest.java

@@ -0,0 +1,245 @@
+package se.rubble.hemhub.task;
+
+import java.time.Instant;
+import java.util.UUID;
+import java.util.stream.Stream;
+
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.params.ParameterizedTest;
+import org.junit.jupiter.params.provider.Arguments;
+import org.junit.jupiter.params.provider.EnumSource;
+import org.junit.jupiter.params.provider.MethodSource;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.test.web.servlet.setup.MockMvcBuilders;
+import org.springframework.web.context.WebApplicationContext;
+
+import se.rubble.hemhub.user.User;
+import se.rubble.hemhub.user.UserRepository;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+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.request.MockMvcRequestBuilders.put;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+@SpringBootTest
+class TaskEditingApiTest {
+
+    private static final Instant CREATED_AT = Instant.parse("2026-07-27T09:00:00Z");
+
+    @Autowired
+    private WebApplicationContext context;
+
+    @Autowired
+    private TaskRepository taskRepository;
+
+    @Autowired
+    private UserRepository userRepository;
+
+    private MockMvc mockMvc;
+
+    @BeforeEach
+    void setUp() {
+        taskRepository.deleteAll();
+        userRepository.deleteAll();
+        mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
+    }
+
+    @ParameterizedTest
+    @EnumSource(TaskStatus.class)
+    void updatesDetailsInEveryStatusAndPreservesOtherFields(TaskStatus statusValue) throws Exception {
+        User assignee = createUser();
+        Task task = saveTask(statusValue, assignee, "Före", "Gammal", 3);
+
+        mockMvc.perform(put("/api/tasks/{taskId}/details", task.getId())
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content("""
+                                {
+                                  "title": "  Efter  ",
+                                  "description": "  Ny beskrivning  ",
+                                  "points": 7
+                                }
+                                """))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.id").value(task.getId().toString()))
+                .andExpect(jsonPath("$.title").value("Efter"))
+                .andExpect(jsonPath("$.description").value("Ny beskrivning"))
+                .andExpect(jsonPath("$.points").value(7))
+                .andExpect(jsonPath("$.status").value(statusValue.name()))
+                .andExpect(jsonPath("$.assignee.id").value(assignee.getId().toString()))
+                .andExpect(jsonPath("$.assignee.name").value(assignee.getName()))
+                .andExpect(jsonPath("$.createdAt").value(CREATED_AT.toString()));
+
+        Task updated = taskRepository.findOneById(task.getId()).orElseThrow();
+        assertEquals(statusValue, updated.getStatus());
+        assertEquals(assignee.getId(), updated.getAssignee().getId());
+        assertEquals(CREATED_AT, updated.getCreatedAt());
+        assertTrue(userRepository.existsById(assignee.getId()));
+    }
+
+    @Test
+    void acceptsBoundariesBlankDescriptionAndUnchangedValues() throws Exception {
+        String title = "å".repeat(100);
+        String description = "å".repeat(500);
+        Task task = saveTask(TaskStatus.WAITING, null, title, description, 1);
+
+        updateDetails(task.getId(), title, description, 99)
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.title").value(title))
+                .andExpect(jsonPath("$.description").value(description))
+                .andExpect(jsonPath("$.points").value(99));
+
+        updateDetails(task.getId(), title, "   ", 1)
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.description").doesNotExist())
+                .andExpect(jsonPath("$.points").value(1));
+
+        updateDetails(task.getId(), title, null, 1)
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.description").doesNotExist());
+    }
+
+    @ParameterizedTest(name = "{1}")
+    @MethodSource("invalidRequests")
+    void rejectsInvalidOrIncompleteRequests(String request, String description) throws Exception {
+        Task task = saveTask(TaskStatus.WAITING, null, "Före", null, 3);
+
+        mockMvc.perform(put("/api/tasks/{taskId}/details", task.getId())
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(request))
+                .andExpect(status().isBadRequest())
+                .andExpect(jsonPath("$.code").value("INVALID_TASK"));
+    }
+
+    @Test
+    void returnsNotFoundAndKeepsOtherTaskUnchanged() throws Exception {
+        Task otherTask = saveTask(TaskStatus.COMPLETED, null, "Annan", "Oförändrad", 9);
+        UUID unknownId = UUID.randomUUID();
+
+        updateDetails(unknownId, "Ny", null, 4)
+                .andExpect(status().isNotFound())
+                .andExpect(jsonPath("$.code").value("TASK_NOT_FOUND"));
+
+        mockMvc.perform(get("/api/tasks"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.length()").value(1))
+                .andExpect(jsonPath("$[0].id").value(otherTask.getId().toString()))
+                .andExpect(jsonPath("$[0].title").value("Annan"))
+                .andExpect(jsonPath("$[0].description").value("Oförändrad"))
+                .andExpect(jsonPath("$[0].points").value(9));
+    }
+
+    @Test
+    void keepsExistingBadRequestForInvalidUuid() throws Exception {
+        mockMvc.perform(put("/api/tasks/{taskId}/details", "inte-ett-uuid")
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content("""
+                                {"title": "Ny", "description": null, "points": 4}
+                                """))
+                .andExpect(status().isBadRequest())
+                .andExpect(jsonPath("$.code").value("INVALID_TASK_ASSIGNMENT"));
+    }
+
+    private org.springframework.test.web.servlet.ResultActions updateDetails(
+            UUID taskId,
+            String title,
+            String description,
+            int points) throws Exception {
+        return mockMvc.perform(put("/api/tasks/{taskId}/details", taskId)
+                .contentType(MediaType.APPLICATION_JSON)
+                .content("""
+                        {
+                          "title": %s,
+                          "description": %s,
+                          "points": %d
+                        }
+                        """.formatted(jsonString(title), jsonString(description), points)));
+    }
+
+    private User createUser() throws Exception {
+        String response = mockMvc.perform(post("/api/users")
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content("""
+                                {"name": "Urban"}
+                                """))
+                .andExpect(status().isCreated())
+                .andReturn()
+                .getResponse()
+                .getContentAsString();
+        String id = com.jayway.jsonpath.JsonPath.read(response, "$.id");
+        return userRepository.findById(UUID.fromString(id)).orElseThrow();
+    }
+
+    private Task saveTask(
+            TaskStatus statusValue,
+            User assignee,
+            String title,
+            String description,
+            int points) {
+        return taskRepository.save(new Task(
+                UUID.randomUUID(),
+                title,
+                description,
+                statusValue,
+                points,
+                assignee,
+                CREATED_AT));
+    }
+
+    private static Stream<Arguments> invalidRequests() {
+        return Stream.of(
+                Arguments.of("{}", "alla fält saknas"),
+                Arguments.of("""
+                        {"description": null, "points": 1}
+                        """, "titel saknas"),
+                Arguments.of("""
+                        {"title": null, "description": null, "points": 1}
+                        """, "titel är null"),
+                Arguments.of("""
+                        {"title": "   ", "description": null, "points": 1}
+                        """, "titel är blank"),
+                Arguments.of("""
+                        {"title": "%s", "description": null, "points": 1}
+                        """.formatted("a".repeat(101)), "titel är för lång"),
+                Arguments.of("""
+                        {"title": "Titel", "description": "%s", "points": 1}
+                        """.formatted("a".repeat(501)), "beskrivning är för lång"),
+                Arguments.of("""
+                        {"title": "Titel", "points": 1}
+                        """, "beskrivning saknas"),
+                Arguments.of("""
+                        {"title": "Titel", "description": null}
+                        """, "poäng saknas"),
+                Arguments.of("""
+                        {"title": "Titel", "description": null, "points": null}
+                        """, "poäng är null"),
+                Arguments.of("""
+                        {"title": "Titel", "description": null, "points": "7"}
+                        """, "poäng är text"),
+                Arguments.of("""
+                        {"title": "Titel", "description": null, "points": 1.5}
+                        """, "poäng är decimal"),
+                Arguments.of("""
+                        {"title": "Titel", "description": null, "points": 0}
+                        """, "poäng är noll"),
+                Arguments.of("""
+                        {"title": "Titel", "description": null, "points": -1}
+                        """, "poäng är negativ"),
+                Arguments.of("""
+                        {"title": "Titel", "description": null, "points": 100}
+                        """, "poäng är för hög"));
+    }
+
+    private static String jsonString(String value) {
+        if (value == null) {
+            return "null";
+        }
+        return "\"" + value.replace("\\", "\\\\").replace("\"", "\\\"") + "\"";
+    }
+}

backend/src/test/java/se/rubble/hemhub/task/TaskTest.java

@@ -5,6 +5,7 @@ import java.util.UUID;
 
 import org.junit.jupiter.api.Test;
 
+import static org.junit.jupiter.api.Assertions.assertEquals;
 import static org.junit.jupiter.api.Assertions.assertThrows;
 
 class TaskTest {
@@ -29,6 +30,25 @@ class TaskTest {
                         Instant.parse("2026-07-26T12:00:00Z")));
     }
 
+    @Test
+    void changesOnlyEditableDetailsAndProtectsPointsInvariant() {
+        Task task = taskWithPoints(3);
+        UUID id = task.getId();
+        TaskStatus status = task.getStatus();
+        Instant createdAt = task.getCreatedAt();
+
+        task.changeDetails("Ny titel", "Ny beskrivning", 7);
+
+        assertEquals(id, task.getId());
+        assertEquals("Ny titel", task.getTitle());
+        assertEquals("Ny beskrivning", task.getDescription());
+        assertEquals(7, task.getPoints());
+        assertEquals(status, task.getStatus());
+        assertEquals(createdAt, task.getCreatedAt());
+        assertThrows(InvalidTaskException.class, () -> task.changeDetails("Titel", null, 0));
+        assertThrows(InvalidTaskException.class, () -> task.changeDetails("Titel", null, 100));
+    }
+
     private Task taskWithPoints(int points) {
         return new Task(
                 UUID.randomUUID(),

docs/architecture.md

@@ -23,14 +23,17 @@ byggprocess.
 
 ### Frontend
 
-Frontend finns i `frontend/` och använder React 19, TypeScript, Vite och pnpm.
+Frontend finns i `frontend/` och använder React 19, TypeScript, Vite, pnpm och
-Den ansvarar för:
+dnd-kit-ekosystemets aktuella React-adapter. Den ansvarar för:
 
 - hämtning och presentation av användare och uppgifter;
 - lokalt val av aktiv användare;
 - formulär för att skapa användare och uppgifter;
+- serverbekräftad redigering av uppgifters titel, beskrivning och poäng;
 - val och visning av ansvarig användare på uppgifter;
 - serverbekräftade statusändringar genom knappar på uppgiftskorten;
+- optimistiska statusflyttar genom drag-and-drop mellan brädans kolumner;
+- bekräftad och serverbekräftad permanent radering av uppgifter;
 - klientnära validering och begripliga felmeddelanden;
 - uppgiftsbrädan med kolumnerna Väntande, Pågående och Klart.
 
@@ -64,6 +67,8 @@ Aktuella endpoints:
 - `POST /api/tasks`
 - `PUT /api/tasks/{taskId}/assignee`
 - `PUT /api/tasks/{taskId}/status`
+- `PUT /api/tasks/{taskId}/details`
+- `DELETE /api/tasks/{taskId}`
 
 ### Databas och migreringar
 
@@ -128,6 +133,10 @@ Alla direkta statusövergångar är tillåtna och samma målstatus är idempoten
 frontend aktiv användares id, och backend tilldelar användaren och ändrar status
 i samma transaktion. En befintlig ansvarig byts aldrig av statusoperationen.
 
+Uppgifter raderas fysiskt genom task-repositoryt. Det finns ingen
+mjukraderingsflagga, papperskorg eller återställningsmodell. Radering av en
+uppgift påverkar inte dess ansvariga användare.
+
 ### Aktiv användare
 
 Användarlistan hämtas från backend. Frontend lagrar endast den valda
@@ -148,7 +157,18 @@ otillåtna tilldelningsändringar till `409 Conflict`.
 Frontend skiljer mellan fel vid hämtning och skapande. Hämtfel kan
 återförsökas. Formulärfel visas nära formuläret och inmatningen behålls vid
 misslyckade API-anrop. Status- och tilldelningsfel visas lokalt på berört kort;
-kortet uppdateras först med backendens bekräftade respons.
+statusknappar och tilldelning uppdateras först med backendens bekräftade
+respons. Drag-and-drop flyttar kortet optimistiskt men återställer hela den
+tidigare uppgiften vid fel. Vid framgång ersätts alltid det lokala värdet med
+backendens fullständiga respons. Status- och tilldelningsanrop delar låsning per
+task-id, så det berörda kortet blockeras utan att resten av brädan låses.
+Drag-and-drop återanvänder backendens befintliga status-API oförändrat.
+
+Radering är serverbekräftad och använder samma låsning per task-id. Kortet och
+bekräftelsedialogen ligger kvar tills backend svarar. Vid `204 No Content`
+tas kortet bort lokalt. Ett `404`-svar tas endast som bekräftelse på att kortet
+redan saknas när felkoden är `TASK_NOT_FOUND`; övriga fel behåller kortet och
+dialogen för ett nytt försök.
 
 ### Teststrategi
 
@@ -160,7 +180,9 @@ Backend har JUnit 5-tester:
 
 Frontend använder Vitest, jsdom och React Testing Library. `fetch` och
 `localStorage` ersätts i testerna, så frontendtesterna kräver inte en körande
-backend. Produktionsbygget kör TypeScript-kompilering följt av Vite.
+backend. Drag-and-drop-adaptern översätter bibliotekshändelser till task-id och
+status, så stateflöden kan testas utan att simulera fysisk layout i jsdom.
+Produktionsbygget kör TypeScript-kompilering följt av Vite.
 
 ### Produktionsdeployment
 

docs/features/006-task-drag-and-drop.md

@@ -0,0 +1,551 @@
+# Feature 6 – Drag-and-drop
+
+## Status
+
+Färdig och mergad till main.
+
+## Bakgrund
+
+Feature 5 införde backendstyrda statusövergångar mellan `WAITING`,
+`IN_PROGRESS` och `COMPLETED`, ett särskilt status-API samt ett första
+knappbaserat gränssnitt för statusändring.
+
+Feature 6 ska komplettera detta med drag-and-drop mellan brädans
+statuskolumner. Featuren ska återanvända den befintliga statusmodellen,
+status-API:t, tilldelningsreglerna och frontendens hantering av vänteläge och
+lokala fel. Den ska inte skapa en parallell statusmekanism.
+
+## Mål
+
+Feature 6 ska:
+
+- låta användaren dra uppgiftskort mellan statuskolumner;
+- använda status-API:t från Feature 5;
+- ge omedelbar visuell återkoppling genom optimistisk flytt;
+- återställa kortet om backend avvisar statusändringen;
+- hantera automatisk tilldelning när en otilldelad uppgift dras till Pågående;
+- behålla befintliga statusknappar som ett tillfälligt alternativ;
+- fungera med mus och på en rimlig nivå med touch;
+- hålla dragmekanik, statuslogik och kortlayout tillräckligt separerade för
+  framtida ändringar.
+
+## Omfattning
+
+Feature 6 är primärt en frontendfeature.
+
+Backendens befintliga endpoint används:
+
+```http
+PUT /api/tasks/{taskId}/status
+```
+
+Requesten innehåller målstatus och kan innehålla aktiv användares id:
+
+```json
+{
+  "status": "IN_PROGRESS",
+  "activeUserId": "d56b54dd-31b0-4d71-8a10-82464be59a61"
+}
+```
+
+Backend ska endast ändras om granskning av den faktiska implementationen visar
+att en mindre korrigering behövs för att det befintliga kontraktet ska kunna
+återanvändas korrekt.
+
+## Implementerad lösning
+
+Frontend använder `@dnd-kit/react` 0.5.0 som aktuell React-adapter och
+`@dnd-kit/dom` 0.5.0 för en konfigurerad pointer-sensor. Legacy-paketen
+`@dnd-kit/core` och `@dnd-kit/sortable` används inte. Sortable-stöd behövs inte
+eftersom kort inte ordnas inom kolumner.
+
+`TaskDragAndDrop.tsx` avgränsar bibliotekskopplingen. Adaptern:
+
+- registrerar uppgiftskort som draggable och statuskolumner som droppable;
+- översätter ett lyckat drop-event till task-id och målstatus;
+- ignorerar avbrutna dragningar och ogiltiga mål;
+- använder sex pixlars aktiveringsavstånd för mus och penna;
+- använder 250 millisekunders fördröjning med åtta pixlars tolerans för touch;
+- behåller dnd-kits standardplugins och tangentbordssensor;
+- förlitar sig på sensorns standardskydd mot dragstart från interaktiva
+  element.
+
+Ingen särskild `touch-action`, collision detector eller drag-overlay har lagts
+till. Den befintliga responsiva layouten är oförändrad.
+
+`TaskBoard` har fortsatt en gemensam requestväg och låsning per task-id för
+statusändringar. Ett presentationsval avgör beteendet:
+
+- statusknappar använder `server-confirmed` och flyttar inte kortet före svar;
+- drag-and-drop använder `optimistic`, sparar hela tidigare uppgiften och
+  flyttar kortet direkt;
+- lyckade anrop ersätter uppgiften med hela serverresponsen;
+- misslyckade optimistiska anrop återställer hela rollback-värdet och visar
+  felet lokalt.
+
+När en otilldelad uppgift dras till `IN_PROGRESS` visar det optimistiska värdet
+den aktiva användarens id och namn. En befintlig ansvarig behålls. Backendens
+befintliga status-API och Feature 5-regler återanvänds utan backendändringar.
+
+Frontendens 44 tester, TypeScript-kompilering, Vites produktionsbygge och
+`git diff --check` passerar på feature-branchen. Manuell browserverifiering av
+de centrala drag-, server- och rollbackflödena är genomförd.
+
+## Avgränsningar
+
+Feature 6 ska inte införa:
+
+- en ny statusmodell;
+- ett nytt eller parallellt status-API;
+- manuell sortering inom en kolumn;
+- persistent kortordning;
+- generell redigering av uppgifter;
+- radering;
+- deadlines;
+- återkommande uppgifter;
+- status- eller poänghistorik;
+- undo-funktion;
+- flera ansvariga;
+- autentisering eller behörigheter;
+- realtidsuppdatering mellan browsers;
+- en ny global state-lösning;
+- horisontell scrollning som ett särskilt mobilkoncept;
+- ett specialbyggt tangentbordsflöde för drag-and-drop.
+
+Att flytta ett kort inom samma kolumn ska inte ändra någon ordning och ska inte
+ge ett backend-anrop.
+
+## Befintliga statusregler
+
+Feature 6 ska behandla följande regler som redan beslutade:
+
+- statusarna är `WAITING`, `IN_PROGRESS` och `COMPLETED`;
+- alla direkta statusövergångar är tillåtna;
+- samma målstatus är giltig och idempotent;
+- `IN_PROGRESS` kräver ansvarig;
+- `WAITING` och `COMPLETED` får vara otilldelade;
+- när en otilldelad uppgift sätts till `IN_PROGRESS` skickar frontend aktiv
+  användares id;
+- backend tilldelar då användaren och ändrar status atomärt;
+- om uppgiften redan har en ansvarig behålls denna;
+- statusoperationen byter aldrig en befintlig ansvarig;
+- backend returnerar hela den uppdaterade uppgiften;
+- serverns fullständiga task-respons är slutlig sanning.
+
+## Uppdateringsstrategi
+
+Drag-and-drop använder en kontrollerad optimistisk uppdatering.
+
+När ett kort släpps i en annan statuskolumn ska frontend:
+
+1. spara hela den nuvarande task-versionen som rollback-värde;
+2. skapa ett optimistiskt lokalt task-läge;
+3. visa kortet omedelbart i målkolumnen;
+4. markera kortet som upptaget;
+5. skicka statusanropet;
+6. vid framgång ersätta den optimistiska uppgiften med serverns fullständiga
+   respons;
+7. vid fel återställa hela den tidigare task-versionen;
+8. visa felet lokalt på det återställda kortet.
+
+Rollback ska återställa hela uppgiften, inte enbart statusfältet. Detta är
+viktigt eftersom en optimistisk flytt till `IN_PROGRESS` även kan innehålla en
+tillfällig antagen ansvarig.
+
+Ingen generell infrastruktur för optimistiska uppdateringar ska införas.
+Lösningen ska hållas lokal till uppgiftslistan och drag-and-drop-flödet.
+Feature 5:s statusknappar ska fortsatt vara serverbekräftade: kortet ligger kvar
+i sin aktuella kolumn tills backend svarar.
+
+## Otilldelad uppgift till Pågående
+
+När en otilldelad uppgift dras till `IN_PROGRESS` ska frontend:
+
+- skicka målstatus `IN_PROGRESS`;
+- skicka aktiv användares id;
+- optimistiskt visa aktiv användare som ansvarig;
+- låta backend tilldela användaren och ändra status i samma transaktion.
+
+Om uppgiften redan har en ansvarig ska frontend inte optimistiskt ersätta denna
+med den aktiva användaren. Serverresponsen ersätter alltid det optimistiska
+antagandet.
+
+Drag-and-drop ska inte visa ett nytt ansvarigval.
+
+## Drag-and-drop-bibliotek
+
+Feature 6 ska använda dnd-kit-ekosystemets aktuella stabila React-lösning.
+Featuredokumentet låser inte exakta paket eller API:n. Codex ska vid
+implementation verifiera den aktuella officiella dokumentationen, vilka paket
+som är aktuella respektive legacy, kompatibilitet med repositoryts
+React-version samt påverkan på Vitest/jsdom och React Testing Library.
+
+Den valda lösningen ska stödja:
+
+- draggable-kort;
+- droppable-statuskolumner;
+- pointer- och touchinteraktion;
+- aktiveringsvillkor;
+- avbruten dragning;
+- identifiering av målkolumn.
+
+Biblioteket ska inte användas för:
+
+- sortering inom kolumner;
+- persistent ordning;
+- egen domänmodell;
+- generell state-hantering;
+- parallell statuslogik.
+
+Dragbibliotekets händelser ska översättas till en gemensam,
+bibliotekoberoende ingång till statusflödet.
+
+## Statusknapparnas roll
+
+Feature 5:s statusknappar behålls tills vidare som ett fullt fungerande
+alternativ. De betraktas inte som en permanent del av målbilden. Den
+ursprungliga visuella designen innehåller inte statusknappar, och de ska därför
+enkelt kunna tas bort efter utvärdering.
+
+Implementation ska följa dessa principer:
+
+- drag-and-drop får inte byggas ovanpå knappkomponenterna;
+- draglogik får inte placeras i knapparna;
+- statuslogik får inte dupliceras mellan knappar och drag-and-drop;
+- båda ska dela underliggande requestlogik, låsning per task-id, felhantering
+  och ersättning med serverrespons;
+- drag-and-drop använder optimistisk visuell flytt, medan statusknapparna
+  förblir serverbekräftade och låter kortet ligga kvar tills backend svarar;
+- den visuella presentationsstrategin får därför skilja sig mellan
+  interaktionerna;
+- vänteläge, felhantering och serverrespons ska höra till uppgiften och det
+  delade statusflödet, inte dupliceras per kontroll;
+- kortlayouten får inte strukturellt förutsätta att knapparna alltid finns.
+
+Att ta bort statusknapparna senare ska inte kräva ändringar i status-API,
+dragmekanik, rollback eller task-state. Statusarkitekturen får inte vara kopplad
+till att knapparna finns kvar.
+
+## Vänteläge
+
+När statusanropet pågår ska det optimistiskt flyttade kortet tonas ned lätt.
+Ingen text som `Flyttar…` och ingen spinner krävs i första versionen.
+
+Under vänteläget ska just detta kort inte kunna:
+
+- dras igen;
+- initiera en ny statusändring;
+- ändra ansvarig.
+
+Övriga kort ska förbli interaktiva.
+
+Flera olika kort får ha statusanrop pågående samtidigt. Låsning, nedtoning,
+rollback och fel hanteras per task-id.
+
+## Fel och återställning
+
+Vid ett misslyckat statusanrop ska:
+
+- hela den tidigare task-versionen återställas;
+- kortet återgå till ursprungskolumnen;
+- tidigare ansvarig återställas;
+- nedtoningen tas bort;
+- felet visas lokalt på kortet;
+- målkolumnen inte behålla någon tillfällig markering.
+
+Tidigare klientdata ska inte delvis blandas med det misslyckade optimistiska
+tillståndet. Ett fel på ett kort ska inte blockera resten av brädan.
+
+## Serverrespons
+
+Vid lyckat statusanrop ska frontend alltid ersätta den optimistiska uppgiften
+med hela serverresponsen.
+
+Det gäller även om serverresponsen skiljer sig från frontendens antagande vad
+gäller exempelvis:
+
+- status;
+- ansvarig;
+- andra returnerade task-fält.
+
+Servern är slutlig sanning.
+
+## Dragyta
+
+Kortets icke-interaktiva yta ska fungera som dragyta. Knappar, select och andra
+interaktiva element ska inte initiera dragning.
+
+Implementation får avgöra sensoruppsättning, aktiveringströskel samt avstånd,
+fördröjning och tolerans. Vanliga klick och små fingerrörelser får inte
+oavsiktligt starta dragning, och kortets interaktiva kontroller ska fungera
+normalt.
+
+Dragmekaniken ska implementeras så att ett separat draghandtag senare kan
+införas utan att statusoperation, API-anrop, rollback eller task-state behöver
+ändras. Det bör räcka att flytta bibliotekets draglisteners och tillhörande
+attribut från kortets rot till handtaget.
+
+## Målkolumner
+
+Kolumnerna behöver ingen stark eller permanent drop-markering. Den kolumn som
+kortet befinner sig över kan vid behov få en mycket diskret hover-effekt,
+exempelvis:
+
+- en svag bakgrundsförändring;
+- en tunn kant;
+- annan lågmäld visuell återkoppling.
+
+Feature 6 ska inte införa stora färgade drop-zoner eller en generell redesign
+av brädan. Om manuell verifiering visar att ingen markering behövs kan även den
+diskreta hover-effekten utelämnas.
+
+## Drop i samma kolumn
+
+Om ett kort släpps i kolumnen som motsvarar dess nuvarande status ska
+operationen vara no-op.
+
+Det innebär:
+
+- inget API-anrop;
+- ingen statusändring;
+- ingen ändring av ordning;
+- inget vänteläge;
+- inget felmeddelande.
+
+## Avbruten dragning
+
+Om en dragning avbryts eller avslutas utanför en giltig målkolumn ska
+operationen vara no-op. Kortet ska återgå till sin normala position utan
+API-anrop eller felindikering.
+
+## Desktop och touch
+
+Desktop är det primära användningsfallet för Feature 6.
+
+Touch ska fungera på en rimlig grundnivå, men featuren ska inte införa en
+särskild mobil Kanban-design. Brädans befintliga responsiva layout ska
+behållas. Feature 6 ska inte införa horisontell scrollning. På smala skärmar
+får kolumnerna fortsätta använda repositoryts nuvarande responsiva layout,
+även om de staplas vertikalt.
+
+Implementation får avgöra sensoruppsättning, aktiveringsvillkor, eventuell
+`touch-action`, collision detection och drag-overlay. Valen måste bevara normal
+vertikal scrollning på mobil och får inte göra interaktiva kortkontroller
+svåranvända.
+
+Draglogiken ska:
+
+- identifiera mål genom status, inte genom en fast skärmposition;
+- inte förutsätta att kolumnerna ligger horisontellt;
+- hållas separerad från layout-CSS;
+- kunna fortsätta fungera om kolumnlayouten senare ändras.
+
+Om manuell verifiering visar att dragning mellan staplade kolumner fungerar
+dåligt kan mobilbeteendet ändras senare utan att status- eller rollbacklogiken
+görs om. Statusknapparna finns kvar som alternativ, särskilt där dragning är
+opraktisk.
+
+## Tangentbord och tillgänglighet
+
+Tangentbordsstyrd drag-and-drop ingår inte som grundkrav i Feature 6.
+Statusknapparna ska fortsatt ge en fungerande tangentbordsväg för
+statusändring. Drag-and-drop får därför inte vara den enda möjliga vägen.
+
+Feature 6 ska ändå uppfylla grundläggande tillgänglighetskrav:
+
+- interaktiva kontroller ska fortsatt gå att nå med tangentbord;
+- ett upptaget kort ska inte kunna aktiveras igen;
+- fokus ska inte tappas oförklarligt efter lyckad operation eller rollback;
+- begripliga etiketter ska bevaras;
+- dragbibliotekets standard-ARIA får användas;
+- ingen omfattande speciallösning för tangentbordsdragning ska byggas.
+
+Förbättrat tangentbordsstöd för själva dragningen kan införas i en senare
+uppdatering.
+
+## Gemensamt statusflöde
+
+Frontend ska ha ett gemensamt, kontrolloberoende statusflöde för den
+underliggande statusändringen.
+
+Det delade flödet ska ansvara för:
+
+- kontroll av pågående operation för task-id;
+- requestformat;
+- aktiv användares id vid behov;
+- per-kort-vänteläge;
+- ersättning med serverrespons;
+- lokalt statusfel.
+
+Drag-and-drop-flödet ska därutöver beräkna den optimistiska task-versionen,
+spara rollback-värdet och återställa hela den tidigare uppgiften vid fel.
+Statusknapparna ska inte göra en optimistisk flytt.
+
+Drag-and-drop och statusknappar är separata sätt att ange målstatus till det
+delade flödet, men får använda olika visuell presentationsstrategi.
+Tilldelningskontrollen ska återanvända samma per-kort-låsning så att status och
+tilldelning inte kan ändras samtidigt på samma uppgift.
+
+## Frontendtester
+
+Frontendtesterna verifierar beteende och state utan att förutsätta fysisk
+layout eller exakta pointer-koordinater i jsdom. Dragadaptern mockas i
+brädtesterna, medan den bibliotekoberoende mappningen från draghändelse till
+task-id och målstatus testas separat.
+
+Testerna täcker bland annat:
+
+- korrekt statusanrop och optimistisk flytt till en annan kolumn;
+- låsning och nedtoning per task-id medan anropet pågår;
+- att andra kort kan ha samtidiga operationer;
+- automatisk optimistisk tilldelning till aktiv användare;
+- att en befintlig ansvarig behålls;
+- att hela serverresponsen ersätter det optimistiska värdet;
+- fullständig rollback och lokalt fel vid misslyckande;
+- no-op för samma status, avbruten dragning och ogiltigt mål;
+- att statusknapparnas befintliga serverbekräftade beteende är bevarat.
+
+Totalt passerar 44 frontendtester. TypeScript-kompileringen och Vites
+produktionsbygge passerar också.
+
+## Backendtester
+
+Backend ändrades inte. Feature 5:s befintliga tester fortsätter därför att
+utgöra verifiering av:
+
+- direkta statusövergångar;
+- idempotens;
+- automatisk tilldelning;
+- bevarad befintlig ansvarig;
+- statusvalidering;
+- statusberoende tilldelningsregler;
+- oförändrade övriga task-fält.
+
+## Manuell verifiering
+
+Manuell browserverifiering är genomförd. Följande verifierades:
+
+- drag-and-drop mellan statuskolumner fungerar;
+- kortet flyttas optimistiskt och tonas ned under statusanropet;
+- en otilldelad uppgift som flyttas till Pågående får aktiv användare som
+  ansvarig;
+- en befintlig ansvarig behålls;
+- serverns svar ersätter det optimistiska värdet;
+- statusknapparna fungerar fortsatt;
+- ett blockerat statusanrop visar
+  `Det gick inte att ändra status. Försök igen.`;
+- kortet återställs till ursprungskolumnen vid fel;
+- tidigare ansvarig återställs, nedtoningen försvinner och kortet blir
+  interaktivt igen;
+- övriga kort förblir interaktiva under operationen.
+
+## Dokumentation
+
+Feature 6 ska dokumenteras i:
+
+```text
+docs/features/006-task-drag-and-drop.md
+```
+
+Vid implementation ska även följande uppdateras när det är relevant:
+
+```text
+README.md
+docs/architecture.md
+docs/roadmap.md
+```
+
+Roadmapen markerar Feature 6 som `Klar` efter verifiering och merge.
+
+Ett nytt ADR behövs endast om biblioteksvalet bedöms vara ett övergripande,
+långlivat frontendbeslut som påverkar fler delar av applikationen än Feature
+6. Om `dnd-kit` endast används lokalt för denna feature bör beslutet normalt
+dokumenteras i feature- och arkitekturdokumentationen.
+
+## Acceptanskriterier
+
+Feature 6 är klar när:
+
+- kort kan dras mellan olika statuskolumner;
+- dragningen använder Feature 5:s status-API;
+- kortet flyttas optimistiskt till målkolumnen;
+- kortet tonas ned under serveranropet;
+- samma kort är låst för status, dragning och tilldelning under anropet;
+- andra kort förblir interaktiva;
+- otilldelad uppgift till Pågående använder aktiv användares id;
+- befintlig ansvarig behålls;
+- serverresponsen ersätter det optimistiska tillståndet;
+- fel återställer hela tidigare task-versionen;
+- kortet återgår till ursprungskolumnen vid fel;
+- felet visas lokalt på kortet;
+- drop i samma kolumn är no-op;
+- avbruten dragning är no-op;
+- ingen manuell eller persistent kortordning har införts;
+- statusknapparna fungerar fortsatt men är arkitekturellt frikopplade;
+- statusknapparna förblir serverbekräftade medan drag-and-drop är optimistisk;
+- statusknapparna kan tas bort senare utan att drag- eller statuslogiken byggs
+  om;
+- kortets icke-interaktiva yta fungerar som dragyta;
+- interaktiva kortkontroller initierar inte dragning;
+- ett senare draghandtag kan införas utan ändring av statusflödet;
+- normal vertikal scrollning på mobil bevaras;
+- ingen horisontell scrollning har införts;
+- desktop fungerar väl;
+- touch fungerar på rimlig grundnivå;
+- tangentbordsdragning inte krävs;
+- statusändring fortsatt är möjlig med tangentbord genom statusknapparna;
+- frontendtesterna täcker centrala stateövergångar och felfall;
+- manuell verifiering täcker dragkänsla, touch, layout och rollback;
+- backend är oförändrad om inget konkret behov av justering hittas;
+- relevant dokumentation är uppdaterad.
+
+## Implementationsprinciper
+
+Vid implementationen användes följande dokumentation som tekniskt underlag:
+
+```text
+AGENTS.md
+README.md
+docs/architecture.md
+docs/development.md
+docs/roadmap.md
+docs/decisions/
+docs/features/004-task-assignment.md
+docs/features/005-task-status.md
+```
+
+Relevant frontendkod och tester granskades särskilt avseende:
+
+- aktuell React-version;
+- frontendens installerade beroenden;
+- aktuell officiell dnd-kit-dokumentation;
+- vilka dnd-kit-paket som är aktuella respektive legacy;
+- dnd-kit-lösningens kompatibilitet med React-versionen;
+- påverkan på Vitest/jsdom och React Testing Library;
+- aktuell task-typ;
+- brädans kolumnstruktur;
+- uppgiftskortets komponentstruktur;
+- befintliga statusknappar;
+- statusanropets requestformat;
+- hur aktiv användare representeras;
+- hur tasks ersätts i state;
+- det gemensamma vänteläget per kort;
+- status- och tilldelningsfel;
+- tilldelningskontrollens inaktiveringslogik;
+- aktuell teststil;
+- vilka pointer- och draghändelser testmiljön stödjer.
+
+Repositoryts faktiska kod och dokumentation har företräde framför antaganden i
+denna featurebeskrivning.
+
+Kod, tester och relevant dokumentation ska uppdateras tillsammans.
+
+Codex ska inte committa, pusha, skapa pull request eller merga utan uttrycklig
+instruktion.
+
+## Relaterade commits
+
+- Feature-commit:
+  `c3c64482c062f144fd6cb6036e3c9db0afa5ec1e`
+- Merge-commit till `main`:
+  `2696195e741c155a197ae9838d1938bdf2148cc2`

docs/features/007-task-deletion.md

@@ -0,0 +1,442 @@
+# Feature 7 – Radera uppgift
+
+## Status
+
+Färdig och mergad till main.
+
+## Bakgrund
+
+HemHub stödjer skapande, visning, tilldelning, statusändring och drag-and-drop
+av uppgifter. Det saknas möjlighet att ta bort uppgifter som inte längre är
+relevanta eller som skapats av misstag.
+
+Feature 7 inför permanent radering av en enskild uppgift. Radering hålls
+separat från generell redigering så att det destruktiva flödet, dess
+bekräftelse och felhantering kan implementeras och verifieras isolerat.
+
+## Mål
+
+Feature 7 ska:
+
+- införa ett backend-API för permanent radering av en uppgift;
+- låta användaren initiera radering från uppgiftskortet;
+- kräva en tydlig bekräftelse före radering;
+- ta bort kortet från brädan först efter serverbekräftelse;
+- återanvända befintlig låsning och felhantering per task-id;
+- fungera tillsammans med statusändring, tilldelning och drag-and-drop utan
+  parallella state- eller requestflöden.
+
+## Omfattning
+
+Feature 7 omfattar endast permanent radering av en befintlig uppgift.
+
+En uppgift får raderas oavsett om dess status är `WAITING`, `IN_PROGRESS` eller
+`COMPLETED`. Uppgiftens ansvariga användare och aktiv browseranvändare påverkar
+inte möjligheten att radera. Det lokala användarvalet är inte autentisering
+eller behörighetskontroll.
+
+## Avgränsningar
+
+Feature 7 ska inte införa:
+
+- mjuk radering, papperskorg, återställning eller undo;
+- arkivering, versions-, status- eller poänghistorik;
+- generell redigering;
+- batchradering eller markering av flera kort;
+- radering av användare;
+- behörigheter eller ägarskap;
+- realtidsuppdatering mellan browsers;
+- automatisk gallring;
+- persistent kortordning;
+- nya relationer till uppgifter;
+- generell cascade-logik för framtida modeller.
+
+## Permanent radering
+
+Radering är permanent. När användaren har bekräftat raderingen tas uppgiften
+bort ur databasen. Ingen `deleted`-flagga, `deletedAt`, dold arkiveringsmodell
+eller annan form av mjuk radering införs.
+
+HemHub är en liten familjeapplikation utan revisionslogg, papperskorg eller
+återställningsflöde. En mjukraderingsmodell skulle därför öka komplexiteten
+utan ett tydligt nuvarande produktvärde.
+
+Om framtida features för återkommande uppgifter eller poänghistorik behöver
+bevara information efter radering ska deras datamodeller och raderingsregler
+beslutas i respektive feature.
+
+## Tillåtna statusar
+
+Samtliga uppgifter får raderas oavsett status. Det krävs inte att en
+`IN_PROGRESS`-uppgift först flyttas till `WAITING`, och en `COMPLETED`-uppgift
+behandlas inte annorlunda än övriga uppgifter.
+
+Bekräftelseflödet är samma för alla statusar. Ingen extra varning eller
+ytterligare bekräftelse införs för pågående uppgifter.
+
+## Raderingskontroll
+
+Raderingskontrollen ska visas som en diskret sopkorgsikon direkt på det
+befintliga uppgiftskortet, uppe till höger i ett eget åtgärdsområde. Feature 7
+inför inget kompakt eller expanderat kortläge.
+
+Kontrollen ska:
+
+- visas på befintliga uppgiftskort;
+- ha en tillgänglig etikett som identifierar uppgiften, exempelvis
+  `Radera Töm diskmaskinen`;
+- öppna bekräftelsedialogen;
+- inte starta drag-and-drop;
+- ha en rimlig klickyta för touch;
+- ha neutral stil i normalläge och tydlig hover- och fokusmarkering;
+- vara inaktiverad när samma uppgift har en pågående operation.
+
+Sopkorgen implementeras som inline-SVG enligt projektets befintliga
+ikonmönster. Feature 7 lägger inte till något ikonbibliotek.
+
+Den destruktiva visuella betoningen ska primärt ligga i
+bekräftelsedialogen. Kontrollen ska kunna flyttas till en framtida meny eller
+detaljdialog utan att backend-API eller delete-flödet behöver göras om.
+
+## Bekräftelsedialog
+
+Radering bekräftas i en separat delete-modal. Den ska följa beteendemönstret i
+`CreateTaskModal`, men Feature 7 inför ingen gemensam modalkomponent och gör
+ingen bred modalrefaktorering. Dialogen ska visa:
+
+- rubriken `Radera uppgift?`;
+- uppgiftens titel;
+- tydlig information om att raderingen är permanent;
+- knappen `Avbryt`;
+- den destruktivt utformade knappen `Radera`.
+
+Exempel:
+
+> Är du säker på att du vill radera **Töm diskmaskinen**? Uppgiften raderas
+> permanent och kan inte återställas.
+
+Delete-modalen har inget stängningskryss. Innan delete-anropet har startat ska
+den kunna stängas med `Avbryt`, Escape eller klick på bakgrunden. Under
+pågående delete-anrop blockeras samtliga stängningsvägar.
+
+Dialogen ska följa projektets befintliga modalstruktur och fokusprinciper.
+`Avbryt` får initialt fokus när dialogen öppnas; den destruktiva knappen
+`Radera` får inte initialt fokus. Båda knapparna ska vara
+tangentbordsåtkomliga.
+
+## Backend-API
+
+Radering sker genom:
+
+```http
+DELETE /api/tasks/{taskId}
+```
+
+### Lyckad radering
+
+När uppgiften finns och raderas svarar backend med `204 No Content` utan body.
+
+### Okänd uppgift
+
+Om uppgiften inte finns svarar backend med `404 Not Found` och projektets
+befintliga felformat:
+
+```text
+TASK_NOT_FOUND
+```
+
+Det gäller även om samma task-id tidigare har raderats. Ett andra delete-anrop
+mot samma id ger därför `404 TASK_NOT_FOUND`.
+
+### Ogiltigt task-id
+
+Ett task-id som inte kan tolkas som UUID ger `400 Bad Request` med repositoryts
+nuvarande requestfel och felformat. Den befintliga felkoden
+`INVALID_TASK_ASSIGNMENT` ändras inte inom Feature 7. Feature 7 inför ingen
+separat felmodell för UUID-fel.
+
+### Konflikter och transaktion
+
+Radering är tillåten för samtliga statusar och oavsett ansvarig. Feature 7 har
+därför inget domänfall som ger `409 Conflict`.
+
+Raderingen ska ske inom backendens normala transaktionsgräns och endast ta bort
+den identifierade uppgiften. Den får inte ändra eller radera ansvarig
+användare, andra användare eller andra uppgifter.
+
+## Databas
+
+Feature 7 raderar raden permanent ur tabellen `task`.
+
+Nuvarande datamodell har inga dokumenterade beroendeentiteter som kräver en ny
+migrering eller särskild cascade-policy. Den befintliga relationen från
+`task.assignee_id` till `app_user.id` ska verifieras så att den inte hindrar
+radering av uppgiften. Den ansvariga användaren ska finnas kvar.
+
+Ingen databasmigrering ska skapas om det faktiska schemat redan stödjer
+radering. Framtida relationer till uppgifter får definiera sin delete-policy
+när de införs.
+
+## Frontendens uppdateringsstrategi
+
+Frontend använder serverbekräftad radering. När användaren bekräftar ska
+frontend:
+
+1. markera uppgiften som upptagen;
+2. behålla kortet i dess nuvarande kolumn;
+3. behålla bekräftelsedialogen öppen;
+4. skicka delete-anropet;
+5. vänta på serverns svar;
+6. vid `204 No Content` ta bort uppgiften ur den lokala task-listan;
+7. stänga dialogen;
+8. frigöra låsningen för task-id.
+
+Kortet ska inte tas bort optimistiskt. Ingen rollback-modell behövs eftersom
+kortet ligger kvar under anropet.
+
+## Vänteläge
+
+När delete-anropet pågår ska:
+
+- bekräftelsedialogen ligga kvar öppen;
+- `Radera` och `Avbryt` vara inaktiverade;
+- Escape och bakgrundsklick inte kunna stänga dialogen;
+- kortet ligga kvar i sin kolumn och tonas ned lätt;
+- alla interaktiva kontroller på samma kort vara inaktiverade.
+
+Ingen spinner eller text som `Raderar…` krävs.
+
+## Låsning och samspel med andra operationer
+
+Delete ska återanvända den befintliga låsningen per task-id. När uppgiften har
+en pågående status-, tilldelnings- eller dragoperation ska radering inte kunna
+initieras.
+
+När delete-anropet pågår ska samma uppgift inte kunna dras, ändra status, ändra
+ansvarig, öppna en ny raderingsdialog eller skicka ytterligare delete-anrop.
+Andra kort ska förbli interaktiva och kunna ha egna samtidiga operationer.
+
+Feature 7 inför inget globalt vänteläge, separat delete-lås eller parallell
+requestmodell.
+
+## Felhantering
+
+### Vanliga delete-fel
+
+Vid nätverksfel, serverfel eller annat vanligt delete-fel ska:
+
+- kortet ligga kvar oförändrat;
+- dialogen ligga kvar öppen;
+- vänteläget avslutas;
+- kontrollerna aktiveras igen;
+- felmeddelandet
+  `Det gick inte att radera uppgiften. Försök igen.` visas i dialogen;
+- användaren kunna försöka igen eller avbryta.
+
+Delete-felet ska inte blandas med status- eller tilldelningsfel på kortet.
+
+### `404 TASK_NOT_FOUND`
+
+Om backend svarar med `404 TASK_NOT_FOUND` betraktas kortet som inaktuellt.
+Frontend ska då ta bort uppgiften ur den lokala task-listan, stänga dialogen
+och frigöra låsningen utan att visa det generella delete-felet.
+
+Frontendens generella `ApiError`-typ utökas med ett valfritt `code`. Delete-
+flödet ska använda `code === "TASK_NOT_FOUND"` och status `404` för detta fall
+och får inte tolka meddelandetexten.
+
+Andra typer av `404` ska inte behandlas som en redan borttagen uppgift.
+
+## Frontendtester
+
+Frontendtesterna ska minst verifiera:
+
+- att sopkorgsknappen visas direkt på det befintliga uppgiftskortet;
+- att ikonen är inline-SVG och inte kräver ett ikonbibliotek;
+- tillgänglig etikett och rätt uppgift i bekräftelsedialogen;
+- information om permanent radering;
+- initialt fokus på `Avbryt`, aldrig på `Radera`;
+- att modalen saknar stängningskryss;
+- stängning med `Avbryt`, Escape och bakgrundsklick före anrop;
+- `DELETE /api/tasks/{taskId}` först efter bekräftelse;
+- att kort och dialog ligger kvar under anropet;
+- att dialogen inte kan stängas medan anropet pågår;
+- gemensam låsning för status, tilldelning, drag och radering;
+- att andra kort förblir interaktiva;
+- blockering av dubbla delete-anrop;
+- att `204 No Content` tar bort rätt kort och stänger dialogen;
+- att vanliga fel behåller kort och dialog samt kan återförsökas;
+- att `404 TASK_NOT_FOUND` tar bort det inaktuella kortet;
+- att ett annat `404`-fel inte feltolkas som `TASK_NOT_FOUND`;
+- att raderingskontrollen inte bryter drag-and-drop;
+- grundläggande tangentbordsfokus och knappaktivering.
+
+Testerna ska verifiera beteende och state, inte exakt ikonplacering, färg eller
+pixelmått.
+
+## Backendtester
+
+Backendtesterna ska minst verifiera:
+
+- radering i `WAITING`, `IN_PROGRESS` och `COMPLETED`;
+- `204 No Content` utan body;
+- att den raderade uppgiften inte längre finns i `GET /api/tasks`;
+- att andra uppgifter och den ansvariga användaren finns kvar oförändrade;
+- `404 TASK_NOT_FOUND` för okänt id och ett andra delete-anrop;
+- projektets befintliga `400`-fel för ogiltigt UUID-format.
+
+Testerna ska följa repositoryts befintliga integrationsteststil.
+
+## Manuell verifiering
+
+Följande ska verifieras manuellt:
+
+1. Sopkorgsknappens placering uppe till höger i ett eget åtgärdsområde,
+   neutrala normalläge, touchyta, hover, fokus och tillgängliga etikett.
+2. Radering av uppgifter i samtliga tre statusar.
+3. Initialt fokus på `Avbryt`, inget stängningskryss samt avbrytande med knapp,
+   Escape och bakgrundsklick före anrop.
+4. Rätt titel och information om permanent radering.
+5. Titel nära maximal längd.
+6. Blockering av dubbla delete-anrop.
+7. Vänteläge för kort och dialog under fördröjt svar.
+8. Låsning av drag, status, tilldelning och ny radering för samma kort.
+9. Fortsatt interaktion med andra kort.
+10. Vanligt serverfel, visat felmeddelande och nytt försök.
+11. `404 TASK_NOT_FOUND` och lokal borttagning av inaktuellt kort.
+12. Desktop- och mobilbredd samt tangentbordsaktivering.
+13. Omladdning efter lyckad radering så att uppgiften inte återkommer.
+
+## Dokumentation
+
+Feature 7 dokumenteras i:
+
+```text
+docs/features/007-task-deletion.md
+```
+
+Vid implementation ska `README.md`, `docs/architecture.md` och
+`docs/roadmap.md` uppdateras när det är relevant.
+
+Roadmapen ska markera Feature 7 som `Klar` först efter implementation,
+automatiska tester, manuell verifiering och merge.
+
+Ett nytt ADR behövs inte för permanent radering. Beslutet gäller den nuvarande
+task-livscykeln och etablerar inte en generell raderingspolicy för framtida
+entiteter.
+
+## Acceptanskriterier
+
+Feature 7 är klar när:
+
+- en uppgift kan raderas permanent med `DELETE /api/tasks/{taskId}`;
+- lyckad radering ger `204 No Content`;
+- okänd eller redan raderad uppgift ger `404 TASK_NOT_FOUND`;
+- ogiltigt UUID-format följer befintlig felhantering;
+- alla tre statusar kan raderas oavsett ansvarig eller aktiv användare;
+- radering kräver en egen bekräftelsedialog;
+- dialogen visar rätt titel och anger att raderingen inte kan återställas;
+- `Avbryt` får initialt fokus och `Radera` får inte initialt fokus;
+- modalen saknar stängningskryss och blockerar alla stängningsvägar under
+  anropet;
+- en diskret inline-SVG-sopkorg visas direkt på befintliga uppgiftskort;
+- raderingskontrollen startar inte drag;
+- kortet tas bort först efter serverbekräftelse;
+- samma task-id låses för status, tilldelning, drag och ny radering;
+- andra kort förblir interaktiva;
+- vanliga fel behåller kort och dialog och kan återförsökas;
+- `404 TASK_NOT_FOUND` tar bort det inaktuella lokala kortet;
+- ingen mjukradering, återställningsmodell eller onödig migrering införs;
+- backend- och frontendtester täcker centrala flöden;
+- manuell verifiering genomförs;
+- relevant dokumentation uppdateras.
+
+## Implementerad lösning
+
+Backendens task-controller och task-service har utökats med fysisk radering via
+`DELETE /api/tasks/{taskId}`. Servicen hämtar först uppgiften för att
+återanvända `TaskNotFoundException` och raderar därefter entiteten inom en
+transaktion. Ingen entitet, exception handler eller Flyway-migrering behövde
+ändras.
+
+Frontendens `TaskBoard` använder samma per-task-lås som status- och
+tilldelningsoperationerna. Radering är serverbekräftad: kortet och dialogen
+ligger kvar medan anropet pågår, och kortet tas bort först efter `204 No
+Content`. Endast ett svar med både status `404` och felkoden
+`TASK_NOT_FOUND` tar bort ett känt inaktuellt kort. Övriga fel behåller kortet
+och dialogen så att användaren kan försöka igen.
+
+`TaskCard` har inget kompakt eller expanderat läge. En neutral
+inline-SVG-knapp ligger direkt i kortets övre högra åtgärdsområde och stoppar
+pointer-händelsen innan den når dragytan. Den separata delete-modalen följer
+`CreateTaskModal`-mönstret utan en gemensam modalabstraktion. `Avbryt` får
+initialt fokus, modalen saknar stängningskryss och samtliga stängningsvägar
+blockeras under delete-anropet.
+
+Frontendens generella `ApiError` innehåller nu ett valfritt `code`. Den
+befintliga backendhanteringen av felaktigt UUID är oförändrad och returnerar
+fortsatt `400 INVALID_TASK_ASSIGNMENT`.
+
+## Tester och verifiering
+
+Automatiskt verifierat:
+
+- backendens fullständiga testsvit: 47 tester passerade;
+- frontendens fullständiga testsvit: 49 tester passerade;
+- frontendens produktionsbygge och TypeScript-kompilering passerade;
+- `git diff --check` passerade.
+
+Backendtesterna ligger i den separata integrationstestklassen
+`TaskDeletionApiTest`. Frontendens delete-flöden testas tillsammans med övriga
+brädbeteenden i `App.test.tsx`.
+
+Manuell browserverifiering genomfördes mot lokalt körande frontend och backend
+i Chrome. Följande verifierades:
+
+- permanent radering och kvarstående borttagning efter omladdning för
+  `WAITING`, `IN_PROGRESS` och `COMPLETED`;
+- lång titel, radbrytning och korrekt uppgiftstitel i dialogen;
+- initialt fokus på `Avbryt`, tabb-ordning till `Radera`, Escape och
+  bakgrundsklick före anrop samt avsaknad av stängningskryss;
+- fördröjd delete-respons med kvarvarande och nedtonat kort, öppen låst modal
+  och inaktiverade stängningsvägar;
+- gemensam låsning av drag, status, ansvarig och ny radering för samma kort,
+  samtidigt som andra kort förblev interaktiva;
+- snabbt dubbelklick på `Radera` utan dubbla delete-anrop;
+- vanligt serverfel där kort och modal låg kvar, felet visades och ett nytt
+  försök lyckades;
+- `404 TASK_NOT_FOUND`, där det inaktuella kortet togs bort lokalt;
+- neutral sopkorgsknapp med 40 × 40 pixlars klickyta, inline-SVG och
+  pointer-hantering som inte startade drag;
+- desktopbredd 1440 × 1000 och mobilbredd 390 × 844 utan horisontell
+  scrollning.
+
+Inga problem upptäcktes i Feature 7-flödena.
+
+## Relaterade commits
+
+- Feature-commit: `f296d15`
+- Merge-commit: `5df0146`
+
+## Implementationsprinciper
+
+Före implementation ska Codex läsa:
+
+```text
+AGENTS.md
+README.md
+docs/architecture.md
+docs/development.md
+docs/roadmap.md
+docs/decisions/
+docs/features/005-task-status.md
+docs/features/006-task-drag-and-drop.md
+```
+
+Codex ska även läsa relevant backendkod, frontendkod och befintliga tester.
+Repositoryts faktiska kod, tester och dokumentation har företräde framför
+antaganden i detta dokument.
+
+Implementation, tester och relevant dokumentation ska uppdateras tillsammans.
+Codex ska inte committa, pusha, skapa pull request eller merga utan uttrycklig
+instruktion.

docs/features/008-task-editing.md

@@ -0,0 +1,493 @@
+# Feature 8 – Redigera uppgift
+
+## Status
+
+Implementerad och automatiskt verifierad på feature-branchen. Manuell
+browserverifiering och merge till `main` återstår.
+
+## Bakgrund
+
+HemHub stödjer skapande, visning, tilldelning, statusändring, drag-and-drop och
+permanent radering av uppgifter.
+
+Det saknas fortfarande möjlighet att korrigera eller uppdatera en befintlig
+uppgifts grundläggande innehåll. Feature 8 inför därför redigering av:
+
+- titel;
+- beskrivning;
+- poäng.
+
+Redigering hålls separat från de specialiserade flödena för ansvarig, status
+och radering.
+
+## Mål
+
+Feature 8 ska:
+
+- låta användaren öppna en redigeringsdialog från uppgiftskortet;
+- låta användaren ändra titel, beskrivning och poäng;
+- återanvända samma valideringsregler som vid skapande;
+- införa ett avgränsat backend-API för uppgiftens redigerbara detaljfält;
+- använda serverbekräftad uppdatering;
+- återanvända befintlig låsning och felhantering per task-id;
+- fungera tillsammans med status, tilldelning, drag-and-drop och radering;
+- behålla uppgiftens kolumn och ordning efter redigering.
+
+## Omfattning
+
+Feature 8 omfattar redigering av `title`, `description` och `points`.
+
+Följande egenskaper ska inte kunna ändras genom redigeringsflödet:
+
+- `id`;
+- `status`;
+- `assignee`;
+- `createdAt`.
+
+Ansvarig ska fortsatt ändras genom tilldelningsflödet. Status ska fortsatt
+ändras genom status-API:t och drag-and-drop-flödet.
+
+## Avgränsningar
+
+Feature 8 ska inte införa:
+
+- statusändring eller ändring av ansvarig i redigeringsformuläret;
+- inline-redigering eller en generell detaljvy;
+- deadline, återkommande uppgifter, kategorier, etiketter, kommentarer eller
+  bilagor;
+- status-, poäng- eller versionshistorik eller revisionslogg;
+- behörigheter, batchredigering eller autosave;
+- realtidsuppdatering mellan browsers;
+- en generell formulär- eller modalplattform;
+- en ny global state-lösning;
+- `updatedAt`;
+- en ny åtgärdsmeny på uppgiftskortet.
+
+## Redigeringsflöde
+
+Redigering sker i en separat modal med:
+
+- titel;
+- beskrivning;
+- poäng;
+- knappen `Avbryt`;
+- knappen `Spara`;
+- ett stängningskryss.
+
+Inline-redigering direkt på kortet ingår inte. En separat modal väljs eftersom
+fälten redigeras som en sammanhållen operation, kortets layout ska förbli
+stabil, inline-formulär skulle störa dragytan och ett serverbekräftat
+spara-/avbrytflöde kan hanteras isolerat.
+
+## Initiering från uppgiftskortet
+
+Varje uppgiftskort får en separat synlig redigeringsknapp bredvid den befintliga
+sopkorgsknappen. Den ska:
+
+- ligga i kortets befintliga åtgärdsområde uppe till höger;
+- använda en neutral inline-SVG-ikon;
+- ha ungefär samma klickyta som raderingsknappen;
+- ha en tillgänglig etikett som identifierar uppgiften, exempelvis
+  `Redigera Töm diskmaskinen`;
+- kunna aktiveras med tangentbord;
+- inte initiera drag-and-drop;
+- stoppa relevanta pointer-händelser innan de når dragytan;
+- vara inaktiverad när samma uppgift har en pågående operation.
+
+Feature 8 inför ingen åtgärdsmeny. Om kortåtgärder senare flyttas till en meny
+ska redigerings-API:t och det underliggande redigeringsflödet kunna behållas.
+
+## Separat redigeringsmodal
+
+Redigeringen implementeras som en separat komponent, exempelvis
+`EditTaskModal`. Komponenten ska följa samma visuella och beteendemässiga
+mönster som den befintliga skapandemodalen.
+
+Feature 8 kräver inte att skapande- och redigeringsmodalerna slås ihop till en
+generell komponent med flera lägen. Mindre gemensamma valideringsfunktioner
+eller formulärhjälpare får brytas ut om repositoryts faktiska kod tjänar på
+det.
+
+## Formulärets initiala värden
+
+När redigeringsmodalen öppnas fylls den med uppgiftens aktuella titel,
+beskrivning och poäng. En beskrivning som är `null` visas som tom sträng.
+
+Titelfältet får initialt fokus. Texten markeras inte automatiskt. Formuläret
+baseras på task-versionen i frontend-state när dialogen öppnas.
+
+Om dialogen stängs utan att spara kastas lokala ändringar. När den öppnas igen
+hämtas initialvärdena på nytt från den aktuella uppgiften i frontend-state.
+Ingen särskild synkronisering eller versionshantering införs om task-data skulle
+ändras medan modalen är öppen.
+
+## Tillåtna statusar och användare
+
+Titel, beskrivning och poäng får redigeras i `WAITING`, `IN_PROGRESS` och
+`COMPLETED`, oavsett ansvarig eller aktiv browseranvändare. Aktiv användare är
+ett lokalt browserval och inte autentisering eller behörighetskontroll.
+
+Att poäng kan ändras på en slutförd uppgift är accepterat i nuvarande modell
+eftersom HemHub ännu saknar poänghistorik. En framtida historikfeature ska
+besluta om intjänade poäng använder ett snapshot eller uppgiftens aktuella
+poängvärde.
+
+## Stängningsbeteende
+
+Innan save-anropet har startat ska redigeringsmodalen kunna stängas med:
+
+- `Avbryt`;
+- Escape;
+- klick på modalens bakgrund;
+- stängningskrysset.
+
+Osparade ändringar kastas utan extra bekräftelse.
+
+Under pågående save-anrop ska samtliga stängningsvägar blockeras:
+
+- `Avbryt` och `Spara` är inaktiverade;
+- stängningskrysset är inaktiverat eller otillgängligt;
+- Escape ignoreras;
+- klick på bakgrunden ignoreras.
+
+Modalen ligger kvar öppen tills backend-anropet har slutförts.
+
+## Validering
+
+Redigering använder samma valideringsregler och användarmeddelanden som
+skapande. Backend är alltid slutlig garant.
+
+### Titel
+
+Titeln trimmas, är obligatorisk och får innehålla högst 100
+Unicode-kodpunkter. Tom eller enbart blank titel är ogiltig.
+
+### Beskrivning
+
+Beskrivningen trimmas, är valfri och får innehålla högst 500
+Unicode-kodpunkter. Den skickas och lagras som `null` när den är tom efter
+trimning.
+
+### Poäng
+
+Poäng är obligatoriskt, måste vara ett heltal mellan 1 och 99 och får inte
+ersättas med ett backend-defaultvärde.
+
+Frontend blockerar submit vid tom eller för lång titel, för lång beskrivning,
+tomt poängfält, text eller decimaltal samt poäng utanför 1–99.
+
+## Oförändrad submit
+
+`Spara` är tillgänglig även när användaren inte har ändrat något. Frontend
+skickar ett normalt uppdateringsanrop och backend behandlar samma värden som en
+giltig idempotent uppdatering. Ingen dirty-state införs.
+
+## Backend-API
+
+Redigering sker genom:
+
+```http
+PUT /api/tasks/{taskId}/details
+```
+
+Endpointen ändrar endast uppgiftens redigerbara detaljfält.
+
+### Request
+
+Requesten innehåller alltid hela den redigerbara uppsättningen:
+
+```json
+{
+  "title": "Töm diskmaskinen",
+  "description": "Ställ in allt i rätt skåp",
+  "points": 3
+}
+```
+
+Samtliga tre fält ska finnas. `description` får vara `null`. Backend ska inte
+implementera patchsemantik för saknade fält.
+
+### Lyckad uppdatering
+
+En lyckad uppdatering ger `200 OK` och hela den uppdaterade uppgiften i samma
+task-format som övriga task-operationer. Serverns fullständiga respons är
+slutlig sanning.
+
+### Fel
+
+- okänd uppgift ger `404 Not Found` och `TASK_NOT_FOUND`;
+- ogiltigt task-id använder repositoryts befintliga hantering för ogiltiga
+  path-parametrar;
+- ogiltig titel, beskrivning eller poäng ger `400 Bad Request` med den
+  befintliga task-valideringen och normalt felkoden `INVALID_TASK`.
+
+Repositoryts faktiska implementation har företräde.
+
+## Backendens uppdateringsregler
+
+Backend hämtar först den befintliga uppgiften och uppdaterar uttryckligen endast
+`title`, `description` och `points`.
+
+Operationen får inte ändra `id`, `status`, `assignee` eller `createdAt`. Den ska
+vara transaktionell, tillåten i samtliga statusar, idempotent för samma värden,
+inte påverka andra uppgifter och använda samma trimning och normalisering som
+skapandeflödet. Ingen `updatedAt` införs.
+
+## Databas
+
+Den befintliga task-tabellen innehåller redan titel, beskrivning och poäng.
+Feature 8 ska därför inte kräva någon Flyway-migrering.
+
+Implementation ska verifiera kolumnlängder, `points NOT NULL`,
+poängconstrainten 1–99, nullhantering för beskrivning och att övriga kolumner
+inte påverkas. Ingen ny kolumn eller relation införs.
+
+## Frontendens uppdateringsstrategi
+
+Redigering är serverbekräftad. När användaren trycker `Spara` ska frontend:
+
+1. validera formuläret;
+2. markera uppgiften som upptagen genom låsningen per task-id;
+3. behålla kortets tidigare värden och modalen öppen;
+4. inaktivera formuläret och samtliga stängningsvägar;
+5. skicka `PUT /api/tasks/{taskId}/details`;
+6. vid framgång ersätta uppgiften med serverns fullständiga respons på samma
+   plats i task-listan;
+7. stänga modalen och frigöra låsningen.
+
+Frontend visar inte de redigerade värdena optimistiskt. Ingen rollback behövs
+eftersom kortet behåller sina tidigare värden tills servern svarar.
+
+## Vänteläge och gemensam låsning
+
+Feature 8 återanvänder den befintliga låsningen per task-id. Under save ska:
+
+- formulärfält, knappar och stängningsvägar vara inaktiverade;
+- kortet ligga kvar i samma kolumn och tonas ned;
+- samma uppgift inte kunna dras, ändra status eller ansvarig, raderas, öppnas
+  för ny redigering eller skicka dubbla save-anrop;
+- andra uppgifter förbli interaktiva.
+
+Ingen separat redigeringslåsning, global vänteläge eller parallell
+requesthantering införs. En öppen modal låser inte tasken innan `Spara`.
+
+## Samspel med befintliga flöden
+
+Redigeringsknappen använder samma pointer-hantering som raderingsknappen och
+startar inte drag-and-drop.
+
+Drag-and-drop förblir optimistiskt med rollback, medan redigering är
+serverbekräftad. Status ändras fortsatt genom statusknappar eller drag-and-drop.
+Ansvarig ändras fortsatt genom tilldelningsflödet. Raderingsknappen ligger
+bredvid redigeringsikonen. Samtliga flöden delar låsningen per task-id.
+
+## Kortets ordning och kolumn
+
+En lyckad redigering ersätter uppgiften på befintlig plats i frontendens
+task-lista utan omsortering. Status ändras inte, så kortet ligger normalt kvar i
+samma kolumn. Serverns fullständiga task-respons ersätter ändå det lokala
+värdet i sin helhet.
+
+## Felhantering
+
+### Frontendvalideringsfel
+
+Vid frontendvalideringsfel skickas inget API-anrop. Modalen och inmatningen
+behålls, ett begripligt fel visas och användaren kan korrigera och försöka igen.
+
+### Vanliga API-fel
+
+Vid backendvalideringsfel, nätverksfel, serverfel eller oväntad respons ligger
+kortet kvar oförändrat. Modalen och inmatningen behålls, vänteläget avslutas,
+kontrollerna aktiveras och användaren kan försöka igen eller avbryta.
+
+Generellt meddelande:
+
+> Det gick inte att spara ändringarna. Försök igen.
+
+Frontend använder strukturerad felkod och HTTP-status där relevant och tolkar
+inte meddelandetext.
+
+### `404 TASK_NOT_FOUND`
+
+Endast kombinationen HTTP `404` och `code === "TASK_NOT_FOUND"` behandlas som
+ett inaktuellt lokalt kort. Frontend tar då bort uppgiften, stänger modalen och
+frigör låsningen utan generellt redigeringsfel. Andra 404-fel behandlas som
+vanliga fel.
+
+## Frontendtester
+
+Frontendtesterna ska verifiera beteende och state, inte exakt CSS eller intern
+komponentstruktur. De ska minst täcka:
+
+- redigeringsknapp, inline-SVG, tillgänglig etikett, tangentbordsaktivering och
+  skydd mot dragstart;
+- att en låst uppgift inte kan öppnas;
+- rätt uppgift och initialvärden, inklusive `null` som tom beskrivning;
+- initialt fokus i titelfältet;
+- stängning med `Avbryt`, Escape, bakgrund och kryss;
+- att osparade ändringar kastas och aktuell task-data används vid nästa
+  öppning;
+- frontendvalidering av titel, beskrivning och poäng;
+- rätt endpoint och fullständigt requestformat med trimmade värden och tom
+  beskrivning som `null`;
+- oförändrad submit;
+- serverbekräftat vänteläge, blockerade stängningsvägar, gemensam task-låsning
+  och blockerade dubbla save-anrop;
+- att andra kort förblir interaktiva;
+- fullständig serverrespons, bibehållen plats, ordning och kolumn;
+- vanliga fel med bevarad modal/inmatning och fungerande återförsök;
+- `404 TASK_NOT_FOUND` samt att andra 404-fel behandlas som vanliga fel.
+
+## Backendtester
+
+Backendtesterna bör ligga i en separat integrationstestklass, exempelvis
+`TaskEditingApiTest`, om det passar repositoryts teststruktur.
+
+Testerna ska minst täcka:
+
+- samtidig ändring och trimning av titel, beskrivning och poäng;
+- tom beskrivning som `null`;
+- gränsvärdena 1/99 poäng, 100 kodpunkter i titel och 500 i beskrivning;
+- idempotent uppdatering;
+- redigering i samtliga tre statusar och fullständig `200 OK`-respons;
+- saknad, null, tom eller för lång titel;
+- för lång beskrivning;
+- saknat, null, text, decimal eller poäng utanför 1–99;
+- saknade fält i det fullständiga requestobjektet;
+- okänt task-id och ogiltigt UUID;
+- att id, status, ansvarig och `createdAt` bevaras;
+- att andra uppgifter och ansvarig användare är oförändrade.
+
+## Implementerad lösning
+
+Backend exponerar `PUT /api/tasks/{taskId}/details`. Requestmodellen kräver
+`title`, `description` och `points`; explicit `null` är endast tillåtet för
+beskrivningen. Service-lagret återanvänder skapandeflödets trimning och
+validering och uppdaterar en hämtad entitet genom en avgränsad
+`changeDetails`-operation. ID, status, ansvarig och skapandetid bevaras.
+
+Frontend visar en neutral redigeringsknapp med inline-SVG bredvid
+raderingsknappen. Den separata `EditTaskModal` fylls från aktuell task,
+fokuserar titeln, validerar fälten och blockerar samtliga stängningsvägar under
+save. Uppdateringen är serverbekräftad och återanvänder samma låsning per
+task-id som status, tilldelning, drag-and-drop och radering. En fullständig
+serverrespons ersätter tasken på dess befintliga plats. Endast ett strukturerat
+`404 TASK_NOT_FOUND` tar bort ett inaktuellt lokalt kort.
+
+Ingen Flyway-migrering behövdes eftersom befintliga kolumner och constraints
+täcker de redigerbara fälten.
+
+## Automatisk verifiering
+
+- Backendens riktade redigeringstester: 20 passerade.
+- Fullständig backendtestsvit: 68 passerade.
+- Frontendtester: 61 passerade.
+- Frontendens TypeScript-kompilering och produktionsbygge passerade.
+- `git diff --check` passerade.
+
+En verifierad begränsning i den lokala H2-databasen är att `VARCHAR` räknar
+UTF-16-kodenheter för vissa tecken utanför BMP. Applikationen validerar enligt
+Unicode-kodpunkter, men en titel med 100 sådana astrala tecken kan därför
+avvisas av H2-kolumnen. Feature 8 ändrar inte databasschemat; PostgreSQL-målet
+ska verifiera denna skillnad när produktionsdatabasen införs.
+
+## Manuell verifiering
+
+Följande ska verifieras manuellt:
+
+1. Redigeringsikonen, klickytan, stilen, etiketten och skyddet mot dragstart.
+2. Klick- och tangentbordsöppning av rätt uppgift.
+3. Redigering i `WAITING`, `IN_PROGRESS` och `COMPLETED`.
+4. Initialvärden, tom beskrivning och initialt fokus.
+5. Gränser och fel för titel, beskrivning och poäng.
+6. Stängning med `Avbryt`, Escape, bakgrund och kryss samt kastade osparade
+   ändringar.
+7. Oförändrad submit.
+8. Fördröjt svar med gamla kortvärden, låst modal och nedtonat kort.
+9. Gemensam låsning och fortsatt interaktion med andra kort.
+10. Vanligt serverfel, bevarad inmatning och lyckat återförsök.
+11. `404 TASK_NOT_FOUND` och annat 404-fel.
+12. Bibehållen kolumn, ordning, status och ansvarig.
+13. Sparade värden efter omladdning.
+14. Desktop, mobil, touch och tangentbordsordning.
+
+## Dokumentation
+
+Feature 8 dokumenteras i:
+
+```text
+docs/features/008-task-editing.md
+```
+
+Vid implementation uppdateras `README.md`, `docs/architecture.md`,
+`docs/roadmap.md` och `docs/development.md` när relevant.
+
+Roadmapen markerar Feature 8 som `Klar` först efter implementation, automatiska
+tester, produktionsbygge, manuell verifiering, merge till `main` och slutlig
+dokumentationsuppdatering.
+
+Ett nytt ADR behövs normalt inte. Separat modal, redigeringsikon,
+`PUT /api/tasks/{taskId}/details` och serverbekräftad uppdatering är lokala
+beslut för Feature 8.
+
+## Acceptanskriterier
+
+Feature 8 är klar när:
+
+- varje kort har en tangentbordsåtkomlig redigeringskontroll som inte startar
+  drag;
+- titel, beskrivning och poäng kan redigeras i en separat modal;
+- aktuella värden fylls i, titeln får fokus och `null` beskrivning visas tom;
+- redigering fungerar i samtliga statusar utan behörighetsregler;
+- skapande och redigering använder samma valideringsregler;
+- backend använder `PUT /api/tasks/{taskId}/details` med hela fältuppsättningen;
+- samma värden accepteras idempotent;
+- endast titel, beskrivning och poäng ändras;
+- `200 OK` returnerar hela task-responsen;
+- frontend är serverbekräftad och behåller gamla kortvärden under anropet;
+- modal och task är låsta under save genom befintlig per-task-låsning;
+- andra uppgifter förblir interaktiva;
+- serverresponsen ersätter tasken på befintlig plats och kolumn;
+- vanliga fel behåller modal och inmatning och kan återförsökas;
+- endast `404 TASK_NOT_FOUND` tar bort ett inaktuellt lokalt kort;
+- stängningsvägar fungerar före och blockeras under anrop;
+- ingen inline-redigering, generell modalplattform, Flyway-migrering eller
+  `updatedAt` införs;
+- automatiska och manuella kontroller genomförs;
+- relevant dokumentation uppdateras.
+
+## Implementationsprinciper
+
+Före implementation ska Codex läsa repositoryts faktiska:
+
+```text
+AGENTS.md
+README.md
+docs/architecture.md
+docs/development.md
+docs/roadmap.md
+docs/decisions/
+docs/features/002-task-creation.md
+docs/features/003-task-points.md
+docs/features/004-task-assignment.md
+docs/features/005-task-status.md
+docs/features/006-task-drag-and-drop.md
+docs/features/007-task-deletion.md
+```
+
+Codex ska även läsa relevant backendkod, frontendkod och befintliga tester och
+särskilt verifiera entitet, controller, service, repository, request/response,
+validering, schema, felmodell, task-listans ordning, modal- och kortstruktur,
+per-task-låsning samt befintliga status-, tilldelnings-, drag- och deleteflöden.
+
+Repositoryts faktiska kod, tester och dokumentation har företräde framför
+antaganden i detta dokument. Implementation, tester och relevant dokumentation
+ska uppdateras tillsammans.
+
+Codex ska inte committa, pusha, skapa pull request eller merga utan uttrycklig
+instruktion.
+
+## Relaterade commits
+
+Fylls i efter implementation och merge.

docs/roadmap.md

@@ -34,7 +34,9 @@ Följande statusvärden används:
 
 ## Nuvarande läge
 
-Feature 0–5 är klara. Den aktuella applikationen har:
+Feature 0–7 är klara och finns på `main`. Feature 8 är implementerad på sin
+feature-branch och inväntar manuell verifiering och merge. Den aktuella
+applikationen på feature-branchen har:
 
 - ett monorepo med separat React/Vite-frontend och Spring Boot-backend;
 - centralt lagrade användare och ett lokalt browserval av aktiv användare;
@@ -45,16 +47,19 @@ Feature 0–5 är klara. Den aktuella applikationen har:
 - borttagning av ansvarig i `WAITING` och `COMPLETED`;
 - backendstyrda statusändringar mellan `WAITING`, `IN_PROGRESS` och `COMPLETED`;
 - automatisk tilldelning till aktiv användare när en otilldelad uppgift påbörjas;
+- drag-and-drop mellan statuskolumner med optimistisk flytt och rollback;
+- serverbekräftad permanent radering med bekräftelsedialog;
+- serverbekräftad redigering av titel, beskrivning och poäng;
 - en bräda med Väntande, Pågående och Klart;
 - nya uppgifter som alltid skapas med status `WAITING`.
 
 Tilldelning och status är separata egenskaper; tilldelningsflödet ändrar inte
 uppgiftens status. Alla direkta statusövergångar är tillåtna och
-`IN_PROGRESS` kräver ansvarig. Det finns ännu ingen drag-and-drop, redigering,
+`IN_PROGRESS` kräver ansvarig. Det finns ännu ingen deadline eller återkommande
-radering, deadline eller återkommande uppgift.
+uppgift. Nuvarande användarval är inte autentisering.
-Nuvarande användarval är inte autentisering.
 
-**Feature 6 – Drag-and-drop är nästa planerade produktfeature.**
+**Feature 8 – Redigera uppgift är pågående. Ingen senare produktfeature utses
+som nästa innan Feature 8 har verifierats och mergats.**
 
 ## Featureöversikt
 
@@ -66,9 +71,9 @@ Nuvarande användarval är inte autentisering.
 | 3 – Uppgiftspoäng | Klar | 2 | Poäng på uppgifter |
 | 4 – Tilldelning | Klar | 1–2 | Valfri ansvarig användare |
 | 5 – Statusändring | Klar | 4 | Backendstyrda statusövergångar |
-| 6 – Drag-and-drop | Planerad | 5 | Kortflytt via status-API |
+| 6 – Drag-and-drop | Klar | 5 | Kortflytt via status-API |
-| 7 – Radera uppgift | Planerad | 2 | Bekräftad radering |
+| 7 – Radera uppgift | Klar | 2 | Bekräftad permanent radering |
-| 8 – Redigera uppgift | Planerad | 3 | Titel, beskrivning och poäng |
+| 8 – Redigera uppgift | Pågående | 3 | Titel, beskrivning och poäng |
 | 9 – Deadline | Planerad | 2 | Valfri deadline och förseningsmarkering |
 | 10 – Sökning och filtrering | Planerad | 2; 4 för ansvarig; 9 för deadline | Sökning och filter på brädan |
 | 11 – Design av återkommande uppgifter | Planerad | 3–5, 9 | Beslut och plan, ingen produktionskod |
@@ -178,7 +183,7 @@ inte tas bort medan uppgiften är pågående.
 
 ### Feature 6 – Drag-and-drop
 
-**Status:** Planerad
+**Status:** Klar
 
 **Beroenden:** Feature 5
 
@@ -192,10 +197,13 @@ inte tas bort medan uppgiften är pågående.
 Drag-and-drop kommer efter det enklare statusflödet för att återanvända
 verifierade backendregler.
 
-**Öppna frågor:**
+Drag-and-drop använder en kontrollerad optimistisk flytt. Vid fel återställs
-
+hela den tidigare task-versionen. En otilldelad uppgift som dras till Pågående
-- optimistisk eller serverbekräftad uppdatering;
+använder Feature 5:s befintliga automatiska tilldelning till aktiv användare.
-- exakt tilldelningsflöde vid flytt till Pågående.
+Serverns fullständiga task-respons ersätter alltid det optimistiska värdet.
+Statusknapparna förblir tills vidare serverbekräftade. Implementation och
+automatisk samt manuell verifiering är genomförda, och featuren är mergad till
+`main`.
 
 ## Fas 2 – Hantering av uppgifter
 
@@ -204,7 +212,7 @@ modellen och statusreglerna finns.
 
 ### Feature 7 – Radera uppgift
 
-**Status:** Planerad
+**Status:** Klar
 
 **Beroenden:** Feature 2
 
@@ -217,13 +225,17 @@ modellen och statusreglerna finns.
 Radering hålls separat från redigering så att databorttagning och dess
 konsekvenser kan verifieras isolerat.
 
-**Öppen fråga:**
+Feature 7 använder permanent fysisk radering genom
-
+`DELETE /api/tasks/{taskId}`. En bekräftelsemodal visas före anropet och
-- permanent radering eller mjuk radering.
+frontend behåller kortet tills backend har bekräftat raderingen. Operationen
+använder samma låsning per task-id som status, tilldelning och drag-and-drop.
+Ett `404 TASK_NOT_FOUND` tar bort ett känt inaktuellt lokalt kort.
+Implementation samt automatisk och manuell verifiering är genomförda, och
+featuren är mergad till `main`.
 
 ### Feature 8 – Redigera uppgift
 
-**Status:** Planerad
+**Status:** Pågående
 
 **Beroenden:** Feature 3
 
@@ -237,6 +249,12 @@ Featuren ligger efter poäng för att redigeringsflödet ska omfatta den då
 aktuella uppgiftsmodellen. Ansvarig ska fortsatt ändras genom
 tilldelningsflödet från Feature 4 och status genom statusflödet från Feature 5.
 
+Den implementerade lösningen använder `PUT /api/tasks/{taskId}/details` och
+uppdaterar endast titel, beskrivning och poäng. Frontend använder en separat
+redigeringsmodal och serverbekräftad uppdatering genom den gemensamma låsningen
+per task-id. Implementation och automatiska kontroller är genomförda på
+feature-branchen; manuell browserverifiering och merge återstår.
+
 ### Feature 9 – Deadline
 
 **Status:** Planerad
@@ -425,7 +443,6 @@ Nuvarande aktiva användarval är uttryckligen inte autentisering.
 
 ## Öppna tvärgående frågor
 
-- Ska uppgifter raderas permanent eller mjukt?
 - Hur ska datum, tider och tidszoner representeras?
 - Ska H2 behållas för lokal utveckling efter PostgreSQL-införandet?
 - Hur ska användare senare kunna redigeras eller raderas, särskilt när de är
@@ -436,6 +453,14 @@ Nuvarande aktiva användarval är uttryckligen inte autentisering.
 
 ## Ändringshistorik
 
+- 2026-07-27: Feature 8 implementerades och verifierades automatiskt på
+  feature-branchen. Manuell verifiering och merge återstår.
+- 2026-07-27: Feature 7 verifierades och mergades. Permanent,
+  serverbekräftad radering infördes, och Feature 8 blev nästa planerade
+  produktfeature.
+- 2026-07-27: Feature 6 verifierades och mergades. Optimistisk drag-and-drop
+  med full rollback infördes, och Feature 7 blev nästa planerade
+  produktfeature.
 - 2026-07-27: Feature 5 verifierades och mergades. Backendstyrda
   statusövergångar, automatisk tilldelning vid påbörjande och statusberoende
   tilldelningsregler infördes. Feature 6 blev nästa planerade produktfeature.

frontend/package.json

@@ -9,6 +9,8 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@dnd-kit/dom": "0.5.0",
+    "@dnd-kit/react": "0.5.0",
     "react": "19.2.8",
     "react-dom": "19.2.8"
   },

frontend/pnpm-lock.yaml

@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@dnd-kit/dom':
+        specifier: 0.5.0
+        version: 0.5.0
+      '@dnd-kit/react':
+        specifier: 0.5.0
+        version: 0.5.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react:
         specifier: 19.2.8
         version: 19.2.8
@@ -115,6 +121,27 @@ packages:
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
 
+  '@dnd-kit/abstract@0.5.0':
+    resolution: {integrity: sha512-hi13iMJgjPX/KDYVKg5VeDIhmYiV6buc9bAX+tCLYf4QdyYjPbsXjn2sPo6m7fQ6SGJBEFgHJ2PemeKDUbwBaA==}
+
+  '@dnd-kit/collision@0.5.0':
+    resolution: {integrity: sha512-xUqRn3lS7oqLkT0AnnHS/STh/Czvwe1UapZFYiLbsUGxopMsQd4teaPCzPouOThoMdGEe+dHWjfqJl6t9iG4mQ==}
+
+  '@dnd-kit/dom@0.5.0':
+    resolution: {integrity: sha512-f2xFJp5SYQ8EW/Fbtaa8iBb66hpkWc7qa8vU826KW11/tb44sH+AisZnGtwOOTWTQ0GraqBDr5ixTErww+eKXw==}
+
+  '@dnd-kit/geometry@0.5.0':
+    resolution: {integrity: sha512-ubHQS1CiSDH8ssYH2xG5BnpwPSFP1tStXXjug7/Ba6qnQdu/EUH47l6QXKIksQnnanfVfDf0aGeevRxgZlj28A==}
+
+  '@dnd-kit/react@0.5.0':
+    resolution: {integrity: sha512-abQPLI8lmfVE+v/n+pqy5WFxrw6T2Yg0UQZsL78dp5DKci7dKTVDjvLWqvass+XTFtzJmsZEjk1NdqE6xG8Jiw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
+  '@dnd-kit/state@0.5.0':
+    resolution: {integrity: sha512-y7XbabQqjF58Lk8YmDQuR8l6QjN+Kh4qlGEjUvHuIeasLk1QP+9L5diXS98VMxQIivyMmUtX2//f+3N7qPJX4w==}
+
   '@emnapi/core@1.11.1':
     resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
 
@@ -145,6 +172,9 @@ packages:
   '@oxc-project/types@0.139.0':
     resolution: {integrity: sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==}
 
+  '@preact/signals-core@1.14.4':
+    resolution: {integrity: sha512-HNB6HYeYKhQbJ1aKl+YRjrS4+QWHLKX6qKoUsfS/m0vqzsVaEBiZiaKbG/e+NKk2ch5ALQr/ihWaMHxiCuuWHA==}
+
   '@rolldown/binding-android-arm64@1.1.5':
     resolution: {integrity: sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -961,6 +991,45 @@ snapshots:
 
   '@csstools/css-tokenizer@4.0.0': {}
 
+  '@dnd-kit/abstract@0.5.0':
+    dependencies:
+      '@dnd-kit/geometry': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/collision@0.5.0':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/geometry': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/dom@0.5.0':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/collision': 0.5.0
+      '@dnd-kit/geometry': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/geometry@0.5.0':
+    dependencies:
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/react@0.5.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/dom': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      tslib: 2.8.1
+
+  '@dnd-kit/state@0.5.0':
+    dependencies:
+      '@preact/signals-core': 1.14.4
+      tslib: 2.8.1
+
   '@emnapi/core@1.11.1':
     dependencies:
       '@emnapi/wasi-threads': 1.2.2
@@ -990,6 +1059,8 @@ snapshots:
 
   '@oxc-project/types@0.139.0': {}
 
+  '@preact/signals-core@1.14.4': {}
+
   '@rolldown/binding-android-arm64@1.1.5':
     optional: true
 
@@ -1476,8 +1547,7 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  tslib@2.8.1:
+  tslib@2.8.1: {}
-    optional: true
 
   typescript@7.0.2:
     optionalDependencies:

frontend/src/App.test.tsx

@@ -1,7 +1,42 @@
-import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { afterEach, beforeEach, expect, test, vi } from 'vitest'
 import App from './App'
 
+const dragAndDrop = vi.hoisted(() => ({
+  onTaskDrop: null as ((taskId: string, status: string) => void) | null,
+  disabledTaskIds: new Set<string>(),
+}))
+
+vi.mock('./TaskDragAndDrop', () => ({
+  TaskDragDropProvider: ({
+    children,
+    onTaskDrop,
+  }: {
+    children: ReactNode
+    onTaskDrop: (taskId: string, status: string) => void
+  }) => {
+    dragAndDrop.onTaskDrop = onTaskDrop
+    return children
+  },
+  useTaskDraggable: (taskId: string, disabled: boolean) => {
+    if (disabled) {
+      dragAndDrop.disabledTaskIds.add(taskId)
+    } else {
+      dragAndDrop.disabledTaskIds.delete(taskId)
+    }
+
+    return {
+      ref: () => {},
+      isDragging: false,
+    }
+  },
+  useTaskColumnDropTarget: () => ({
+    ref: () => {},
+    isDropTarget: false,
+  }),
+}))
+
 const users = [
   {
     id: 'd56b54dd-31b0-4d71-8a10-82464be59a61',
@@ -47,6 +82,8 @@ const tasks = [
 
 beforeEach(() => {
   window.localStorage.clear()
+  dragAndDrop.onTaskDrop = null
+  dragAndDrop.disabledTaskIds.clear()
 })
 
 afterEach(() => {
@@ -513,6 +550,562 @@ test('statusfel behåller tidigare status och ansvarig och visas på kortet', as
   expect(within(card).getByText('Ta uppgift')).toBeInTheDocument()
 })
 
+test('redigeringsknappen öppnar rätt uppgift med aktuella värden och titelfokus', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = mockUsersAndTasks(users, [tasks[0], tasks[1]])
+  render(<App />)
+
+  const editButton = await screen.findByRole('button', { name: 'Redigera Dammsuga' })
+  expect(editButton.querySelector('svg')).toBeInTheDocument()
+  fireEvent.pointerDown(editButton)
+  fireEvent.click(editButton)
+
+  const dialog = screen.getByRole('dialog', { name: 'Redigera uppgift' })
+  expect(within(dialog).getByLabelText('Titel')).toHaveValue('Dammsuga')
+  expect(within(dialog).getByLabelText('Titel')).toHaveFocus()
+  expect(within(dialog).getByLabelText('Beskrivning (valfri)')).toHaveValue('Bottenvåningen')
+  expect(within(dialog).getByLabelText('Poäng')).toHaveValue(7)
+  expect(fetchMock).toHaveBeenCalledTimes(2)
+
+  fireEvent.click(within(dialog).getByRole('button', { name: 'Avbryt' }))
+  fireEvent.click(screen.getByRole('button', { name: 'Redigera Diska' }))
+  expect(screen.getByLabelText('Beskrivning (valfri)')).toHaveValue('')
+})
+
+test('redigeringsmodal stängs normalt och kastar osparade ändringar', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = mockUsersAndTasks(users, [tasks[0]])
+  const { container } = render(<App />)
+  const editButton = await screen.findByRole('button', { name: 'Redigera Dammsuga' })
+
+  fireEvent.click(editButton)
+  fireEvent.change(screen.getByLabelText('Titel'), { target: { value: 'Osparad' } })
+  fireEvent.click(screen.getByRole('button', { name: 'Stäng' }))
+  expect(screen.queryByRole('dialog', { name: 'Redigera uppgift' })).not.toBeInTheDocument()
+
+  fireEvent.click(editButton)
+  expect(screen.getByLabelText('Titel')).toHaveValue('Dammsuga')
+  fireEvent.keyDown(window, { key: 'Escape' })
+  expect(screen.queryByRole('dialog', { name: 'Redigera uppgift' })).not.toBeInTheDocument()
+
+  fireEvent.click(editButton)
+  fireEvent.mouseDown(container.querySelector('.modal-backdrop')!)
+  expect(screen.queryByRole('dialog', { name: 'Redigera uppgift' })).not.toBeInTheDocument()
+  expect(fetchMock).toHaveBeenCalledTimes(2)
+})
+
+test.each([
+  {
+    field: 'Titel',
+    value: '   ',
+    message: 'Titeln måste innehålla mellan 1 och 100 tecken.',
+  },
+  {
+    field: 'Titel',
+    value: 'a'.repeat(101),
+    message: 'Titeln måste innehålla mellan 1 och 100 tecken.',
+  },
+  {
+    field: 'Beskrivning (valfri)',
+    value: 'a'.repeat(501),
+    message: 'Beskrivningen får innehålla högst 500 tecken.',
+  },
+  {
+    field: 'Poäng',
+    value: '1.5',
+    message: 'Poäng måste vara ett heltal mellan 1 och 99.',
+  },
+  {
+    field: 'Poäng',
+    value: '',
+    message: 'Poäng måste vara ett heltal mellan 1 och 99.',
+  },
+  {
+    field: 'Poäng',
+    value: '100',
+    message: 'Poäng måste vara ett heltal mellan 1 och 99.',
+  },
+])('ogiltig redigeringsdata i $field blockerar API-anrop', async ({ field, value, message }) => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = mockUsersAndTasks(users, [tasks[0]])
+  render(<App />)
+
+  fireEvent.click(await screen.findByRole('button', { name: 'Redigera Dammsuga' }))
+  fireEvent.change(screen.getByLabelText(field), { target: { value } })
+  fireEvent.click(screen.getByRole('button', { name: 'Spara' }))
+
+  expect(await screen.findByRole('alert')).toHaveTextContent(message)
+  expect(fetchMock).toHaveBeenCalledTimes(2)
+})
+
+test('redigering är serverbekräftad, låser samma task och ersätter hela svaret på samma plats', async () => {
+  const otherTask = {
+    ...tasks[0],
+    id: '00000000-0000-0000-0000-000000000010',
+    title: 'Putsa fönster',
+  }
+  const serverTask = {
+    ...tasks[0],
+    title: 'Dammsuga övervåningen',
+    description: null,
+    points: 9,
+    assignee: { id: users[1].id, name: users[1].name },
+  }
+  let resolveEdit!: (response: Response) => void
+  const editResponse = new Promise<Response>((resolve) => {
+    resolveEdit = resolve
+  })
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0], otherTask]))
+  fetchMock.mockReturnValueOnce(editResponse)
+  const { container } = render(<App />)
+
+  fireEvent.click(await screen.findByRole('button', { name: 'Redigera Dammsuga' }))
+  fireEvent.change(screen.getByLabelText('Titel'), {
+    target: { value: '  Dammsuga övervåningen  ' },
+  })
+  fireEvent.change(screen.getByLabelText('Beskrivning (valfri)'), {
+    target: { value: '   ' },
+  })
+  fireEvent.change(screen.getByLabelText('Poäng'), { target: { value: '9' } })
+  const save = screen.getByRole('button', { name: 'Spara' })
+  fireEvent.click(save)
+  fireEvent.click(save)
+
+  const oldCard = screen.getByText('Dammsuga').closest('article')!
+  const otherCard = screen.getByText('Putsa fönster').closest('article')!
+  const dialog = screen.getByRole('dialog', { name: 'Redigera uppgift' })
+  expect(oldCard).toHaveAttribute('aria-busy', 'true')
+  expect(within(oldCard).getByRole('button', { name: 'Redigera Dammsuga' })).toBeDisabled()
+  expect(within(oldCard).getByRole('button', { name: 'Radera Dammsuga' })).toBeDisabled()
+  expect(within(oldCard).getByRole('button', { name: 'Påbörja' })).toBeDisabled()
+  expect(
+    within(oldCard).getByRole('button', { name: 'Ändra ansvarig för Dammsuga' }),
+  ).toBeDisabled()
+  expect(dragAndDrop.disabledTaskIds.has(tasks[0].id)).toBe(true)
+  expect(dragAndDrop.disabledTaskIds.has(otherTask.id)).toBe(false)
+  expect(within(otherCard).getByRole('button', { name: 'Redigera Putsa fönster' })).toBeEnabled()
+  expect(within(dialog).getByLabelText('Titel')).toBeDisabled()
+  expect(within(dialog).getByRole('button', { name: 'Stäng' })).toBeDisabled()
+  expect(within(dialog).getByRole('button', { name: 'Avbryt' })).toBeDisabled()
+  expect(within(dialog).getByRole('button', { name: 'Sparar…' })).toBeDisabled()
+  expect(screen.getByText('Dammsuga')).toBeInTheDocument()
+  expect(screen.queryByText('Dammsuga övervåningen')).not.toBeInTheDocument()
+  expect(fetchMock).toHaveBeenLastCalledWith(`/api/tasks/${tasks[0].id}/details`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      title: 'Dammsuga övervåningen',
+      description: null,
+      points: 9,
+    }),
+  })
+  expect(fetchMock).toHaveBeenCalledTimes(3)
+
+  fireEvent.keyDown(window, { key: 'Escape' })
+  fireEvent.mouseDown(container.querySelector('.modal-backdrop')!)
+  expect(screen.getByRole('dialog', { name: 'Redigera uppgift' })).toBeInTheDocument()
+
+  await act(async () => resolveEdit(jsonResponse(serverTask)))
+  expect(screen.queryByRole('dialog', { name: 'Redigera uppgift' })).not.toBeInTheDocument()
+  const waitingCards = within(screen.getByRole('region', { name: 'Väntande' })).getAllByRole(
+    'article',
+  )
+  expect(within(waitingCards[0]).getByText('Dammsuga övervåningen')).toBeInTheDocument()
+  expect(within(waitingCards[0]).getByText('Anna')).toBeInTheDocument()
+  expect(within(waitingCards[1]).getByText('Putsa fönster')).toBeInTheDocument()
+})
+
+test('oförändrad redigering skickar alla detaljfälten', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0]]))
+  fetchMock.mockResolvedValueOnce(jsonResponse(tasks[0]))
+  render(<App />)
+
+  fireEvent.click(await screen.findByRole('button', { name: 'Redigera Dammsuga' }))
+  fireEvent.click(screen.getByRole('button', { name: 'Spara' }))
+
+  await waitFor(() =>
+    expect(fetchMock).toHaveBeenLastCalledWith(`/api/tasks/${tasks[0].id}/details`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        title: 'Dammsuga',
+        description: 'Bottenvåningen',
+        points: 7,
+      }),
+    }),
+  )
+})
+
+test('vanligt redigeringsfel behåller inmatning och kan återförsökas', async () => {
+  const updatedTask = { ...tasks[0], title: 'Ny titel' }
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0]]))
+  fetchMock.mockResolvedValueOnce(jsonResponse({ message: 'Serverfel' }, 500))
+  fetchMock.mockResolvedValueOnce(jsonResponse(updatedTask))
+  render(<App />)
+
+  fireEvent.click(await screen.findByRole('button', { name: 'Redigera Dammsuga' }))
+  fireEvent.change(screen.getByLabelText('Titel'), { target: { value: 'Ny titel' } })
+  fireEvent.click(screen.getByRole('button', { name: 'Spara' }))
+
+  expect(await screen.findByRole('alert')).toHaveTextContent('Serverfel')
+  expect(screen.getByLabelText('Titel')).toHaveValue('Ny titel')
+  expect(screen.getByRole('button', { name: 'Spara' })).toBeEnabled()
+  expect(screen.getByText('Dammsuga')).toBeInTheDocument()
+
+  fireEvent.click(screen.getByRole('button', { name: 'Spara' }))
+  expect(await screen.findByText('Ny titel')).toBeInTheDocument()
+  expect(fetchMock).toHaveBeenCalledTimes(4)
+})
+
+test('endast 404 TASK_NOT_FOUND tar bort ett inaktuellt kort vid redigering', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0]]))
+  fetchMock.mockResolvedValueOnce(
+    jsonResponse({ code: 'OTHER_NOT_FOUND', message: 'Annat fel' }, 404),
+  )
+  fetchMock.mockResolvedValueOnce(
+    jsonResponse({ code: 'TASK_NOT_FOUND', message: 'Uppgiften finns inte.' }, 404),
+  )
+  render(<App />)
+
+  fireEvent.click(await screen.findByRole('button', { name: 'Redigera Dammsuga' }))
+  fireEvent.click(screen.getByRole('button', { name: 'Spara' }))
+  expect(await screen.findByRole('alert')).toHaveTextContent('Annat fel')
+  expect(screen.getByText('Dammsuga')).toBeInTheDocument()
+
+  fireEvent.click(screen.getByRole('button', { name: 'Spara' }))
+  await waitFor(() =>
+    expect(screen.queryByRole('button', { name: 'Redigera Dammsuga' })).not.toBeInTheDocument(),
+  )
+  expect(screen.queryByRole('dialog', { name: 'Redigera uppgift' })).not.toBeInTheDocument()
+})
+
+test('sopkorgsknappen öppnar delete-modal med Avbryt i fokus och utan delete-anrop', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = mockUsersAndTasks(users, [tasks[0]])
+  render(<App />)
+
+  const deleteButton = await screen.findByRole('button', { name: 'Radera Dammsuga' })
+  expect(deleteButton.querySelector('svg')).toBeInTheDocument()
+  fireEvent.pointerDown(deleteButton)
+  fireEvent.click(deleteButton)
+
+  const dialog = screen.getByRole('dialog', { name: 'Radera uppgift?' })
+  expect(within(dialog).getByText('Dammsuga')).toBeInTheDocument()
+  expect(within(dialog).getByText(/raderas permanent och kan inte återställas/i))
+    .toBeInTheDocument()
+  expect(within(dialog).getByRole('button', { name: 'Avbryt' })).toHaveFocus()
+  expect(within(dialog).getByRole('button', { name: 'Radera' })).not.toHaveFocus()
+  expect(within(dialog).queryByRole('button', { name: 'Stäng' })).not.toBeInTheDocument()
+  expect(fetchMock).toHaveBeenCalledTimes(2)
+})
+
+test('delete-modal kan stängas med Avbryt, Escape och bakgrundsklick före anrop', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = mockUsersAndTasks(users, [tasks[0]])
+  const { container } = render(<App />)
+
+  const deleteButton = await screen.findByRole('button', { name: 'Radera Dammsuga' })
+  fireEvent.click(deleteButton)
+  fireEvent.click(screen.getByRole('button', { name: 'Avbryt' }))
+  expect(screen.queryByRole('dialog', { name: 'Radera uppgift?' })).not.toBeInTheDocument()
+
+  fireEvent.click(deleteButton)
+  fireEvent.keyDown(window, { key: 'Escape' })
+  expect(screen.queryByRole('dialog', { name: 'Radera uppgift?' })).not.toBeInTheDocument()
+
+  fireEvent.click(deleteButton)
+  fireEvent.mouseDown(container.querySelector('.modal-backdrop')!)
+  expect(screen.queryByRole('dialog', { name: 'Radera uppgift?' })).not.toBeInTheDocument()
+  expect(fetchMock).toHaveBeenCalledTimes(2)
+})
+
+test('delete är serverbekräftad och låser bara det berörda kortet och modalen', async () => {
+  const otherTask = {
+    ...tasks[0],
+    id: '00000000-0000-0000-0000-000000000010',
+    title: 'Putsa fönster',
+  }
+  let resolveDelete!: (response: Response) => void
+  const deleteResponse = new Promise<Response>((resolve) => {
+    resolveDelete = resolve
+  })
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0], otherTask]))
+  fetchMock.mockReturnValueOnce(deleteResponse)
+  const { container } = render(<App />)
+
+  const deleteButton = await screen.findByRole('button', { name: 'Radera Dammsuga' })
+  fireEvent.click(deleteButton)
+  const dialog = screen.getByRole('dialog', { name: 'Radera uppgift?' })
+  const confirm = within(dialog).getByRole('button', { name: 'Radera' })
+  fireEvent.click(confirm)
+  fireEvent.click(confirm)
+
+  const card = screen.getByRole('button', { name: 'Radera Dammsuga' }).closest('article')!
+  const otherCard = screen.getByText('Putsa fönster').closest('article')!
+  expect(card).toBeInTheDocument()
+  expect(card).toHaveAttribute('aria-busy', 'true')
+  expect(within(card).getByRole('button', { name: 'Radera Dammsuga' })).toBeDisabled()
+  expect(dragAndDrop.disabledTaskIds.has(tasks[0].id)).toBe(true)
+  expect(dragAndDrop.disabledTaskIds.has(otherTask.id)).toBe(false)
+  expect(within(card).getByRole('button', { name: 'Påbörja' })).toBeDisabled()
+  expect(
+    within(card).getByRole('button', { name: 'Ändra ansvarig för Dammsuga' }),
+  ).toBeDisabled()
+  expect(within(otherCard).getByRole('button', { name: 'Påbörja' })).toBeEnabled()
+  expect(within(otherCard).getByRole('button', { name: 'Radera Putsa fönster' })).toBeEnabled()
+  expect(within(dialog).getByRole('button', { name: 'Avbryt' })).toBeDisabled()
+  expect(confirm).toBeDisabled()
+  expect(fetchMock).toHaveBeenLastCalledWith(`/api/tasks/${tasks[0].id}`, {
+    method: 'DELETE',
+  })
+  expect(fetchMock).toHaveBeenCalledTimes(3)
+
+  fireEvent.keyDown(window, { key: 'Escape' })
+  fireEvent.mouseDown(container.querySelector('.modal-backdrop')!)
+  expect(screen.getByRole('dialog', { name: 'Radera uppgift?' })).toBeInTheDocument()
+
+  await act(async () => resolveDelete(emptyResponse(204)))
+  expect(screen.queryByRole('button', { name: 'Radera Dammsuga' })).not.toBeInTheDocument()
+  expect(screen.queryByRole('dialog', { name: 'Radera uppgift?' })).not.toBeInTheDocument()
+  expect(screen.getByText('Putsa fönster')).toBeInTheDocument()
+})
+
+test('vanligt delete-fel behåller kort och dialog och kan återförsökas', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0]]))
+  fetchMock.mockResolvedValueOnce(jsonResponse({ message: 'Serverfel' }, 500))
+  fetchMock.mockResolvedValueOnce(emptyResponse(204))
+  render(<App />)
+
+  fireEvent.click(await screen.findByRole('button', { name: 'Radera Dammsuga' }))
+  fireEvent.click(screen.getByRole('button', { name: 'Radera' }))
+
+  const dialog = await screen.findByRole('dialog', { name: 'Radera uppgift?' })
+  expect(await within(dialog).findByRole('alert')).toHaveTextContent(
+    'Det gick inte att radera uppgiften. Försök igen.',
+  )
+  expect(screen.getByRole('button', { name: 'Radera Dammsuga' })).toBeInTheDocument()
+  expect(within(dialog).getByRole('button', { name: 'Avbryt' })).toBeEnabled()
+
+  fireEvent.click(within(dialog).getByRole('button', { name: 'Radera' }))
+  await waitFor(() =>
+    expect(screen.queryByRole('button', { name: 'Radera Dammsuga' })).not.toBeInTheDocument(),
+  )
+  expect(fetchMock).toHaveBeenCalledTimes(4)
+})
+
+test('404 TASK_NOT_FOUND tar bort inaktuellt kort men andra 404-fel gör det inte', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0]]))
+  fetchMock.mockResolvedValueOnce(
+    jsonResponse({ code: 'OTHER_NOT_FOUND', message: 'Annat fel' }, 404),
+  )
+  fetchMock.mockResolvedValueOnce(
+    jsonResponse({ code: 'TASK_NOT_FOUND', message: 'Uppgiften finns inte.' }, 404),
+  )
+  render(<App />)
+
+  fireEvent.click(await screen.findByRole('button', { name: 'Radera Dammsuga' }))
+  fireEvent.click(screen.getByRole('button', { name: 'Radera' }))
+  expect(await screen.findByRole('alert')).toHaveTextContent(
+    'Det gick inte att radera uppgiften. Försök igen.',
+  )
+  expect(screen.getByRole('button', { name: 'Radera Dammsuga' })).toBeInTheDocument()
+
+  fireEvent.click(screen.getByRole('button', { name: 'Radera' }))
+  await waitFor(() =>
+    expect(screen.queryByRole('button', { name: 'Radera Dammsuga' })).not.toBeInTheDocument(),
+  )
+  expect(screen.queryByRole('dialog', { name: 'Radera uppgift?' })).not.toBeInTheDocument()
+})
+
+test('drag flyttar optimistiskt, låser kortet och använder hela serverresponsen', async () => {
+  const otherTask = {
+    ...tasks[0],
+    id: '00000000-0000-0000-0000-000000000010',
+    title: 'Putsa fönster',
+  }
+  const serverTask = {
+    ...tasks[0],
+    status: 'COMPLETED',
+    assignee: { id: users[1].id, name: users[1].name },
+  }
+  let resolveStatus!: (response: Response) => void
+  const statusResponse = new Promise<Response>((resolve) => {
+    resolveStatus = resolve
+  })
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0], otherTask]))
+  fetchMock.mockReturnValueOnce(statusResponse)
+  render(<App />)
+
+  await screen.findByText('Dammsuga')
+  act(() => dropTask(tasks[0].id, 'IN_PROGRESS'))
+
+  const inProgress = screen.getByRole('region', { name: 'Pågående' })
+  const optimisticCard = (await within(inProgress).findByText('Dammsuga')).closest('article')!
+  const waiting = screen.getByRole('region', { name: 'Väntande' })
+  const otherCard = within(waiting).getByText('Putsa fönster').closest('article')!
+
+  expect(within(optimisticCard).getByText('Urban')).toBeInTheDocument()
+  expect(optimisticCard).toHaveAttribute('aria-busy', 'true')
+  expect(optimisticCard).toHaveClass('task-card-pending')
+  expect(within(optimisticCard).getByRole('button', { name: 'Markera klar' })).toBeDisabled()
+  expect(
+    within(optimisticCard).getByRole('button', { name: 'Ändra ansvarig för Dammsuga' }),
+  ).toBeDisabled()
+  expect(within(otherCard).getByRole('button', { name: 'Påbörja' })).toBeEnabled()
+  expect(fetchMock).toHaveBeenLastCalledWith(`/api/tasks/${tasks[0].id}/status`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      status: 'IN_PROGRESS',
+      activeUserId: users[0].id,
+    }),
+  })
+
+  act(() => dropTask(tasks[0].id, 'COMPLETED'))
+  expect(fetchMock).toHaveBeenCalledTimes(3)
+
+  await act(async () => resolveStatus(jsonResponse(serverTask)))
+
+  const completed = screen.getByRole('region', { name: 'Klart' })
+  const confirmedCard = (await within(completed).findByText('Dammsuga')).closest('article')!
+  expect(within(confirmedCard).getByText('Anna')).toBeInTheDocument()
+  expect(confirmedCard).not.toHaveAttribute('aria-busy')
+})
+
+test('dragfel återställer hela uppgiften och visar lokalt fel', async () => {
+  let resolveStatus!: (response: Response) => void
+  const statusResponse = new Promise<Response>((resolve) => {
+    resolveStatus = resolve
+  })
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0]]))
+  fetchMock.mockReturnValueOnce(statusResponse)
+  render(<App />)
+
+  await screen.findByText('Dammsuga')
+  act(() => dropTask(tasks[0].id, 'IN_PROGRESS'))
+
+  const inProgress = screen.getByRole('region', { name: 'Pågående' })
+  expect(await within(inProgress).findByText('Urban')).toBeInTheDocument()
+
+  await act(async () =>
+    resolveStatus(
+      jsonResponse(
+        {
+          code: 'TASK_REQUIRES_ASSIGNEE',
+          message: 'En pågående uppgift måste ha en ansvarig.',
+        },
+        409,
+      ),
+    ),
+  )
+
+  const waiting = screen.getByRole('region', { name: 'Väntande' })
+  const restoredCard = (await within(waiting).findByText('Dammsuga')).closest('article')!
+  expect(within(restoredCard).getByText('Ta uppgift')).toBeInTheDocument()
+  expect(within(restoredCard).queryByText('Urban')).not.toBeInTheDocument()
+  expect(await within(restoredCard).findByRole('alert')).toHaveTextContent(
+    'En pågående uppgift måste ha en ansvarig.',
+  )
+  expect(restoredCard).not.toHaveAttribute('aria-busy')
+})
+
+test('drag till Pågående behåller en befintlig ansvarig optimistiskt', async () => {
+  const assignedTask = {
+    ...tasks[0],
+    assignee: { id: users[1].id, name: users[1].name },
+  }
+  let resolveStatus!: (response: Response) => void
+  const statusResponse = new Promise<Response>((resolve) => {
+    resolveStatus = resolve
+  })
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([assignedTask]))
+  fetchMock.mockReturnValueOnce(statusResponse)
+  render(<App />)
+
+  await screen.findByText('Dammsuga')
+  act(() => dropTask(assignedTask.id, 'IN_PROGRESS'))
+
+  const inProgress = screen.getByRole('region', { name: 'Pågående' })
+  expect(await within(inProgress).findByText('Anna')).toBeInTheDocument()
+  expect(within(inProgress).queryByText('Urban')).not.toBeInTheDocument()
+
+  await act(async () =>
+    resolveStatus(jsonResponse({ ...assignedTask, status: 'IN_PROGRESS' })),
+  )
+})
+
+test('drop i samma kolumn är no-op', async () => {
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = mockUsersAndTasks(users, [tasks[0]])
+  render(<App />)
+
+  await screen.findByText('Dammsuga')
+  act(() => dropTask(tasks[0].id, 'WAITING'))
+
+  expect(fetchMock).toHaveBeenCalledTimes(2)
+  expect(screen.getByText('Dammsuga').closest('article')).not.toHaveAttribute('aria-busy')
+})
+
+test('olika kort kan ha samtidiga optimistiska statusanrop', async () => {
+  const otherTask = {
+    ...tasks[0],
+    id: '00000000-0000-0000-0000-000000000010',
+    title: 'Putsa fönster',
+  }
+  const firstResponse = new Promise<Response>(() => {})
+  const secondResponse = new Promise<Response>(() => {})
+  window.localStorage.setItem('hemhub.activeUserId', users[0].id)
+  const fetchMock = vi.spyOn(globalThis, 'fetch')
+  fetchMock.mockResolvedValueOnce(jsonResponse(users))
+  fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0], otherTask]))
+  fetchMock.mockReturnValueOnce(firstResponse)
+  fetchMock.mockReturnValueOnce(secondResponse)
+  render(<App />)
+
+  await screen.findByText('Dammsuga')
+  act(() => {
+    dropTask(tasks[0].id, 'IN_PROGRESS')
+    dropTask(otherTask.id, 'COMPLETED')
+  })
+
+  expect(screen.getByText('Dammsuga').closest('article')).toHaveAttribute('aria-busy', 'true')
+  expect(screen.getByText('Putsa fönster').closest('article')).toHaveAttribute(
+    'aria-busy',
+    'true',
+  )
+  expect(fetchMock).toHaveBeenCalledTimes(4)
+})
+
 test('ansvarig kan bytas i Pågående och tas bort i Klart', async () => {
   const changedInProgress = { ...tasks[1], assignee: { id: users[0].id, name: users[0].name } }
   const unassignedCompleted = { ...tasks[2], assignee: null }
@@ -690,6 +1283,14 @@ function mockUsersAndTasks(userResponse: unknown, taskResponse: unknown) {
   return fetchMock
 }
 
+function dropTask(taskId: string, status: string) {
+  if (!dragAndDrop.onTaskDrop) {
+    throw new Error('Drag-and-drop-providern är inte monterad')
+  }
+
+  dragAndDrop.onTaskDrop(taskId, status)
+}
+
 function mockJsonResponse(body: unknown, status = 200) {
   return vi.spyOn(globalThis, 'fetch').mockResolvedValue(jsonResponse(body, status))
 }
@@ -700,3 +1301,7 @@ function jsonResponse(body: unknown, status = 200) {
     headers: { 'Content-Type': 'application/json' },
   })
 }
+
+function emptyResponse(status: number) {
+  return new Response(null, { status })
+}

frontend/src/TaskBoard.tsx

@@ -1,6 +1,10 @@
 import { FormEvent, MouseEvent, useEffect, useRef, useState } from 'react'
-
+import {
-type TaskStatus = 'WAITING' | 'IN_PROGRESS' | 'COMPLETED'
+  TaskDragDropProvider,
+  TaskStatus,
+  useTaskColumnDropTarget,
+  useTaskDraggable,
+} from './TaskDragAndDrop'
 
 type UserSummary = {
   id: string
@@ -20,9 +24,16 @@ type Task = {
 }
 
 type ApiError = {
+  code?: string
   message?: string
 }
 
+type TaskDetails = {
+  title: string
+  description: string | null
+  points: number
+}
+
 type TaskBoardProps = {
   activeUserId: string
   activeUserName: string
@@ -40,6 +51,10 @@ function TaskBoard({ activeUserId, activeUserName, users, onLogOut }: TaskBoardP
   const [tasks, setTasks] = useState<Task[]>([])
   const [loadState, setLoadState] = useState<'loading' | 'ready' | 'error'>('loading')
   const [showCreateTask, setShowCreateTask] = useState(false)
+  const [editingTask, setEditingTask] = useState<Task | null>(null)
+  const [editError, setEditError] = useState('')
+  const [deletingTask, setDeletingTask] = useState<Task | null>(null)
+  const [deleteError, setDeleteError] = useState('')
   const [editingAssigneeTaskId, setEditingAssigneeTaskId] = useState<string | null>(null)
   const [pendingTaskIds, setPendingTaskIds] = useState<Set<string>>(new Set())
   const [taskErrors, setTaskErrors] = useState<Record<string, string>>({})
@@ -122,11 +137,27 @@ function TaskBoard({ activeUserId, activeUserName, users, onLogOut }: TaskBoardP
     }
   }
 
-  const updateStatus = async (task: Task, status: TaskStatus) => {
+  const updateStatus = async (
+    task: Task,
+    status: TaskStatus,
+    presentation: 'server-confirmed' | 'optimistic',
+  ) => {
     if (!beginTaskRequest(task.id)) {
       return
     }
 
+    const previousTask = task
+    if (presentation === 'optimistic') {
+      replaceTask({
+        ...task,
+        status,
+        assignee:
+          status === 'IN_PROGRESS' && !task.assignee
+            ? { id: activeUserId, name: activeUserName }
+            : task.assignee,
+      })
+    }
+
     try {
       const response = await fetch(`/api/tasks/${task.id}/status`, {
         method: 'PUT',
@@ -139,6 +170,9 @@ function TaskBoard({ activeUserId, activeUserName, users, onLogOut }: TaskBoardP
 
       if (!response.ok) {
         const apiError = (await response.json().catch(() => ({}))) as ApiError
+        if (presentation === 'optimistic') {
+          replaceTask(previousTask)
+        }
         setTaskErrors((current) => ({
           ...current,
           [task.id]: apiError.message ?? 'Det gick inte att ändra status. Försök igen.',
@@ -149,6 +183,9 @@ function TaskBoard({ activeUserId, activeUserName, users, onLogOut }: TaskBoardP
       replaceTask((await response.json()) as Task)
       setEditingAssigneeTaskId(null)
     } catch {
+      if (presentation === 'optimistic') {
+        replaceTask(previousTask)
+      }
       setTaskErrors((current) => ({
         ...current,
         [task.id]: 'Det gick inte att ändra status. Försök igen.',
@@ -158,6 +195,118 @@ function TaskBoard({ activeUserId, activeUserName, users, onLogOut }: TaskBoardP
     }
   }
 
+  const dropTask = (taskId: string, status: TaskStatus) => {
+    const task = tasks.find((candidate) => candidate.id === taskId)
+
+    if (!task || task.status === status) {
+      return
+    }
+
+    void updateStatus(task, status, 'optimistic')
+  }
+
+  const openEditTask = (task: Task) => {
+    if (pendingTaskIdsRef.current.has(task.id)) {
+      return
+    }
+
+    setEditError('')
+    setEditingTask(task)
+  }
+
+  const closeEditTask = () => {
+    if (editingTask && pendingTaskIdsRef.current.has(editingTask.id)) {
+      return
+    }
+
+    setEditError('')
+    setEditingTask(null)
+  }
+
+  const updateDetails = async (task: Task, details: TaskDetails) => {
+    if (!beginTaskRequest(task.id)) {
+      return
+    }
+
+    setEditError('')
+
+    try {
+      const response = await fetch(`/api/tasks/${task.id}/details`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(details),
+      })
+
+      if (!response.ok) {
+        const apiError = (await response.json().catch(() => ({}))) as ApiError
+        if (response.status === 404 && apiError.code === 'TASK_NOT_FOUND') {
+          setTasks((current) => current.filter((candidate) => candidate.id !== task.id))
+          setEditingTask(null)
+          return
+        }
+
+        setEditError(apiError.message ?? 'Det gick inte att spara ändringarna. Försök igen.')
+        return
+      }
+
+      replaceTask((await response.json()) as Task)
+      setEditingTask(null)
+    } catch {
+      setEditError('Det gick inte att spara ändringarna. Försök igen.')
+    } finally {
+      finishTaskRequest(task.id)
+    }
+  }
+
+  const openDeleteTask = (task: Task) => {
+    if (pendingTaskIdsRef.current.has(task.id)) {
+      return
+    }
+
+    setDeleteError('')
+    setDeletingTask(task)
+  }
+
+  const closeDeleteTask = () => {
+    if (deletingTask && pendingTaskIdsRef.current.has(deletingTask.id)) {
+      return
+    }
+
+    setDeleteError('')
+    setDeletingTask(null)
+  }
+
+  const deleteTask = async (task: Task) => {
+    if (!beginTaskRequest(task.id)) {
+      return
+    }
+
+    setDeleteError('')
+
+    try {
+      const response = await fetch(`/api/tasks/${task.id}`, { method: 'DELETE' })
+
+      if (response.status === 204) {
+        setTasks((current) => current.filter((candidate) => candidate.id !== task.id))
+        setDeletingTask(null)
+        return
+      }
+
+      const apiError = (await response.json().catch(() => ({}))) as ApiError
+      if (response.status === 404 && apiError.code === 'TASK_NOT_FOUND') {
+        setTasks((current) => current.filter((candidate) => candidate.id !== task.id))
+        setDeletingTask(null)
+        return
+      }
+
+      setDeleteError('Det gick inte att radera uppgiften. Försök igen.')
+    } catch {
+      setDeleteError('Det gick inte att radera uppgiften. Försök igen.')
+    } finally {
+      finishTaskRequest(task.id)
+    }
+  }
+
   return (
     <main className="task-app">
       <header className="app-header">
@@ -190,48 +339,27 @@ function TaskBoard({ activeUserId, activeUserName, users, onLogOut }: TaskBoardP
         </button>
       </div>
 
+      <TaskDragDropProvider onTaskDrop={dropTask}>
         <section className="board" aria-label="Uppgiftsbräda">
           {columns.map((column) => (
-          <section className="board-column" key={column.status} aria-labelledby={column.status}>
+            <TaskColumn
-            <h2 id={column.status}>{column.title}</h2>
+              column={column}
-            <div className="task-list">
+              tasks={tasks.filter((task) => task.status === column.status)}
-              {tasks
-                .filter((task) => task.status === column.status)
-                .map((task) => {
-                  const pending = pendingTaskIds.has(task.id)
-
-                  return (
-                    <article className="task-card" key={task.id}>
-                      <div className="task-card-header">
-                        <h3>{task.title}</h3>
-                        <span className="points-badge">{task.points} p</span>
-                      </div>
-                      {task.description && <p>{task.description}</p>}
-                      <AssigneeControl
-                        task={task}
               users={users}
-                        editing={editingAssigneeTaskId === task.id}
+              editingAssigneeTaskId={editingAssigneeTaskId}
-                        pending={pending}
+              pendingTaskIds={pendingTaskIds}
-                        onEdit={() => setEditingAssigneeTaskId(task.id)}
+              taskErrors={taskErrors}
-                        onChange={(assigneeId) => void updateAssignee(task, assigneeId)}
+              onEditAssignee={setEditingAssigneeTaskId}
+              onChangeAssignee={(task, assigneeId) => void updateAssignee(task, assigneeId)}
+              onChangeStatus={(task, status) =>
+                void updateStatus(task, status, 'server-confirmed')
+              }
+              onEdit={openEditTask}
+              onDelete={openDeleteTask}
             />
-                      <TaskStatusControls
-                        task={task}
-                        disabled={pending}
-                        onChange={(status) => void updateStatus(task, status)}
-                      />
-                      {taskErrors[task.id] && (
-                        <p className="task-error error" role="alert">
-                          {taskErrors[task.id]}
-                        </p>
-                      )}
-                    </article>
-                  )
-                })}
-            </div>
-          </section>
           ))}
         </section>
+      </TaskDragDropProvider>
 
       {showCreateTask && (
         <CreateTaskModal
@@ -243,10 +371,429 @@ function TaskBoard({ activeUserId, activeUserName, users, onLogOut }: TaskBoardP
           }}
         />
       )}
+
+      {editingTask && (
+        <EditTaskModal
+          task={editingTask}
+          pending={pendingTaskIds.has(editingTask.id)}
+          error={editError}
+          onClose={closeEditTask}
+          onSave={(details) => void updateDetails(editingTask, details)}
+        />
+      )}
+
+      {deletingTask && (
+        <DeleteTaskModal
+          task={deletingTask}
+          pending={pendingTaskIds.has(deletingTask.id)}
+          error={deleteError}
+          onClose={closeDeleteTask}
+          onConfirm={() => void deleteTask(deletingTask)}
+        />
+      )}
     </main>
   )
 }
 
+type TaskColumnProps = {
+  column: { status: TaskStatus; title: string }
+  tasks: Task[]
+  users: UserSummary[]
+  editingAssigneeTaskId: string | null
+  pendingTaskIds: Set<string>
+  taskErrors: Record<string, string>
+  onEditAssignee: (taskId: string) => void
+  onChangeAssignee: (task: Task, assigneeId: string) => void
+  onChangeStatus: (task: Task, status: TaskStatus) => void
+  onEdit: (task: Task) => void
+  onDelete: (task: Task) => void
+}
+
+function TaskColumn({
+  column,
+  tasks,
+  users,
+  editingAssigneeTaskId,
+  pendingTaskIds,
+  taskErrors,
+  onEditAssignee,
+  onChangeAssignee,
+  onChangeStatus,
+  onEdit,
+  onDelete,
+}: TaskColumnProps) {
+  const { ref, isDropTarget } = useTaskColumnDropTarget(column.status)
+
+  return (
+    <section
+      ref={ref}
+      className={`board-column${isDropTarget ? ' board-column-drop-target' : ''}`}
+      aria-labelledby={column.status}
+    >
+      <h2 id={column.status}>{column.title}</h2>
+      <div className="task-list">
+        {tasks.map((task) => (
+          <TaskCard
+            key={task.id}
+            task={task}
+            users={users}
+            editingAssignee={editingAssigneeTaskId === task.id}
+            pending={pendingTaskIds.has(task.id)}
+            error={taskErrors[task.id]}
+            onEditAssignee={() => onEditAssignee(task.id)}
+            onChangeAssignee={(assigneeId) => onChangeAssignee(task, assigneeId)}
+            onChangeStatus={(status) => onChangeStatus(task, status)}
+            onEdit={() => onEdit(task)}
+            onDelete={() => onDelete(task)}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+type TaskCardProps = {
+  task: Task
+  users: UserSummary[]
+  editingAssignee: boolean
+  pending: boolean
+  error?: string
+  onEditAssignee: () => void
+  onChangeAssignee: (assigneeId: string) => void
+  onChangeStatus: (status: TaskStatus) => void
+  onEdit: () => void
+  onDelete: () => void
+}
+
+function TaskCard({
+  task,
+  users,
+  editingAssignee,
+  pending,
+  error,
+  onEditAssignee,
+  onChangeAssignee,
+  onChangeStatus,
+  onEdit,
+  onDelete,
+}: TaskCardProps) {
+  const { ref, isDragging } = useTaskDraggable(task.id, pending)
+
+  return (
+    <article
+      ref={ref}
+      role="article"
+      className={`task-card${pending ? ' task-card-pending' : ''}${
+        isDragging ? ' task-card-dragging' : ''
+      }`}
+      aria-busy={pending || undefined}
+    >
+      <div className="task-card-header">
+        <h3>{task.title}</h3>
+        <div className="task-card-actions">
+          <span className="points-badge">{task.points} p</span>
+          <button
+            type="button"
+            className="task-edit-button"
+            aria-label={`Redigera ${task.title}`}
+            disabled={pending}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={onEdit}
+          >
+            <EditIcon />
+          </button>
+          <button
+            type="button"
+            className="task-delete-button"
+            aria-label={`Radera ${task.title}`}
+            disabled={pending}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={onDelete}
+          >
+            <TrashIcon />
+          </button>
+        </div>
+      </div>
+      {task.description && <p>{task.description}</p>}
+      <AssigneeControl
+        task={task}
+        users={users}
+        editing={editingAssignee}
+        pending={pending}
+        onEdit={onEditAssignee}
+        onChange={onChangeAssignee}
+      />
+      <TaskStatusControls task={task} disabled={pending} onChange={onChangeStatus} />
+      {error && (
+        <p className="task-error error" role="alert">
+          {error}
+        </p>
+      )}
+    </article>
+  )
+}
+
+function EditIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="19"
+      height="19"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        d="m4 20 4.5-1 10-10a2.1 2.1 0 0 0-3-3l-10 10L4 20Zm10-12 3 3"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+function TrashIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="19"
+      height="19"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13M10 11v5m4-5v5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+type EditTaskModalProps = {
+  task: Task
+  pending: boolean
+  error: string
+  onClose: () => void
+  onSave: (details: TaskDetails) => void
+}
+
+function EditTaskModal({ task, pending, error, onClose, onSave }: EditTaskModalProps) {
+  const [title, setTitle] = useState(task.title)
+  const [description, setDescription] = useState(task.description ?? '')
+  const [points, setPoints] = useState(String(task.points))
+  const [validationError, setValidationError] = useState('')
+
+  useEffect(() => {
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !pending) {
+        onClose()
+      }
+    }
+
+    window.addEventListener('keydown', closeOnEscape)
+    return () => window.removeEventListener('keydown', closeOnEscape)
+  }, [onClose, pending])
+
+  const closeFromBackdrop = (event: MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget && !pending) {
+      onClose()
+    }
+  }
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (pending) {
+      return
+    }
+
+    const trimmedTitle = title.trim()
+    const trimmedDescription = description.trim()
+    const numericPoints = Number(points)
+
+    if (!trimmedTitle || [...trimmedTitle].length > 100) {
+      setValidationError('Titeln måste innehålla mellan 1 och 100 tecken.')
+      return
+    }
+    if ([...trimmedDescription].length > 500) {
+      setValidationError('Beskrivningen får innehålla högst 500 tecken.')
+      return
+    }
+    if (
+      !points.trim() ||
+      !Number.isInteger(numericPoints) ||
+      numericPoints < 1 ||
+      numericPoints > 99
+    ) {
+      setValidationError('Poäng måste vara ett heltal mellan 1 och 99.')
+      return
+    }
+
+    setValidationError('')
+    onSave({
+      title: trimmedTitle,
+      description: trimmedDescription || null,
+      points: numericPoints,
+    })
+  }
+
+  return (
+    <div className="modal-backdrop" onMouseDown={closeFromBackdrop}>
+      <section
+        className="modal edit-task-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="edit-task-title"
+      >
+        <div className="modal-header">
+          <h2 id="edit-task-title">Redigera uppgift</h2>
+          <button
+            type="button"
+            className="close-button"
+            aria-label="Stäng"
+            disabled={pending}
+            onClick={onClose}
+          >
+            ×
+          </button>
+        </div>
+        <form noValidate onSubmit={submit}>
+          <label htmlFor="edit-task-title-field">Titel</label>
+          <input
+            id="edit-task-title-field"
+            autoFocus
+            value={title}
+            disabled={pending}
+            onChange={(event) => setTitle(event.target.value)}
+          />
+
+          <label htmlFor="edit-task-description">Beskrivning (valfri)</label>
+          <textarea
+            id="edit-task-description"
+            rows={5}
+            value={description}
+            disabled={pending}
+            onChange={(event) => setDescription(event.target.value)}
+          />
+
+          <label htmlFor="edit-task-points">Poäng</label>
+          <input
+            id="edit-task-points"
+            type="number"
+            min="1"
+            max="99"
+            step="1"
+            value={points}
+            disabled={pending}
+            onChange={(event) => setPoints(event.target.value)}
+          />
+
+          {(validationError || error) && (
+            <p className="error" role="alert">
+              {validationError || error}
+            </p>
+          )}
+
+          <div className="edit-task-actions">
+            <button
+              type="button"
+              className="secondary compact"
+              disabled={pending}
+              onClick={onClose}
+            >
+              Avbryt
+            </button>
+            <button type="submit" disabled={pending}>
+              {pending ? 'Sparar…' : 'Spara'}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  )
+}
+
+type DeleteTaskModalProps = {
+  task: Task
+  pending: boolean
+  error: string
+  onClose: () => void
+  onConfirm: () => void
+}
+
+function DeleteTaskModal({
+  task,
+  pending,
+  error,
+  onClose,
+  onConfirm,
+}: DeleteTaskModalProps) {
+  useEffect(() => {
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !pending) {
+        onClose()
+      }
+    }
+
+    window.addEventListener('keydown', closeOnEscape)
+    return () => window.removeEventListener('keydown', closeOnEscape)
+  }, [onClose, pending])
+
+  const closeFromBackdrop = (event: MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget && !pending) {
+      onClose()
+    }
+  }
+
+  return (
+    <div className="modal-backdrop" onMouseDown={closeFromBackdrop}>
+      <section
+        className="modal delete-task-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="delete-task-title"
+      >
+        <div className="modal-header">
+          <h2 id="delete-task-title">Radera uppgift?</h2>
+        </div>
+        <p>
+          Är du säker på att du vill radera <strong>{task.title}</strong>? Uppgiften
+          raderas permanent och kan inte återställas.
+        </p>
+        {error && (
+          <p className="error" role="alert">
+            {error}
+          </p>
+        )}
+        <div className="delete-task-actions">
+          <button
+            type="button"
+            className="secondary compact"
+            autoFocus
+            disabled={pending}
+            onClick={onClose}
+          >
+            Avbryt
+          </button>
+          <button
+            type="button"
+            className="danger"
+            disabled={pending}
+            onClick={onConfirm}
+          >
+            Radera
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}
+
 type AssigneeControlProps = {
   task: Task
   users: UserSummary[]

frontend/src/TaskDragAndDrop.test.ts

@@ -0,0 +1,18 @@
+import { expect, test } from 'vitest'
+import { resolveTaskDrop } from './TaskDragAndDrop'
+
+test.each(['WAITING', 'IN_PROGRESS', 'COMPLETED'] as const)(
+  'mappar målkolumnen %s till motsvarande status',
+  (status) => {
+    expect(resolveTaskDrop('task-1', status, false)).toEqual({
+      taskId: 'task-1',
+      targetStatus: status,
+    })
+  },
+)
+
+test('avbruten dragning och ogiltig målkolumn är no-op', () => {
+  expect(resolveTaskDrop('task-1', 'WAITING', true)).toBeNull()
+  expect(resolveTaskDrop('task-1', undefined, false)).toBeNull()
+  expect(resolveTaskDrop('task-1', 'UNKNOWN', false)).toBeNull()
+})

frontend/src/TaskDragAndDrop.tsx

@@ -0,0 +1,90 @@
+import { ReactNode } from 'react'
+import { DragDropProvider, useDraggable, useDroppable } from '@dnd-kit/react'
+import { PointerActivationConstraints, PointerSensor } from '@dnd-kit/dom'
+
+export type TaskStatus = 'WAITING' | 'IN_PROGRESS' | 'COMPLETED'
+
+type TaskDragDropProviderProps = {
+  children: ReactNode
+  onTaskDrop: (taskId: string, targetStatus: TaskStatus) => void
+}
+
+const taskStatuses = new Set<TaskStatus>(['WAITING', 'IN_PROGRESS', 'COMPLETED'])
+
+const pointerSensor = PointerSensor.configure({
+  activationConstraints(event) {
+    if (event.pointerType === 'touch') {
+      return [new PointerActivationConstraints.Delay({ value: 250, tolerance: 8 })]
+    }
+
+    return [new PointerActivationConstraints.Distance({ value: 6 })]
+  },
+})
+
+export function resolveTaskDrop(
+  sourceId: string | number | undefined,
+  targetId: string | number | undefined,
+  canceled: boolean,
+) {
+  if (
+    canceled ||
+    sourceId === undefined ||
+    typeof targetId !== 'string' ||
+    !taskStatuses.has(targetId as TaskStatus)
+  ) {
+    return null
+  }
+
+  return {
+    taskId: String(sourceId),
+    targetStatus: targetId as TaskStatus,
+  }
+}
+
+export function TaskDragDropProvider({
+  children,
+  onTaskDrop,
+}: TaskDragDropProviderProps) {
+  return (
+    <DragDropProvider
+      sensors={(defaults) => [
+        ...defaults.filter((sensor) => sensor !== PointerSensor),
+        pointerSensor,
+      ]}
+      onDragEnd={(event) => {
+        const drop = resolveTaskDrop(
+          event.operation.source?.id,
+          event.operation.target?.id,
+          event.canceled,
+        )
+
+        if (!drop) {
+          return
+        }
+
+        onTaskDrop(drop.taskId, drop.targetStatus)
+      }}
+    >
+      {children}
+    </DragDropProvider>
+  )
+}
+
+export function useTaskDraggable(taskId: string, disabled: boolean) {
+  const { ref, isDragging } = useDraggable({
+    id: taskId,
+    type: 'task',
+    disabled,
+  })
+
+  return { ref, isDragging }
+}
+
+export function useTaskColumnDropTarget(status: TaskStatus) {
+  const { ref, isDropTarget } = useDroppable({
+    id: status,
+    accept: 'task',
+  })
+
+  return { ref, isDropTarget }
+}

frontend/src/styles.css

@@ -158,8 +158,15 @@ textarea {
 .board-column {
   min-height: 20rem;
   padding: 1rem;
+  border: 1px solid transparent;
   border-radius: 0.75rem;
   background: #e5e7eb;
+  transition: border-color 120ms ease, background-color 120ms ease;
+}
+
+.board-column-drop-target {
+  border-color: #93c5fd;
+  background: #e0e7ff;
 }
 
 .board-column h2 {
@@ -180,6 +187,14 @@ textarea {
   box-shadow: 0 0.125rem 0.4rem rgb(0 0 0 / 8%);
 }
 
+.task-card-pending {
+  opacity: 0.65;
+}
+
+.task-card-dragging {
+  cursor: grabbing;
+}
+
 .task-card h3,
 .task-card p {
   margin: 0;
@@ -245,6 +260,46 @@ textarea {
   gap: 0.75rem;
 }
 
+.task-card-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.task-edit-button,
+.task-delete-button {
+  display: inline-grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  place-items: center;
+  color: #64748b;
+  background: transparent;
+}
+
+.task-edit-button:hover,
+.task-edit-button:focus-visible {
+  color: #1d4ed8;
+  background: #dbeafe;
+}
+
+.task-edit-button:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.task-delete-button:hover,
+.task-delete-button:focus-visible {
+  color: #991b1b;
+  background: #fee2e2;
+}
+
+.task-delete-button:focus-visible {
+  outline: 2px solid #dc2626;
+  outline-offset: 2px;
+}
+
 .points-badge {
   flex: 0 0 auto;
   padding: 0.2rem 0.5rem;
@@ -312,6 +367,40 @@ textarea {
   margin: 0;
 }
 
+.delete-task-modal p {
+  margin: 0 0 1rem;
+}
+
+.edit-task-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.edit-task-actions .secondary {
+  margin-top: 0;
+}
+
+.delete-task-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.delete-task-actions .secondary {
+  margin-top: 0;
+}
+
+.danger {
+  background: #b91c1c;
+}
+
+.danger:hover,
+.danger:focus-visible {
+  background: #991b1b;
+}
+
 .close-button {
   padding: 0.2rem 0.55rem;
   color: #475569;

frontend/src/test/setup.ts

@@ -1,5 +1,15 @@
 import '@testing-library/jest-dom/vitest'
 
+class ResizeObserverStub implements ResizeObserver {
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+globalThis.ResizeObserver = ResizeObserverStub
+
 const storedValues = new Map<string, string>()
 
 Object.defineProperty(window, 'localStorage', {