feat: Linear-style Task Board mit Drag&Drop

backend/Controllers/DashboardController.cs

@@ -158,6 +158,36 @@ public class DashboardController(IDashboardService dashboardService, ITaskServic
         };
     }
 
+    // ── Task Board Endpoints ──
+
+    [HttpGet("tasks/board")]
+    public async Task<TaskBoardResponse> GetBoard(CancellationToken ct)
+        => await taskService.GetBoardAsync(ct);
+
+    [HttpPatch("tasks/{id:guid}/move")]
+    public async Task<ActionResult<DashboardTaskDto>> MoveTask(
+        Guid id, [FromBody] MoveTaskRequest request, CancellationToken ct)
+    {
+        if (string.IsNullOrWhiteSpace(request.State))
+            return BadRequest(new { error = "State is required." });
+
+        var result = await taskService.MoveTaskAsync(id, request.State, ct);
+        return result.Outcome switch
+        {
+            TaskOperationOutcome.InvalidState => BadRequest(new { error = $"Unsupported state: '{request.State}'. Valid: {string.Join(", ", TaskStateHelper.AllStates)}" }),
+            TaskOperationOutcome.NotFound => NotFound(new { error = "Task not found." }),
+            _ => Ok(MapToDto(result.Task!))
+        };
+    }
+
+    [HttpPost("tasks/import-from-iris-todo")]
+    public async Task<ActionResult<ImportResultDto>> ImportFromIrisTodo(
+        [FromQuery] bool delete = false, CancellationToken ct = default)
+    {
+        var result = await taskService.ImportFromIrisTodoAsync(delete, ct);
+        return Ok(new ImportResultDto(result));
+    }
+
     private static DashboardTaskDto MapToDto(WorkTask t) => new(
         t.Id, t.Title, t.Detail, t.Source, t.State, t.Priority, t.AssignedTo, t.CreatedAt, t.UpdatedAt);
 }

backend/Data/Entities.cs

@@ -19,7 +19,8 @@ public enum TaskState
     Backlog,
     InProgress,
     Blocked,
-    Done
+    Done,
+    Review
 }
 
 public static class TaskStateHelper
@@ -29,7 +30,8 @@ public static class TaskStateHelper
         [TaskState.Backlog] = "Backlog",
         [TaskState.InProgress] = "In progress",
         [TaskState.Blocked] = "Blocked",
-        [TaskState.Done] = "Done"
+        [TaskState.Done] = "Done",
+        [TaskState.Review] = "Review"
     };
 
     private static readonly Dictionary<string, TaskState> StringToState = new(StringComparer.OrdinalIgnoreCase)
@@ -37,11 +39,22 @@ public static class TaskStateHelper
         ["Backlog"] = TaskState.Backlog,
         ["In progress"] = TaskState.InProgress,
         ["Blocked"] = TaskState.Blocked,
-        ["Done"] = TaskState.Done
+        ["Done"] = TaskState.Done,
+        ["Review"] = TaskState.Review
+    };
+
+    /// <summary>Mapping from state string to display label.</summary>
+    private static readonly Dictionary<string, string> DisplayLabels = new(StringComparer.OrdinalIgnoreCase)
+    {
+        ["Backlog"] = "Offen",
+        ["In progress"] = "In Bearbeitung",
+        ["Review"] = "Review",
+        ["Blocked"] = "Blockiert",
+        ["Done"] = "Erledigt"
     };
 
     /// <summary>Valid task-state string values for API validation.</summary>
-    public static readonly string[] AllStates = ["Backlog", "In progress", "Blocked", "Done"];
+    public static readonly string[] AllStates = ["Backlog", "In progress", "Blocked", "Done", "Review"];
 
     /// <summary>Convert a TaskState enum to its API string representation.</summary>
     public static string ToStateString(this TaskState state) => StateToString[state];
@@ -54,6 +67,10 @@ public static class TaskStateHelper
     public static bool IsValidState(string? state) =>
         !string.IsNullOrWhiteSpace(state) && StringToState.ContainsKey(state);
 
+    /// <summary>Returns the German display label for a state string.</summary>
+    public static string ToDisplayString(string? state) =>
+        state is not null && DisplayLabels.TryGetValue(state, out var label) ? label : state ?? "";
+
     public static bool IsInProgressOrBlocked(string? state) =>
         string.Equals(state, "In progress", StringComparison.OrdinalIgnoreCase)
         || string.Equals(state, "Blocked", StringComparison.OrdinalIgnoreCase);
@@ -61,6 +78,38 @@ public static class TaskStateHelper
     public static bool IsDoneOrBacklog(string? state) =>
         string.Equals(state, "Done", StringComparison.OrdinalIgnoreCase)
         || string.Equals(state, "Backlog", StringComparison.OrdinalIgnoreCase);
