feat: Linear-style Task Board mit Drag&Drop

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>