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

package/skills/maestro-examples/references/setlist/setlist-web/app/routes/auth.verify.tsx

@@ -0,0 +1,154 @@
+import { redirect, useActionData, useLoaderData, useNavigation, Link } from 'react-router'
+import type { LoaderFunctionArgs, ActionFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { rateLimitingMiddleware } from '~/features/rate-limiting-middleware.server'
+import { AuthService, MagicLinkExpiredTokenError, Log } from '~/services.server'
+import { UserSchemas } from '@setlist/schemas'
+import { Form } from '~/components/form'
+import { TextField } from '~/components/text-field'
+import { Button } from '~/components/button'
+import { InlineAlert } from '~/components/inline-alert'
+
+export const middleware = [
+  rateLimitingMiddleware(({ context }) => {
+    const requestContext = getRequestContext(context)
+    const ip = requestContext.deviceContext.ip
+    if (ip) {
+      return {
+        key: `verify:${ip}`,
+        maxAttemptsPerWindow: 5,
+        decaySeconds: 300
+      }
+    } else {
+      return null
+    }
+  })
+]
+
+export async function loader({ request, context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.user) {
+    throw redirect('/inbox')
+  }
+
+  const url = new URL(request.url)
+  const token = url.searchParams.get('token')
+  const email = url.searchParams.get('email') ?? ''
+
+  if (token) {
+    try {
+      const result = await AuthService.VerifyMagicLink({
+        token,
+        session: requestContext.session,
+        deviceContext: requestContext.deviceContext
+      })
+
+      if (result.id) {
+        throw redirect('/inbox')
+      }
+
+      return { email, error: 'Invalid or expired token. Please request a new link.' }
+    } catch (error) {
+      if (error instanceof Response) throw error
+
+      if (error instanceof MagicLinkExpiredTokenError) {
+        return {
+          email,
+          error: 'This link has expired. Please request a new one.'
+        }
+      }
+
+      Log.error('Magic link verification failed', { error })
+      return { email, error: 'Invalid or expired token. Please request a new link.' }
+    }
+  }
+
+  return { email, error: null }
+}
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+
+  const formData = await request.formData()
+
+  const parsed = await Form.serverSafeParse(UserSchemas.verifyTokenForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData })
+  }
+
+  const { token } = parsed.data
+
+  try {
+    const result = await AuthService.VerifyMagicLink({
+      token,
+      session: requestContext.session,
+      deviceContext: requestContext.deviceContext
+    })
+
+    if (result.id) {
+      throw redirect('/inbox')
+    }
+
+    return { error: 'Invalid or expired token. Please request a new link.' }
+  } catch (error) {
+    if (error instanceof Response) throw error
+
+    if (error instanceof MagicLinkExpiredTokenError) {
+      return { error: 'This link has expired. Please request a new one.' }
+    }
+
+    Log.error('Magic link verification failed', { error })
+    return { error: 'Invalid or expired token. Please request a new link.' }
+  }
+}
+
+export default function VerifyPage() {
+  const { email, error: loaderError } = useLoaderData<typeof loader>()
+  const actionData = useActionData<typeof action>()
+  const navigation = useNavigation()
+  const isSubmitting = navigation.state === 'submitting'
+
+  const actionError = actionData && 'error' in actionData ? actionData.error : null
+  const error = actionError ?? loaderError
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-neutral-50 px-4">
+      <div className="w-full max-w-sm space-y-8">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold tracking-tight text-neutral-900">Check your email</h1>
+          <p className="mt-2 text-sm text-neutral-600">
+            {email ? (
+              <>
+                We sent a login link to <span className="font-medium text-neutral-900">{email}</span>
+              </>
+            ) : (
+              'We sent you a login link'
+            )}
+          </p>
+        </div>
+
+        {error && <InlineAlert variant="negative" description={error} />}
+
+        <Form method="post" className="space-y-6">
+          <TextField
+            name="token"
+            label="Paste your token"
+            type="text"
+            placeholder="selector|verifier"
+            isRequired
+            autoFocus
+          />
+          <Button type="submit" fullWidth isPending={isSubmitting}>
+            Verify
+          </Button>
+        </Form>
+
+        <p className="text-center text-sm text-neutral-600">
+          <Link to="/auth/login" className="font-medium text-neutral-900 hover:underline">
+            Request a new link
+          </Link>
+        </p>
+      </div>
+    </div>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/routes/completed.tsx

@@ -0,0 +1,121 @@
+import { useLoaderData } from 'react-router'
+import type { LoaderFunctionArgs } from 'react-router'
+import { dateFns, type Iso } from 'iso-fns'
+import { getRequestContext } from '~/features/request-context.server'
+import { TaskService } from '~/services.server'
+import { Button } from '~/components/button'
+import { Icon } from '~/components/icon'
+import { useUncompleteTask, useDeleteTask } from '~/hooks/use-task-actions'
+import { useUncompleteProject, useDeleteProject } from '~/hooks/use-project-actions'
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.user) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const profile = requestContext.user
+  return TaskService.ListCompleted({}, profile)
+}
+
+export default function CompletedPage() {
+  const { tasks, projects } = useLoaderData<typeof loader>()
+
+  const items = [
+    ...tasks.map((t) => ({ id: t.id, title: t.title, completedDate: t.completedDate, type: 'task' as const })),
+    ...projects.map((p) => ({ id: p.id, title: p.title, completedDate: p.completedDate, type: 'project' as const }))
+  ].sort((a, b) => {
+    if (!a.completedDate || !b.completedDate) return 0
+    return b.completedDate.localeCompare(a.completedDate)
+  })
+
+  const taskCount = items.filter((i) => i.type === 'task').length
+  const projectCount = items.filter((i) => i.type === 'project').length
+
+  return (
+    <div className="mx-auto max-w-2xl px-8 py-8">
+      <div className="mb-6">
+        <h1 className="typography-h1">Completed</h1>
+        {items.length > 0 && (
+          <p className="mt-1 text-sm tabular-nums text-neutral-400">
+            {taskCount} {taskCount === 1 ? 'task' : 'tasks'}
+            {projectCount > 0 && <>, {projectCount} {projectCount === 1 ? 'project' : 'projects'}</>}
+          </p>
+        )}
+      </div>
+
+      {items.length === 0 ? (
+        <div className="flex flex-col items-center py-16">
+          <div className="flex size-10 items-center justify-center rounded-full bg-neutral-100">
+            <Icon name="check" className="size-4 text-neutral-400" />
+          </div>
+          <p className="mt-3 text-sm text-neutral-500">No completed items yet</p>
+        </div>
+      ) : (
+        <div className="divide-y divide-neutral-950/5">
+          {items.map((item) => (
+            <CompletedRow key={`${item.type}-${item.id}`} item={item} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CompletedRow({
+  item
+}: {
+  item: { id: number; title: string; completedDate: string | null; type: 'task' | 'project' }
+}) {
+  const uncompleteTask = useUncompleteTask()
+  const deleteTask = useDeleteTask()
+  const uncompleteProject = useUncompleteProject()
+  const deleteProject = useDeleteProject()
+
+  const isTask = item.type === 'task'
+  const isSubmitting = isTask
+    ? uncompleteTask.state !== 'idle' || deleteTask.state !== 'idle'
+    : uncompleteProject.state !== 'idle' || deleteProject.state !== 'idle'
+
+  if (isSubmitting) {
+    return null
+  }
+
+  return (
+    <div className="group flex items-center gap-3 py-2">
+      <button
+        type="button"
+        className="flex size-[18px] shrink-0 items-center justify-center rounded-full border-2 border-positive-500 bg-positive-500 hover:border-positive-400 hover:bg-positive-400"
+        aria-label={`Uncomplete "${item.title}"`}
+        onClick={() => {
+          if (isTask) uncompleteTask.submit(item.id)
+          else uncompleteProject.submit(item.id)
+        }}
+      >
+        <Icon name="check" className="size-2.5 text-white" />
+      </button>
+      <p className="min-w-0 flex-1 truncate text-sm text-neutral-400">{item.title}</p>
+      {item.type === 'project' && (
+        <span className="shrink-0 text-xs text-neutral-300">Project</span>
+      )}
+      {item.completedDate && (
+        <p className="shrink-0 text-xs tabular-nums text-neutral-300">
+          {dateFns.format(item.completedDate.slice(0, 10) as Iso.Date, 'MMM d')}
+        </p>
+      )}
+      <Button
+        variant="plain"
+        color="negative"
+        size="sm"
+        className="opacity-0 group-hover:opacity-100"
+        aria-label={`Delete "${item.title}"`}
+        onClick={() => {
+          if (isTask) deleteTask.submit(item.id)
+          else deleteProject.submit(item.id)
+        }}
+      >
+        Delete
+      </Button>
+    </div>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/routes/inbox.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import { useLoaderData } from 'react-router'
+import type { LoaderFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { TaskService } from '~/services.server'
+import { TaskList, TaskExpandedDetail } from '~/components/task-list'
+import type { TaskItem, TaskDetail } from '~/components/task-list'
+import { TaskInlineCreate } from '~/components/task-inline-create'
+import { useCompleteTask, useUncompleteTask } from '~/hooks/use-task-actions'
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.user) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const profile = requestContext.user
+  const { tasks } = await TaskService.ListTasksForInbox({}, profile)
+
+  return { tasks }
+}
+
+export default function InboxPage() {
+  const { tasks } = useLoaderData<typeof loader>()
+  const [selectedTaskId, setSelectedTaskId] = React.useState<number | null>(null)
+  const completeTask = useCompleteTask()
+  const uncompleteTask = useUncompleteTask()
+
+  const totalCount = tasks.length
+  const completedCount = tasks.filter((t) => t.completedDate !== null).length
+
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col gap-6 px-8 py-8">
+      <div>
+        <h1 className="typography-h1">Inbox</h1>
+        {totalCount > 0 && (
+          <p className="mt-1 text-sm tabular-nums text-neutral-500">
+            {completedCount === totalCount
+              ? 'All tasks completed'
+              : `${totalCount - completedCount} ${totalCount - completedCount === 1 ? 'task' : 'tasks'} remaining`}
+          </p>
+        )}
+      </div>
+
+      <TaskList
+        tasks={tasks as TaskItem[]}
+        positionField="list"
+        showProject
+        emptyMessage="No tasks in inbox"
+        selectedTaskId={selectedTaskId}
+        onSelect={(id) => setSelectedTaskId(id === selectedTaskId ? null : id)}
+        onComplete={(id) => completeTask.submit(id)}
+        onUncomplete={(id) => uncompleteTask.submit(id)}
+        renderExpanded={(id) => {
+          const task = tasks.find((t) => t.id === id) as TaskDetail | undefined
+          if (!task) return null
+          return (
+            <TaskExpandedDetail key={id} task={task} onClose={() => setSelectedTaskId(null)} />
+          )
+        }}
+      />
+
+      <div className="border-t border-neutral-950/5 pt-2">
+        <TaskInlineCreate />
+      </div>
+    </div>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/routes/projects.$id.tsx

@@ -0,0 +1,217 @@
+import * as React from 'react'
+import { useLoaderData, useFetcher } from 'react-router'
+import type { LoaderFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { ProjectService, AreaService } from '~/services.server'
+import { TaskList, TaskExpandedDetail } from '~/components/task-list'
+import type { TaskItem, TaskDetail } from '~/components/task-list'
+import { TaskInlineCreate } from '~/components/task-inline-create'
+import { ProjectForm } from '~/components/project-form'
+import { Form } from '~/components/form'
+import { Button } from '~/components/button'
+import { AlertDialog } from '~/components/alert-dialog'
+import { TextField } from '~/components/text-field'
+import { TextArea } from '~/components/text-area'
+import { DatePicker } from '~/components/date-picker'
+import { Select, type SelectOption } from '~/components/select'
+import type { Iso } from 'iso-fns'
+
+export async function loader({ context, params }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.user) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const id = Number(params.id)
+  if (!Number.isFinite(id)) {
+    throw new Response('Not Found', { status: 404 })
+  }
+
+  const profile = requestContext.user
+
+  const [{ project, tasks }, areas] = await Promise.all([
+    ProjectService.ViewProjectTasks({ id }, profile),
+    AreaService.ListAreas(profile)
+  ])
+
+  return { project, tasks, areas }
+}
+
+export default function ProjectDetailPage() {
+  const { project, tasks, areas } = useLoaderData<typeof loader>()
+  const [selectedTaskId, setSelectedTaskId] = React.useState<number | null>(null)
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)
+  const [isEditingTitle, setIsEditingTitle] = React.useState(false)
+  const [showMetadata, setShowMetadata] = React.useState(false)
+
+  const completed = project.completedDate !== null
+
+  return (
+    <div className="mx-auto max-w-2xl px-8 py-8">
+      <div className="mb-6">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            {isEditingTitle ? (
+              <ProjectForm
+                mode="inline"
+                action={`/api/projects/${project.id}/edit`}
+                defaultValues={{
+                  title: project.title,
+                  notes: project.notes as string | null,
+                  scheduledDate: project.scheduledDate ? String(project.scheduledDate) : null,
+                  areaId: project.areaId as number | null
+                }}
+                key={project.id + '-' + project.title}
+                inputClassName="w-full bg-transparent text-2xl font-semibold tracking-tight text-neutral-900 placeholder-neutral-400 outline-none"
+                onCancel={() => setIsEditingTitle(false)}
+                onSuccess={() => setIsEditingTitle(false)}
+              />
+            ) : (
+              <h1
+                className="cursor-pointer typography-h1"
+                onClick={() => setIsEditingTitle(true)}
+              >
+                {project.title}
+              </h1>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <Form
+              method="post"
+              action={`/api/projects/${project.id}/${completed ? 'uncomplete' : 'complete'}`}
+            >
+              <Button type="submit" variant="plain" color="neutral" size="sm">
+                {completed ? 'Uncomplete' : 'Complete'}
+              </Button>
+            </Form>
+            <Button variant="plain" color="neutral" size="sm" onClick={() => setShowDeleteDialog(true)}>
+              Delete
+            </Button>
+            <AlertDialog
+              title="Delete this project?"
+              description="This action cannot be undone."
+              variant="negative"
+              isOpen={showDeleteDialog}
+              onOpenChange={setShowDeleteDialog}
+            >
+              {({ close }) => (
+                <div className="flex gap-2">
+                  <AlertDialog.CancelButton />
+                  <Form method="post" action={`/api/projects/${project.id}/delete`}>
+                    <Button type="submit" color="negative">
+                      Delete
+                    </Button>
+                  </Form>
+                </div>
+              )}
+            </AlertDialog>
+          </div>
+        </div>
+      </div>
+
+      {showMetadata ? (
+        <div className="mb-6">
+          <ProjectMetadataForm
+            project={project}
+            areas={areas}
+            onDone={() => setShowMetadata(false)}
+          />
+        </div>
+      ) : (
+        <div className="mb-6">
+          <Button variant="plain" color="neutral" size="sm" onClick={() => setShowMetadata(true)}>
+            Edit details
+          </Button>
+        </div>
+      )}
+
+      <div className="mb-8">
+        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-neutral-400">Tasks</h2>
+        <TaskList
+          tasks={tasks as TaskItem[]}
+          positionField="list"
+          emptyMessage="No tasks in this project"
+          selectedTaskId={selectedTaskId}
+          onSelect={(id) => setSelectedTaskId(id === selectedTaskId ? null : id)}
+          renderExpanded={(id) => {
+            const task = tasks.find((t) => t.id === id) as TaskDetail | undefined
+            if (!task) return null
+            return (
+              <TaskExpandedDetail key={id} task={task} onClose={() => setSelectedTaskId(null)} />
+            )
+          }}
+        />
+        <div className="mt-2 border-t border-neutral-950/5 pt-2">
+          <TaskInlineCreate projectId={project.id} areaId={project.areaId} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ProjectMetadataForm({
+  project,
+  areas,
+  onDone
+}: {
+  project: { id: number; title: string; notes: string | null; scheduledDate: string | Iso.Date | null; areaId: number | null }
+  areas: Array<{ id: number; title: string }>
+  onDone: () => void
+}) {
+  const fetcher = useFetcher()
+  const [title, setTitle] = React.useState(project.title)
+  const [notes, setNotes] = React.useState(project.notes ?? '')
+  const [scheduledDate, setScheduledDate] = React.useState<Iso.Date | null>(
+    project.scheduledDate ? (String(project.scheduledDate).slice(0, 10) as Iso.Date) : null
+  )
+  const [areaId, setAreaId] = React.useState<number | null>(project.areaId ?? null)
+
+  const areaOptions: SelectOption[] = [
+    { value: null, label: 'None' },
+    ...areas.map((a) => ({ value: a.id, label: a.title }))
+  ]
+
+  React.useEffect(() => {
+    if (fetcher.state === 'idle' && fetcher.data) onDone()
+  }, [fetcher.state, fetcher.data, onDone])
+
+  return (
+    <Form method="post" action={`/api/projects/${project.id}/edit`} navigate={false} onSubmit={() => {}}>
+      <div className="space-y-4">
+        <TextField
+          name="title"
+          label="Title"
+          value={title}
+          onChange={setTitle}
+          isRequired
+          maxLength={255}
+          placeholder="Project title"
+        />
+        <TextArea name="notes" label="Notes" value={notes} onChange={setNotes} placeholder="Add notes..." minRows={3} />
+        <DatePicker
+          name="scheduledDate"
+          label="Scheduled date"
+          value={scheduledDate}
+          onChange={setScheduledDate}
+          placeholder="No date"
+        />
+        <Select
+          name="areaId"
+          label="Area"
+          value={areaId}
+          onChange={(v) => setAreaId(typeof v === 'number' ? v : null)}
+          options={areaOptions}
+          placeholder="No area"
+        />
+        <div className="flex items-center gap-3">
+          <Button type="submit" variant="contained" color="primary" size="sm">
+            Save
+          </Button>
+          <Button type="button" variant="soft" color="neutral" size="sm" onClick={onDone}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Form>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/routes/today.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import { useLoaderData } from 'react-router'
+import type { LoaderFunctionArgs } from 'react-router'
+import { dateFns, type Iso } from 'iso-fns'
+import { getRequestContext } from '~/features/request-context.server'
+import { TaskService } from '~/services.server'
+import { TaskList, TaskExpandedDetail } from '~/components/task-list'
+import type { TaskItem, TaskDetail } from '~/components/task-list'
+import { TaskInlineCreate } from '~/components/task-inline-create'
+import { useCompleteTask, useUncompleteTask } from '~/hooks/use-task-actions'
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.user) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const profile = requestContext.user
+  const { tasks } = await TaskService.ListTasksForToday({}, profile)
+
+  return { tasks }
+}
+
+export default function TodayPage() {
+  const { tasks } = useLoaderData<typeof loader>()
+  const [selectedTaskId, setSelectedTaskId] = React.useState<number | null>(null)
+  const completeTask = useCompleteTask()
+  const uncompleteTask = useUncompleteTask()
+  const today = dateFns.now()
+
+  const totalCount = tasks.length
+  const completedCount = tasks.filter((t) => t.completedDate !== null).length
+
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col gap-6 px-8 py-8">
+      <div>
+        <p className="text-sm font-medium text-neutral-400">{getGreeting()}</p>
+        <p className="mt-1 text-lg font-medium text-pretty text-neutral-900">{formatDate(today)}</p>
+        {totalCount > 0 && (
+          <p className="mt-1 text-sm tabular-nums text-neutral-500">
+            {completedCount === totalCount
+              ? 'All tasks completed'
+              : `${totalCount - completedCount} ${totalCount - completedCount === 1 ? 'task' : 'tasks'} remaining`}
+          </p>
+        )}
+      </div>
+
+      <TaskList
+        tasks={tasks as TaskItem[]}
+        positionField="scheduled"
+        showProject
+        emptyMessage="Nothing scheduled for today"
+        selectedTaskId={selectedTaskId}
+        onSelect={(id) => setSelectedTaskId(id === selectedTaskId ? null : id)}
+        onComplete={(id) => completeTask.submit(id)}
+        onUncomplete={(id) => uncompleteTask.submit(id)}
+        renderExpanded={(id) => {
+          const task = tasks.find((t) => t.id === id) as TaskDetail | undefined
+          if (!task) return null
+          return (
+            <TaskExpandedDetail key={id} task={task} onClose={() => setSelectedTaskId(null)} />
+          )
+        }}
+      />
+
+      <div className="border-t border-neutral-950/5 pt-2">
+        <TaskInlineCreate scheduledDate={todayDateString()} />
+      </div>
+    </div>
+  )
+}
+
+function formatDate(date: Iso.Date): string {
+  return dateFns.format(date, 'iiii, MMMM d')
+}
+
+function todayDateString(): Iso.Date {
+  return dateFns.now()
+}
+
+function getGreeting(): string {
+  const hour = new Date().getHours()
+  if (hour < 12) return 'Good morning'
+  if (hour < 17) return 'Good afternoon'
+  return 'Good evening'
+}