+
+    /// <summary>Group key for board responses (lowercased English state).</summary>
+    public static string BoardGroupKey(string? state)
+    {
+        if (string.IsNullOrWhiteSpace(state)) return "offen";
+        var lower = state.ToLowerInvariant();
+        return lower switch
+        {
+            "backlog" => "offen",
+            "in progress" => "inProgress",
+            "review" => "review",
+            "blocked" => "blocked",
+            "done" => "done",
+            _ => "offen"
+        };
+    }
+
+    /// <summary>Map a board group key back to the canonical state string.</summary>
+    public static string? BoardGroupToState(string? groupKey)
+    {
+        if (string.IsNullOrWhiteSpace(groupKey)) return null;
+        var lower = groupKey.ToLowerInvariant();
+        return lower switch
+        {
+            "offen" => "Backlog",
+            "inprogress" => "In progress",
+            "review" => "Review",
+            "blocked" => "Blocked",
+            "done" => "Done",
+            _ => null
+        };
+    }
 }
 
 public sealed class Project

backend/Models/Dashboard.cs

@@ -114,3 +114,21 @@ public sealed record AgentActivityEntry(
     string Time,
     string Text
 );
+
+// ── Task Board DTOs ──
+
+public sealed record TaskBoardResponse(
+    List<DashboardTaskDto> Offen,
+    List<DashboardTaskDto> InProgress,
+    List<DashboardTaskDto> Review,
+    List<DashboardTaskDto> Blocked,
+    List<DashboardTaskDto> Done
+);
+
+public sealed record MoveTaskRequest(
+    string State
+);
+
+public sealed record ImportResultDto(
+    int Imported
+);

backend/Services/ITaskService.cs

@@ -1,5 +1,6 @@
 using Nexus.Api.Data;
 using Nexus.Api.DTOs;
+using Nexus.Api.Models;
 
 namespace Nexus.Api.Services;
 
@@ -26,4 +27,9 @@ public interface ITaskService
     Task<TaskOperationResult> UpdateStatusAsync(Guid id, string status, CancellationToken ct = default);
     Task<TaskOperationResult> CompleteViaQueueAsync(Guid id, CancellationToken ct = default);
     Task<TaskOperationResult> CyclePriorityAsync(Guid id, CancellationToken ct = default);
+
+    // Task Board
+    Task<TaskBoardResponse> GetBoardAsync(CancellationToken ct = default);
+    Task<TaskOperationResult> MoveTaskAsync(Guid id, string newState, CancellationToken ct = default);
+    Task<int> ImportFromIrisTodoAsync(bool deleteAfterImport = false, CancellationToken ct = default);
 }

backend/Services/TaskService.cs

@@ -1,5 +1,7 @@
+using System.Text.RegularExpressions;
 using Nexus.Api.Data;
 using Nexus.Api.DTOs;
+using Nexus.Api.Models;
 using Nexus.Api.Repositories;
 
 namespace Nexus.Api.Services;
@@ -121,7 +123,7 @@ public sealed class TaskService(
             Detail = detail?.Trim(),
             Source = string.IsNullOrWhiteSpace(source) ? "bao" : source.Trim(),
             Priority = string.IsNullOrWhiteSpace(priority) ? "Normal" : priority.Trim(),
-            AssignedTo = assignedTo?.Trim()
+            AssignedTo = ValidateAssignedTo(assignedTo)
         };
         await taskRepo.AddAsync(task, ct);
         await activityRepo.AddAsync(new ActivityEvent { Type = "task", Message = $"Task \"{task.Title}\" created ({task.Source})" }, ct);
