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

package/skills/maestro-examples/references/setlist/setlist-web/app/features/custom-error-status-code-middleware.server.ts

@@ -0,0 +1,31 @@
+import * as Sentry from '@sentry/react-router'
+import { type MiddlewareFunction } from 'react-router'
+import { CustomErrors, Log } from '~/services.server'
+
+const log = Log.channel('http')
+
+export const customErrorStatusCodeMiddleware: MiddlewareFunction<Response> = async ({ request }, next) => {
+  try {
+    return await next()
+  } catch (e) {
+    if (e instanceof Response) throw e
+
+    const statusCode = CustomErrors.getHttpStatusCode(e)
+    if (statusCode) {
+      if (statusCode >= 500) {
+        log.error('Server error', {
+          status: statusCode,
+          url: request.url,
+          error: e instanceof Error ? e.message : String(e)
+        })
+      } else {
+        log.warn('Client error', { status: statusCode, url: request.url, error: e instanceof Error ? e.name : String(e) })
+      }
+      throw new Response(null, { status: statusCode })
+    } else {
+      Sentry.captureException(e)
+      log.error('Unhandled error', { url: request.url, error: e instanceof Error ? (e.stack ?? e.message) : String(e) })
+      throw e
+    }
+  }
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/features/rate-limiting-middleware.server.ts

@@ -0,0 +1,36 @@
+import { RateLimiting } from '~/services.server'
+import type { MiddlewareFunction } from 'react-router'
+
+const isTesting = process.env.IS_TESTING === 'true'
+
+export function rateLimitingMiddleware(
+  getOptions: (args: Parameters<MiddlewareFunction>[0]) =>
+    | {
+        key: string
+        maxAttemptsPerWindow: number
+        decaySeconds?: number | undefined
+      }
+    | Promise<{
+        key: string
+        maxAttemptsPerWindow: number
+        decaySeconds?: number | undefined
+      }>
+    | null
+) {
+  const middleware: MiddlewareFunction<Response> = async (args, next) => {
+    if (isTesting) return next()
+
+    const options = await getOptions(args)
+    if (options) {
+      if (await RateLimiting.tooManyAttempts(options.key, options.maxAttemptsPerWindow)) {
+        throw new Response('Too Many Requests', { status: 429 })
+      } else {
+        await RateLimiting.increment(options.key, 1, options.decaySeconds)
+        return await next()
+      }
+    } else {
+      return next()
+    }
+  }
+  return middleware
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/features/redirect-with-toast.server.ts

@@ -0,0 +1,14 @@
+import { redirect } from 'react-router'
+import type { Toast } from '~/components/toast'
+import type { Session } from '~/services.server'
+
+const TOAST_SESSION_KEY = '_toast'
+
+export function redirectWithToast(url: string, toast: Toast, session: Session) {
+  session.flash(TOAST_SESSION_KEY, toast)
+  return redirect(url)
+}
+
+export function getSessionToast(session: Session): Toast | null {
+  return (session.get(TOAST_SESSION_KEY) as Toast) ?? null
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/features/request-context.server.ts

@@ -0,0 +1,52 @@
+import { Auth, Db, Helpers, Session } from '~/services.server'
+import { createContext, RouterContextProvider, type MiddlewareFunction } from 'react-router'
+import { randomUUID } from 'node:crypto'
+import assert from 'node:assert'
+
+interface User {
+  id: number
+  email: string
+}
+
+interface RequestContext {
+  user: User | null
+  requestId: string
+  session: Session
+  deviceContext: ReturnType<typeof Helpers.getDeviceContext>
+}
+
+const requestContext = createContext<RequestContext | null>(null)
+
+export const requestContextMiddleware: MiddlewareFunction<Response> = async ({ request, context }, next) => {
+  const requestId = randomUUID()
+  const cookieHeader = request.headers.get('Cookie')
+  const session = await Session.getSession(cookieHeader)
+  const deviceContext = Helpers.getDeviceContext(request)
+  const authResult = await Auth.authenticate({ session, cookieHeader, deviceContext })
+
+  let user: User | null = null
+  if (authResult.id) {
+    const rows = await Db.select('SELECT id, email FROM users WHERE id = ?', [authResult.id])
+    const row = rows[0]
+    if (row) {
+      user = { id: row.id as number, email: row.email as string }
+    }
+  }
+
+  context.set(requestContext, { user, requestId, session, deviceContext })
+
+  const response = await next()
+
+  if (authResult.cookie) {
+    response.headers.append('Set-Cookie', authResult.cookie)
+  }
+  response.headers.append('Set-Cookie', await session.commit())
+
+  return response
+}
+
+export function getRequestContext(context: Readonly<RouterContextProvider>) {
+  const request = context.get(requestContext)
+  assert.ok(request)
+  return request
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/features/security-headers-middleware.server.ts

@@ -0,0 +1,10 @@
+import type { MiddlewareFunction } from 'react-router'
+
+export const securityHeadersMiddleware: MiddlewareFunction<Response> = async (_args, next) => {
+  const response = await next()
+  response.headers.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains')
+  response.headers.set('X-Content-Type-Options', 'nosniff')
+  response.headers.set('X-Frame-Options', 'DENY')
+  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
+  return response
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/hooks/use-area-actions.ts

@@ -0,0 +1,44 @@
+import { useFetcher } from 'react-router'
+import { useCsrfToken } from './use-csrf-token'
+
+export function useEditArea(areaId: number) {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    Form: fetcher.Form,
+    action: `/api/areas/${areaId}/edit`,
+    submit: (data: FormData | Record<string, string>) => {
+      if (data instanceof FormData) {
+        data.set('__csrfToken', csrfToken)
+        return fetcher.submit(data, { method: 'post', action: `/api/areas/${areaId}/edit` })
+      }
+      return fetcher.submit({ ...data, __csrfToken: csrfToken }, { method: 'post', action: `/api/areas/${areaId}/edit` })
+    },
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useDeleteArea() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (areaId: number) =>
+      fetcher.submit({ __csrfToken: csrfToken }, { method: 'post', action: `/api/areas/${areaId}/delete` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useReorderArea() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (areaId: number, data: { beforeKey: string; afterKey: string }) =>
+      fetcher.submit({ ...data, __csrfToken: csrfToken }, { method: 'post', action: `/api/areas/${areaId}/reorder` }),
+    state: fetcher.state,
+    data: fetcher.data,
+    formData: fetcher.formData,
+    formAction: fetcher.formAction
+  }
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/hooks/use-csrf-token.ts

@@ -0,0 +1,6 @@
+import { useRouteLoaderData } from 'react-router'
+
+export function useCsrfToken(): string {
+  const rootData = useRouteLoaderData('root') as { csrfToken: string } | undefined
+  return rootData?.csrfToken ?? ''
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/hooks/use-project-actions.ts

@@ -0,0 +1,80 @@
+import { useFetcher } from 'react-router'
+import { useCsrfToken } from './use-csrf-token'
+
+export function useCompleteProject() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (projectId: number) =>
+      fetcher.submit({ __csrfToken: csrfToken }, { method: 'post', action: `/api/projects/${projectId}/complete` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useUncompleteProject() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (projectId: number) =>
+      fetcher.submit({ __csrfToken: csrfToken }, { method: 'post', action: `/api/projects/${projectId}/uncomplete` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useDeleteProject() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (projectId: number) =>
+      fetcher.submit({ __csrfToken: csrfToken }, { method: 'post', action: `/api/projects/${projectId}/delete` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useEditProject(projectId: number) {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    Form: fetcher.Form,
+    action: `/api/projects/${projectId}/edit`,
+    submit: (data: FormData | Record<string, string>) => {
+      if (data instanceof FormData) {
+        data.set('__csrfToken', csrfToken)
+        return fetcher.submit(data, { method: 'post', action: `/api/projects/${projectId}/edit` })
+      }
+      return fetcher.submit(
+        { ...data, __csrfToken: csrfToken },
+        { method: 'post', action: `/api/projects/${projectId}/edit` }
+      )
+    },
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useMoveProject() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (projectId: number, data: { areaId: string }) =>
+      fetcher.submit({ ...data, __csrfToken: csrfToken }, { method: 'post', action: `/api/projects/${projectId}/move` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useReorderProject() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (projectId: number, data: { beforeKey: string; afterKey: string }) =>
+      fetcher.submit({ ...data, __csrfToken: csrfToken }, { method: 'post', action: `/api/projects/${projectId}/reorder` }),
+    state: fetcher.state,
+    data: fetcher.data,
+    formData: fetcher.formData,
+    formAction: fetcher.formAction
+  }
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/hooks/use-task-actions.ts

@@ -0,0 +1,65 @@
+import { useFetcher } from 'react-router'
+import { useCsrfToken } from './use-csrf-token'
+
+export function useCompleteTask() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (taskId: number) =>
+      fetcher.submit({ __csrfToken: csrfToken }, { method: 'post', action: `/api/tasks/${taskId}/complete` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useUncompleteTask() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (taskId: number) =>
+      fetcher.submit({ __csrfToken: csrfToken }, { method: 'post', action: `/api/tasks/${taskId}/uncomplete` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useDeleteTask() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (taskId: number) =>
+      fetcher.submit({ __csrfToken: csrfToken }, { method: 'post', action: `/api/tasks/${taskId}/delete` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useEditTask(taskId: number) {
+  return {
+    action: `/api/tasks/${taskId}/edit`
+  }
+}
+
+export function useMoveTask() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (taskId: number, data: { projectId: string; areaId: string }) =>
+      fetcher.submit({ ...data, __csrfToken: csrfToken }, { method: 'post', action: `/api/tasks/${taskId}/move` }),
+    state: fetcher.state,
+    data: fetcher.data
+  }
+}
+
+export function useReorderTask() {
+  const fetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  return {
+    submit: (taskId: number, data: { beforeKey: string; afterKey: string; type: string }) =>
+      fetcher.submit({ ...data, __csrfToken: csrfToken }, { method: 'post', action: `/api/tasks/${taskId}/reorder` }),
+    state: fetcher.state,
+    data: fetcher.data,
+    formData: fetcher.formData,
+    formAction: fetcher.formAction
+  }
+}

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

@@ -0,0 +1,218 @@
+import * as Sentry from '@sentry/react-router'
+import * as React from 'react'
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  redirect,
+  useLoaderData,
+  useRouteLoaderData,
+  useMatches,
+  isRouteErrorResponse,
+  useRouteError,
+  Link,
+  useActionData,
+  useFetchers
+} from 'react-router'
+import type { LoaderFunctionArgs, MiddlewareFunction } from 'react-router'
+import { getRequestContext, requestContextMiddleware } from '~/features/request-context.server'
+import { csrfMiddleware } from '~/features/csrf-middleware.server'
+import { customErrorStatusCodeMiddleware } from '~/features/custom-error-status-code-middleware.server'
+import { securityHeadersMiddleware } from '~/features/security-headers-middleware.server'
+import { getSessionToast } from '~/features/redirect-with-toast.server'
+import { AreaService, TaskService, ProjectService } from '~/services.server'
+import { ToastRegion } from '~/components/toast'
+import { AppDndProvider } from '~/components/app-dnd-provider'
+import { Sidebar } from '~/components/sidebar'
+import './app.css'
+import { HeadlessForm } from '@maestro-js/form'
+
+export const middleware: MiddlewareFunction<Response>[] = [
+  customErrorStatusCodeMiddleware,
+  requestContextMiddleware,
+  csrfMiddleware,
+  securityHeadersMiddleware
+]
+
+export async function loader({ request, context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  const url = new URL(request.url)
+  const isAuthRoute = url.pathname.startsWith('/auth')
+
+  if (!requestContext.user && !isAuthRoute) {
+    throw redirect('/auth/login')
+  }
+
+  let sidebar: {
+    areas: Awaited<ReturnType<typeof AreaService.ListAreas>>
+    projects: Awaited<ReturnType<typeof ProjectService.ListProjects>>
+    inboxCount: number
+    todayCount: number
+  } | null = null
+
+  if (requestContext.user) {
+    const profile = { id: requestContext.user.id }
+    const [areas, projects, counts] = await Promise.all([
+      AreaService.ListAreas(profile),
+      ProjectService.ListProjects({}, profile),
+      TaskService.GetSidebarCounts({}, profile)
+    ])
+
+    sidebar = {
+      areas,
+      projects,
+      inboxCount: counts.inboxCount,
+      todayCount: counts.todayCount
+    }
+  }
+
+  return {
+    user: requestContext.user,
+    csrfToken: requestContext.session.getCsrfToken(),
+    toast: getSessionToast(requestContext.session),
+    sidebar
+  }
+}
+
+function Document({ children }: { children: React.ReactNode }) {
+  const loaderData = useRouteLoaderData<typeof loader>('root')
+  const csrfToken = loaderData?.csrfToken ?? ''
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="h-full bg-white text-neutral-900 antialiased">
+        <HeadlessForm.GlobalProvider useServerErrors={useServerErrors} csrfToken={csrfToken}>
+          {children}
+        </HeadlessForm.GlobalProvider>
+
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+export default function Root() {
+  const { user, toast, sidebar } = useLoaderData<typeof loader>()
+  const matches = useMatches()
+  const isAuthRoute = matches.some((m) => m.pathname.startsWith('/auth'))
+
+  return (
+    <Document>
+      {user && !isAuthRoute && sidebar ? (
+        <AppDndProvider>
+          <div className="flex h-screen overflow-hidden">
+            <Sidebar
+              areas={sidebar.areas}
+              projects={sidebar.projects}
+              inboxCount={sidebar.inboxCount}
+              todayCount={sidebar.todayCount}
+            />
+            <main className="flex-1 overflow-y-auto bg-white">
+              <Outlet />
+            </main>
+          </div>
+        </AppDndProvider>
+      ) : (
+        <Outlet />
+      )}
+      <ToastRegion toast={toast} />
+    </Document>
+  )
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError()
+
+  if (isRouteErrorResponse(error)) {
+    const { status } = error
+
+    let title = 'Something went wrong'
+    let description = 'An unexpected error occurred.'
+
+    if (status === 404) {
+      title = 'Page not found'
+      description = 'The page you were looking for could not be found.'
+    } else if (status === 401) {
+      title = 'Unauthorized'
+      description = 'You need to be logged in to access this page.'
+    } else if (status === 403) {
+      title = 'Forbidden'
+      description = "You don't have permission to access this resource."
+    } else if (status === 429) {
+      title = 'Too many requests'
+      description = 'Please slow down and try again in a moment.'
+    }
+
+    return (
+      <Document>
+        <div className="flex min-h-screen items-center justify-center bg-neutral-50 px-4">
+          <div className="text-center">
+            <p className="text-5xl font-bold text-neutral-300">{status}</p>
+            <h1 className="mt-4 text-xl font-semibold text-neutral-900">{title}</h1>
+            <p className="mt-2 text-sm text-neutral-600">{description}</p>
+            <Link to="/inbox" className="mt-6 inline-block typography-link">
+              Go to Inbox
+            </Link>
+          </div>
+        </div>
+      </Document>
+    )
+  }
+
+  if (error instanceof Error) {
+    Sentry.captureException(error)
+  }
+
+  return (
+    <Document>
+      <div className="flex min-h-screen items-center justify-center bg-neutral-50 px-4">
+        <div className="text-center">
+          <p className="text-5xl font-bold text-neutral-300">500</p>
+          <h1 className="mt-4 text-xl font-semibold text-neutral-900">Something went wrong</h1>
+          <p className="mt-2 text-sm text-neutral-600">An unexpected error occurred. Please try again later.</p>
+          <Link to="/inbox" className="mt-6 inline-block typography-link">
+            Go to Inbox
+          </Link>
+        </div>
+      </div>
+    </Document>
+  )
+}
+
+function useServerErrors(formId: string | undefined) {
+  const actionData = useActionData<any>()
+  const fetchers = useFetchers()
+
+  const serverError =
+    actionData && typeof actionData === 'object' && 'formSubmissionError' in actionData
+      ? actionData['formSubmissionError']
+      : null
+  if (formId && serverError?.formId === formId) {
+    return serverError.issues
+  } else {
+    const fetcherMatch =
+      fetchers
+        .map((fetcher) => {
+          const fetcherData = fetcher.data
+          const serverError =
+            fetcherData && typeof fetcherData === 'object' && 'formSubmissionError' in fetcherData
+              ? fetcherData['formSubmissionError']
+              : null
+          if (formId && serverError?.formId === formId) {
+            return serverError.issues
+          } else {
+            return null
+          }
+        })
+        .filter(Boolean)[0] ?? null
+    return fetcherMatch
+  }
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/routes/api/areas.$id.delete.tsx

@@ -0,0 +1,19 @@
+import type { ActionFunctionArgs } from 'react-router'
+import { data, redirect } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { AreaService } from '~/services.server'
+
+export async function action({ context, params }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.user) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const id = Number(params.id)
+  if (!Number.isFinite(id)) {
+    return data({ error: 'Invalid area id' }, { status: 400 })
+  }
+
+  await AreaService.DeleteArea({ id }, requestContext.user)
+  return redirect('/inbox')
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/routes/api/areas.$id.edit.tsx

@@ -0,0 +1,27 @@
+import type { ActionFunctionArgs } from 'react-router'
+import { data } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { AreaService } from '~/services.server'
+import { AreaSchemas } from '@setlist/schemas'
+import { Form } from '~/components/form'
+
+export async function action({ request, context, params }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.user) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const id = Number(params.id)
+  if (!Number.isFinite(id)) {
+    return data({ error: 'Invalid area id' }, { status: 400 })
+  }
+
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(AreaSchemas.editAreaForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData: parsed.formData, formId: parsed.formId })
+  }
+
+  await AreaService.EditArea({ id, title: parsed.data.title }, requestContext.user)
+  return { success: true }
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/routes/api/areas.$id.reorder.tsx

@@ -0,0 +1,30 @@
+import type { ActionFunctionArgs } from 'react-router'
+import { data } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { AreaService } from '~/services.server'
+
+export async function action({ request, context, params }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.user) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const id = Number(params.id)
+  if (!Number.isFinite(id)) {
+    return data({ error: 'Invalid area id' }, { status: 400 })
+  }
+
+  const formData = await request.formData()
+  const beforeKey = formData.get('beforeKey')
+  const afterKey = formData.get('afterKey')
+
+  await AreaService.ReorderArea(
+    {
+      id,
+      beforeKey: typeof beforeKey === 'string' && beforeKey !== '' ? beforeKey : null,
+      afterKey: typeof afterKey === 'string' && afterKey !== '' ? afterKey : null
+    },
+    requestContext.user
+  )
+  return { success: true }
+}

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

@@ -0,0 +1,23 @@
+import type { ActionFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { AreaService } from '~/services.server'
+import { AreaSchemas } from '@setlist/schemas'
+import { Form } from '~/components/form'
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.user) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(AreaSchemas.createAreaForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData: parsed.formData, formId: parsed.formId })
+  }
+
+  const profile = requestContext.user
+  const result = await AreaService.CreateArea({ title: parsed.data.title }, profile)
+
+  return { success: true, areaId: result.areaId }
+}