clawport-ui 0.1.0

package/components/kanban/KanbanBoard.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { COLUMNS } from '@/lib/kanban/types'
+import type { KanbanTicket, TicketStatus } from '@/lib/kanban/types'
+import type { KanbanStore } from '@/lib/kanban/store'
+import { getTicketsByStatus } from '@/lib/kanban/store'
+import type { Agent } from '@/lib/types'
+import { KanbanColumn } from './KanbanColumn'
+import { TicketCard } from './TicketCard'
+
+interface KanbanBoardProps {
+  tickets: KanbanStore
+  agents: Agent[]
+  onTicketClick: (ticket: KanbanTicket) => void
+  onMoveTicket: (ticketId: string, status: TicketStatus) => void
+  onCreateTicket: () => void
+  isWorking?: (ticketId: string) => boolean
+  filterAgentId?: string | null
+}
+
+export function KanbanBoard({
+  tickets,
+  agents,
+  onTicketClick,
+  onMoveTicket,
+  onCreateTicket,
+  isWorking,
+  filterAgentId,
+}: KanbanBoardProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 'var(--space-3)',
+        height: '100%',
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        padding: 'var(--space-2) 0',
+        WebkitOverflowScrolling: 'touch',
+      }}
+    >
+      {COLUMNS.map((column) => {
+        const allColumnTickets = getTicketsByStatus(tickets, column.id)
+        const columnTickets = filterAgentId
+          ? allColumnTickets.filter((t) => t.assigneeId === filterAgentId)
+          : allColumnTickets
+
+        return (
+          <KanbanColumn
+            key={column.id}
+            column={column}
+            tickets={columnTickets}
+            agents={agents}
+            onTicketClick={onTicketClick}
+            onDrop={onMoveTicket}
+            onCreateTicket={column.id === 'backlog' ? onCreateTicket : undefined}
+            renderTicket={(ticket) => (
+              <TicketCard
+                ticket={ticket}
+                agent={agents.find((a) => a.id === ticket.assigneeId) ?? null}
+                onClick={() => onTicketClick(ticket)}
+                isWorking={isWorking?.(ticket.id)}
+              />
+            )}
+          />
+        )
+      })}
+    </div>
+  )
+}

