clawport-ui 0.1.0

package/components/kanban/AgentPicker.tsx

@@ -0,0 +1,321 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import type { Agent } from '@/lib/types'
+import { AgentAvatar } from '@/components/AgentAvatar'
+
+interface AgentPickerProps {
+  agents: Agent[]
+  value: string // agent id or ''
+  onChange: (agentId: string) => void
+}
+
+export function AgentPicker({ agents, value, onChange }: AgentPickerProps) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [highlightIdx, setHighlightIdx] = useState(0)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const searchRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const selected = agents.find(a => a.id === value) ?? null
+
+  // Filter agents by search
+  const filtered = search.trim()
+    ? agents.filter(a => {
+        const q = search.toLowerCase()
+        return (
+          a.name.toLowerCase().includes(q) ||
+          a.id.toLowerCase().includes(q) ||
+          a.title.toLowerCase().includes(q) ||
+          a.description.toLowerCase().includes(q)
+        )
+      })
+    : agents
+
+  // Include "Unassigned" option at the top
+  const hasUnassigned = !search.trim() || 'unassigned'.includes(search.toLowerCase())
+
+  // Reset highlight when filter changes
+  useEffect(() => {
+    setHighlightIdx(0)
+  }, [search])
+
+  // Focus search when opening
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => searchRef.current?.focus(), 0)
+    } else {
+      setSearch('')
+    }
+  }, [open])
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return
+    function handleClick(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (!open || !listRef.current) return
+    const items = listRef.current.querySelectorAll('[data-agent-option]')
+    const item = items[highlightIdx]
+    if (item) item.scrollIntoView({ block: 'nearest' })
+  }, [highlightIdx, open])
+
+  const totalOptions = (hasUnassigned ? 1 : 0) + filtered.length
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!open) {
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+        e.preventDefault()
+        setOpen(true)
+      }
+      return
+    }
+
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      setOpen(false)
+      return
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightIdx(i => Math.min(i + 1, totalOptions - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlightIdx(i => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      // Select the highlighted option
+      if (hasUnassigned && highlightIdx === 0) {
+        onChange('')
+      } else {
+        const agentIdx = hasUnassigned ? highlightIdx - 1 : highlightIdx
+        if (filtered[agentIdx]) {
+          onChange(filtered[agentIdx].id)
+        }
+      }
+      setOpen(false)
+    }
+  }, [open, highlightIdx, totalOptions, hasUnassigned, filtered, onChange])
+
+  function selectAgent(agentId: string) {
+    onChange(agentId)
+    setOpen(false)
+  }
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative' }} onKeyDown={handleKeyDown}>
+      {/* Trigger button */}
+      <button
+        type="button"
+        className="apple-input focus-ring"
+        onClick={() => setOpen(!open)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        style={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-2)',
+          padding: '8px 12px',
+          fontSize: 'var(--text-body)',
+          color: selected ? 'var(--text-primary)' : 'var(--text-tertiary)',
+          cursor: 'pointer',
+          textAlign: 'left',
+          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'right 12px center',
+          paddingRight: 36,
+          minHeight: 40,
+        }}
+      >
+        {selected ? (
+          <>
+            <AgentAvatar agent={selected} size={22} borderRadius={6} />
+            <span style={{ fontWeight: 'var(--weight-medium)' }}>{selected.name}</span>
+            <span style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+              {selected.title}
+            </span>
+          </>
+        ) : (
+          <span>Unassigned</span>
+        )}
+      </button>
+
+      {/* Dropdown */}
+      {open && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            marginTop: 4,
+            zIndex: 50,
+            background: 'var(--material-regular)',
+            border: '1px solid var(--separator)',
+            borderRadius: 'var(--radius-md)',
+            boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
+            overflow: 'hidden',
+          }}
+        >
+          {/* Search */}
+          <div style={{ padding: '8px 8px 4px' }}>
+            <input
+              ref={searchRef}
+              type="text"
+              placeholder="Search agents..."
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              className="focus-ring"
+              style={{
+                width: '100%',
+                padding: '6px 10px',
+                fontSize: 'var(--text-footnote)',
+                border: '1px solid var(--separator)',
+                borderRadius: 'var(--radius-sm)',
+                background: 'var(--fill-tertiary)',
+                color: 'var(--text-primary)',
+                outline: 'none',
+              }}
+            />
+          </div>
+
+          {/* Options list */}
+          <div
+            ref={listRef}
+            role="listbox"
+            style={{
+              maxHeight: 280,
+              overflowY: 'auto',
+              padding: '4px',
+            }}
+          >
+            {/* Unassigned option */}
+            {hasUnassigned && (
+              <div
+                data-agent-option
+                role="option"
+                aria-selected={value === ''}
+                onClick={() => selectAgent('')}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 'var(--space-2)',
+                  padding: '8px 10px',
+                  borderRadius: 'var(--radius-sm)',
+                  cursor: 'pointer',
+                  background: highlightIdx === 0 ? 'var(--fill-secondary)' : 'transparent',
+                  transition: 'background 100ms',
+                }}
+                onMouseEnter={() => setHighlightIdx(0)}
+              >
+                <div style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: 8,
+                  background: 'var(--fill-tertiary)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: 14,
+                  color: 'var(--text-tertiary)',
+                  flexShrink: 0,
+                }}>
+                  —
+                </div>
+                <div>
+                  <div style={{ fontSize: 'var(--text-footnote)', fontWeight: 'var(--weight-medium)', color: 'var(--text-secondary)' }}>
+                    Unassigned
+                  </div>
+                  <div style={{ fontSize: 'var(--text-caption2)', color: 'var(--text-tertiary)' }}>
+                    No agent assigned
+                  </div>
+                </div>
+                {value === '' && (
+                  <span style={{ marginLeft: 'auto', color: 'var(--accent)', fontSize: 13, flexShrink: 0 }}>&#10003;</span>
+                )}
+              </div>
+            )}
+
+            {/* Agent options */}
+            {filtered.map((agent, i) => {
+              const optionIdx = hasUnassigned ? i + 1 : i
+              const isHighlighted = highlightIdx === optionIdx
+              const isSelected = value === agent.id
+
+              return (
+                <div
+                  key={agent.id}
+                  data-agent-option
+                  role="option"
+                  aria-selected={isSelected}
+                  onClick={() => selectAgent(agent.id)}
+                  onMouseEnter={() => setHighlightIdx(optionIdx)}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 'var(--space-2)',
+                    padding: '8px 10px',
+                    borderRadius: 'var(--radius-sm)',
+                    cursor: 'pointer',
+                    background: isHighlighted ? 'var(--fill-secondary)' : 'transparent',
+                    transition: 'background 100ms',
+                  }}
+                >
+                  <AgentAvatar agent={agent} size={32} borderRadius={8} />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{
+                      fontSize: 'var(--text-footnote)',
+                      fontWeight: 'var(--weight-semibold)',
+                      color: 'var(--text-primary)',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}>
+                      {agent.name}
+                    </div>
+                    <div style={{
+                      fontSize: 'var(--text-caption2)',
+                      color: 'var(--text-tertiary)',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}>
+                      {agent.title}
+                    </div>
+                  </div>
+                  {isSelected && (
+                    <span style={{ color: 'var(--accent)', fontSize: 13, flexShrink: 0 }}>&#10003;</span>
+                  )}
+                </div>
+              )
+            })}
+
+            {/* No results */}
+            {filtered.length === 0 && !hasUnassigned && (
+              <div style={{
+                padding: 'var(--space-4)',
+                textAlign: 'center',
+                fontSize: 'var(--text-footnote)',
+                color: 'var(--text-tertiary)',
+              }}>
+                No agents match &ldquo;{search}&rdquo;
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/components/kanban/CreateTicketModal.tsx

@@ -0,0 +1,333 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { Plus } from 'lucide-react'
+import type { Agent } from '@/lib/types'
+import type { TicketPriority, TeamRole } from '@/lib/kanban/types'
+import { PRIORITY_COLORS, ROLE_LABELS } from '@/lib/kanban/types'
+import { AgentPicker } from '@/components/kanban/AgentPicker'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog'
+
+interface CreateTicketModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  agents: Agent[]
+  onSubmit: (ticket: {
+    title: string
+    description: string
+    priority: TicketPriority
+    assigneeId: string | null
+    assigneeRole: TeamRole | null
+  }) => void
+}
+
+const PRIORITIES: TicketPriority[] = ['low', 'medium', 'high']
+const PRIORITY_LABELS: Record<TicketPriority, string> = {
+  low: 'Low',
+  medium: 'Medium',
+  high: 'High',
+}
+
+const ROLES: TeamRole[] = ['lead-dev', 'ux-ui', 'qa']
+
+const initialState = {
+  title: '',
+  description: '',
+  priority: 'medium' as TicketPriority,
+  assigneeId: '' as string,
+  assigneeRole: null as TeamRole | null,
+}
+
+export function CreateTicketModal({
+  open,
+  onOpenChange,
+  agents,
+  onSubmit,
+}: CreateTicketModalProps) {
+  const [form, setForm] = useState(initialState)
+
+  const resetForm = useCallback(() => {
+    setForm(initialState)
+  }, [])
+
+  function handleOpenChange(next: boolean) {
+    if (!next) resetForm()
+    onOpenChange(next)
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!form.title.trim()) return
+
+    onSubmit({
+      title: form.title.trim(),
+      description: form.description.trim(),
+      priority: form.priority,
+      assigneeId: form.assigneeId || null,
+      assigneeRole: form.assigneeId ? form.assigneeRole : null,
+    })
+
+    resetForm()
+    onOpenChange(false)
+  }
+
+  const selectedAgent = agents.find((a) => a.id === form.assigneeId) ?? null
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton
+        style={{
+          background: 'var(--bg)',
+          border: '1px solid var(--separator)',
+          borderRadius: 'var(--radius-lg)',
+          boxShadow: 'var(--shadow-card)',
+          maxWidth: 480,
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle
+            style={{
+              fontSize: 'var(--text-title3)',
+              fontWeight: 'var(--weight-bold)',
+              color: 'var(--text-primary)',
+            }}
+          >
+            Create Ticket
+          </DialogTitle>
+          <DialogDescription
+            style={{
+              fontSize: 'var(--text-caption1)',
+              color: 'var(--text-tertiary)',
+            }}
+          >
+            Add a new ticket to the backlog.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form
+          onSubmit={handleSubmit}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--space-4)',
+          }}
+        >
+          {/* Title */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+            <label
+              htmlFor="ticket-title"
+              style={{
+                fontSize: 'var(--text-caption1)',
+                fontWeight: 'var(--weight-medium)',
+                color: 'var(--text-secondary)',
+              }}
+            >
+              Title
+            </label>
+            <input
+              id="ticket-title"
+              type="text"
+              className="apple-input focus-ring"
+              placeholder="What needs to be done?"
+              value={form.title}
+              onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+              required
+              autoFocus
+              style={{
+                fontSize: 'var(--text-body)',
+                color: 'var(--text-primary)',
+              }}
+            />
+          </div>
+
+          {/* Description */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+            <label
+              htmlFor="ticket-description"
+              style={{
+                fontSize: 'var(--text-caption1)',
+                fontWeight: 'var(--weight-medium)',
+                color: 'var(--text-secondary)',
+              }}
+            >
+              Description
+            </label>
+            <textarea
+              id="ticket-description"
+              className="apple-input focus-ring"
+              placeholder="Add details..."
+              rows={3}
+              value={form.description}
+              onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+              style={{
+                fontSize: 'var(--text-body)',
+                color: 'var(--text-primary)',
+                resize: 'vertical',
+                minHeight: 72,
+              }}
+            />
+          </div>
+
+          {/* Priority */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
+            <span
+              style={{
+                fontSize: 'var(--text-caption1)',
+                fontWeight: 'var(--weight-medium)',
+                color: 'var(--text-secondary)',
+              }}
+            >
+              Priority
+            </span>
+            <div style={{ display: 'flex', gap: 'var(--space-2)' }}>
+              {PRIORITIES.map((p) => {
+                const isSelected = form.priority === p
+                return (
+                  <button
+                    key={p}
+                    type="button"
+                    className="focus-ring"
+                    onClick={() => setForm((f) => ({ ...f, priority: p }))}
+                    style={{
+                      flex: 1,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      gap: 'var(--space-1)',
+                      padding: 'var(--space-2) var(--space-3)',
+                      borderRadius: 'var(--radius-md)',
+                      border: isSelected
+                        ? `2px solid ${PRIORITY_COLORS[p]}`
+                        : '2px solid var(--separator)',
+                      background: isSelected ? 'var(--fill-tertiary)' : 'transparent',
+                      cursor: 'pointer',
+                      fontSize: 'var(--text-caption1)',
+                      fontWeight: 'var(--weight-medium)',
+                      color: isSelected ? 'var(--text-primary)' : 'var(--text-tertiary)',
+                      transition: 'all 150ms var(--ease-smooth)',
+                    }}
+                  >
+                    <span
+                      style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: '50%',
+                        background: PRIORITY_COLORS[p],
+                        flexShrink: 0,
+                      }}
+                    />
+                    {PRIORITY_LABELS[p]}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Assignee */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+            <label
+              style={{
+                fontSize: 'var(--text-caption1)',
+                fontWeight: 'var(--weight-medium)',
+                color: 'var(--text-secondary)',
+              }}
+            >
+              Assignee
+            </label>
+            <AgentPicker
+              agents={agents}
+              value={form.assigneeId}
+              onChange={(agentId) =>
+                setForm((f) => ({
+                  ...f,
+                  assigneeId: agentId,
+                  assigneeRole: agentId ? f.assigneeRole : null,
+                }))
+              }
+            />
+          </div>
+
+          {/* Role (only shown when assignee is selected) */}
+          {form.assigneeId && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
+              <span
+                style={{
+                  fontSize: 'var(--text-caption1)',
+                  fontWeight: 'var(--weight-medium)',
+                  color: 'var(--text-secondary)',
+                }}
+              >
+                Role
+              </span>
+              <div style={{ display: 'flex', gap: 'var(--space-2)' }}>
+                {ROLES.map((r) => {
+                  const isSelected = form.assigneeRole === r
+                  return (
+                    <button
+                      key={r}
+                      type="button"
+                      className="focus-ring"
+                      onClick={() =>
+                        setForm((f) => ({
+                          ...f,
+                          assigneeRole: f.assigneeRole === r ? null : r,
+                        }))
+                      }
+                      style={{
+                        flex: 1,
+                        padding: 'var(--space-2) var(--space-3)',
+                        borderRadius: 'var(--radius-md)',
+                        border: isSelected
+                          ? '2px solid var(--accent)'
+                          : '2px solid var(--separator)',
+                        background: isSelected ? 'var(--accent-fill)' : 'transparent',
+                        cursor: 'pointer',
+                        fontSize: 'var(--text-caption2)',
+                        fontWeight: 'var(--weight-medium)',
+                        color: isSelected ? 'var(--text-primary)' : 'var(--text-tertiary)',
+                        transition: 'all 150ms var(--ease-smooth)',
+                        textAlign: 'center',
+                      }}
+                    >
+                      {ROLE_LABELS[r]}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Submit */}
+          <button
+            type="submit"
+            className="btn-primary focus-ring"
+            disabled={!form.title.trim()}
+            style={{
+              borderRadius: 'var(--radius-md)',
+              padding: '12px 20px',
+              width: '100%',
+              fontSize: 'var(--text-body)',
+              fontWeight: 'var(--weight-semibold)',
+              border: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 'var(--space-2)',
+              marginTop: 'var(--space-2)',
+            }}
+          >
+            <Plus size={16} />
+            Create Ticket
+          </button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}