feat: reapply kanban task board on top of upstream v1.0.0

- 5-column kanban board: Backlog → Todo → In Progress → Review → Done
- Drag-and-drop, create/edit tasks, priority, assignees, tags
- Tasks link in sidebar nav
- Kanban proxy route in vite.config.ts for /api/hermes-tasks

src/hooks/use-gateway-caps.ts

@@ -0,0 +1,31 @@
+/**
+ * Reactive capability hook — reads from the /api/gateway-status query.
+ * Use this instead of the synchronous isFeatureAvailable() in React components.
+ * Returns null while loading (use to show a spinner), false if unavailable,
+ * true if available.
+ */
+import { useQuery } from '@tanstack/react-query'
+
+interface GatewayStatus {
+  capabilities: Record<string, boolean>
+  hermesUrl: string
+}
+
+function useGatewayStatus() {
+  return useQuery<GatewayStatus>({
+    queryKey: ['gateway-status'],
+    queryFn: async () => {
+      const res = await fetch('/api/gateway-status')
+      if (!res.ok) throw new Error('gateway-status fetch failed')
+      return res.json()
+    },
+    staleTime: 60_000,
+    refetchInterval: 60_000,
+  })
+}
+
+export function useIsFeatureAvailable(feature: string): boolean | null {
+  const { data, isLoading } = useGatewayStatus()
+  if (isLoading || !data) return null
+  return data.capabilities[feature] === true
+}

src/lib/tasks-api.ts

