olly-molly 0.1.0

package/components/kanban/KanbanColumn.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableTicket } from './SortableTicket';
+
+interface Ticket {
+    id: string;
+    title: string;
+    description?: string | null;
+    status: string;
+    priority: string;
+    assignee?: {
+        id: string;
+        name: string;
+        avatar?: string | null;
+        role: string;
+        system_prompt: string;
+    } | null;
+}
+
+interface KanbanColumnProps {
+    id: string;
+    title: string;
+    tickets: Ticket[];
+    color: string;
+    icon: string;
+    onTicketClick: (ticket: Ticket) => void;
+    runningTicketIds?: string[];
+}
+
+export function KanbanColumn({ id, title, tickets, color, icon, onTicketClick, runningTicketIds = [] }: KanbanColumnProps) {
+    const { setNodeRef, isOver } = useDroppable({ id });
+
+    return (
+        <div
+            ref={setNodeRef}
+            className={`
+                flex-1 min-w-[260px]
+                flex flex-col max-h-[calc(100vh-180px)]
+                border-r border-[var(--border-primary)] last:border-r-0
+                transition-colors duration-150
+                ${isOver ? 'bg-[var(--bg-secondary)]' : 'bg-transparent'}
+            `}
+        >
+            {/* Column Header */}
+            <div className="px-4 py-3 border-b border-[var(--border-primary)]">
+                <div className="flex items-center gap-2">
+                    <span className="text-sm">{icon}</span>
+                    <h3 className={`text-xs font-medium uppercase tracking-wider ${color}`}>
+                        {title}
+                    </h3>
+                    <span className="ml-auto text-xs text-[var(--text-muted)]">
+                        {tickets.length}
+                    </span>
+                </div>
+            </div>
+
+            {/* Tickets */}
+            <div className="flex-1 overflow-y-auto">
+                <SortableContext items={tickets.map(t => t.id)} strategy={verticalListSortingStrategy}>
+                    {tickets.map((ticket) => (
+                        <SortableTicket
+                            key={ticket.id}
+                            ticket={ticket}
+                            onTicketClick={onTicketClick}
+                            isRunning={runningTicketIds.includes(ticket.id)}
+                        />
+                    ))}
+                </SortableContext>
+
+                {tickets.length === 0 && (
+                    <div className="flex items-center justify-center py-12 text-[var(--text-muted)] text-xs">
+                        No tickets
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/components/kanban/SortableTicket.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { TicketCard } from './TicketCard';
+
+interface Ticket {
+    id: string;
+    title: string;
+    description?: string | null;
+    status: string;
+    priority: string;
+    assignee?: {
+        id: string;
+        name: string;
+        avatar?: string | null;
+        role: string;
+        system_prompt: string;
+    } | null;
+}
+
+interface SortableTicketProps {
+    ticket: Ticket;
+    onTicketClick: (ticket: Ticket) => void;
+    isRunning?: boolean;
+}
+
+export function SortableTicket({ ticket, onTicketClick, isRunning }: SortableTicketProps) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id: ticket.id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            {...attributes}
+            {...listeners}
+        >
+            <TicketCard
+                ticket={ticket}
+                onClick={() => !isDragging && onTicketClick(ticket)}
+                isDragging={isDragging}
+                isRunning={isRunning}
+            />
+        </div>
+    );
+}

package/components/kanban/TicketCard.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { Avatar } from '@/components/ui/Avatar';
+import { PriorityBadge } from '@/components/ui/Badge';
+
+interface Ticket {
+    id: string;
+    title: string;
+    description?: string | null;
+    status: string;
+    priority: string;
+    assignee?: {
+        id: string;
+        name: string;
+        avatar?: string | null;
+        role: string;
+        system_prompt: string;
+    } | null;
+}
+
+interface TicketCardProps {
+    ticket: Ticket;
+    onClick: () => void;
+    isDragging?: boolean;
+    isRunning?: boolean;
+}
+
+export function TicketCard({ ticket, onClick, isDragging, isRunning }: TicketCardProps) {
+    const roleImages: Record<string, string> = {
+        PM: '/profiles/pm.png',
+        FE_DEV: '/profiles/dev-frontend.png',
+        BACKEND_DEV: '/profiles/dev-backend.png',
+        QA: '/profiles/qa.png',
+    };
+
+    const profileImage = ticket.assignee ? roleImages[ticket.assignee.role] : undefined;
+
+    return (
+        <div
+            onClick={onClick}
+            className={`
+                px-4 py-3 border-b border-[var(--border-primary)] cursor-pointer
+                transition-colors duration-150
+                hover:bg-[var(--bg-secondary)]
+                ${isDragging ? 'opacity-50 bg-[var(--bg-secondary)]' : ''}
+                ${isRunning ? 'bg-[var(--status-progress)]/30' : ''}
+            `}
+        >
+            <div className="flex items-start gap-3">
+                {/* Left: Assignee Avatar */}
+                <div className="flex-shrink-0 pt-0.5">
+                    {ticket.assignee ? (
+                        <Avatar
+                            name={ticket.assignee.name}
+                            src={profileImage}
+                            emoji={!profileImage ? ticket.assignee.avatar : undefined}
+                            badge={profileImage ? ticket.assignee.avatar : undefined}
+                            size="sm"
+                        />
+                    ) : (
+                        <div className="w-6 h-6 border border-dashed border-[var(--border-secondary)] flex items-center justify-center text-[var(--text-muted)] text-xs">
+                            ?
+                        </div>
+                    )}
+                </div>
+
+                {/* Right: Content */}
+                <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-2">
+                        <h4 className="text-sm text-[var(--text-primary)] line-clamp-2 leading-snug">
+                            {isRunning && (
+                                <span className="inline-block w-1.5 h-1.5 bg-[var(--status-progress-text)] rounded-full gentle-pulse mr-1.5 align-middle" />
+                            )}
+                            {ticket.title}
+                        </h4>
+                        <PriorityBadge priority={ticket.priority} />
+                    </div>
+
+                    {ticket.description && (
+                        <p className="text-xs text-[var(--text-muted)] mt-1 line-clamp-1">
+                            {ticket.description}
+                        </p>
+                    )}
+
+                    {(ticket.assignee || isRunning) && (
+                        <p className="text-xs text-[var(--text-muted)] mt-1.5">
+                            {isRunning ? (
+                                <span className="text-[var(--status-progress-text)]">Working...</span>
+                            ) : (
+                                ticket.assignee?.name
+                            )}
+                        </p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}