package/components/kanban/KanbanColumn.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { useState } from 'react'
+import { Plus } from 'lucide-react'
+import type { KanbanColumn as KanbanColumnType, KanbanTicket, TicketStatus } from '@/lib/kanban/types'
+import type { Agent } from '@/lib/types'
+
+interface KanbanColumnProps {
+  column: KanbanColumnType
+  tickets: KanbanTicket[]
+  agents: Agent[]
+  onTicketClick: (ticket: KanbanTicket) => void
+  onDrop: (ticketId: string, status: TicketStatus) => void
+  onCreateTicket?: () => void
+  renderTicket: (ticket: KanbanTicket) => React.ReactNode
+}
+
+export function KanbanColumn({
+  column,
+  tickets,
+  agents,
+  onTicketClick,
+  onDrop,
+  onCreateTicket,
+  renderTicket,
+}: KanbanColumnProps) {
+  const [isDragOver, setIsDragOver] = useState(false)
+
+  function handleDragOver(e: React.DragEvent) {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setIsDragOver(true)
+  }
+
+  function handleDragLeave(e: React.DragEvent) {
+    // Only set false when leaving the column itself, not a child
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDragOver(false)
+    }
+  }
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault()
+    setIsDragOver(false)
+    const ticketId = e.dataTransfer.getData('text/plain')
+    if (ticketId) {
+      onDrop(ticketId, column.id)
+    }
+  }
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 280,
+        maxWidth: 320,
+        flex: '1 0 280px',
+        height: '100%',
+        borderRadius: 'var(--radius-lg)',
+        background: isDragOver ? 'var(--fill-secondary)' : 'var(--fill-tertiary)',
+        border: isDragOver
+          ? '2px dashed var(--accent)'
+          : '2px dashed transparent',
+        transition: 'background 200ms var(--ease-smooth), border-color 200ms var(--ease-smooth)',
+      }}
+    >
+      {/* Column header */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: 'var(--space-3) var(--space-4)',
+          flexShrink: 0,
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          <span
+            style={{
+              fontSize: 'var(--text-footnote)',
+              fontWeight: 'var(--weight-semibold)',
+              color: 'var(--text-primary)',
+              letterSpacing: '-0.01em',
+            }}
+          >
+            {column.title}
+          </span>
+          <span
+            style={{
+              fontSize: 'var(--text-caption2)',
+              fontWeight: 'var(--weight-medium)',
+              color: 'var(--text-tertiary)',
+              background: 'var(--fill-secondary)',
+              borderRadius: 'var(--radius-sm)',
+              padding: '1px 6px',
+              minWidth: 20,
+              textAlign: 'center',
+            }}
+          >
+            {tickets.length}
+          </span>
+        </div>
+
+        {column.id === 'backlog' && onCreateTicket && (
+          <button
+            onClick={onCreateTicket}
+            className="focus-ring hover-bg"
+            aria-label="Create new ticket"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 24,
+              height: 24,
+              borderRadius: 'var(--radius-sm)',
+              border: 'none',
+              background: 'transparent',
+              color: 'var(--text-secondary)',
+              cursor: 'pointer',
+              padding: 0,
+              transition: 'color 150ms var(--ease-smooth)',
+            }}
+          >
+            <Plus size={16} />
+          </button>
+        )}
+      </div>
+
+      {/* Scrollable ticket area */}
+      <div
+        style={{
+          flex: 1,
+          overflowY: 'auto',
+          padding: '0 var(--space-2) var(--space-2)',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 'var(--space-2)',
+        }}
+      >
+        {tickets.map((ticket) => (
+          <div key={ticket.id}>
+            {renderTicket(ticket)}
+          </div>
+        ))}
+
+        {/* Empty state */}
+        {tickets.length === 0 && (
+          <div
+            style={{
+              padding: 'var(--space-8) var(--space-4)',
+              textAlign: 'center',
+              fontSize: 'var(--text-caption1)',
+              color: 'var(--text-tertiary)',
+            }}
+          >
+            No tickets
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/kanban/TicketCard.tsx

@@ -0,0 +1,245 @@
+'use client'
+
+import { useState } from 'react'
+import type { Agent } from '@/lib/types'
+import {
+  KanbanTicket,
+  PRIORITY_COLORS,
+  ROLE_LABELS,
+} from '@/lib/kanban/types'
+import { AgentAvatar } from '@/components/AgentAvatar'
+
+const PRIORITY_LABELS: Record<string, string> = {
+  low: 'Low',
+  medium: 'Med',
+  high: 'High',
+}
+
+function relativeTime(ts: number): string {
+  const diff = Date.now() - ts
+  const mins = Math.floor(diff / 60000)
+  if (mins < 1) return 'just now'
+  if (mins < 60) return `${mins}m ago`
+  const hrs = Math.floor(mins / 60)
+  if (hrs < 24) return `${hrs}h ago`
+  const days = Math.floor(hrs / 24)
+  if (days < 30) return `${days}d ago`
+  return `${Math.floor(days / 30)}mo ago`
+}
+
+interface TicketCardProps {
+  ticket: KanbanTicket
+  agent: Agent | null
+  onClick: () => void
+  isWorking?: boolean
+}
+
+export function TicketCard({ ticket, agent, onClick, isWorking }: TicketCardProps) {
+  const [isDragging, setIsDragging] = useState(false)
+
+  function handleDragStart(e: React.DragEvent<HTMLDivElement>) {
+    e.dataTransfer.setData('text/plain', ticket.id)
+    e.dataTransfer.effectAllowed = 'move'
+    setIsDragging(true)
+  }
+
+  function handleDragEnd() {
+    setIsDragging(false)
+  }
+
+  return (
+    <div
+      draggable
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onClick={onClick}
+      className="hover-lift focus-ring"
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onClick()
+        }
+      }}
+      style={{
+        background: 'var(--material-regular)',
+        borderRadius: 'var(--radius-md)',
+        padding: 'var(--space-3)',
+        cursor: isDragging ? 'grabbing' : 'grab',
+        opacity: isDragging ? 0.6 : 1,
+        border: '1px solid var(--separator)',
+        borderLeft: agent ? `3px solid ${agent.color}` : '1px solid var(--separator)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+        userSelect: 'none',
+        transition: 'opacity 150ms var(--ease-smooth)',
+      }}
+    >
+      {/* Agent row */}
+      {agent && (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--space-2)',
+          }}
+        >
+          <AgentAvatar agent={agent} size={28} borderRadius={8} />
+          <span
+            style={{
+              fontSize: 'var(--text-caption1)',
+              fontWeight: 600,
+              color: 'var(--text-secondary)',
+              lineHeight: 1.2,
+            }}
+          >
+            {agent.name}
+          </span>
+        </div>
+      )}
+
+      {/* Priority + Title */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: 'var(--space-2)',
+        }}
+      >
+        <span
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 3,
+            fontSize: 'var(--text-caption2)',
+            fontWeight: 600,
+            color: PRIORITY_COLORS[ticket.priority],
+            flexShrink: 0,
+            marginTop: 2,
+          }}
+        >
+          <span
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: '50%',
+              background: PRIORITY_COLORS[ticket.priority],
+            }}
+          />
+          {PRIORITY_LABELS[ticket.priority]}
+        </span>
+        <span
+          style={{
+            fontSize: 'var(--text-footnote)',
+            fontWeight: 'var(--weight-semibold)',
+            color: 'var(--text-primary)',
+            lineHeight: 1.3,
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            wordBreak: 'break-word',
+          }}
+        >
+          {ticket.title}
+        </span>
+      </div>
+
+      {/* Description preview */}
+      {ticket.description && (
+        <div
+          style={{
+            fontSize: 'var(--text-caption2)',
+            color: 'var(--text-tertiary)',
+            lineHeight: 1.4,
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            wordBreak: 'break-word',
+          }}
+        >
+          {ticket.description}
+        </div>
+      )}
+
+      {/* Bottom row: role badge + assignee + timestamp */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-2)',
+          flexWrap: 'wrap',
+        }}
+      >
+        {ticket.assigneeRole && (
+          <span
+            style={{
+              fontSize: 'var(--text-caption2)',
+              fontWeight: 'var(--weight-medium)',
+              color: 'var(--text-secondary)',
+              background: 'var(--fill-tertiary)',
+              borderRadius: 'var(--radius-sm)',
+              padding: '1px var(--space-2)',
+              lineHeight: 1.5,
+            }}
+          >
+            {ROLE_LABELS[ticket.assigneeRole]}
+          </span>
+        )}
+
+        <span
+          style={{
+            fontSize: 'var(--text-caption2)',
+            color: 'var(--text-quaternary)',
+            marginLeft: 'auto',
+          }}
+          title={new Date(ticket.createdAt).toLocaleString()}
+        >
+          {relativeTime(ticket.createdAt)}
+        </span>
+      </div>
+
+      {/* Work state indicators */}
+      {(ticket.workState === 'working' || isWorking) && (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--space-1)',
+            fontSize: 'var(--text-caption2)',
+            fontWeight: 600,
+            color: 'var(--system-orange)',
+            animation: 'pulse 2s ease-in-out infinite',
+          }}
+        >
+          <span style={{
+            width: 6,
+            height: 6,
+            borderRadius: '50%',
+            background: 'var(--system-orange)',
+            animation: 'pulse 2s ease-in-out infinite',
+          }} />
+          Working...
+        </div>
+      )}
+
+      {ticket.workState === 'failed' && (
+        <div
+          style={{
+            fontSize: 'var(--text-caption2)',
+            fontWeight: 600,
+            color: 'var(--system-red)',
+            background: 'color-mix(in srgb, var(--system-red) 10%, transparent)',
+            borderRadius: 'var(--radius-sm)',
+            padding: '1px var(--space-2)',
+          }}
+        >
+          Failed
+        </div>
+      )}
+    </div>
+  )
+}