@@ -138,7 +140,7 @@ public sealed class TaskService(
         if (detail is not null) task.Detail = string.IsNullOrWhiteSpace(detail) ? null : detail.Trim();
         if (!string.IsNullOrWhiteSpace(source)) task.Source = source.Trim();
         if (!string.IsNullOrWhiteSpace(priority)) task.Priority = priority.Trim();
-        if (assignedTo is not null) task.AssignedTo = string.IsNullOrWhiteSpace(assignedTo) ? null : assignedTo.Trim();
+        if (assignedTo is not null) task.AssignedTo = ValidateAssignedTo(assignedTo);
 
         await taskRepo.UpdateAsync(task, ct);
         await activityRepo.AddAsync(new ActivityEvent { Type = "task", Message = $"Task \"{task.Title}\" updated" }, ct);
@@ -188,4 +190,145 @@ public sealed class TaskService(
         await activityRepo.AddAsync(new ActivityEvent { Type = "task", Message = $"Task \"{task.Title}\" priority → {task.Priority}" }, ct);
         return new TaskOperationResult(TaskOperationOutcome.Success, task);
     }
+
+    // ── Board operations ──
+
+    public async Task<TaskBoardResponse> GetBoardAsync(CancellationToken ct = default)
+    {
+        var all = await taskRepo.GetAllAsync(ct);
+        var offen = new List<DashboardTaskDto>();
+        var inProgress = new List<DashboardTaskDto>();
+        var review = new List<DashboardTaskDto>();
+        var blocked = new List<DashboardTaskDto>();
+        var done = new List<DashboardTaskDto>();
+
+        foreach (var task in all)
+        {
+            var dto = MapToDto(task);
+            switch (task.State.ToLowerInvariant())
+            {
+                case "backlog":
+                    offen.Add(dto); break;
+                case "in progress":
+                    inProgress.Add(dto); break;
+                case "review":
+                    review.Add(dto); break;
+                case "blocked":
+                    blocked.Add(dto); break;
+                case "done":
+                    done.Add(dto); break;
+                default:
+                    offen.Add(dto); break;
+            }
+        }
+
+        return new TaskBoardResponse(offen, inProgress, review, blocked, done);
+    }
+
+    public async Task<TaskOperationResult> MoveTaskAsync(Guid id, string newState, CancellationToken ct = default)
+    {
+        // Resolve canonical state: accept board group keys or canonical strings
+        var canonical = TaskStateHelper.AllStates
+            .FirstOrDefault(s => s.Equals(newState, StringComparison.OrdinalIgnoreCase));
+
+        if (canonical is null)
+        {
+            // Try mapping from board group key
+            canonical = TaskStateHelper.BoardGroupToState(newState);
+        }
+
+        if (canonical is null)
+            return new TaskOperationResult(TaskOperationOutcome.InvalidState);
+
+        var task = await taskRepo.GetByIdAsync(id, ct);
+        if (task is null) return new TaskOperationResult(TaskOperationOutcome.NotFound);
+
+        task.State = canonical;
+        await taskRepo.UpdateAsync(task, ct);
+        await activityRepo.AddAsync(new ActivityEvent { Type = "task", Message = $"Task \"{task.Title}\" moved to {canonical}" }, ct);
+        return new TaskOperationResult(TaskOperationOutcome.Success, task);
+    }
+
+    public async Task<int> ImportFromIrisTodoAsync(bool deleteAfterImport = false, CancellationToken ct = default)
+    {
+        var todoPath = "/mnt/workspace-iris/TODO.md";
+        if (!File.Exists(todoPath)) return 0;
+
+        var content = await File.ReadAllTextAsync(todoPath, ct);
+        var lines = content.Split('\n');
+
+        var imported = 0;
+        string? currentPriority = null;
+
+        // Parse sections and extract tasks with assignee info
+        // Pattern: ### N. Title 👤 Person
+        var taskPattern = new Regex(@"^###\s+\d+\.\s+(.+?)(?:\s+👤\s+(.+?))?$", RegexOptions.Compiled);
+        foreach (var line in lines)
+        {
+            var trimmed = line.Trim();
+
+            // Detect priority section
+            if (trimmed.StartsWith("## "))
+            {
+                var sectionLower = trimmed.ToLowerInvariant();
+                if (sectionLower.Contains("high")) currentPriority = "High";
+                else if (sectionLower.Contains("medium")) currentPriority = "Medium";
+                else if (sectionLower.Contains("low")) currentPriority = "Low";
+                else currentPriority = "Medium";
+                continue;
+            }
+
+            var match = taskPattern.Match(trimmed);
+            if (!match.Success) continue;
+
+            var title = match.Groups[1].Value.Trim();
+            var assigneeRaw = match.Groups[2].Success ? match.Groups[2].Value.Trim() : null;
+
+            // Resolve assignee: "Iris" → "iris", "Bao" → "bao", "Iris+Bao" → "iris"
+            string? assignedTo = null;
+            if (!string.IsNullOrWhiteSpace(assigneeRaw))
+            {
+                var lower = assigneeRaw.ToLowerInvariant();
+                if (lower.Contains("iris")) assignedTo = "iris";
+                else if (lower.Contains("bao")) assignedTo = "bao";
+            }
+
+            var task = new WorkTask
+            {
+                Title = title,
+                Source = "iris",
+                Priority = currentPriority ?? "Medium",
+                AssignedTo = assignedTo
+            };
+            await taskRepo.AddAsync(task, ct);
+            imported++;
+        }
+
+        if (deleteAfterImport)
+        {
+            File.Delete(todoPath);
+            await activityRepo.AddAsync(new ActivityEvent { Type = "task", Message = $"Imported {imported} tasks from TODO.md and deleted the file" }, ct);
+        }
+        else
+        {
+            await activityRepo.AddAsync(new ActivityEvent { Type = "task", Message = $"Imported {imported} tasks from TODO.md" }, ct);
+        }
+
+        return imported;
+    }
+
+    private static DashboardTaskDto MapToDto(WorkTask t) => new(
+        t.Id, t.Title, t.Detail, t.Source, t.State, t.Priority, t.AssignedTo, t.CreatedAt, t.UpdatedAt);
+
+    /// <summary>
+    /// Validates AssignedTo — only "bao", "iris", or null are accepted.
+    /// Returns null for invalid values.
+    /// </summary>
+    private static string? ValidateAssignedTo(string? assignedTo)
+    {
+        if (string.IsNullOrWhiteSpace(assignedTo)) return null;
+        var lower = assignedTo.Trim().ToLowerInvariant();
+        if (lower is "bao" or "iris") return lower;
+        return null;
+    }
 } 

frontend/src/App.vue

@@ -32,7 +32,7 @@ const navigate = (label: string) => {
 }
 const mobileNavOpen = ref(false)
 
