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

package/skills/maestro-examples/references/setlist/setlist-web/app/components/sidebar/sortable-rows.tsx

@@ -0,0 +1,256 @@
+import * as React from 'react'
+import { NavLink, useLocation } from 'react-router'
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { tw } from '~/utils/tw'
+import { useAppDnd } from '../app-dnd-provider'
+import { Icon } from '../icon'
+import { InlineCreateInput, InlineEditInput } from './inline-inputs'
+import { toDndId } from './helpers'
+import type { Area, EditingTarget, Project } from './helpers'
+
+export function SortableChildProject({
+  project,
+  onContextMenu,
+  isDragOverlay
+}: {
+  project: Project
+  onContextMenu: (e: React.MouseEvent, project: Project) => void
+  isDragOverlay?: boolean
+}) {
+  const dndId = toDndId('project', project.id)
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: dndId,
+    data: { type: 'project', title: project.title }
+  })
+  const { role: _role, ...dndAttributes } = attributes
+  const { activeDrag, overDroppableId } = useAppDnd()
+  const isTaskDropTarget = activeDrag?.type === 'task' && overDroppableId === dndId
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : undefined
+  }
+
+  if (isDragOverlay) {
+    return (
+      <div className="sidebar-item rounded bg-white shadow-lg ring-1 ring-neutral-200">
+        <Icon name="folder" className="h-3.5 w-3.5 shrink-0 text-neutral-400" />
+        <span className="truncate">{project.title}</span>
+      </div>
+    )
+  }
+
+  return (
+    <NavLink
+      ref={setNodeRef}
+      style={style}
+      to={`/projects/${project.id}`}
+      draggable={false}
+      className={({ isActive }) =>
+        tw('sidebar-item', isActive && 'active', isTaskDropTarget && 'rounded bg-primary-100 ring-2 ring-primary-400')
+      }
+      onContextMenu={(e) => onContextMenu(e, project)}
+      {...dndAttributes}
+      {...listeners}
+    >
+      <Icon name="folder" className="h-3.5 w-3.5 shrink-0 text-neutral-400" />
+      <span className="truncate">{project.title}</span>
+    </NavLink>
+  )
+}
+
+export function SortableTopLevelProject({
+  project,
+  editingItem,
+  onEditDone,
+  onContextMenu,
+  isDragOverlay
+}: {
+  project: Project
+  editingItem: EditingTarget | null
+  onEditDone: () => void
+  onContextMenu: (e: React.MouseEvent, project: Project) => void
+  isDragOverlay?: boolean
+}) {
+  const dndId = toDndId('project', project.id)
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: dndId,
+    data: { type: 'project', title: project.title }
+  })
+  const { role: _role, ...dndAttributes } = attributes
+  const { activeDrag, overDroppableId } = useAppDnd()
+  const isTaskDropTarget = activeDrag?.type === 'task' && overDroppableId === dndId
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : undefined
+  }
+
+  const isEditing = editingItem?.type === 'project' && editingItem.id === project.id
+
+  if (isDragOverlay) {
+    return (
+      <div className="sidebar-item rounded bg-white shadow-lg ring-1 ring-neutral-200">
+        <Icon name="folder" className="h-3.5 w-3.5 shrink-0 text-neutral-400" />
+        <span className="truncate">{project.title}</span>
+      </div>
+    )
+  }
+
+  if (isEditing) {
+    return (
+      <div ref={setNodeRef} style={style} className="sidebar-item">
+        <Icon name="folder" className="h-3.5 w-3.5 shrink-0 text-neutral-400" />
+        <InlineEditInput type="project" id={project.id} initialTitle={project.title} onDone={onEditDone} />
+      </div>
+    )
+  }
+
+  return (
+    <NavLink
+      ref={setNodeRef}
+      style={style}
+      to={`/projects/${project.id}`}
+      draggable={false}
+      className={({ isActive }) =>
+        tw('sidebar-item', isActive && 'active', isTaskDropTarget && 'rounded bg-primary-100 ring-2 ring-primary-400')
+      }
+      onContextMenu={(e) => onContextMenu(e, project)}
+      {...dndAttributes}
+      {...listeners}
+    >
+      <Icon name="folder" className="h-3.5 w-3.5 shrink-0 text-neutral-400" />
+      <span className="truncate">{project.title}</span>
+    </NavLink>
+  )
+}
+
+export function SortableAreaRow({
+  area,
+  childProjects,
+  childProjectIds,
+  expanded,
+  onToggle,
+  editingItem,
+  onEditDone,
+  onContextMenu,
+  onProjectContextMenu,
+  isDragOverlay
+}: {
+  area: Area
+  childProjects: Project[]
+  childProjectIds: string[]
+  expanded: boolean
+  onToggle: () => void
+  editingItem: EditingTarget | null
+  onEditDone: () => void
+  onContextMenu: (e: React.MouseEvent, area: Area) => void
+  onProjectContextMenu: (e: React.MouseEvent, project: Project) => void
+  isDragOverlay?: boolean
+}) {
+  const [creatingProject, setCreatingProject] = React.useState(false)
+
+  const dndId = toDndId('area', area.id)
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: dndId,
+    data: { type: 'area', title: area.title }
+  })
+  const { role: _role, ...dndAttributes } = attributes
+  const { activeDrag, overDroppableId } = useAppDnd()
+  const isTaskDropTarget = activeDrag?.type === 'task' && overDroppableId === dndId
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : undefined
+  }
+
+  const location = useLocation()
+  const isActive = location.pathname === `/areas/${area.id}`
+  const isEditing = editingItem?.type === 'area' && editingItem.id === area.id
+
+  if (isDragOverlay) {
+    return (
+      <div className="flex items-center gap-1.5 rounded-md bg-white px-2 py-1.5 text-sm shadow-lg ring-1 ring-neutral-200">
+        <Icon
+          name="chevron-right"
+          className={tw('h-3 w-3 shrink-0 text-neutral-400', expanded && 'rotate-90')}
+        />
+        <span className="truncate text-neutral-700">{area.title}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} className="group/area">
+      <div
+        className={tw(
+          'flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm',
+          isActive && !isTaskDropTarget ? 'bg-primary-100 font-medium text-primary-800' : 'text-neutral-700',
+          !isEditing && !isActive && !isTaskDropTarget && 'hover:bg-neutral-200/60 hover:text-neutral-900',
+          isTaskDropTarget && 'bg-primary-100 ring-2 ring-primary-400'
+        )}
+      >
+        <button
+          onClick={onToggle}
+          className="flex shrink-0 items-center justify-center"
+          aria-label={expanded ? 'Collapse area' : 'Expand area'}
+        >
+          <Icon
+            name="chevron-right"
+            className={tw('h-3 w-3 text-neutral-400 transition-transform duration-200', expanded && 'rotate-90')}
+          />
+        </button>
+        {isEditing ? (
+          <div className="min-w-0 flex-1">
+            <InlineEditInput type="area" id={area.id} initialTitle={area.title} onDone={onEditDone} />
+          </div>
+        ) : (
+          <>
+            <NavLink
+              to={`/areas/${area.id}`}
+              draggable={false}
+              className="min-w-0 flex-1 truncate"
+              onContextMenu={(e) => onContextMenu(e, area)}
+              {...dndAttributes}
+              {...listeners}
+            >
+              {area.title}
+            </NavLink>
+            <button
+              onClick={() => setCreatingProject(true)}
+              className="flex shrink-0 items-center justify-center rounded opacity-0 hover:text-neutral-900 group-hover/area:opacity-100"
+              aria-label="New project in area"
+            >
+              <Icon name="plus" className="h-3.5 w-3.5 text-neutral-400" />
+            </button>
+          </>
+        )}
+      </div>
+      {expanded && (childProjects.length > 0 || creatingProject) && (
+        <SortableContext items={childProjectIds} strategy={verticalListSortingStrategy}>
+          <div className="ml-5">
+            {childProjects.map((project) => {
+              const isEditingProject = editingItem?.type === 'project' && editingItem.id === project.id
+              if (isEditingProject) {
+                return (
+                  <div key={project.id} className="sidebar-item">
+                    <Icon name="folder" className="h-3.5 w-3.5 shrink-0 text-neutral-400" />
+                    <InlineEditInput type="project" id={project.id} initialTitle={project.title} onDone={onEditDone} />
+                  </div>
+                )
+              }
+              return <SortableChildProject key={project.id} project={project} onContextMenu={onProjectContextMenu} />
+            })}
+            {creatingProject && (
+              <InlineCreateInput type="project" areaId={area.id} onCancel={() => setCreatingProject(false)} />
+            )}
+          </div>
+        </SortableContext>
+      )}
+    </div>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/sidebar/use-sidebar-dnd.ts

@@ -0,0 +1,261 @@
+import * as React from 'react'
+import type { DragEndEvent } from '@dnd-kit/core'
+import { generateKeyBetween } from '@setlist/schemas'
+import { useRegisterDragEndHandler } from '../app-dnd-provider'
+import { buildSidebarItems, parseDndId, toDndId } from './helpers'
+import type { Area, Project, SidebarItem } from './helpers'
+import { useReorderArea } from '~/hooks/use-area-actions'
+import { useMoveProject, useReorderProject } from '~/hooks/use-project-actions'
+
+interface UseSidebarDndOptions {
+  areas: Area[]
+  projects: Project[]
+  expandedAreas: Record<number, boolean>
+  setExpandedAreas: React.Dispatch<React.SetStateAction<Record<number, boolean>>>
+}
+
+export function useSidebarDnd({ areas, projects, expandedAreas, setExpandedAreas }: UseSidebarDndOptions) {
+  const [optimisticItems, setOptimisticItems] = React.useState<SidebarItem[] | null>(null)
+  const [optimisticChildProjects, setOptimisticChildProjects] = React.useState<Map<number, Project[]> | null>(null)
+
+  const reorderArea = useReorderArea()
+  const reorderProject = useReorderProject()
+  const moveProject = useMoveProject()
+
+  const serverState = React.useMemo(() => buildSidebarItems(areas, projects), [areas, projects])
+
+  // Clear optimistic state when the server state changes (revalidation completed)
+  const prevServerStateRef = React.useRef(serverState)
+  React.useEffect(() => {
+    if (prevServerStateRef.current !== serverState) {
+      prevServerStateRef.current = serverState
+      setOptimisticItems(null)
+      setOptimisticChildProjects(null)
+    }
+  }, [serverState])
+
+  const items = optimisticItems !== null ? optimisticItems : serverState.items
+  const childProjects = optimisticChildProjects !== null ? optimisticChildProjects : serverState.childProjects
+
+  // Build sortable IDs for the top-level context
+  const topLevelIds = React.useMemo(() => items.map((item) => toDndId(item.type, item.id)), [items])
+
+  // Child project IDs per area for nested SortableContexts
+  const childProjectIds = React.useMemo(() => {
+    const result = new Map<number, string[]>()
+    for (const [areaId, children] of childProjects) {
+      result.set(
+        areaId,
+        children.map((p) => toDndId('project', p.id))
+      )
+    }
+    return result
+  }, [childProjects])
+
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+
+      if (!over || active.id === over.id) return
+
+      const activeInfo = parseDndId(String(active.id))
+      const overInfo = parseDndId(String(over.id))
+
+      // Case 1: Dragging a project onto an area — move project into area
+      if (activeInfo.type === 'project' && overInfo.type === 'area') {
+        const currentChildren = childProjects.get(overInfo.id)
+        const isAlreadyChild = currentChildren?.some((p) => p.id === activeInfo.id)
+        if (isAlreadyChild) return
+
+        const project = projects.find((p) => p.id === activeInfo.id)
+        if (!project) return
+
+        // Optimistic: remove project from current location and add to area's children
+        const newItems = items.filter((item) => !(item.type === 'project' && item.id === activeInfo.id))
+        const newChildProjects = new Map(childProjects)
+
+        // Remove from any existing area children
+        for (const [areaId, children] of newChildProjects) {
+          const filtered = children.filter((p) => p.id !== activeInfo.id)
+          if (filtered.length !== children.length) {
+            newChildProjects.set(areaId, filtered)
+          }
+        }
+
+        // Add to new area's children
+        const targetChildren = newChildProjects.get(overInfo.id) ?? []
+        newChildProjects.set(overInfo.id, [...targetChildren, { ...project, areaId: overInfo.id }])
+
+        setOptimisticItems(newItems)
+        setOptimisticChildProjects(newChildProjects)
+
+        // Expand the target area so the moved project is visible
+        setExpandedAreas((prev) => {
+          const next = { ...prev, [overInfo.id]: true }
+          try {
+            localStorage.setItem('sidebar-expanded-areas', JSON.stringify(next))
+          } catch {
+            // ignore
+          }
+          return next
+        })
+
+        moveProject.submit(activeInfo.id, { areaId: String(overInfo.id) })
+        return
+      }
+
+      // Case 2: Dragging a child project to a top-level position (move out of area)
+      if (activeInfo.type === 'project') {
+        let sourceAreaId: number | null = null
+        for (const [areaId, children] of childProjects) {
+          if (children.some((p) => p.id === activeInfo.id)) {
+            sourceAreaId = areaId
+            break
+          }
+        }
+
+        if (sourceAreaId !== null) {
+          const overTopIdx = items.findIndex((item) => item.type === overInfo.type && item.id === overInfo.id)
+          if (overTopIdx !== -1) {
+            const sourceChildren = childProjects.get(sourceAreaId) ?? []
+            const project = sourceChildren.find((p) => p.id === activeInfo.id)
+            if (!project) return
+
+            // Remove from area's children
+            const newChildProjects = new Map(childProjects)
+            newChildProjects.set(
+              sourceAreaId,
+              sourceChildren.filter((p) => p.id !== activeInfo.id)
+            )
+
+            // Add to top-level items at the end
+            const movedProject: Project = { ...project, areaId: null }
+            const newItem: SidebarItem = {
+              type: 'project',
+              id: project.id,
+              title: project.title,
+              position: project.position,
+              project: movedProject
+            }
+            const newItems = [...items, newItem]
+
+            setOptimisticItems(newItems)
+            setOptimisticChildProjects(newChildProjects)
+
+            moveProject.submit(activeInfo.id, { areaId: '' })
+            return
+          }
+        }
+      }
+
+      // Case 3: Reordering within top-level items
+      const activeTopIdx = items.findIndex((item) => item.type === activeInfo.type && item.id === activeInfo.id)
+      const overTopIdx = items.findIndex((item) => item.type === overInfo.type && item.id === overInfo.id)
+
+      if (activeTopIdx !== -1 && overTopIdx !== -1) {
+        const filtered = items.filter((_, i) => i !== activeTopIdx)
+        const insertAfter = overTopIdx > activeTopIdx
+        const filteredOverIdx = filtered.findIndex((item) => item.type === overInfo.type && item.id === overInfo.id)
+
+        let beforeItem: SidebarItem | null
+        let afterItem: SidebarItem | null
+
+        if (insertAfter) {
+          beforeItem = filtered[filteredOverIdx] ?? null
+          afterItem = filtered[filteredOverIdx + 1] ?? null
+        } else {
+          beforeItem = filtered[filteredOverIdx - 1] ?? null
+          afterItem = filtered[filteredOverIdx] ?? null
+        }
+
+        const newPosition = generateKeyBetween(beforeItem?.position ?? null, afterItem?.position ?? null)
+        const activeItem = items[activeTopIdx]!
+        const movedItem: SidebarItem = { ...activeItem, position: newPosition }
+
+        const newItems = [...filtered]
+        const insertIdx = insertAfter ? filteredOverIdx + 1 : filteredOverIdx
+        newItems.splice(insertIdx, 0, movedItem)
+
+        setOptimisticItems(newItems)
+
+        // If project was nested in an area, remove from child projects
+        if (activeInfo.type === 'project') {
+          const project = projects.find((p) => p.id === activeInfo.id)
+          if (project?.areaId !== null) {
+            const newChildProjects = new Map(childProjects)
+            for (const [areaId, children] of newChildProjects) {
+              const f = children.filter((p) => p.id !== activeInfo.id)
+              if (f.length !== children.length) {
+                newChildProjects.set(areaId, f)
+              }
+            }
+            setOptimisticChildProjects(newChildProjects)
+
+            // Move project out of area to top level
+            moveProject.submit(activeInfo.id, { areaId: '' })
+            return
+          }
+        }
+
+        const beforeKey = beforeItem?.position ?? ''
+        const afterKey = afterItem?.position ?? ''
+
+        if (activeInfo.type === 'area') {
+          reorderArea.submit(activeInfo.id, { beforeKey, afterKey })
+        } else {
+          reorderProject.submit(activeInfo.id, { beforeKey, afterKey })
+        }
+        return
+      }
+
+      // Case 4: Reordering child projects within the same area
+      if (activeInfo.type === 'project' && overInfo.type === 'project') {
+        for (const [areaId, children] of childProjects) {
+          const activeChildIdx = children.findIndex((p) => p.id === activeInfo.id)
+          const overChildIdx = children.findIndex((p) => p.id === overInfo.id)
+
+          if (activeChildIdx !== -1 && overChildIdx !== -1) {
+            const filtered = children.filter((_, i) => i !== activeChildIdx)
+            const insertAfter = overChildIdx > activeChildIdx
+            const filteredOverIdx = filtered.findIndex((p) => p.id === overInfo.id)
+
+            let beforeProject: Project | null
+            let afterProject: Project | null
+
+            if (insertAfter) {
+              beforeProject = filtered[filteredOverIdx] ?? null
+              afterProject = filtered[filteredOverIdx + 1] ?? null
+            } else {
+              beforeProject = filtered[filteredOverIdx - 1] ?? null
+              afterProject = filtered[filteredOverIdx] ?? null
+            }
+
+            const newPosition = generateKeyBetween(beforeProject?.position ?? null, afterProject?.position ?? null)
+
+            const activeChild = children[activeChildIdx]!
+            const movedProject: Project = { ...activeChild, position: newPosition }
+            const newChildren = [...filtered]
+            const insertIdx = insertAfter ? filteredOverIdx + 1 : filteredOverIdx
+            newChildren.splice(insertIdx, 0, movedProject)
+
+            const newChildProjects = new Map(childProjects)
+            newChildProjects.set(areaId, newChildren)
+            setOptimisticChildProjects(newChildProjects)
+
+            const beforeKey = beforeProject?.position ?? ''
+            const afterKey = afterProject?.position ?? ''
+
+            reorderProject.submit(activeInfo.id, { beforeKey, afterKey })
+            return
+          }
+        }
+      }
+    },
+    [items, childProjects, projects, reorderArea, reorderProject, moveProject, setExpandedAreas]
+  )
+
+  // Register sidebar drag-end handler with the shared DndContext
+  useRegisterDragEndHandler('sidebar', handleDragEnd)
+
+  return { items, childProjects, topLevelIds, childProjectIds }
+}

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