@@ -0,0 +1,144 @@
+const BASE = '/api/hermes-tasks'
+
+export type TaskColumn = 'backlog' | 'todo' | 'in_progress' | 'review' | 'done'
+export type TaskPriority = 'high' | 'medium' | 'low'
+
+export type HermesTask = {
+  id: string
+  title: string
+  description: string
+  column: TaskColumn
+  priority: TaskPriority
+  assignee: string | null
+  tags: Array<string>
+  due_date: string | null
+  position: number
+  created_by: string
+  created_at: string
+  updated_at: string
+}
+
+export type CreateTaskInput = {
+  title: string
+  description?: string
+  column?: TaskColumn
+  priority?: TaskPriority
+  assignee?: string | null
+  tags?: Array<string>
+  due_date?: string | null
+  created_by?: string
+}
+
+export type UpdateTaskInput = Partial<Omit<CreateTaskInput, 'created_by'>>
+
+export type TaskAssignee = {
+  id: string
+  label: string
+  isHuman: boolean
+}
+
+export type AssigneesResponse = {
+  assignees: Array<TaskAssignee>
+  humanReviewer: string | null
+}
+
+export async function fetchAssignees(): Promise<AssigneesResponse> {
+  const res = await fetch('/api/hermes-tasks-assignees')
+  if (!res.ok) return { assignees: [], humanReviewer: null }
+  return res.json()
+}
+
+export async function fetchTasks(params?: {
+  column?: TaskColumn
+  assignee?: string
+  priority?: TaskPriority
+  include_done?: boolean
+}): Promise<Array<HermesTask>> {
+  const q = new URLSearchParams()
+  if (params?.column) q.set('column', params.column)
+  if (params?.assignee) q.set('assignee', params.assignee)
+  if (params?.priority) q.set('priority', params.priority)
+  if (params?.include_done) q.set('include_done', 'true')
+  const url = q.toString() ? `${BASE}?${q}` : BASE
+  const res = await fetch(url)
+  if (!res.ok) throw new Error(`Failed to fetch tasks: ${res.status}`)
+  const data = await res.json()
+  return data.tasks ?? []
+}
+
+export async function createTask(input: CreateTaskInput): Promise<HermesTask> {
+  const res = await fetch(BASE, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input),
+  })
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.detail || `Failed to create task: ${res.status}`)
+  }
+  return (await res.json()).task
+}
+
+export async function updateTask(taskId: string, input: UpdateTaskInput): Promise<HermesTask> {
+  const res = await fetch(`${BASE}/${taskId}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input),
+  })
+  if (!res.ok) throw new Error(`Failed to update task: ${res.status}`)
+  return (await res.json()).task
+}
+
+export async function deleteTask(taskId: string): Promise<void> {
+  const res = await fetch(`${BASE}/${taskId}`, { method: 'DELETE' })
+  if (!res.ok) throw new Error(`Failed to delete task: ${res.status}`)
+}
+
+export async function moveTask(taskId: string, column: TaskColumn, movedBy = 'user'): Promise<HermesTask> {
+  const res = await fetch(`${BASE}/${taskId}?action=move`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ column, moved_by: movedBy }),
+  })
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.detail || `Failed to move task: ${res.status}`)
+  }
+  return (await res.json()).task
+}
+
+export const COLUMN_LABELS: Record<TaskColumn, string> = {
+  backlog: 'Backlog',
+  todo: 'Todo',
+  in_progress: 'In Progress',
+  review: 'Review',
+  done: 'Done',
+}
+
+export const COLUMN_ORDER: Array<TaskColumn> = ['backlog', 'todo', 'in_progress', 'review', 'done']
+
+export const PRIORITY_COLORS: Record<TaskPriority, string> = {
+  high: '#ef4444',
+  medium: '#f97316',
+  low: '#6b7280',
+}
+
+export const COLUMN_COLORS: Record<TaskColumn, string> = {
+  backlog: '#6b7280',
+  todo: '#3b82f6',
+  in_progress: '#f97316',
+  review: '#a855f7',
+  done: '#22c55e',
+}
+
+export function isOverdue(task: HermesTask): boolean {
+  if (!task.due_date) return false
+  // Parse YYYY-MM-DD manually to avoid UTC-vs-local offset issues.
+  // new Date("2026-04-02") parses as UTC midnight, which in EST is the
+  // previous evening — causing everything to appear one day early.
+  const [year, month, day] = task.due_date.split('-').map(Number)
+  const due = new Date(year, month - 1, day) // local midnight
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  return due < today
+}

src/routes/api/hermes-tasks-assignees.ts

@@ -0,0 +1,83 @@
+/**
+ * Proxy endpoint — returns available task assignees.
+ * Reads agent profiles from the Hermes gateway and combines with the
+ * configured human reviewer name (tasks.human_reviewer in config.yaml).
+ * Falls back to profile directory listing if the gateway doesn't have
+ * a /api/tasks/assignees endpoint.
+ */
+import { createFileRoute } from '@tanstack/react-router'
+import { isAuthenticated } from '../../server/auth-middleware'
+import { HERMES_API } from '../../server/gateway-capabilities'
+import fs from 'node:fs'
+import path from 'node:path'
+import os from 'node:os'
+import YAML from 'yaml'
+
+const HERMES_HOME = process.env.HERMES_HOME ?? path.join(os.homedir(), '.hermes')
+const CONFIG_PATH = path.join(HERMES_HOME, 'config.yaml')
+const PROFILES_PATH = path.join(os.homedir(), '.hermes', 'profiles')
+
+function readConfig(): Record<string, unknown> {
+  try {
+    return (YAML.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')) as Record<string, unknown>) ?? {}
+  } catch {
+    return {}
+  }
+}
+
+function getProfileNames(): string[] {
+  try {
+    return fs.readdirSync(PROFILES_PATH).filter(name => {
+      try {
+        return fs.statSync(path.join(PROFILES_PATH, name)).isDirectory()
+      } catch {
+        return false
+      }
+    })
+  } catch {
+    return []
+  }
+}
+
+export const Route = createFileRoute('/api/hermes-tasks-assignees')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        if (!isAuthenticated(request)) {
+          return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 })
+        }
+
+        // Try gateway first — it may have a richer endpoint
+        try {
+          const res = await fetch(`${HERMES_API}/api/tasks/assignees`, {
+            signal: AbortSignal.timeout(2000),
+          })
+          if (res.ok) {
+            return new Response(await res.text(), {
+              status: 200,
+              headers: { 'Content-Type': 'application/json' },
+            })
+          }
+        } catch {
+          // fall through to local profile discovery
+        }
+
+        // Fall back: derive from profile directories + config
+        const config = readConfig()
+        const tasksConfig = (config.tasks ?? {}) as Record<string, unknown>
+        const humanReviewer = (tasksConfig.human_reviewer as string) || null
+        const profiles = getProfileNames()
+
+        const assignees = profiles.map(id => ({ id, label: id, isHuman: id === humanReviewer }))
+        if (humanReviewer && !profiles.includes(humanReviewer)) {
+          assignees.unshift({ id: humanReviewer, label: humanReviewer, isHuman: true })
+        }
+
+        return new Response(
+          JSON.stringify({ assignees, humanReviewer }),
+          { status: 200, headers: { 'Content-Type': 'application/json' } },
+        )
+      },
+    },
+  },
+})

src/routes/api/hermes-tasks.$taskId.ts

@@ -0,0 +1,51 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { isAuthenticated } from '../../server/auth-middleware'
+import { HERMES_API, ensureGatewayProbed, getCapabilities } from '../../server/gateway-capabilities'
+
+export const Route = createFileRoute('/api/hermes-tasks/$taskId')({
+  server: {
+    handlers: {
+      GET: async ({ request, params }) => {
+        if (!isAuthenticated(request)) {
+          return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 })
+        }
+        await ensureGatewayProbed()
+        const res = await fetch(`${HERMES_API}/api/tasks/${params.taskId}`)
+        return new Response(await res.text(), { status: res.status, headers: { 'Content-Type': 'application/json' } })
+      },
+      PATCH: async ({ request, params }) => {
+        if (!isAuthenticated(request)) {
+          return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 })
+        }
+        const body = await request.text()
+        const res = await fetch(`${HERMES_API}/api/tasks/${params.taskId}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body,
+        })
+        return new Response(await res.text(), { status: res.status, headers: { 'Content-Type': 'application/json' } })
+      },
+      DELETE: async ({ request, params }) => {
+        if (!isAuthenticated(request)) {
+          return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 })
+        }
+        const res = await fetch(`${HERMES_API}/api/tasks/${params.taskId}`, { method: 'DELETE' })
+        return new Response(await res.text(), { status: res.status, headers: { 'Content-Type': 'application/json' } })
+      },
+      POST: async ({ request, params }) => {
+        if (!isAuthenticated(request)) {
+          return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 })
+        }
+        const url = new URL(request.url)
+        const action = url.searchParams.get('action') || 'move'
+        const body = await request.text()
+        const res = await fetch(`${HERMES_API}/api/tasks/${params.taskId}/${action}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body,
+        })
+        return new Response(await res.text(), { status: res.status, headers: { 'Content-Type': 'application/json' } })
+      },
+    },
+  },
+})

src/routes/api/hermes-tasks.ts

@@ -0,0 +1,32 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { isAuthenticated } from '../../server/auth-middleware'
+import { HERMES_API } from '../../server/gateway-capabilities'
+
+export const Route = createFileRoute('/api/hermes-tasks')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        if (!isAuthenticated(request)) {
+          return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 })
+        }
+        const url = new URL(request.url)
+        const params = url.searchParams.toString()
+        const target = `${HERMES_API}/api/tasks${params ? `?${params}` : ''}`
+        const res = await fetch(target)
+        return new Response(res.body, { status: res.status, headers: { 'Content-Type': 'application/json' } })
+      },
+      POST: async ({ request }) => {
+        if (!isAuthenticated(request)) {
+          return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 })
+        }
+        const body = await request.text()
+        const res = await fetch(`${HERMES_API}/api/tasks`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body,
+        })
+        return new Response(await res.text(), { status: res.status, headers: { 'Content-Type': 'application/json' } })
+      },
+    },
+  },
+})

src/routes/tasks.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+import { usePageTitle } from '@/hooks/use-page-title'
+import { TasksScreen } from '@/screens/tasks/tasks-screen'
+
+const searchSchema = z.object({
+  assignee: z.string().optional(),
+})
+
+export const Route = createFileRoute('/tasks')({
+  ssr: false,
+  validateSearch: searchSchema,
+  component: TasksRoute,
+})
+
+function TasksRoute() {
+  usePageTitle('Tasks')
+  return <TasksScreen />
+}

src/screens/tasks/task-card.tsx

@@ -0,0 +1,94 @@
+import { cn } from '@/lib/utils'
+import type { HermesTask } from '@/lib/tasks-api'
+import { PRIORITY_COLORS, isOverdue } from '@/lib/tasks-api'
+
+type Props = {
+  task: HermesTask
+  assigneeLabels?: Record<string, string>
+  onClick: () => void
+  onDragStart: (e: React.DragEvent) => void
+  isDragging?: boolean
+}
+
+export function TaskCard({ task, assigneeLabels = {}, onClick, onDragStart, isDragging }: Props) {
+  const overdue = isOverdue(task)
+  const priorityColor = PRIORITY_COLORS[task.priority]
+  const visibleTags = task.tags.slice(0, 2)
+  const extraTagCount = task.tags.length - 2
+  const assigneeLabel = task.assignee
+    ? (assigneeLabels[task.assignee] ?? task.assignee)
+    : null
+
+  return (
+    <div
+      draggable
+      onDragStart={onDragStart}
+      onClick={onClick}
+      className={cn(
+        'relative rounded-lg border p-3 cursor-pointer transition-all select-none',
+        'bg-[var(--theme-card)] border-[var(--theme-border)]',
+        'hover:border-[var(--theme-accent)]',
+        isDragging ? 'opacity-40 rotate-1 shadow-2xl' : 'hover:shadow-[0_4px_16px_rgba(0,0,0,0.35)]',
+      )}
+      style={{ borderLeftWidth: 3, borderLeftColor: priorityColor }}
+    >
+      {/* Priority dot in top-right */}
+      <span
+        className="absolute top-2.5 right-2.5 w-2 h-2 rounded-full shrink-0"
+        style={{ background: priorityColor }}
+        title={`Priority: ${task.priority}`}
+      />
+
+      <p className="text-sm font-medium text-[var(--theme-text)] leading-snug mb-1 line-clamp-2 pr-4">
+        {task.title}
+      </p>
+
+      {task.description && (
+        <p className="text-xs text-[var(--theme-muted)] line-clamp-2 mb-2">
+          {task.description}
+        </p>
+      )}
+
+      <div className="flex items-center justify-between gap-2 mt-2 flex-wrap">
+        <div className="flex items-center gap-1.5 flex-wrap">
+          {assigneeLabel && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-[var(--theme-hover)] text-[var(--theme-muted)]">
+              {assigneeLabel}
+            </span>
+          )}
+          {visibleTags.map((tag) => (
+            <span
+              key={tag}
+              className="text-[10px] px-1.5 py-0.5 rounded-md bg-[var(--theme-hover)] text-[var(--theme-muted)]"
+            >
+              {tag}
+            </span>
+          ))}
+          {extraTagCount > 0 && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-[var(--theme-hover)] text-[var(--theme-muted)]">
+              +{extraTagCount} more
+            </span>
+          )}
+        </div>
+
+        {task.due_date && (
+          <div className="flex items-center gap-1 text-[10px] tabular-nums">
+            {overdue && (
+              <>
+                <span className="w-1.5 h-1.5 rounded-full bg-red-400 shrink-0" />
+                <span className="text-red-400 font-semibold">Overdue</span>
+                <span className="text-[var(--theme-muted)] mx-0.5">·</span>
+              </>
+            )}
+            <span className={overdue ? 'text-red-400 font-semibold' : 'text-[var(--theme-muted)]'}>
+              {(() => {
+                const [y, m, d] = task.due_date!.split('-').map(Number)
+                return new Date(y, m - 1, d).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+              })()}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

src/screens/tasks/task-dialog.tsx

@@ -0,0 +1,208 @@
+import { useEffect, useState } from 'react'
+import {
+  DialogContent,
+  DialogRoot,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import type { HermesTask, CreateTaskInput, TaskColumn, TaskPriority, TaskAssignee } from '@/lib/tasks-api'
+import { COLUMN_LABELS, COLUMN_ORDER } from '@/lib/tasks-api'
+
+type Props = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  task?: HermesTask | null
+  defaultColumn?: TaskColumn
+  assignees: Array<TaskAssignee>
+  onSubmit: (input: CreateTaskInput) => Promise<void>
+  isSubmitting: boolean
+}
+
+export function TaskDialog({ open, onOpenChange, task, defaultColumn, assignees, onSubmit, isSubmitting }: Props) {
+  const isEdit = Boolean(task)
+
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [column, setColumn] = useState<TaskColumn>(defaultColumn ?? 'backlog')
+  const [priority, setPriority] = useState<TaskPriority>('medium')
+  const [assignee, setAssignee] = useState<string>('')
+  const [tags, setTags] = useState('')
+  const [dueDate, setDueDate] = useState('')
+
+  useEffect(() => {
+    if (task) {
+      setTitle(task.title)
+      setDescription(task.description)
+      setColumn(task.column)
+      setPriority(task.priority)
+      setAssignee(task.assignee ?? '')
+      setTags(task.tags.join(', '))
+      setDueDate(task.due_date ?? '')
+    } else {
+      setTitle('')
+      setDescription('')
+      setColumn(defaultColumn ?? 'backlog')
+      setPriority('medium')
+      setAssignee('')
+      setTags('')
+      setDueDate('')
+    }
+  }, [task, open, defaultColumn])
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!title.trim()) return
+    await onSubmit({
+      title: title.trim(),
+      description: description.trim(),
+      column,
+      priority,
+      assignee: assignee || null,
+      tags: tags.split(',').map(t => t.trim()).filter(Boolean),
+      due_date: dueDate || null,
+    })
+  }
+
+  const inputClass = cn(
+    'w-full rounded-lg border px-3 py-2 text-sm',
+    'bg-[var(--theme-input)] border-[var(--theme-border)] text-[var(--theme-text)]',
+    'focus:outline-none focus:ring-1 focus:ring-[var(--theme-accent)]',
+    'placeholder:text-[var(--theme-muted)]',
+  )
+
+  const labelClass = 'block text-xs font-medium text-[var(--theme-muted)] mb-1'
+
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[min(520px,95vw)] border-[var(--theme-border)] bg-[var(--theme-bg)] overflow-hidden">
+        {/* Accent top border */}
+        <div className="h-[3px] w-full" style={{ background: 'var(--theme-accent)' }} />
+
+        <div className="p-5">
+          <DialogTitle className="text-base font-semibold text-[var(--theme-text)] mb-1">
+            {isEdit ? 'Edit Task' : 'New Task'}
+          </DialogTitle>
+          <DialogDescription className="text-xs text-[var(--theme-muted)] mb-4">
+            {isEdit ? 'Update the task details below.' : 'Fill in the details for your new task.'}
+          </DialogDescription>
+
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <div>
+              <label className={labelClass}>Title *</label>
+              <input
+                className={inputClass}
+                value={title}
+                onChange={e => setTitle(e.target.value)}
+                placeholder="What needs to be done?"
+                required
+                autoFocus
+              />
+            </div>
+
+            <div>
+              <label className={labelClass}>Description</label>
+              <textarea
+                className={cn(inputClass, 'resize-none')}
+                rows={3}
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+                placeholder="Optional details..."
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className={labelClass}>Column</label>
+                <select
+                  className={inputClass}
+                  style={{ colorScheme: 'dark' }}
+                  value={column}
+                  onChange={e => setColumn(e.target.value as TaskColumn)}
+                >
+                  {COLUMN_ORDER.map(col => (
+                    <option key={col} value={col}>{COLUMN_LABELS[col]}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className={labelClass}>Priority</label>
+                <select
+                  className={inputClass}
+                  style={{ colorScheme: 'dark' }}
+                  value={priority}
+                  onChange={e => setPriority(e.target.value as TaskPriority)}
+                >
+                  <option value="high">High</option>
+                  <option value="medium">Medium</option>
+                  <option value="low">Low</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className={labelClass}>Assignee</label>
+                <select
+                  className={inputClass}
+                  style={{ colorScheme: 'dark' }}
+                  value={assignee}
+                  onChange={e => setAssignee(e.target.value)}
+                >
+                  <option value="">Unassigned</option>
+                  {assignees.map(({ id, label }) => (
+                    <option key={id} value={id}>{label}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className={labelClass}>Due Date</label>
+                <input
+                  type="date"
+                  className={inputClass}
+                  style={{ colorScheme: 'dark' }}
+                  value={dueDate}
+                  onChange={e => setDueDate(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className={labelClass}>Tags (comma-separated)</label>
+              <input
+                className={inputClass}
+                value={tags}
+                onChange={e => setTags(e.target.value)}
+                placeholder="frontend, bug, research"
+              />
+            </div>
+
+            <div className="flex items-center justify-between pt-2">
+              <p className="text-[10px] text-[var(--theme-muted)]">Press Esc to cancel</p>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onOpenChange(false)}
+                  disabled={isSubmitting}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  size="sm"
+                  disabled={isSubmitting || !title.trim()}
+                  style={{ background: 'var(--theme-accent)', color: 'white' }}
+                >
+                  {isSubmitting ? 'Saving...' : isEdit ? 'Save Changes' : 'Create Task'}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </DialogContent>
+    </DialogRoot>
+  )
+}

src/screens/tasks/tasks-screen.tsx

@@ -0,0 +1,356 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import { useSearch } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { AnimatePresence, motion } from 'motion/react'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { Add01Icon, CheckListIcon, RefreshIcon } from '@hugeicons/core-free-icons'
+import { TaskCard } from './task-card'
+import { TaskDialog } from './task-dialog'
+import { toast } from '@/components/ui/toast'
+import { cn } from '@/lib/utils'
+import {
+  fetchTasks,
+  fetchAssignees,
+  createTask,
+  updateTask,
+  deleteTask,
+  moveTask,
+  COLUMN_LABELS,
+  COLUMN_ORDER,
+  COLUMN_COLORS,
+  isOverdue,
+} from '@/lib/tasks-api'
+import type { HermesTask, TaskColumn, CreateTaskInput, TaskAssignee } from '@/lib/tasks-api'
+
+const QUERY_KEY = ['hermes', 'tasks'] as const
+const ASSIGNEES_KEY = ['hermes', 'tasks', 'assignees'] as const
+
+function SkeletonCard() {
+  return (
+    <div className="rounded-lg border border-[var(--theme-border)] bg-[var(--theme-card)] p-3 animate-pulse">
+      <div className="h-3.5 bg-[var(--theme-hover)] rounded w-3/4 mb-2" />
+      <div className="h-2.5 bg-[var(--theme-hover)] rounded w-full mb-1" />
+      <div className="h-2.5 bg-[var(--theme-hover)] rounded w-2/3 mb-3" />
+      <div className="flex gap-1.5">
+        <div className="h-4 w-12 bg-[var(--theme-hover)] rounded" />
+        <div className="h-4 w-10 bg-[var(--theme-hover)] rounded" />
+      </div>
+    </div>
+  )
+}
+
+export function TasksScreen() {
+  const queryClient = useQueryClient()
+  const [showCreate, setShowCreate] = useState(false)
+  const [createColumn, setCreateColumn] = useState<TaskColumn>('backlog')
+  const [editingTask, setEditingTask] = useState<HermesTask | null>(null)
+  const [draggingId, setDraggingId] = useState<string | null>(null)
+  const [dragOverColumn, setDragOverColumn] = useState<TaskColumn | null>(null)
+  const [showDone, setShowDone] = useState(false)
+
+  const search = useSearch({ from: '/tasks' })
+  const initialAssignee = typeof search.assignee === 'string' ? search.assignee : null
+  const [assigneeFilter, setAssigneeFilter] = useState<string | null>(initialAssignee)
+
+  const tasksQuery = useQuery({
+    queryKey: [...QUERY_KEY, showDone],
+    queryFn: () => fetchTasks({ include_done: showDone }),
+    refetchInterval: 30_000,
+  })
+
+  // Load assignees dynamically from profiles + config
+  const assigneesQuery = useQuery({
+    queryKey: ASSIGNEES_KEY,
+    queryFn: fetchAssignees,
+    staleTime: 5 * 60_000, // profiles don't change often
+  })
+
+  const assignees: Array<TaskAssignee> = assigneesQuery.data?.assignees ?? []
+  const humanReviewer = assigneesQuery.data?.humanReviewer ?? null
+
+  // Build a label map from dynamic assignees for TaskCard display
+  const assigneeLabels = useMemo(() => {
+    const map: Record<string, string> = {}
+    for (const a of assignees) map[a.id] = a.label
+    return map
+  }, [assignees])
+
+  const tasks = tasksQuery.data ?? []
+
+  const tasksByColumn = useMemo(() => {
+    const map: Record<TaskColumn, Array<HermesTask>> = {
+      backlog: [], todo: [], in_progress: [], review: [], done: [],
+    }
+    for (const t of tasks) {
+      if (assigneeFilter && t.assignee !== assigneeFilter) continue
+      if (map[t.column]) map[t.column].push(t)
+    }
+    for (const col of COLUMN_ORDER) {
+      map[col].sort((a, b) => a.position - b.position)
+    }
+    return map
+  }, [tasks, assigneeFilter])
+
+  const stats = useMemo(() => {
+    const total = tasks.length
+    const inProgress = tasks.filter(t => t.column === 'in_progress').length
+    const done = tasks.filter(t => t.column === 'done').length
+    const overdue = tasks.filter(t => isOverdue(t) && t.column !== 'done').length
+    const completion = total > 0 ? Math.round((done / total) * 100) : 0
+    return { total, inProgress, done, overdue, completion }
+  }, [tasks])
+
+  const invalidate = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: QUERY_KEY })
+  }, [queryClient])
+
+  const createMutation = useMutation({
+    mutationFn: createTask,
+    onSuccess: () => { invalidate(); toast('Task created'); setShowCreate(false) },
+    onError: (e) => toast(e instanceof Error ? e.message : 'Failed to create task', { type: 'error' }),
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, input }: { id: string; input: CreateTaskInput }) => updateTask(id, input),
+    onSuccess: () => { invalidate(); toast('Task updated'); setEditingTask(null) },
+    onError: (e) => toast(e instanceof Error ? e.message : 'Failed to update task', { type: 'error' }),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteTask,
+    onSuccess: () => { invalidate(); toast('Task deleted') },
+    onError: (e) => toast(e instanceof Error ? e.message : 'Failed to delete task', { type: 'error' }),
+  })
+
+  const moveMutation = useMutation({
+    mutationFn: ({ id, column }: { id: string; column: TaskColumn }) => moveTask(id, column, 'user'),
+    onSuccess: () => invalidate(),
+    onError: (e) => toast(e instanceof Error ? e.message : 'Failed to move task', { type: 'error' }),
+  })
+
+  function handleDragStart(e: React.DragEvent, taskId: string) {
+    e.dataTransfer.setData('text/plain', taskId)
+    setDraggingId(taskId)
+  }
+
+  function handleDragOver(e: React.DragEvent, col: TaskColumn) {
+    e.preventDefault()
+    setDragOverColumn(col)
+  }
+
+  function handleDrop(e: React.DragEvent, targetColumn: TaskColumn) {
+    e.preventDefault()
+    const taskId = e.dataTransfer.getData('text/plain')
+    const task = tasks.find(t => t.id === taskId)
+    if (!task || task.column === targetColumn) {
+      setDraggingId(null)
+      setDragOverColumn(null)
+      return
+    }
+    // Hybrid autonomy: if a human reviewer is configured, only they can move
+    // tasks into the 'done' column — agents may move to 'review' at most.
+    if (targetColumn === 'done' && humanReviewer) {
+      toast(`Only ${humanReviewer} can mark tasks as done`, { type: 'error' })
+      setDraggingId(null)
+      setDragOverColumn(null)
+      return
+    }
+    moveMutation.mutate({ id: taskId, column: targetColumn })
+    setDraggingId(null)
+    setDragOverColumn(null)
+  }
+
+  function handleDragEnd() {
+    setDraggingId(null)
+    setDragOverColumn(null)
+  }
+
+  const visibleColumns = showDone ? COLUMN_ORDER : COLUMN_ORDER.filter(c => c !== 'done')
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-[var(--theme-border)] px-4 py-3 shrink-0">
+        <div className="flex items-center gap-3 min-w-0">
+          <h1 className="text-base font-semibold text-[var(--theme-text)] shrink-0">Tasks</h1>
+          {assigneeFilter && (
+            <div className="flex items-center gap-2 text-xs text-[var(--theme-muted)]">
+              <span>Filtered by: <span className="capitalize" style={{ color: '#f59e0b' }}>{assigneeFilter}</span></span>
+              <button
+                type="button"
+                onClick={() => setAssigneeFilter(null)}
+                className="text-[var(--theme-muted)] hover:text-[var(--theme-text)] transition-colors"
+              >
+                ✕ Clear
+              </button>
+            </div>
+          )}
+          {/* Stats */}
+          <div className="flex items-center gap-2 text-xs text-[var(--theme-muted)] flex-wrap">
+            <span>{stats.total} total</span>
+            <span className="hidden sm:inline">·</span>
+            <span className="hidden sm:inline">{stats.inProgress} in progress</span>
+            {stats.overdue > 0 && (
+              <>
+                <span>·</span>
+                <span className="text-red-400">{stats.overdue} overdue</span>
+              </>
+            )}
+            <span className="hidden sm:inline">·</span>
+            <span className="hidden sm:inline">{stats.completion}% done</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            onClick={() => setShowDone(v => !v)}
+            className={cn(
+              'text-xs px-2.5 py-1 rounded-lg border transition-colors',
+              showDone
+                ? 'border-[var(--theme-accent)] text-[var(--theme-accent)] bg-[var(--theme-hover)]'
+                : 'border-[var(--theme-border)] text-[var(--theme-muted)] hover:text-[var(--theme-text)] hover:border-[var(--theme-accent)]',
+            )}
+          >
+            {showDone ? 'Hide Done' : 'Show Done'}
+          </button>
+          <button
+            onClick={invalidate}
+            className="rounded-lg p-1.5 transition-colors hover:bg-[var(--theme-hover)]"
+            title="Refresh"
+          >
+            <HugeiconsIcon icon={RefreshIcon} size={16} className="text-[var(--theme-muted)]" />
+          </button>
+          <button
+            onClick={() => { setCreateColumn('backlog'); setShowCreate(true) }}
+            className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-white transition-opacity hover:opacity-90"
+            style={{ background: 'var(--theme-accent)' }}
+          >
+            <HugeiconsIcon icon={Add01Icon} size={14} />
+            New Task
+          </button>
+        </div>
+      </div>
+
+      {/* Board */}
+      <div
+        className="flex flex-1 gap-3 overflow-x-auto overflow-y-hidden p-4 min-h-0"
+        style={{ boxShadow: 'inset 0 8px 24px rgba(0,0,0,0.2)' }}
+      >
+        {visibleColumns.map((col) => {
+          const colTasks = tasksByColumn[col]
+          const colColor = COLUMN_COLORS[col]
+          const isDragOver = dragOverColumn === col
+
+          return (
+            <div
+              key={col}
+              className={cn(
+                'flex flex-col rounded-xl border min-w-[240px] w-[280px] shrink-0',
+                'bg-[var(--theme-card)] border-[var(--theme-border)]',
+                'transition-colors shadow-[0_2px_12px_rgba(0,0,0,0.25)]',
+                isDragOver && 'border-[var(--theme-accent)] bg-[var(--theme-hover)]',
+              )}
+              onDragOver={e => handleDragOver(e, col)}
+              onDrop={e => handleDrop(e, col)}
+              onDragLeave={() => setDragOverColumn(null)}
+            >
+              {/* Column header */}
+              <div
+                className="flex items-center justify-between px-3 py-2.5 border-b border-[var(--theme-border)] rounded-t-xl"
+                style={{ borderTopWidth: 2, borderTopColor: colColor, borderTopStyle: 'solid' }}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full shrink-0" style={{ background: colColor }} />
+                  <span className="text-xs font-semibold text-[var(--theme-text)]">
+                    {COLUMN_LABELS[col]}
+                  </span>
+                  <span className="text-xs text-[var(--theme-muted)]">
+                    ({tasksQuery.isLoading ? '…' : colTasks.length})
+                  </span>
+                </div>
+                <button
+                  onClick={() => { setCreateColumn(col); setShowCreate(true) }}
+                  className="rounded p-0.5 hover:bg-[var(--theme-hover)] transition-colors"
+                  title={`Add to ${COLUMN_LABELS[col]}`}
+                >
+                  <HugeiconsIcon icon={Add01Icon} size={14} className="text-[var(--theme-muted)]" />
+                </button>
+              </div>
+
+              {/* Cards */}
+              <div className="flex flex-col gap-2 p-2 flex-1 overflow-y-auto">
+                {tasksQuery.isLoading ? (
+                  <>
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                  </>
+                ) : (
+                  <AnimatePresence initial={false}>
+                    {colTasks.length === 0 ? (
+                      <motion.div
+                        key="empty"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="flex flex-col items-center justify-center py-8 gap-2 text-[var(--theme-muted)] opacity-60"
+                      >
+                        <HugeiconsIcon icon={CheckListIcon} size={22} />
+                        <p className="text-xs font-medium">No tasks</p>
+                        <p className="text-[10px]">Drop here or click + to add</p>
+                      </motion.div>
+                    ) : (
+                      colTasks.map(task => (
+                        <motion.div
+                          key={task.id}
+                          layout
+                          initial={{ opacity: 0, y: 6 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0, y: -6 }}
+                          onDragEnd={handleDragEnd}
+                        >
+                          <TaskCard
+                            task={task}
+                            assigneeLabels={assigneeLabels}
+                            isDragging={draggingId === task.id}
+                            onDragStart={e => handleDragStart(e, task.id)}
+                            onClick={() => setEditingTask(task)}
+                          />
+                        </motion.div>
+                      ))
+                    )}
+                  </AnimatePresence>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Create dialog */}
+      <TaskDialog
+        open={showCreate}
+        onOpenChange={setShowCreate}
+        defaultColumn={createColumn}
+        assignees={assignees}
+        isSubmitting={createMutation.isPending}
+        onSubmit={async (input) => { await createMutation.mutateAsync(input) }}
+      />
+
+      {/* Edit dialog */}
+      <TaskDialog
+        open={editingTask !== null}
+        onOpenChange={(open) => { if (!open) setEditingTask(null) }}
+        task={editingTask}
+        assignees={assignees}
+        isSubmitting={updateMutation.isPending}
+        onSubmit={async (input) => {
+          if (!editingTask) return
+          await updateMutation.mutateAsync({ id: editingTask.id, input })
+        }}
+      />
+    </div>
+  )
+}

vite.config.ts

@@ -424,7 +424,13 @@ const config = defineConfig(({ mode, command }) => {
           ws: true,
           rewrite: (path) => path.replace(/^\/ws-hermes/, ''),
         },
-        // REST API proxy: API proxy for Hermes backend
+        // Kanban tasks proxy: frontend /api/hermes-tasks → webapi /api/tasks
+        '/api/hermes-tasks': {
+          target: proxyTarget,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api\/hermes-tasks/, '/api/tasks'),
+        },
+// REST API proxy: API proxy for Hermes backend
         '/api/hermes-proxy': {
           target: proxyTarget,
           changeOrigin: true,