npm - @maestro-js/agent-skills - Versions diffs - 1.0.0-alpha.2 → 1.0.0-alpha.21 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (691) hide show

package/skills/maestro-examples/references/chorus/chorus-web/app/root.tsx ADDED Viewed

@@ -0,0 +1,164 @@
+import * as Sentry from '@sentry/react-router'
+import { HeadlessForm } from '@maestro-js/form'
+import {
+  Form,
+  isRouteErrorResponse,
+  useActionData,
+  useFetchers,
+  useLoaderData,
+  type LoaderFunctionArgs,
+  type MiddlewareFunction
+} from 'react-router'
+import { Link, Links, Meta, Outlet, Scripts } from 'react-router'
+import './app.css'
+import { getRequestContext, requestContextMiddleware } from './features/request-context.server'
+import { csrfMiddleware } from './features/csrf-middleware.server'
+import { securityHeadersMiddleware } from './features/security-headers-middleware.server'
+import { CsrfHiddenInput } from './features/csrf-hidden-input'
+import { Avatar } from './components/avatar'
+import { Menu } from './components/menu'
+import { ToastRegion } from './components/toast'
+import { getSessionToast } from './features/redirect-with-toast.server'
+import { customErrorStatusCodeMiddleware } from './features/custom-error-status-code-middleware.server'
+export const middleware: MiddlewareFunction<Response>[] = [
+  customErrorStatusCodeMiddleware,
+  requestContextMiddleware,
+  csrfMiddleware,
+  securityHeadersMiddleware
+]
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  return {
+    csrfToken: requestContext.session.getCsrfToken(),
+    isAuthenticated: !!requestContext.profile,
+    username: requestContext.profile?.username ?? null,
+    profileImage: requestContext.profile?.profileImage ?? null,
+    toast: getSessionToast(requestContext.session),
+    profile: requestContext.profile
+  }
+}
+export default function Root() {
+  const { csrfToken, isAuthenticated, username, profileImage, toast } = useLoaderData<typeof loader>()
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="flex min-h-screen flex-col bg-neutral-50">
+        <nav className="border-b border-neutral-200 bg-white">
+          <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
+            <div className="flex items-center gap-6">
+              <Link to="/" className="text-lg font-semibold text-neutral-900">
+                Chorus
+              </Link>
+            </div>
+            <div className="flex items-center gap-4">
+              {isAuthenticated ? (
+                <>
+                  <Menu
+                    Button={
+                      <button className="flex items-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
+                        <Avatar
+                          src={profileImage ?? undefined}
+                          alt={username ?? undefined}
+                          className="size-8 cursor-pointer text-xs"
+                        />
+                      </button>
+                    }
+                  >
+                    <Menu.LinkItem to="/settings">Settings</Menu.LinkItem>
+                    <Menu.Separator />
+                    <Menu.Item form="logout-form" type="submit">
+                      Log out
+                    </Menu.Item>
+                  </Menu>
+                  <Form method="POST" action="/logout" id="logout-form" className="hidden">
+                    <CsrfHiddenInput />
+                  </Form>
+                </>
+              ) : (
+                <Link to="/login" className="typography-link">
+                  Log in
+                </Link>
+              )}
+            </div>
+          </div>
+        </nav>
+        <main className="flex-1">
+          <HeadlessForm.GlobalProvider useServerErrors={useServerErrors} csrfToken={csrfToken}>
+            <Outlet />
+          </HeadlessForm.GlobalProvider>
+        </main>
+        <ToastRegion toast={toast} />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+export function ErrorBoundary({ error }: { error: unknown }) {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details
+  } else if (error instanceof Error) {
+    Sentry.captureException(error)
+    if (import.meta.env.DEV) {
+      details = error.message
+    }
+  }
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="flex min-h-screen flex-col items-center justify-center bg-neutral-50">
+        <h1 className="text-2xl font-bold text-neutral-900">{message}</h1>
+        <p className="mt-2 text-neutral-600">{details}</p>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+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/chorus/chorus-web/app/routes/_auth/forgot-password.tsx ADDED Viewed

@@ -0,0 +1,90 @@
+import { z } from 'zod'
+import { data, Link, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router'
+import { Button } from '../../components/button'
+import { Container } from '../../components/container'
+import { Form } from '../../components/form'
+import { TextField } from '../../components/text-field'
+import { getRequestContext } from '../../features/request-context.server'
+import { AuthService } from '~/services.server'
+import { rateLimitingMiddleware } from '~/features/rate-limiting-middleware.server'
+import { useLoaderData } from 'react-router'
+const formSchema = z.object({ email: z.email() })
+export const middleware = [
+  rateLimitingMiddleware(({ context }) => {
+    const requestContext = getRequestContext(context)
+    if (requestContext.deviceContext.ip) {
+      return {
+        key: `Auth.forgotPassword.ip.${requestContext.deviceContext.ip}`,
+        maxAttemptsPerWindow: 5,
+        decaySeconds: 60
+      }
+    } else {
+      return null
+    }
+  })
+]
+export async function loader({ request, context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/')
+  }
+  const sent = new URL(request.url).searchParams.get('sent') === 'true'
+  return data({ sent })
+}
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/')
+  }
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(formSchema, formData)
+  if (parsed.success) {
+    const { email } = parsed.data
+    const resetUrl = new URL('/reset-password', request.url).toString()
+    await AuthService.ForgotPassword({ email, url: resetUrl })
+    return redirect('/forgot-password?sent=true')
+  } else {
+    return Form.validationError(parsed)
+  }
+}
+export default function ForgotPassword() {
+  const { sent } = useLoaderData<typeof loader>()
+  return (
+    <div className="flex min-h-full flex-1 items-center justify-center px-4 py-12">
+      <Container elevation={0} size="lg" className="w-full max-w-md">
+        {sent ? (
+          <>
+            <h1 className="mb-4 text-center typography-h1">Check your email</h1>
+            <p className="mb-6 text-center text-sm text-neutral-600">
+              If an account exists with that email, we've sent a password reset link.
+            </p>
+            <Link to="/login" className="block text-center typography-link">
+              Back to login
+            </Link>
+          </>
+        ) : (
+          <>
+            <h1 className="mb-6 text-center typography-h1">Forgot password</h1>
+            <Form method="post" className="space-y-4">
+              <TextField name="email" type="email" label="Email" isRequired autoComplete="email" />
+              <Button type="submit" variant="contained" color="primary" fullWidth>
+                Send reset link
+              </Button>
+            </Form>
+            <p className="mt-4 text-center text-sm text-neutral-500">
+              <Link to="/login" className="typography-link">
+                Back to login
+              </Link>
+            </p>
+          </>
+        )}
+      </Container>
+    </div>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/_auth/login.tsx ADDED Viewed

@@ -0,0 +1,104 @@
+import { ProfileSchemas } from '@chorus/schemas'
+import { data, Link, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router'
+import { Button } from '../../components/button'
+import { LabeledCheckbox } from '../../components/checkbox'
+import { Container } from '../../components/container'
+import { Form } from '../../components/form'
+import { TextField } from '../../components/text-field'
+import { getRequestContext } from '../../features/request-context.server'
+import { AuthService, Helpers } from '~/services.server'
+import { rateLimitingMiddleware } from '~/features/rate-limiting-middleware.server'
+const formSchema = ProfileSchemas.loginSchema
+export const middleware = [
+  rateLimitingMiddleware(({ context }) => {
+    const requestContext = getRequestContext(context)
+    if (requestContext.deviceContext.ip) {
+      return {
+        key: `Auth.login.ip.${requestContext.deviceContext.ip}`,
+        maxAttemptsPerWindow: 50,
+        decaySeconds: 5 * 60
+      }
+    } else {
+      return null
+    }
+  })
+]
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/')
+  } else {
+    return data({})
+  }
+}
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/')
+  }
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(formSchema, formData)
+  if (parsed.success) {
+    const { rememberMe, email, password } = parsed.data
+    try {
+      const { cookie } = await AuthService.LoginProfile({
+        email,
+        password,
+        rememberMe,
+        deviceContext: requestContext.deviceContext,
+        session: requestContext.session
+      })
+      return redirect('/', {
+        headers: Helpers.combineHeaders(cookie ? { 'Set-Cookie': cookie } : {})
+      })
+    } catch (e) {
+      if (
+        e instanceof AuthService.errors.TooManyLoginAttemptsError ||
+        e instanceof AuthService.errors.InvalidCredentialsError
+      ) {
+        return Form.validationError({
+          issues: [{ path: ['password'], message: e.message }],
+          formData
+        })
+      }
+      throw e
+    }
+  } else {
+    return Form.validationError(parsed)
+  }
+}
+export default function Login() {
+  return (
+    <div className="flex min-h-full flex-1 items-center justify-center px-4 py-12">
+      <Container elevation={0} size="lg" className="w-full max-w-md">
+        <h1 className="mb-6 text-center typography-h1">Log in</h1>
+        <Form method="post" className="space-y-4">
+          <TextField name="email" type="email" label="Email" isRequired autoComplete="email" />
+          <TextField name="password" type="password" label="Password" isRequired autoComplete="current-password" />
+          <div className="flex items-center justify-between">
+            <LabeledCheckbox name="rememberMe" label="Remember me" />
+            <Link to="/forgot-password" className="typography-link">
+              Forgot password?
+            </Link>
+          </div>
+          <Button type="submit" variant="contained" color="primary" fullWidth>
+            Log in
+          </Button>
+        </Form>
+        <p className="mt-4 text-center text-sm text-neutral-500">
+          Don't have an account?{' '}
+          <Link to="/signup" className="typography-link">
+            Sign up
+          </Link>
+        </p>
+      </Container>
+    </div>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/_auth/logout.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { AuthService } from '~/services.server'
+import { data, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router'
+import { Button } from '../../components/button'
+import { Container } from '../../components/container'
+import { getRequestContext } from '../../features/request-context.server'
+import { Form } from '~/components/form'
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) {
+    throw redirect('/')
+  } else {
+    return data({})
+  }
+}
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    const { cookie } = await AuthService.LogoutProfile({
+      cookieHeader: request.headers.get('Cookie'),
+      session: requestContext.session
+    })
+    return redirect('/', { headers: cookie ? { 'Set-Cookie': cookie } : {} })
+  } else {
+    return redirect('/')
+  }
+}
+export default function Logout() {
+  return (
+    <div className="flex min-h-full flex-1 items-center justify-center px-4 py-12">
+      <Container elevation={0} size="lg" className="w-full max-w-md">
+        <h1 className="mb-6 text-center typography-h1">Log out</h1>
+        <p className="mb-6 text-center text-sm text-neutral-500">Are you sure you want to log out?</p>
+        <Form method="post">
+          <Button type="submit" variant="contained" color="primary" fullWidth>
+            Log out
+          </Button>
+        </Form>
+      </Container>
+    </div>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/_auth/reset-password.tsx ADDED Viewed

@@ -0,0 +1,130 @@
+import { z } from 'zod'
+import { ProfileSchemas } from '@chorus/schemas'
+import { data, Link, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router'
+import { Button } from '../../components/button'
+import { Container } from '../../components/container'
+import { Form } from '../../components/form'
+import { TextField } from '../../components/text-field'
+import { AuthService, Helpers, SignedUrl } from '~/services.server'
+import { useLoaderData } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+const formSchema = z
+  .object({
+    newPassword: ProfileSchemas.passwordSchema,
+    confirmPassword: ProfileSchemas.passwordSchema
+  })
+  .superRefine(({ newPassword, confirmPassword }, ctx) => {
+    if (confirmPassword !== newPassword) {
+      ctx.addIssue({
+        path: ['confirmPassword'],
+        code: 'custom',
+        message: 'The passwords must match'
+      })
+    }
+  })
+export async function loader({ request }: LoaderFunctionArgs) {
+  const searchParams = new URL(request.url).searchParams
+  const token = searchParams.get('token')
+  const id = searchParams.get('id')
+  if (!token || !id) {
+    return data({ valid: false as const })
+  }
+  const valid = await SignedUrl.hasValidSignature(searchParams)
+  if (!valid) {
+    return data({ valid: false as const })
+  }
+  return data({ valid: true as const, token, id })
+}
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  const searchParams = new URL(request.url).searchParams
+  const token = searchParams.get('token')
+  const id = searchParams.get('id')
+  if (!token || !id) {
+    return data({ error: 'Invalid reset link' }, { status: 400 })
+  }
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(formSchema, formData)
+  if (!parsed.success) {
+    return Form.validationError(parsed)
+  }
+  try {
+    const { cookie } = await AuthService.ResetPassword({
+      token,
+      authenticatableId: Number(id),
+      newPassword: parsed.data.newPassword,
+      deviceContext: requestContext.deviceContext,
+      session: requestContext.session
+    })
+    return redirect('/', {
+      headers: Helpers.combineHeaders(cookie ? { 'Set-Cookie': cookie } : {})
+    })
+  } catch (e) {
+    if (
+      e instanceof AuthService.errors.PasswordResetInvalidTokenError ||
+      e instanceof AuthService.errors.PasswordResetExpiredTokenError
+    ) {
+      return Form.validationError({
+        issues: [{ path: ['newPassword'], message: 'This reset link is invalid or has expired. Please request a new one.' }],
+        formData
+      })
+    }
+    if (e instanceof AuthService.errors.PasswordResetThrottledError) {
+      return Form.validationError({
+        issues: [{ path: ['newPassword'], message: 'Too many reset attempts. Please try again later.' }],
+        formData
+      })
+    }
+    throw e
+  }
+}
+export default function ResetPassword() {
+  const loaderData = useLoaderData<typeof loader>()
+  return (
+    <div className="flex min-h-full flex-1 items-center justify-center px-4 py-12">
+      <Container elevation={0} size="lg" className="w-full max-w-md">
+        {!loaderData.valid ? (
+          <>
+            <h1 className="mb-4 text-center typography-h1">Invalid reset link</h1>
+            <p className="mb-6 text-center text-sm text-neutral-600">This password reset link is invalid or has expired.</p>
+            <Link
+              to="/forgot-password"
+              className="block text-center typography-link"
+            >
+              Request a new link
+            </Link>
+          </>
+        ) : (
+          <>
+            <h1 className="mb-6 text-center typography-h1">Reset password</h1>
+            <Form method="post" className="space-y-4">
+              <TextField name="newPassword" type="password" label="New password" isRequired autoComplete="new-password" />
+              <TextField
+                name="confirmPassword"
+                type="password"
+                label="Confirm password"
+                isRequired
+                autoComplete="new-password"
+              />
+              <Button type="submit" variant="contained" color="primary" fullWidth>
+                Reset password
+              </Button>
+            </Form>
+          </>
+        )}
+      </Container>
+    </div>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/_auth/signup.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+import { ProfileSchemas } from '@chorus/schemas'
+import { data, Link, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router'
+import { Button } from '../../components/button'
+import { Container } from '../../components/container'
+import { Form } from '../../components/form'
+import { TextField } from '../../components/text-field'
+import { getRequestContext } from '../../features/request-context.server'
+import { Auth, AuthService, Helpers } from '~/services.server'
+import { rateLimitingMiddleware } from '~/features/rate-limiting-middleware.server'
+const formSchema = ProfileSchemas.signupSchema
+export const middleware = [
+  rateLimitingMiddleware(({ context }) => {
+    const requestContext = getRequestContext(context)
+    return {
+      key: `AuthService.SignupNewProfile.${requestContext.deviceContext.ip}`,
+      maxAttemptsPerWindow: 10,
+      decaySeconds: 120
+    }
+  })
+]
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/')
+  } else {
+    return data({})
+  }
+}
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/')
+  }
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(formSchema, formData)
+  if (parsed.success) {
+    try {
+      const profileId = await AuthService.SignupNewProfile(parsed.data)
+      const { cookie } = await Auth.loginById({
+        id: profileId,
+        rememberMe: false,
+        session: requestContext.session,
+        deviceContext: requestContext.deviceContext
+      })
+      return redirect('/', {
+        headers: Helpers.combineHeaders(cookie ? { 'Set-Cookie': cookie } : {})
+      })
+    } catch (e) {
+      if (e instanceof AuthService.errors.SignUpDuplicateProfileError) {
+        return Form.validationError({ issues: [{ path: ['email'], message: e.message }], formData })
+      }
+      throw e
+    }
+  } else {
+    return Form.validationError(parsed)
+  }
+}
+export default function Signup() {
+  return (
+    <div className="flex min-h-full flex-1 items-center justify-center px-4 py-12">
+      <Container elevation={0} size="lg" className="w-full max-w-md">
+        <h1 className="mb-6 text-center typography-h1">Create an account</h1>
+        <Form method="post" className="space-y-4">
+          <TextField name="email" type="email" label="Email" isRequired autoComplete="email" />
+          <TextField name="password" type="password" label="Password" isRequired autoComplete="new-password" />
+          <TextField
+            name="confirmPassword"
+            type="password"
+            label="Confirm password"
+            isRequired
+            autoComplete="new-password"
+          />
+          <Button type="submit" variant="contained" color="primary" fullWidth>
+            Sign up
+          </Button>
+        </Form>
+        <p className="mt-4 text-center text-sm text-neutral-500">
+          Already have an account?{' '}
+          <Link to="/login" className="typography-link">
+            Log in
+          </Link>
+        </p>
+      </Container>
+    </div>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/_browse/_layout.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import { data, Outlet, useLoaderData, type LoaderFunctionArgs } from 'react-router'
+import { ChannelCard } from '../../components/channel-card'
+import { ButtonLink } from '../../components/button-link'
+import { getRequestContext } from '../../features/request-context.server'
+import { ChannelService } from '~/services.server'
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  const channels = await ChannelService.BrowseChannels()
+  return data({ channels, isAuthenticated: !!requestContext.profile })
+}
+export default function BrowseLayout() {
+  const { channels, isAuthenticated } = useLoaderData<typeof loader>()
+  return (
+    <>
+      <div className="mx-auto max-w-lg px-4 py-8">
+        <div className="mb-6 flex items-center justify-between">
+          <h1 className="typography-h1">Channels</h1>
+          {isAuthenticated && (
+            <ButtonLink to="/c/new" color="primary" size="sm" viewTransition>
+              Create channel
+            </ButtonLink>
+          )}
+        </div>
+        <div className="space-y-4">
+          {channels.map((channel) => (
+            <ChannelCard key={channel.id} channel={channel} />
+          ))}
+        </div>
+      </div>
+      <Outlet />
+    </>
+  )
+}