@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/setlist/setlist-web/app/components/task-list/task-expanded-detail.tsx

@@ -0,0 +1,273 @@
+import * as React from 'react'
+import { useMatches } from 'react-router'
+import {
+  DatePicker as AriaDatePicker,
+  DateInput,
+  DateSegment,
+  Group,
+  Select as AriaSelect,
+  Button as AriaButton,
+  ListBoxItem,
+  Dialog,
+  I18nProvider
+} from 'react-aria-components'
+import { parseDate } from '@internationalized/date'
+import type { CalendarDate } from '@internationalized/date'
+import { Form } from '~/components/form'
+import { Button } from '~/components/button'
+import { Icon } from '~/components/icon'
+import { AlertDialog } from '~/components/alert-dialog'
+import { AnimatedPopover } from '~/components/helpers/animated-popover'
+import { FormFieldComponents } from '~/components/helpers/form-field'
+import { CustomCalendar } from '~/components/helpers/calendar-month-year-picker'
+import { useDeleteTask, useMoveTask, useEditTask } from '~/hooks/use-task-actions'
+import { useDismiss } from '~/utils/use-dismiss'
+import { dateFns, type Iso } from 'iso-fns'
+import type { TaskDetail } from './types'
+import { showToast } from '../toast'
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+interface AreaOption {
+  id: number
+  title: string
+}
+
+interface ProjectOption {
+  id: number
+  title: string
+  areaId: number | null
+}
+
+export interface TaskExpandedDetailProps {
+  task: TaskDetail
+  onClose: () => void
+}
+
+// ── TaskExpandedDetail ──────────────────────────────────────────────────────
+
+export function TaskExpandedDetail({ task, onClose }: TaskExpandedDetailProps) {
+  const deleteTask = useDeleteTask()
+  const moveTask = useMoveTask()
+  const editTask = useEditTask(task.id)
+  const formRef = React.useRef<HTMLFormElement>(null)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false)
+
+  const initScheduledDate = task.scheduledDate
+  const [notes, setNotes] = React.useState(task.notes ?? '')
+  const [scheduledDate, setScheduledDate] = React.useState<Iso.Date | null>(
+    typeof initScheduledDate === 'string'
+      ? (initScheduledDate.slice(0, 10) as Iso.Date)
+      : initScheduledDate instanceof Date
+        ? (initScheduledDate.toISOString().slice(0, 10) as Iso.Date)
+        : null
+  )
+  const [projectId, setProjectId] = React.useState<number | null>(task.projectId ?? null)
+  const [areaId, setAreaId] = React.useState<number | null>(task.areaId ?? null)
+
+  const matches = useMatches()
+  const rootData = matches.find((m) => m.id === 'root')?.data as
+    | { sidebar: { areas: AreaOption[]; projects: ProjectOption[] } | null }
+    | undefined
+  const areas = rootData?.sidebar?.areas ?? []
+  const projects = rootData?.sidebar?.projects ?? []
+
+  useDismiss(containerRef, onClose)
+
+  const calendarDate = React.useMemo(() => {
+    try {
+      return scheduledDate ? parseDate(scheduledDate) : null
+    } catch {
+      return null
+    }
+  }, [scheduledDate])
+
+  function handleCalendarDateChange(value: CalendarDate | null) {
+    const iso = value && dateFns.isValid(value.toString()) ? (value.toString() as Iso.Date) : null
+    setScheduledDate(iso)
+    setTimeout(() => formRef.current?.requestSubmit(), 0)
+  }
+
+  function submitMove(newProjectId: string, newAreaId: string) {
+    moveTask.submit(task.id, { projectId: newProjectId, areaId: newAreaId })
+  }
+
+  function handleProjectChange(value: number | null) {
+    setProjectId(value)
+    const selectedProject = value !== null ? projects.find((p) => p.id === value) : undefined
+    const newAreaId = selectedProject?.areaId ?? null
+    if (value !== null) {
+      setAreaId(newAreaId)
+    }
+    submitMove(
+      value !== null ? String(value) : '',
+      value !== null ? (newAreaId !== null ? String(newAreaId) : '') : areaId !== null ? String(areaId) : ''
+    )
+  }
+
+  function handleAreaChange(value: number | null) {
+    setAreaId(value)
+    submitMove(projectId !== null ? String(projectId) : '', value !== null ? String(value) : '')
+  }
+
+  function handleDelete() {
+    deleteTask.submit(task.id)
+    showToast({ title: 'Task deleted', variant: 'positive' })
+    onClose()
+  }
+
+  const projectOptions = [{ value: null, label: 'None' }, ...projects.map((p) => ({ value: p.id, label: p.title }))]
+  const areaOptions = [{ value: null, label: 'None' }, ...areas.map((a) => ({ value: a.id, label: a.title }))]
+
+  return (
+    <div ref={containerRef} className="rounded-b-lg border-x border-b border-neutral-950/5 bg-white px-4 pb-3 pt-2">
+      {/* Notes editor */}
+      <Form ref={formRef} method="post" action={editTask.action} navigate={false}>
+        <input type="hidden" name="title" value={task.title} />
+        <input type="hidden" name="scheduledDate" value={scheduledDate ?? ''} />
+        <textarea
+          name="notes"
+          value={notes}
+          onChange={(e) => setNotes(e.target.value)}
+          onBlur={() => {
+            if (notes !== (task.notes ?? '')) {
+              formRef.current?.requestSubmit()
+            }
+          }}
+          placeholder="Notes"
+          rows={1}
+          className="w-full resize-none bg-transparent text-sm text-neutral-600 placeholder:text-neutral-400 focus:outline-none"
+          aria-label="Notes"
+        />
+      </Form>
+
+      {/* Toolbar */}
+      <div className="mt-2 flex items-center text-xs text-neutral-500">
+        <I18nProvider locale="en">
+          <AriaDatePicker
+            aria-label="Scheduled Date"
+            value={calendarDate}
+            onChange={handleCalendarDateChange}
+            className="flex items-center"
+          >
+            <Group className="flex items-center">
+              <DateInput className="flex tabular-nums">
+                {(segment) => (
+                  <DateSegment
+                    segment={segment}
+                    className="rounded-sm px-px outline-none focus:bg-primary-500 focus:text-white"
+                  />
+                )}
+              </DateInput>
+              <AriaButton className="ml-1 rounded p-0.5 text-neutral-400 hover:text-neutral-600 focus:outline-none">
+                <Icon name="calendar" className="size-3.5" />
+              </AriaButton>
+            </Group>
+            <AnimatedPopover>
+              <Dialog>
+                <CustomCalendar value={calendarDate} onChange={handleCalendarDateChange} />
+              </Dialog>
+            </AnimatedPopover>
+          </AriaDatePicker>
+        </I18nProvider>
+
+        <span className="mx-2 text-neutral-300">·</span>
+
+        <InlineSelect
+          aria-label="Project"
+          icon="folder"
+          options={projectOptions}
+          value={projectId}
+          onChange={handleProjectChange}
+        />
+
+        {projectId === null && (
+          <>
+            <span className="mx-2 text-neutral-300">·</span>
+            <InlineSelect aria-label="Area" options={areaOptions} value={areaId} onChange={handleAreaChange} />
+          </>
+        )}
+
+        <div className="ml-auto">
+          <button
+            type="button"
+            onClick={() => setShowDeleteConfirm(true)}
+            className="rounded p-1 text-neutral-400 hover:text-negative-500"
+            aria-label="Delete task"
+          >
+            <Icon name="x-mark" className="size-3.5" />
+          </button>
+        </div>
+      </div>
+
+      <AlertDialog
+        variant="negative"
+        title="Delete this task?"
+        isOpen={showDeleteConfirm}
+        onOpenChange={setShowDeleteConfirm}
+      >
+        <Button color="negative" onClick={handleDelete}>
+          Delete
+        </Button>
+        <AlertDialog.CancelButton />
+      </AlertDialog>
+    </div>
+  )
+}
+
+// ── InlineSelect ────────────────────────────────────────────────────────────
+
+type SelectOption = { value: string | number | null; label: string }
+
+const NULL_KEY = '__select_null__'
+
+function toKey(value: string | number | null): string {
+  return value === null ? NULL_KEY : String(value)
+}
+
+function InlineSelect(props: {
+  'aria-label': string
+  icon?: 'folder'
+  options: SelectOption[]
+  value: number | null
+  onChange: (value: number | null) => void
+}) {
+  const selectedOption = props.options.find((o) => o.value === props.value) ?? null
+
+  return (
+    <AriaSelect
+      aria-label={props['aria-label']}
+      selectedKey={props.value !== null ? toKey(props.value) : null}
+      onSelectionChange={(key) => {
+        if (key === null || key === undefined) return props.onChange(null)
+        const keyStr = String(key)
+        if (keyStr === NULL_KEY) return props.onChange(null)
+        const option = props.options.find((o) => toKey(o.value) === keyStr)
+        props.onChange(option?.value != null ? Number(option.value) : null)
+      }}
+      className="flex items-center"
+    >
+      <AriaButton className="flex items-center gap-1 rounded text-neutral-500 hover:text-neutral-700 focus:outline-none">
+        {props.icon && <Icon name={props.icon} className="size-3.5 text-neutral-400" />}
+        <span className="truncate">{selectedOption?.label ?? 'None'}</span>
+      </AriaButton>
+      <AnimatedPopover offset={4} className="w-48">
+        <FormFieldComponents.DropdownListBox items={props.options.map((o) => ({ ...o, id: toKey(o.value) }))}>
+          {(item) => {
+            const option = item as SelectOption & { id: string }
+            return (
+              <ListBoxItem
+                id={option.id}
+                textValue={option.label}
+                className="cursor-pointer px-3 py-1.5 text-sm text-neutral-900 outline-none data-[focused]:bg-neutral-50 data-[selected]:bg-primary-50 data-[selected]:data-[focused]:bg-primary-100"
+              >
+                {option.label}
+              </ListBoxItem>
+            )
+          }}
+        </FormFieldComponents.DropdownListBox>
+      </AnimatedPopover>
+    </AriaSelect>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/task-list/task-keyboard-helpers.ts

@@ -0,0 +1,5 @@
+export function focusRow(container: HTMLElement | null, index: number) {
+  if (!container) return
+  const rows = container.querySelectorAll<HTMLElement>('[role="row"]')
+  rows[index]?.focus()
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/task-list/task-list.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { useAppDnd, useRegisterDragEndHandler } from '../app-dnd-provider'
+import type { TaskListProps, TaskRowProps } from './types'
+import { TaskRowContent, SortableTaskRow } from './task-row'
+import { useTaskReorder } from './use-task-reorder'
+import { useStickyTask } from './use-sticky-task'
+import { useExpandedCache } from './use-expanded-cache'
+import { focusRow } from './task-keyboard-helpers'
+
+export function TaskList({
+  tasks,
+  onComplete,
+  onUncomplete,
+  onSelect,
+  showProject,
+  showArea,
+  showScheduledDate,
+  emptyMessage = 'No tasks',
+  selectedTaskId,
+  positionField,
+  renderExpanded
+}: TaskListProps) {
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const [focusIndex, setFocusIndex] = React.useState(-1)
+  const { pendingMoveTaskId } = useAppDnd()
+  const { displayTasks: baseTasks, handleDragEnd } = useTaskReorder(tasks, positionField)
+
+  // Filter out tasks that are being moved cross-container (optimistic removal)
+  const displayTasks = pendingMoveTaskId != null ? baseTasks.filter((t) => t.id !== pendingMoveTaskId) : baseTasks
+  const mergedTasks = useStickyTask(displayTasks, selectedTaskId)
+  const getExpanded = useExpandedCache(renderExpanded)
+
+  const handleToggleComplete = React.useCallback(
+    (taskId: number, action: 'complete' | 'uncomplete') => {
+      if (action === 'complete') {
+        onComplete?.(taskId)
+      } else {
+        onUncomplete?.(taskId)
+      }
+    },
+    [onComplete, onUncomplete]
+  )
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (displayTasks.length === 0) return
+
+      // Don't intercept keypresses from interactive elements (e.g. notes textarea)
+      const tag = (e.target as HTMLElement).tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+
+      switch (e.key) {
+        case 'ArrowDown': {
+          e.preventDefault()
+          const next = Math.min(focusIndex + 1, displayTasks.length - 1)
+          setFocusIndex(next)
+          focusRow(listRef.current, next)
+          break
+        }
+        case 'ArrowUp': {
+          e.preventDefault()
+          const prev = Math.max(focusIndex - 1, 0)
+          setFocusIndex(prev)
+          focusRow(listRef.current, prev)
+          break
+        }
+        case 'Enter': {
+          e.preventDefault()
+          const enterTask = focusIndex >= 0 ? displayTasks[focusIndex] : undefined
+          if (enterTask) onSelect?.(enterTask.id)
+          break
+        }
+        case ' ': {
+          e.preventDefault()
+          const spaceTask = focusIndex >= 0 ? displayTasks[focusIndex] : undefined
+          if (spaceTask) handleToggleComplete(spaceTask.id, spaceTask.completedDate ? 'uncomplete' : 'complete')
+          break
+        }
+      }
+    },
+    [displayTasks, focusIndex, onSelect, handleToggleComplete]
+  )
+
+  // Register task drag-end handler with the shared DndContext
+  useRegisterDragEndHandler('task', positionField ? handleDragEnd : null)
+
+  if (mergedTasks.length === 0) {
+    return <p className="py-8 text-center text-sm text-neutral-500">{emptyMessage}</p>
+  }
+
+  const sortableIds = positionField ? displayTasks.map((t) => t.id) : undefined
+
+  function rowProps(task: (typeof mergedTasks)[number], index: number): TaskRowProps {
+    return {
+      task,
+      isSelected: selectedTaskId === task.id || focusIndex === index,
+      isExpanded: selectedTaskId === task.id,
+      showProject,
+      showArea,
+      showScheduledDate,
+      onSelect: (id) => {
+        setFocusIndex(index)
+        onSelect?.(id)
+      },
+      onToggleComplete: handleToggleComplete
+    }
+  }
+
+  const rows = mergedTasks.map((task, index) => {
+    const useSortable = positionField && displayTasks.some((t) => t.id === task.id)
+    const Row = useSortable ? SortableTaskRow : TaskRowContent
+    return (
+      <div key={task.id}>
+        <Row {...rowProps(task, index)} />
+        {selectedTaskId === task.id && getExpanded(task.id)}
+      </div>
+    )
+  })
+
+  const grid = (
+    <div ref={listRef} role="grid" tabIndex={0} className="space-y-0.5 outline-none" onKeyDown={handleKeyDown}>
+      {rows}
+    </div>
+  )
+
+  if (!sortableIds) return grid
+
+  return (
+    <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+      {grid}
+    </SortableContext>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/task-list/task-row.tsx

@@ -0,0 +1,100 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { tw } from '~/utils/tw'
+import { PlainCheckbox } from '~/components/checkbox'
+import type { TaskRowProps } from './types'
+import { normalizeScheduledDate, isOverdue, formatScheduledDate } from './task-date-helpers'
+
+// ── SortableTaskRow ─────────────────────────────────────────────────────────
+
+export function SortableTaskRow(props: TaskRowProps) {
+  const { task } = props
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: task.id,
+    data: { type: 'task', title: task.title }
+  })
+  const { role: _role, ...dndAttributes } = attributes
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} {...dndAttributes} {...listeners}>
+      <TaskRowContent {...props} isDragging={isDragging} />
+    </div>
+  )
+}
+
+// ── TaskRowContent ──────────────────────────────────────────────────────────
+
+export function TaskRowContent({
+  task,
+  isSelected,
+  isExpanded,
+  showProject,
+  showArea,
+  showScheduledDate,
+  onSelect,
+  onToggleComplete,
+  isDragging,
+  isDragOverlay
+}: TaskRowProps & { isDragging?: boolean; isDragOverlay?: boolean }) {
+  const completed = task.completedDate !== null
+  const scheduledStr = normalizeScheduledDate(task.scheduledDate)
+  const overdue = isOverdue(scheduledStr)
+
+  return (
+    <div
+      role="row"
+      aria-label={task.title}
+      tabIndex={-1}
+      className={tw(
+        'group flex cursor-pointer items-center gap-3 px-3 py-2 text-sm outline-none transition-colors',
+        isExpanded ? 'rounded-t-lg border-x border-t border-neutral-950/5 bg-white' : 'rounded-lg',
+        !isExpanded && (isSelected ? 'bg-primary-50' : 'hover:bg-neutral-50'),
+        completed && 'opacity-60',
+        isDragging && 'opacity-30',
+        isDragOverlay && 'rounded-lg bg-white shadow-lg ring-1 ring-neutral-200'
+      )}
+      onClick={() => onSelect?.(task.id)}
+    >
+      {/* Checkbox */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+      <div className="flex shrink-0 items-center" onClick={(e) => e.stopPropagation()}>
+        <PlainCheckbox
+          checked={completed}
+          onChange={() => onToggleComplete(task.id, completed ? 'uncomplete' : 'complete')}
+          aria-label={completed ? `Uncomplete "${task.title}"` : `Complete "${task.title}"`}
+        />
+      </div>
+
+      {/* Title */}
+      <p
+        className={tw(
+          'min-w-0 flex-1 truncate',
+          completed ? 'text-neutral-500 line-through' : overdue ? 'text-red-600' : 'text-neutral-900'
+        )}
+      >
+        {task.title}
+      </p>
+
+      {/* Badges */}
+      {showProject && task.projectTitle && (
+        <div className="shrink-0 rounded bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">{task.projectTitle}</div>
+      )}
+      {showArea && task.areaTitle && (
+        <div className="shrink-0 rounded bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">{task.areaTitle}</div>
+      )}
+
+      {/* Overdue indicator */}
+      {overdue && !completed && <div className="shrink-0 text-xs text-red-400">Overdue</div>}
+
+      {/* Scheduled date */}
+      {showScheduledDate && scheduledStr && !overdue && (
+        <div className="shrink-0 text-xs text-neutral-400">{formatScheduledDate(scheduledStr)}</div>
+      )}
+    </div>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/task-list/types.ts

@@ -0,0 +1,49 @@
+export interface TaskItem {
+  id: number
+  title: string
+  completedDate: Date | string | null
+  scheduledDate: Date | string | null
+  projectId?: number | null
+  areaId?: number | null
+  projectTitle?: string | null
+  areaTitle?: string | null
+  listPosition?: string
+  scheduledPosition?: string | null
+}
+
+export interface TaskDetail {
+  id: number
+  title: string
+  notes: string | null
+  scheduledDate: Date | string | null
+  projectId: number | null
+  areaId: number | null
+  completedDate: Date | string | null
+}
+
+export interface TaskRowProps {
+  task: TaskItem
+  isSelected: boolean
+  isExpanded?: boolean
+  showProject?: boolean
+  showArea?: boolean
+  showScheduledDate?: boolean
+  onSelect?: (taskId: number) => void
+  onToggleComplete: (taskId: number, action: 'complete' | 'uncomplete') => void
+}
+
+import type * as React from 'react'
+
+export interface TaskListProps {
+  tasks: TaskItem[]
+  onComplete?: (taskId: number) => void
+  onUncomplete?: (taskId: number) => void
+  onSelect?: (taskId: number) => void
+  showProject?: boolean
+  showArea?: boolean
+  showScheduledDate?: boolean
+  emptyMessage?: string
+  selectedTaskId?: number | null
+  positionField?: 'list' | 'scheduled'
+  renderExpanded?: (taskId: number) => React.ReactNode
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/task-list/use-expanded-cache.ts

@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+/**
+ * Caches the last non-null result from `renderExpanded` so the expanded panel
+ * survives the task temporarily leaving loader data during optimistic updates.
+ */
+export function useExpandedCache(renderExpanded: ((taskId: number) => React.ReactNode) | undefined) {
+  const cacheRef = React.useRef<{ id: number; node: React.ReactNode } | null>(null)
+
+  return React.useCallback(
+    (taskId: number): React.ReactNode => {
+      const fresh = renderExpanded?.(taskId)
+      if (fresh != null) {
+        cacheRef.current = { id: taskId, node: fresh }
+        return fresh
+      }
+      if (cacheRef.current?.id === taskId) return cacheRef.current.node
+      return null
+    },
+    [renderExpanded]
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/task-list/use-sticky-task.ts

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import type { TaskItem } from './types'
+
+/**
+ * Keeps a snapshot of the selected task so it stays visible in the list even
+ * after it's removed from loader data (e.g. moved to another project).
+ * Returns `mergedTasks` — the original list with the sticky task appended when needed.
+ */
+export function useStickyTask(tasks: TaskItem[], selectedTaskId: number | null | undefined) {
+  const stickyTaskRef = React.useRef<TaskItem | null>(null)
+
+  if (selectedTaskId != null) {
+    const found = tasks.find((t) => t.id === selectedTaskId)
+    if (found) stickyTaskRef.current = found
+  } else {
+    stickyTaskRef.current = null
+  }
+
+  return React.useMemo(() => {
+    if (selectedTaskId == null || tasks.some((t) => t.id === selectedTaskId)) return tasks
+    if (!stickyTaskRef.current) return tasks
+    return [...tasks, stickyTaskRef.current]
+  }, [tasks, selectedTaskId])
+}