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

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/auth.login.tsx

@@ -0,0 +1,132 @@
+import { data, redirect, useActionData, 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, Log } from '~/services.server'
+import { UserSchemas } from '@cadence/schemas'
+import { Form } from '~/components/form'
+import { TextField } from '~/components/text-field'
+import { Button } from '~/components/button'
+import { LabeledCheckbox } from '~/components/checkbox'
+import { AuthLayout } from '~/components/auth-layout'
+
+const log = Log.channel('auth')
+
+export const middleware = [
+  rateLimitingMiddleware(({ context }) => {
+    const requestContext = getRequestContext(context)
+    const ip = requestContext.deviceContext.ip
+    if (ip) {
+      return {
+        key: `login:${ip}`,
+        maxAttemptsPerWindow: 20,
+        decaySeconds: 60
+      }
+    } else {
+      return null
+    }
+  })
+]
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/contacts')
+  }
+  return data({})
+}
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  const formData = await request.formData()
+
+  const parsed = await Form.serverSafeParse(UserSchemas.loginForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData })
+  }
+
+  const { orgSlug, email, password } = parsed.data
+
+  try {
+    const { cookie } = await AuthService.Login({
+      orgSlug,
+      email,
+      password,
+      rememberMe: formData.get('rememberMe') === 'true',
+      session: requestContext.session,
+      deviceContext: requestContext.deviceContext
+    })
+
+    log.info('Login succeeded', { action: 'auth.login', orgSlug, email })
+
+    return redirect('/contacts', { headers: cookie ? { 'Set-Cookie': cookie } : {} })
+  } catch (error) {
+    if (error instanceof Response) throw error
+
+    if (error instanceof AuthService.errors.InvalidCredentialsError) {
+      return Form.customValidationError({ message: 'Invalid credentials', formData })
+    }
+
+    if (error instanceof AuthService.errors.TooManyLoginAttemptsError) {
+      throw new Response('Too Many Requests', { status: 429 })
+    }
+
+    throw error
+  }
+}
+
+export default function LoginPage() {
+  const actionData = useActionData<typeof action>()
+  const navigation = useNavigation()
+  const isSubmitting = navigation.state === 'submitting'
+
+  const formError = actionData && !actionData.success && actionData.formSubmissionError?.issues?.[0]?.message
+
+  return (
+    <AuthLayout
+      title="Sign in to Cadence"
+      subtitle="Welcome back. Enter your credentials below."
+      formError={formError}
+      footer={
+        <>
+          Don&apos;t have an account?{' '}
+          <Link to="/auth/register" className="typography-link">
+            Create a new organization
+          </Link>
+        </>
+      }
+    >
+      <Form method="post" className="space-y-5">
+        <TextField
+          name="orgSlug"
+          label="Organization slug"
+          type="text"
+          placeholder="my-org"
+          isRequired
+          autoFocus
+          autoComplete="organization"
+        />
+        <TextField
+          name="email"
+          label="Email address"
+          type="email"
+          placeholder="you@example.com"
+          isRequired
+          autoComplete="email"
+        />
+        <TextField name="password" label="Password" type="password" isRequired autoComplete="current-password" />
+
+        <div className="flex items-center justify-between">
+          <LabeledCheckbox name="rememberMe" label="Remember me" />
+          <Link to="/auth/forgot-password" className="typography-link">
+            Forgot password?
+          </Link>
+        </div>
+
+        <Button type="submit" fullWidth isPending={isSubmitting}>
+          Sign in
+        </Button>
+      </Form>
+    </AuthLayout>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/auth.logout.tsx

@@ -0,0 +1,17 @@
+import { redirect } from 'react-router'
+import type { ActionFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { AuthService, Log } from '~/services.server'
+
+const log = Log.channel('auth')
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  const userId = requestContext.profile?.userId ?? null
+  const { cookie } = await AuthService.Logout({
+    cookieHeader: request.headers.get('Cookie'),
+    session: requestContext.session
+  })
+  log.info('User logged out', { action: 'auth.logout', userId })
+  return redirect('/auth/login', { headers: cookie ? { 'Set-Cookie': cookie } : {} })
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/auth.register.tsx

@@ -0,0 +1,172 @@
+import { redirect, useActionData, useNavigation, Link } from 'react-router'
+import type { LoaderFunctionArgs, ActionFunctionArgs } from 'react-router'
+import { z } from 'zod'
+import { getRequestContext } from '~/features/request-context.server'
+import { AuthService, OrganizationService, Log } from '~/services.server'
+import { OrganizationSchemas } from '@cadence/schemas'
+import { Form } from '~/components/form'
+import { TextField } from '~/components/text-field'
+import { Button } from '~/components/button'
+import { AuthLayout } from '~/components/auth-layout'
+import { useState } from 'react'
+
+const log = Log.channel('auth')
+
+const registerForm = OrganizationSchemas.createOrganizationForm
+  .extend({
+    adminName: z.string().min(1),
+    adminEmail: z.string().email(),
+    adminPassword: z.string().min(8),
+    confirmPassword: z.string().min(8)
+  })
+  .refine((data) => data.adminPassword === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword']
+  })
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/contacts')
+  }
+  return {}
+}
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  const formData = await request.formData()
+
+  const parsed = await Form.serverSafeParse(registerForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData })
+  }
+
+  const { name, slug, adminName, adminEmail, adminPassword } = parsed.data
+
+  try {
+    await OrganizationService.CreateOrganization({
+      name,
+      slug,
+      adminName,
+      adminEmail,
+      adminPassword
+    })
+  } catch (error) {
+    if (error instanceof Response) throw error
+
+    log.error('Registration failed', { action: 'auth.register', error })
+    return Form.customValidationError({
+      message: 'Could not create organization. The slug may already be taken.',
+      formData
+    })
+  }
+
+  // Auto-login the new admin
+  try {
+    const { cookie } = await AuthService.Login({
+      orgSlug: slug,
+      email: adminEmail,
+      password: adminPassword,
+      session: requestContext.session,
+      deviceContext: requestContext.deviceContext
+    })
+
+    return redirect('/contacts', { headers: cookie ? { 'Set-Cookie': cookie } : {} })
+  } catch {
+    // Organization was created but auto-login failed; send to login page
+    return redirect('/auth/login')
+  }
+}
+
+function toKebabCase(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+export default function RegisterPage() {
+  const actionData = useActionData<typeof action>()
+  const navigation = useNavigation()
+  const isSubmitting = navigation.state === 'submitting'
+  const [slug, setSlug] = useState('')
+  const [slugTouched, setSlugTouched] = useState(false)
+
+  const formError = actionData && !actionData.success && actionData.formSubmissionError?.issues?.[0]?.message
+
+  return (
+    <AuthLayout
+      title="Create your organization"
+      subtitle="Set up a new workspace for your team."
+      formError={formError}
+      footer={
+        <>
+          Already have an account?{' '}
+          <Link to="/auth/login" className="typography-link">
+            Sign in
+          </Link>
+        </>
+      }
+    >
+      <Form method="post" className="space-y-5">
+        <TextField
+          name="name"
+          label="Organization name"
+          type="text"
+          placeholder="Acme Inc."
+          isRequired
+          autoFocus
+          onChange={(value) => {
+            if (!slugTouched) {
+              setSlug(toKebabCase(value))
+            }
+          }}
+        />
+        <TextField
+          name="slug"
+          label="Organization slug"
+          type="text"
+          placeholder="acme-inc"
+          helpText="URL-safe identifier (lowercase letters, numbers, hyphens)"
+          isRequired
+          value={slug}
+          onChange={(value) => {
+            setSlug(value)
+            setSlugTouched(true)
+          }}
+          pattern="^[a-z0-9-]+$"
+        />
+        <TextField
+          name="adminName"
+          label="Your name"
+          type="text"
+          placeholder="Jane Smith"
+          isRequired
+          autoComplete="name"
+        />
+        <TextField
+          name="adminEmail"
+          label="Email address"
+          type="email"
+          placeholder="you@example.com"
+          isRequired
+          autoComplete="email"
+        />
+        <TextField name="adminPassword" label="Password" type="password" isRequired autoComplete="new-password" />
+        <TextField
+          name="confirmPassword"
+          label="Confirm password"
+          type="password"
+          isRequired
+          autoComplete="new-password"
+        />
+
+        <Button type="submit" fullWidth isPending={isSubmitting}>
+          Create organization
+        </Button>
+      </Form>
+    </AuthLayout>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/auth.reset-password.tsx

@@ -0,0 +1,137 @@
+import { data, redirect, useActionData, useLoaderData, useNavigation, Link } from 'react-router'
+import type { LoaderFunctionArgs, ActionFunctionArgs } from 'react-router'
+import { z } from 'zod'
+import { getRequestContext } from '~/features/request-context.server'
+import { redirectWithToast } from '~/features/redirect-with-toast.server'
+import { AuthService, Log } from '~/services.server'
+import { Form } from '~/components/form'
+import { TextField } from '~/components/text-field'
+import { Button } from '~/components/button'
+import { InlineAlert } from '~/components/inline-alert'
+import { AuthLayout } from '~/components/auth-layout'
+
+const log = Log.channel('auth')
+
+const resetPasswordForm = z
+  .object({
+    token: z.string().min(1),
+    newPassword: z.string().min(8),
+    confirmPassword: z.string().min(8)
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword']
+  })
+
+export async function loader({ request, context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (requestContext.profile) {
+    throw redirect('/contacts')
+  }
+
+  const url = new URL(request.url)
+  const token = url.searchParams.get('token') ?? ''
+
+  return data({ token })
+}
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  const formData = await request.formData()
+
+  const parsed = await Form.serverSafeParse(resetPasswordForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData })
+  }
+
+  const { token, newPassword } = parsed.data
+
+  try {
+    await AuthService.ResetPassword({
+      token,
+      newPassword
+    })
+  } catch (error) {
+    if (error instanceof Response) throw error
+
+    if (
+      error instanceof AuthService.errors.PasswordResetInvalidTokenError ||
+      error instanceof AuthService.errors.PasswordResetExpiredTokenError
+    ) {
+      return data({
+        success: false as const,
+        tokenError: true as const
+      })
+    }
+
+    log.error('Password reset failed', { action: 'auth.resetPassword', error })
+    return Form.customValidationError({ message: 'Could not reset password. Please try again.', formData })
+  }
+
+  return redirectWithToast(
+    '/auth/login',
+    { title: 'Password reset successfully', variant: 'positive' },
+    requestContext.session
+  )
+}
+
+export default function ResetPasswordPage() {
+  const { token } = useLoaderData<typeof loader>()
+  const actionData = useActionData<typeof action>()
+  const navigation = useNavigation()
+  const isSubmitting = navigation.state === 'submitting'
+
+  const formError =
+    actionData && !actionData.success && 'formSubmissionError' in actionData
+      ? actionData.formSubmissionError?.issues?.[0]?.message
+      : null
+  const tokenError = actionData && !actionData.success && 'tokenError' in actionData && actionData.tokenError
+
+  return (
+    <AuthLayout
+      title="Set a new password"
+      subtitle="Choose a strong password for your account."
+      formError={formError}
+      footer={
+        !tokenError ? (
+          <Link to="/auth/login" className="typography-link">
+            Back to sign in
+          </Link>
+        ) : undefined
+      }
+    >
+      {tokenError ? (
+        <div className="space-y-4">
+          <InlineAlert variant="negative" description="This reset link is invalid or has expired." />
+          <p className="text-center text-sm text-neutral-500">
+            <Link to="/auth/forgot-password" className="typography-link">
+              Request a new reset link
+            </Link>
+          </p>
+        </div>
+      ) : (
+        <Form method="post" className="space-y-5">
+          <input type="hidden" name="token" value={token} />
+          <TextField
+            name="newPassword"
+            label="New password"
+            type="password"
+            isRequired
+            autoFocus
+            autoComplete="new-password"
+          />
+          <TextField
+            name="confirmPassword"
+            label="Confirm new password"
+            type="password"
+            isRequired
+            autoComplete="new-password"
+          />
+          <Button type="submit" fullWidth isPending={isSubmitting}>
+            Reset password
+          </Button>
+        </Form>
+      )}
+    </AuthLayout>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/contacts.$id.edit.tsx

@@ -0,0 +1,89 @@
+import { data, redirect, useLoaderData, useNavigation } from 'react-router'
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { redirectWithToast } from '~/features/redirect-with-toast.server'
+import { ContactService, Log } from '~/services.server'
+import { ContactSchemas } from '@cadence/schemas'
+import { Form } from '~/components/form'
+import { TextField } from '~/components/text-field'
+import { FormPage } from '~/components/form-page'
+
+const log = Log.channel('contact')
+
+export async function loader({ context, params }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+
+  const contactId = Number(params.id)
+  if (!Number.isFinite(contactId)) throw new Response('Not Found', { status: 404 })
+
+  const { contact } = await ContactService.ViewContact({ contactId }, requestContext.profile)
+
+  return data({ contact })
+}
+
+export async function action({ request, context, params }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+
+  const contactId = Number(params.id)
+
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(ContactSchemas.editContactForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData })
+  }
+
+  await ContactService.EditContact({ contactId, ...parsed.data }, requestContext.profile)
+
+  log.info('Contact edited via UI', { action: 'contact.edit', contactId })
+
+  return redirectWithToast(
+    `/contacts/${contactId}`,
+    { title: 'Contact updated', variant: 'positive' },
+    requestContext.session
+  )
+}
+
+export default function EditContactPage() {
+  const { contact } = useLoaderData<typeof loader>()
+  const navigation = useNavigation()
+  const isSubmitting = navigation.state === 'submitting'
+
+  return (
+    <FormPage
+      backTo={`/contacts/${contact.id}`}
+      backLabel="Back to contact"
+      title="Edit Contact"
+      description={`Update details for ${contact.firstName}${contact.lastName ? ` ${contact.lastName}` : ''}.`}
+      submitLabel="Save Changes"
+      isSubmitting={isSubmitting}
+    >
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <TextField
+          name="firstName"
+          label="First name"
+          isRequired
+          defaultValue={contact.firstName}
+          placeholder="First name"
+        />
+        <TextField name="lastName" label="Last name" defaultValue={contact.lastName ?? ''} placeholder="Last name" />
+      </div>
+      <TextField
+        name="email"
+        label="Email"
+        type="email"
+        defaultValue={contact.email ?? ''}
+        placeholder="email@example.com"
+      />
+      <TextField
+        name="phone"
+        label="Phone"
+        type="tel"
+        defaultValue={contact.phone ?? ''}
+        placeholder="(555) 123-4567"
+      />
+      <TextField name="jobTitle" label="Job title" defaultValue={contact.jobTitle ?? ''} placeholder="Job title" />
+    </FormPage>
+  )
+}