@@ -0,0 +1,19 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add spinner --directory app
+
+import { ProgressBar } from 'react-aria-components'
+import { Icon } from './icon'
+import { tw } from '../utils/tw'
+
+interface SpinnerProps {
+  className?: string
+  'aria-label'?: string
+}
+
+export function Spinner({ className, 'aria-label': ariaLabel = 'Loading…' }: SpinnerProps) {
+  return (
+    <ProgressBar isIndeterminate aria-label={ariaLabel}>
+      <Icon name="arrow-path" className={tw('animate-spin', className)} />
+    </ProgressBar>
+  )
+}

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

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { useFetcher } from 'react-router'
+import { HeadlessForm } from '@maestro-js/form'
+import { Icon } from '~/components/icon'
+import { useFetcherComplete } from '~/utils/use-fetcher-complete'
+
+interface TaskInlineCreateProps {
+  projectId?: number | null
+  areaId?: number | null
+  scheduledDate?: string | null
+}
+
+export function TaskInlineCreate({ projectId, areaId, scheduledDate }: TaskInlineCreateProps) {
+  const fetcher = useFetcher()
+  const [title, setTitle] = React.useState('')
+
+  useFetcherComplete(fetcher, () => setTitle(''))
+
+  return (
+    <HeadlessForm as={fetcher.Form} method="post" action="/api/tasks">
+      {projectId != null && <HeadlessForm.HiddenInput name="projectId" value={projectId} form={undefined} />}
+      {areaId != null && <HeadlessForm.HiddenInput name="areaId" value={areaId} form={undefined} />}
+      {scheduledDate != null && <HeadlessForm.HiddenInput name="scheduledDate" value={scheduledDate} form={undefined} />}
+      <div className="flex items-center gap-3 px-3 py-2 text-sm">
+        <div className="flex size-5 shrink-0 items-center justify-center">
+          <Icon name="plus" className="size-4 text-neutral-300" />
+        </div>
+        <input
+          type="text"
+          name="title"
+          placeholder="New task..."
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              if (title.trim()) {
+                e.currentTarget.form?.requestSubmit()
+              }
+            }
+            if (e.key === 'Escape') {
+              e.preventDefault()
+              setTitle('')
+            }
+          }}
+          className="min-w-0 flex-1 bg-transparent text-neutral-900 outline-hidden placeholder:text-neutral-400"
+        />
+      </div>
+    </HeadlessForm>
+  )
+}

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

@@ -0,0 +1,3 @@
+export { TaskList } from './task-list'
+export { TaskExpandedDetail } from './task-expanded-detail'
+export type { TaskItem, TaskDetail, TaskListProps, TaskRowProps } from './types'

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

@@ -0,0 +1,16 @@
+export function normalizeScheduledDate(scheduledDate: Date | string | null): string | null {
+  if (typeof scheduledDate === 'string') return scheduledDate
+  if (scheduledDate) return scheduledDate.toISOString().slice(0, 10)
+  return null
+}
+
+export function isOverdue(scheduledDateStr: string | null): boolean {
+  if (scheduledDateStr == null) return false
+  const today = new Date().toISOString().slice(0, 10)
+  return scheduledDateStr < today
+}
+
+export function formatScheduledDate(dateStr: string): string {
+  const date = new Date(dateStr + 'T00:00:00')
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}