-const standaloneViews = computed(() => ['Dashboard', 'Settings', 'ProjectDetail', 'Memory', 'Docs', 'Security', 'Incidents', 'Calendar', 'AgentDetail', 'Agents'].includes(activeView.value))
+const standaloneViews = computed(() => ['Dashboard', 'Settings', 'ProjectDetail', 'Memory', 'Docs', 'Security', 'Incidents', 'Calendar', 'AgentDetail', 'Agents', 'Task Board'].includes(activeView.value))
 
 onMounted(() => {
   if (auth.isAuthenticated) store.refresh()

frontend/src/router.ts

@@ -11,6 +11,7 @@ import IncidentsView from './views/IncidentsView.vue'
 import CalendarView from './views/CalendarView.vue'
 import NexusLayout from './layouts/NexusLayout.vue'
 import FlowBoard from './views/Dashboard/FlowBoard.vue'
+import TaskBoardView from './views/TaskBoardView.vue'
 
 const routes = [
   { path: '/login', name: 'Login', component: LoginView, meta: { public: true } },
@@ -33,7 +34,7 @@ const routes = [
   { path: '/calendar', name: 'Calendar', component: CalendarView },
   { path: '/projects', name: 'Projects', component: { template: '' } },
   { path: '/projects/:id', name: 'ProjectDetail', component: ProjectDetailView },
-  { path: '/tasks', name: 'Task Board', component: { template: '' } },
+  { path: '/tasks', name: 'Task Board', component: TaskBoardView },
   { path: '/agents', name: 'Agents', component: AgentsIndexView },
   { path: '/models', name: 'Models', component: { template: '' } },
   { path: '/activity', name: 'Activity', component: { template: '' } },

frontend/src/stores/tasks.ts

@@ -1,9 +1,10 @@
 /**
- * Task Store – V2 Dashboard
+ * Task Store – V2 Dashboard + Task Board
  *
- * Fetches tasks from /api/dashboard/tasks and maps them into
- * TaskItem[] format for the TaskStrip component.
+ * Fetches tasks from /api/dashboard/tasks and /api/dashboard/tasks/board
+ * and maps them into TaskItem[] format for the TaskStrip component.
  *
+ * Board state: grouped by column (offen, inProgress, review, done, blocked)
  * Auto-refresh: every 30 seconds.
  */
 import { defineStore } from 'pinia'
@@ -24,6 +25,14 @@ interface DashboardTaskDto {
   updatedAt: string
 }
 
+export interface BoardGroup {
+  offen: DashboardTaskDto[]
+  inProgress: DashboardTaskDto[]
+  review: DashboardTaskDto[]
+  done: DashboardTaskDto[]
+  blocked: DashboardTaskDto[]
+}
+
 /* ── State Mapping ────────────────────────────────── */
 
 function mapPriority(priority: string): TaskItem['priority'] {
@@ -67,6 +76,18 @@ export const useTaskStore = defineStore('tasks', {
     loading: false,
     error: null as string | null,
     refreshInterval: null as ReturnType<typeof setInterval> | null,
+    boardRefreshInterval: null as ReturnType<typeof setInterval> | null,
+
+    // Board state
+    board: {
+      offen: [] as DashboardTaskDto[],
+      inProgress: [] as DashboardTaskDto[],
+      review: [] as DashboardTaskDto[],
+      done: [] as DashboardTaskDto[],
+      blocked: [] as DashboardTaskDto[],
+    } as BoardGroup,
+    boardLoading: false,
+    boardError: null as string | null,
   }),
 
   getters: {
@@ -74,7 +95,7 @@ export const useTaskStore = defineStore('tasks', {
   },
 
   actions: {
-    /* ── API: Fetch tasks ───────────────────────── */
+    /* ── API: Fetch tasks (for TaskStrip) ─────────── */
     async fetchTasks() {
       this.loading = true
       try {
@@ -91,7 +112,97 @@ export const useTaskStore = defineStore('tasks', {
       }
     },
 
-    /* ── API: Add task ──────────────────────────── */
+    /* ── API: Fetch board (for TaskBoardView) ─────── */
+    async fetchBoard() {
+      this.boardLoading = true
+      try {
+        const res = await apiFetch('/api/dashboard/tasks/board')
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        const data: BoardGroup = await res.json()
+        this.board = data
+        this.boardError = null
+      } catch (err) {
+        console.warn('[TaskStore] fetchBoard failed', err)
+        this.boardError = 'Board could not be loaded'
+      } finally {
+        this.boardLoading = false
+      }
+    },
+
+    /* ── API: Move task (Drag & Drop) ─────────────── */
+    async moveTask(id: string, newState: string) {
+      // Map board group key to canonical state string for the API payload
+      const canonicalMap: Record<string, string> = {
+        offen: 'Backlog',
+        inProgress: 'In progress',
+        review: 'Review',
+        done: 'Done',
+        blocked: 'Blocked',
+      }
+
+      // Save previous state for rollback
+      const prevBoard = JSON.parse(JSON.stringify(this.board)) as BoardGroup
+
+      // Optimistic: find the task in current board and move it
+      const findAndRemove = (arr: DashboardTaskDto[]): DashboardTaskDto | null => {
+        const idx = arr.findIndex(t => t.id === id)
+        if (idx === -1) return null
+        return arr.splice(idx, 1)[0]
+      }
+
+      const task =
+        findAndRemove(this.board.offen) ??
+        findAndRemove(this.board.inProgress) ??
+        findAndRemove(this.board.review) ??
+        findAndRemove(this.board.blocked) ??
+        findAndRemove(this.board.done)
+
+      if (task) {
+        const canonicalState = canonicalMap[newState] ?? newState
+        task.state = canonicalState
+        const targetKey = newState as keyof BoardGroup
+        if (this.board[targetKey]) {
+          this.board[targetKey].push(task)
+        }
+      }
+
+      // Actually call API with the board group key (backend handles mapping)
+      try {
+        const res = await apiFetch(`/api/dashboard/tasks/${id}/move`, {
+          method: 'PATCH',
+          body: JSON.stringify({ state: newState }),
+        })
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      } catch (err) {
+        console.warn('[TaskStore] moveTask failed, rolling back', err)
+        this.board = prevBoard
+      }
+    },
+
+    /* ── API: Create task ─────────────────────────── */
+    async createTask(data: { title: string; detail?: string | null; priority?: string; assignedTo?: string }) {
+      try {
+        const res = await apiFetch('/api/dashboard/tasks', {
+          method: 'POST',
+          body: JSON.stringify({
+            title: data.title,
+            detail: data.detail ?? null,
+            priority: data.priority ?? 'Medium',
+            assignedTo: data.assignedTo ?? 'bao',
+            source: 'bao',
+          }),
+        })
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        // Refresh board + task list
+        await this.fetchBoard()
+        await this.fetchTasks()
+      } catch (err) {
+        console.warn('[TaskStore] createTask failed', err)
+        throw err
+      }
+    },
+
+    /* ── API: Add task (for TaskStrip) ────────────── */
     async addTask(title: string, detail?: string, priority?: string, assignedTo?: string) {
       try {
         const res = await apiFetch('/api/dashboard/tasks', {
@@ -112,7 +223,7 @@ export const useTaskStore = defineStore('tasks', {
       }
     },
 
-    /* ── API: Update task ───────────────────────── */
+    /* ── API: Update task ─────────────────────────── */
     async updateTask(id: string, updates: { title?: string; detail?: string; priority?: string; assignedTo?: string }) {
       try {
         const res = await apiFetch(`/api/dashboard/tasks/${id}`, {
@@ -121,12 +232,13 @@ export const useTaskStore = defineStore('tasks', {
         })
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         await this.fetchTasks()
+        await this.fetchBoard()
       } catch (err) {
         console.warn('[TaskStore] updateTask failed', err)
       }
     },
 
-    /* ── Polling ─────────────────────────────────── */
+    /* ── Polling ──────────────────────────────────── */
     startPolling() {
       if (this.refreshInterval) return
       this.fetchTasks()
@@ -141,5 +253,20 @@ export const useTaskStore = defineStore('tasks', {
         this.refreshInterval = null
       }
     },
+
+    startBoardPolling() {
+      if (this.boardRefreshInterval) return
+      this.fetchBoard()
+      this.boardRefreshInterval = setInterval(() => {
+        this.fetchBoard()
+      }, 30000)
+    },
+
+    stopBoardPolling() {
+      if (this.boardRefreshInterval) {
+        clearInterval(this.boardRefreshInterval)
+        this.boardRefreshInterval = null
+      }
+    },
   },
 })

frontend/src/views/TaskBoardView.vue

@@ -0,0 +1,787 @@
+<script setup lang="ts">
+/**
+ * TaskBoardView – Linear-style Kanban Board
+ *
+ * 4 columns: Offen, In Bearbeitung, Review, Erledigt
+ * HTML5 Drag & Drop (no external lib)
+ */
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useTaskStore } from '../stores/tasks'
+import { Plus } from '@lucide/vue'
+
+const taskStore = useTaskStore()
+const showCreateModal = ref(false)
+const dragOverColumn = ref<string | null>(null)
+
+/* ── Create Task Form ───────────────────────────── */
+const formTitle = ref('')
+const formDetail = ref('')
+const formPriority = ref('Medium')
+const formAssignedTo = ref('bao')
+const formSubmitting = ref(false)
+const formError = ref('')
+
+function resetForm() {
+  formTitle.value = ''
+  formDetail.value = ''
+  formPriority.value = 'Medium'
+  formAssignedTo.value = 'bao'
+  formError.value = ''
+}
+
+async function handleCreateTask() {
+  if (!formTitle.value.trim()) {
+    formError.value = 'Titel ist erforderlich'
+    return
+  }
+  formSubmitting.value = true
+  formError.value = ''
+  try {
+    await taskStore.createTask({
+      title: formTitle.value.trim(),
+      detail: formDetail.value.trim() || null,
+      priority: formPriority.value,
+      assignedTo: formAssignedTo.value,
+    })
+    showCreateModal.value = false
+    resetForm()
+  } catch (err) {
+    formError.value = 'Fehler beim Erstellen der Aufgabe'
+  } finally {
+    formSubmitting.value = false
+  }
+}
+
+/* ── Drag & Drop ────────────────────────────────── */
+const draggedTaskId = ref<string | null>(null)
+
+function onDragStart(e: DragEvent, taskId: string) {
+  if (!e.dataTransfer) return
+  draggedTaskId.value = taskId
+  e.dataTransfer.effectAllowed = 'move'
+  e.dataTransfer.setData('text/plain', taskId)
+  const el = e.target as HTMLElement
+  el.classList.add('dragging')
+}
+
+function onDragEnd(e: DragEvent) {
+  draggedTaskId.value = null
+  dragOverColumn.value = null
+  const el = e.target as HTMLElement
+  el.classList.remove('dragging')
+}
+
+function onDragOver(e: DragEvent, column: string) {
+  e.preventDefault()
+  if (!e.dataTransfer) return
+  e.dataTransfer.dropEffect = 'move'
+  dragOverColumn.value = column
+}
+
+function onDragLeave(_e: DragEvent) {
+  dragOverColumn.value = null
+}
+
+async function onDrop(e: DragEvent, targetState: string) {
+  e.preventDefault()
+  dragOverColumn.value = null
+  const taskId = e.dataTransfer?.getData('text/plain')
+  if (!taskId) return
+
+  await taskStore.moveTask(taskId, targetState)
+}
+
+/* ── Helpers ──────────────────────────────────────── */
+function priorityLabel(p: string): string {
+  const lower = p.toLowerCase()
+  if (lower === 'high') return 'High'
+  if (lower === 'low') return 'Low'
+  return 'Med'
+}
+
+function priorityColor(p: string): string {
+  const lower = p.toLowerCase()
+  if (lower === 'high') return '#f87171'
+  if (lower === 'low') return '#60a5fa'
+  return '#facc15'
+}
+
+/* ── Lifecycle ────────────────────────────────────── */
+onMounted(() => {
+  taskStore.startBoardPolling()
+})
+
+onUnmounted(() => {
+  taskStore.stopBoardPolling()
+})
+</script>
+
+<template>
+  <div class="board-wrap">
+    <!-- Header -->
+    <div class="board-header">
+      <div>
+        <h1>Aufgaben</h1>
+        <p class="board-subtitle">Task Board — Übersicht aller Arbeitspakete</p>
+      </div>
+      <button class="create-btn" @click="showCreateModal = true">
+        <Plus :size="16" />
+        Neue Aufgabe
+      </button>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="taskStore.boardLoading" class="board-loading">
+      <div class="spinner"></div>
+      <span>Lade Aufgaben…</span>
+    </div>
+
+    <!-- Board columns -->
+    <div v-else class="board-columns">
+      <!-- Offen / Backlog -->
+      <div
+        class="col"
+        :class="{ 'drag-over': dragOverColumn === 'offen' }"
+        @dragover="onDragOver($event, 'offen')"
+        @dragleave="onDragLeave"
+        @drop="onDrop($event, 'offen')"
+      >
+        <div class="col-header" style="--col-accent: var(--st-queue)">
+          <span class="col-name">Offen</span>
+          <span class="col-count">{{ taskStore.board.offen.length }}</span>
+        </div>
+        <div class="col-cards">
+          <div
+            v-for="task in taskStore.board.offen"
+            :key="task.id"
+            class="card"
+            draggable="true"
+            @dragstart="onDragStart($event, task.id)"
+            @dragend="onDragEnd"
+          >
+            <div class="card-top">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+                {{ priorityLabel(task.priority) }}
+              </span>
+              <span
+                v-if="task.assignedTo"
+                class="assignee"
+                :class="task.assignedTo === 'iris' ? 'assignee-iris' : 'assignee-bao'"
+              >
+                {{ task.assignedTo === 'iris' ? '🤖 Iris' : '👤 Bao' }}
+              </span>
+            </div>
+            <div class="card-title">{{ task.title }}</div>
+            <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
+          </div>
+          <div v-if="!taskStore.board.offen.length" class="empty-col">Keine Aufgaben</div>
+        </div>
+      </div>
+
+      <!-- In Bearbeitung / InProgress -->
+      <div
+        class="col"
+        :class="{ 'drag-over': dragOverColumn === 'inProgress' }"
+        @dragover="onDragOver($event, 'inProgress')"
+        @dragleave="onDragLeave"
+        @drop="onDrop($event, 'inProgress')"
+      >
+        <div class="col-header" style="--col-accent: #60a5fa">
+          <span class="col-name">In Bearbeitung</span>
+          <span class="col-count">{{ taskStore.board.inProgress.length }}</span>
+        </div>
+        <div class="col-cards">
+          <div
+            v-for="task in taskStore.board.inProgress"
+            :key="task.id"
+            class="card"
+            draggable="true"
+            @dragstart="onDragStart($event, task.id)"
+            @dragend="onDragEnd"
+          >
+            <div class="card-top">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+                {{ priorityLabel(task.priority) }}
+              </span>
+              <span
+                v-if="task.assignedTo"
+                class="assignee"
+                :class="task.assignedTo === 'iris' ? 'assignee-iris' : 'assignee-bao'"
+              >
+                {{ task.assignedTo === 'iris' ? '🤖 Iris' : '👤 Bao' }}
+              </span>
+            </div>
+            <div class="card-title">{{ task.title }}</div>
+            <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
+          </div>
+          <div v-if="!taskStore.board.inProgress.length" class="empty-col">Keine Aufgaben</div>
+        </div>
+      </div>
+
+      <!-- Review -->
+      <div
+        class="col"
+        :class="{ 'drag-over': dragOverColumn === 'review' }"
+        @dragover="onDragOver($event, 'review')"
+        @dragleave="onDragLeave"
+        @drop="onDrop($event, 'review')"
+      >
+        <div class="col-header" style="--col-accent: #fb923c">
+          <span class="col-name">Review</span>
+          <span class="col-count">{{ taskStore.board.review.length }}</span>
+        </div>
+        <div class="col-cards">
+          <div
+            v-for="task in taskStore.board.review"
+            :key="task.id"
+            class="card"
+            draggable="true"
+            @dragstart="onDragStart($event, task.id)"
+            @dragend="onDragEnd"
+          >
+            <div class="card-top">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+                {{ priorityLabel(task.priority) }}
+              </span>
+              <span
+                v-if="task.assignedTo"
+                class="assignee"
+                :class="task.assignedTo === 'iris' ? 'assignee-iris' : 'assignee-bao'"
+              >
+                {{ task.assignedTo === 'iris' ? '🤖 Iris' : '👤 Bao' }}
+              </span>
+            </div>
+            <div class="card-title">{{ task.title }}</div>
+            <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
+          </div>
+          <div v-if="!taskStore.board.review.length" class="empty-col">Keine Aufgaben</div>
+        </div>
+      </div>
+
+      <!-- Erledigt / Done -->
+      <div
+        class="col"
+        :class="{ 'drag-over': dragOverColumn === 'done' }"
+        @dragover="onDragOver($event, 'done')"
+        @dragleave="onDragLeave"
+        @drop="onDrop($event, 'done')"
+      >
+        <div class="col-header" style="--col-accent: #4ade80">
+          <span class="col-name">Erledigt</span>
+          <span class="col-count">{{ taskStore.board.done.length }}</span>
+        </div>
+        <div class="col-cards">
+          <div
+            v-for="task in taskStore.board.done"
+            :key="task.id"
+            class="card"
+            draggable="true"
+            @dragstart="onDragStart($event, task.id)"
+            @dragend="onDragEnd"
+          >
+            <div class="card-top">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+                {{ priorityLabel(task.priority) }}
+              </span>
+              <span
+                v-if="task.assignedTo"
+                class="assignee"
+                :class="task.assignedTo === 'iris' ? 'assignee-iris' : 'assignee-bao'"
+              >
+                {{ task.assignedTo === 'iris' ? '🤖 Iris' : '👤 Bao' }}
+              </span>
+            </div>
+            <div class="card-title">{{ task.title }}</div>
+            <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
+          </div>
+          <div v-if="!taskStore.board.done.length" class="empty-col">Keine Aufgaben</div>
+        </div>
+      </div>
+
+      <!-- Blocked column (collapsed/small) -->
+      <div
+        class="col col-blocked"
+        :class="{ 'drag-over': dragOverColumn === 'blocked' }"
+        @dragover="onDragOver($event, 'blocked')"
+        @dragleave="onDragLeave"
+        @drop="onDrop($event, 'blocked')"
+      >
+        <div class="col-header" style="--col-accent: #f87171">
+          <span class="col-name">Blockiert</span>
+          <span class="col-count">{{ taskStore.board.blocked.length }}</span>
+        </div>
+        <div class="col-cards">
+          <div
+            v-for="task in taskStore.board.blocked"
+            :key="task.id"
+            class="card card-blocked"
+            draggable="true"
+            @dragstart="onDragStart($event, task.id)"
+            @dragend="onDragEnd"
+          >
+            <div class="card-top">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+                {{ priorityLabel(task.priority) }}
+              </span>
+              <span
+                v-if="task.assignedTo"
+                class="assignee"
+                :class="task.assignedTo === 'iris' ? 'assignee-iris' : 'assignee-bao'"
+              >
+                {{ task.assignedTo === 'iris' ? '🤖 Iris' : '👤 Bao' }}
+              </span>
+            </div>
+            <div class="card-title">{{ task.title }}</div>
+            <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
+          </div>
+          <div v-if="!taskStore.board.blocked.length" class="empty-col">Keine Blockierer</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Task Modal -->
+    <Teleport to="body">
+      <div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2>Neue Aufgabe</h2>
+            <button class="modal-close" @click="showCreateModal = false">&times;</button>
+          </div>
+          <form @submit.prevent="handleCreateTask" class="modal-form">
+            <div class="field">
+              <label for="task-title">Titel *</label>
+              <input
+                id="task-title"
+                v-model="formTitle"
+                type="text"
+                class="field-input"
+                placeholder="Aufgabe beschreiben…"
+              />
+            </div>
+            <div class="field">
+              <label for="task-detail">Beschreibung</label>
+              <textarea
+                id="task-detail"
+                v-model="formDetail"
+                class="field-input field-textarea"
+                placeholder="Details zur Aufgabe…"
+                rows="3"
+              ></textarea>
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="task-priority">Priorität</label>
+                <select id="task-priority" v-model="formPriority" class="field-input field-select">
+                  <option value="High">High</option>
+                  <option value="Medium">Medium</option>
+                  <option value="Low">Low</option>
+                </select>
+              </div>
+              <div class="field">
+                <label for="task-assignee">Zugewiesen an</label>
+                <select id="task-assignee" v-model="formAssignedTo" class="field-input field-select">
+                  <option value="bao">👤 Bao</option>
+                  <option value="iris">🤖 Iris</option>
+                </select>
+              </div>
+            </div>
+            <p v-if="formError" class="form-error">{{ formError }}</p>
+            <div class="modal-actions">
+              <button type="button" class="btn-cancel" @click="showCreateModal = false">Abbrechen</button>
+              <button type="submit" class="btn-submit" :disabled="formSubmitting">
+                {{ formSubmitting ? 'Erstelle…' : 'Aufgabe erstellen' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.board-wrap {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.board-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.board-header h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--nx-text);
+}
+
+.board-subtitle {
+  margin: 4px 0 0;
+  font-size: 11px;
+  color: var(--nx-text-dim);
+}
+
+.create-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: none;
+  border-radius: 8px;
+  background: var(--nx-accent);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity .15s;
+  flex-shrink: 0;
+}
+
+.create-btn:hover {
+  opacity: .85;
+}
+
+.board-loading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 40px;
+  color: var(--nx-text-dim);
+  font-size: 13px;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--nx-line);
+  border-top-color: var(--nx-accent);
+  border-radius: 50%;
+  animation: spin .6s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.board-columns {
+  display: flex;
+  gap: 14px;
+  flex: 1;
+  overflow-x: auto;
+  padding-bottom: 20px;
+  min-height: calc(100vh - 200px);
+}
+
+.col {
+  flex: 1;
+  min-width: 240px;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  background: var(--glass);
+  border: 1px solid var(--nx-line);
+  border-radius: 12px;
+  padding: 12px;
+  transition: border-color .15s, background .15s;
+}
+
+.col.drag-over {
+  border-color: var(--nx-accent);
+  background: color-mix(in srgb, var(--nx-accent) 8%, transparent);
+}
+
+.col-blocked {
+  max-width: 240px;
+}
+
+.col-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--nx-line);
+}
+
+.col-name {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--col-accent);
+}
+
+.col-count {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: 10px;
+  background: var(--glass);
+  color: var(--col-accent);
+  border: 1px solid var(--nx-line);
+}
+
+.col-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+/* ── Cards ── */
+.card {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--glass);
+  border: 1px solid var(--nx-line);
+  cursor: grab;
+  transition: transform .12s, box-shadow .12s, opacity .15s;
+}
+
+.card:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0,0,0,.15);
+}
+
+.card.dragging {
+  opacity: .4;
+}
+
+.card-blocked {
+  border-left: 3px solid #f87171;
+}
+
+.card-top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.prio-badge {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.assignee {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.assignee-iris {
+  background: rgba(147, 51, 234, .12);
+  color: #c084fc;
+}
+
+.assignee-bao {
+  background: rgba(59, 130, 246, .12);
+  color: #60a5fa;
+}
+
+.card-title {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--nx-text);
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.card-meta {
+  font-size: 10px;
+  color: var(--nx-text-dim);
+  margin-top: 5px;
+}
+
+.empty-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 12px;
+  font-size: 11px;
+  color: var(--nx-text-dim);
+  font-style: italic;
+}
+
+/* ── Modal ── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,.55);
+  backdrop-filter: blur(4px);
+}
+
+.modal-content {
+  width: 100%;
+  max-width: 460px;
+  background: var(--space-1);
+  border: 1px solid var(--nx-line);
+  border-radius: 14px;
+  padding: 24px;
+  box-shadow: 0 12px 40px rgba(0,0,0,.3);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--nx-text);
+}
+
+.modal-close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--nx-text-dim);
+  font-size: 20px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background .15s;
+}
+
+.modal-close:hover {
+  background: var(--glass);
+}
+
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex: 1;
+}
+
+.field label {
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--nx-text-dim);
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+
+.field-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--nx-line);
+  border-radius: 6px;
+  background: var(--glass);
+  color: var(--nx-text);
+  font-size: 13px;
+  outline: none;
+  transition: border-color .15s;
+  box-sizing: border-box;
+}
+
+.field-input:focus {
+  border-color: var(--nx-accent);
+}
+
+.field-textarea {
+  resize: vertical;
+  min-height: 60px;
+  font-family: inherit;
+}
+
+.field-select {
+  cursor: pointer;
+}
+
+.field-row {
+  display: flex;
+  gap: 12px;
+}
+
+.form-error {
+  color: #f87171;
+  font-size: 11px;
+  margin: 0;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.btn-cancel {
+  padding: 7px 14px;
+  border: 1px solid var(--nx-line);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--nx-text-dim);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background .15s;
+}
+
+.btn-cancel:hover {
+  background: var(--glass);
+}
+
+.btn-submit {
+  padding: 7px 16px;
+  border: none;
+  border-radius: 6px;
+  background: var(--nx-accent);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity .15s;
+}
+
+.btn-submit:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.btn-submit:not(:disabled):hover {
+  opacity: .85;
+}
+
+/* ── Responsive ── */
+@media (max-width: 860px) {
+  .board-columns {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+  }
+
+  .col {
+    min-width: 260px;
+  }
+}
+</style>