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/cadence/cadence-web/app/root.tsx ADDED Viewed

@@ -0,0 +1,208 @@
+import * as Sentry from '@sentry/react-router'
+import { HeadlessForm } from '@maestro-js/form'
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  redirect,
+  useActionData,
+  useFetchers,
+  useLoaderData,
+  useRouteLoaderData,
+  useMatches,
+  isRouteErrorResponse,
+  useRouteError,
+  Link
+} 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 { Db, OrganizationService } from '~/services.server'
+import { ToastRegion } from '~/components/toast'
+import { TopNav } from '~/components/top-nav'
+import './app.css'
+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.profile && !isAuthRoute) {
+    throw redirect('/auth/login')
+  }
+  let sidebar: {
+    orgName: string
+    userName: string
+    userRole: string
+  } | null = null
+  if (requestContext.profile) {
+    const [org, userRows] = await Promise.all([
+      OrganizationService.ViewOrganization({}, requestContext.profile),
+      Db.select('SELECT name FROM users WHERE id = ? AND deletedDate IS NULL', [requestContext.profile.userId])
+    ])
+    sidebar = {
+      orgName: org?.name ?? 'Organization',
+      userName: (userRows[0] as { name: string } | undefined)?.name ?? 'User',
+      userRole: requestContext.profile.role
+    }
+  }
+  return {
+    profile: requestContext.profile,
+    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">
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+export default function Root() {
+  const { profile, toast, sidebar, csrfToken } = useLoaderData<typeof loader>()
+  const matches = useMatches()
+  const isAuthRoute = matches.some((m) => m.pathname.startsWith('/auth'))
+  return (
+    <Document>
+      <HeadlessForm.GlobalProvider useServerErrors={useServerErrors} csrfToken={csrfToken}>
+        {profile && !isAuthRoute && sidebar ? (
+          <div className="min-h-screen bg-neutral-50">
+            <TopNav
+              orgName={sidebar.orgName}
+              userName={sidebar.userName}
+              userRole={sidebar.userRole}
+              csrfToken={csrfToken}
+            />
+            <main className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+              <Outlet />
+            </main>
+          </div>
+        ) : (
+          <Outlet />
+        )}
+      </HeadlessForm.GlobalProvider>
+      <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="/" className="mt-6 inline-block typography-link">
+              Go home
+            </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="/" className="mt-6 inline-block typography-link">
+            Go home
+          </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
+  }
+  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
+        }
+        return null
+      })
+      .filter(Boolean)[0] ?? null
+  return fetcherMatch
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/_index.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { redirect } from 'react-router'
+export function loader() {
+  throw redirect('/contacts')
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/activity.tsx ADDED Viewed

@@ -0,0 +1,124 @@
+import { useMemo } from 'react'
+import { data, redirect, useLoaderData } from 'react-router'
+import type { LoaderFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { InteractionService } from '~/services.server'
+import { Table } from '~/components/table'
+import { Icon } from '~/components/icon'
+import { EmptyState } from '~/components/empty-state'
+import { PageHeader } from '~/components/page-header'
+import { formatDate } from '~/utils/format-date'
+interface RecentInteraction {
+  id: number
+  contactId: number
+  userId: number
+  type: 'email' | 'note'
+  subject: string | null
+  body: string
+  date: string
+  contactName: string
+  userName: string
+}
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+  const { interactions } = await InteractionService.ListRecent({}, requestContext.profile)
+  return data({ interactions, profile: requestContext.profile })
+}
+export default function ActivityPage() {
+  const { interactions } = useLoaderData<typeof loader>()
+  const uniqueUsers = useMemo(() => {
+    const names = new Set((interactions as RecentInteraction[]).map((i) => i.userName))
+    return [...names].sort()
+  }, [interactions])
+  const table = Table.useClientTable({
+    rows: interactions as RecentInteraction[],
+    getRowId: (row) => row.id.toString(),
+    filters: {
+      type: (row, value) => row.type === value,
+      userName: (row, value) => row.userName === value
+    },
+    sorts: {
+      newest: (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
+      oldest: (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+      contact: (a, b) => a.contactName.localeCompare(b.contactName)
+    },
+    search: { keys: ['contactName', 'subject', 'userName'] },
+    defaultPageSize: 25
+  })
+  if (!interactions.length) {
+    return (
+      <div className="flex flex-col gap-6">
+        <PageHeader title="Recent Activity" description="Emails and notes logged across all contacts." />
+        <EmptyState
+          icon={<Icon name="clock" className="size-12" />}
+          heading="No interactions logged yet"
+          description="Interactions will appear here as you log emails and notes on your contacts."
+        />
+      </div>
+    )
+  }
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title="Recent Activity" description="Emails and notes logged across all contacts." />
+      <Table
+        table={table}
+        localization={{
+          filters: {
+            type: {
+              label: 'Type',
+              options: [
+                { label: 'Email', value: 'email' },
+                { label: 'Note', value: 'note' }
+              ]
+            },
+            userName: {
+              label: 'Logged by',
+              options: uniqueUsers.map((u) => ({ label: u, value: u })),
+              autoComplete: uniqueUsers.length > 5
+            }
+          },
+          sorts: {
+            newest: { label: 'Newest' },
+            oldest: { label: 'Oldest' },
+            contact: { label: 'Contact name' }
+          },
+          searchPlaceholder: 'Search activity...'
+        }}
+      >
+        {table.getRows().map((row) => (
+          <Table.Row key={row.id} row={row} aria-label={`${row.contactName} ${row.type}`}>
+            <Table.Cell className="grow">
+              <div className="flex items-center justify-between gap-4">
+                <Table.TitleLink to={`/contacts/${row.contactId}`}>{row.contactName}</Table.TitleLink>
+                <span
+                  className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium shrink-0 ${
+                    row.type === 'email' ? 'bg-purple-50 text-purple-700' : 'bg-emerald-50 text-emerald-700'
+                  }`}
+                >
+                  {row.type === 'email' ? 'Email' : 'Note'}
+                </span>
+              </div>
+              <div className="mt-0.5 flex items-center justify-between gap-4">
+                <Table.Description>{row.subject ?? '\u2014'}</Table.Description>
+                <p className="text-xs tabular-nums text-gray-400 shrink-0">
+                  {formatDate(row.date)} &middot; {row.userName}
+                </p>
+              </div>
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table>
+    </div>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/archive.tsx ADDED Viewed

@@ -0,0 +1,187 @@
+import { data, redirect, useLoaderData, useFetcher } from 'react-router'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router'
+import type { ContactSchemas } from '@cadence/schemas'
+import { getRequestContext } from '~/features/request-context.server'
+import { redirectWithToast } from '~/features/redirect-with-toast.server'
+import { ContactService, Log } from '~/services.server'
+import { z } from 'zod'
+import { Form } from '~/components/form'
+import { Table } from '~/components/table'
+import { Button } from '~/components/button'
+import { Icon } from '~/components/icon'
+import { EmptyState } from '~/components/empty-state'
+import { PageHeader } from '~/components/page-header'
+import { Chip } from '~/components/chip'
+import { formatDate } from '~/utils/format-date'
+import { getColor, stringToNumber } from '~/utils/colors'
+const log = Log.channel('contact')
+type Contact = ContactSchemas.contactWithLastContactedModel
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+  const { contacts } = await ContactService.ListArchivedContacts({}, requestContext.profile)
+  return data({ contacts, profile: requestContext.profile })
+}
+const restoreForm = z.object({
+  contactId: z.number()
+})
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+  const formData = await request.formData()
+  const intent = formData.get('intent')
+  switch (intent) {
+    case 'restore': {
+      const parsed = await Form.serverSafeParse(restoreForm, formData)
+      if (!parsed.success) {
+        return Form.validationError({ issues: parsed.issues, formData })
+      }
+      const { contactId } = parsed.data
+      try {
+        await ContactService.RestoreContact({ contactId }, requestContext.profile)
+        log.info('Contact restored via UI', { action: 'contact.restore', contactId })
+        return redirectWithToast(
+          `/contacts/${contactId}`,
+          { title: 'Contact restored', variant: 'positive' },
+          requestContext.session
+        )
+      } catch (error) {
+        if (error instanceof Response) throw error
+        if (error instanceof ContactService.errors.ContactNotFoundError) {
+          return redirectWithToast(
+            '/archive',
+            { title: 'Error', description: 'Contact not found', variant: 'negative' },
+            requestContext.session
+          )
+        }
+        throw error
+      }
+    }
+    default:
+      throw new Response('Unknown intent', { status: 400 })
+  }
+}
+export default function ArchivePage() {
+  const { contacts } = useLoaderData<typeof loader>()
+  const table = Table.useClientTable({
+    rows: contacts,
+    getRowId: (row) => row.id.toString(),
+    sorts: {
+      nameAZ: (a, b) =>
+        `${a.firstName} ${a.lastName ?? ''}`.localeCompare(`${b.firstName} ${b.lastName ?? ''}`),
+      nameZA: (a, b) =>
+        `${b.firstName} ${b.lastName ?? ''}`.localeCompare(`${a.firstName} ${a.lastName ?? ''}`),
+      newest: (a, b) => new Date(b.createdDate).getTime() - new Date(a.createdDate).getTime(),
+      oldest: (a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime()
+    },
+    search: { keys: ['firstName', 'lastName', 'email'] },
+    defaultPageSize: 25
+  })
+  if (!contacts.length) {
+    return (
+      <div className="flex flex-col gap-6">
+        <PageHeader
+          title="Archive"
+          description="Archived contacts are hidden from your main list but can be restored at any time."
+        />
+        <EmptyState
+          icon={<Icon name="archive-box" className="size-12" />}
+          heading="No archived contacts"
+          description="Contacts you archive will appear here. You can restore them at any time."
+        />
+      </div>
+    )
+  }
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Archive"
+        description={`${contacts.length} archived ${contacts.length === 1 ? 'contact' : 'contacts'} — restore them to bring them back to your main list.`}
+      />
+      <Table
+        table={table}
+        localization={{
+          filters: {},
+          sorts: {
+            nameAZ: { label: 'Name A-Z' },
+            nameZA: { label: 'Name Z-A' },
+            newest: { label: 'Newest' },
+            oldest: { label: 'Oldest' }
+          },
+          searchPlaceholder: 'Search archived contacts...'
+        }}
+      >
+        {table.getRows().map((row) => (
+          <Table.Row key={row.id} row={row} aria-label={`${row.firstName} ${row.lastName ?? ''}`}>
+            <Table.Cell className="grow">
+              <div className="flex items-center justify-between gap-4">
+                <Table.TitleLink to={`/contacts/${row.id}`}>
+                  {row.firstName}
+                  {row.lastName ? ` ${row.lastName}` : ''}
+                </Table.TitleLink>
+                {row.tags.length > 0 && (
+                  <div className="flex flex-wrap gap-1 shrink-0">
+                    {row.tags.map((tag) => (
+                      <Chip key={tag} size="sm" style={{ backgroundColor: getColor(stringToNumber(tag)), color: 'white' }}>
+                        {tag}
+                      </Chip>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div className="mt-0.5 flex items-center justify-between gap-4">
+                <Table.Description>{row.email ?? row.jobTitle ?? '--'}</Table.Description>
+                <p className="text-xs tabular-nums text-gray-400 shrink-0">{formatDate(row.createdDate)}</p>
+              </div>
+            </Table.Cell>
+            <Table.Cell className="grow-0 shrink-0 flex items-center">
+              <RestoreButton contactId={row.id} />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table>
+    </div>
+  )
+}
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function RestoreButton({ contactId }: { contactId: number }) {
+  const fetcher = useFetcher()
+  return (
+    <HeadlessForm as={fetcher.Form} method="post">
+      <input type="hidden" name="intent" value="restore" />
+      <input type="hidden" name="contactId" value={contactId} />
+      <Button
+        type="submit"
+        variant="outlined"
+        color="neutral"
+        isPending={fetcher.state === 'submitting'}
+        className="text-xs px-2 py-1"
+      >
+        Restore
+      </Button>
+    </HeadlessForm>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/auth.forgot-password.tsx ADDED Viewed

@@ -0,0 +1,108 @@
+import { data, 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 { rateLimitingMiddleware } from '~/features/rate-limiting-middleware.server'
+import { AuthService } 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 forgotPasswordForm = z.object({
+  orgSlug: z.string().min(1),
+  email: z.string().email()
+})
+export const middleware = [
+  rateLimitingMiddleware(({ context }) => {
+    const requestContext = getRequestContext(context)
+    const ip = requestContext.deviceContext.ip
+    if (ip) {
+      return {
+        key: `forgot-password:${ip}`,
+        maxAttemptsPerWindow: 5,
+        decaySeconds: 300
+      }
+    } 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 formData = await request.formData()
+  const parsed = await Form.serverSafeParse(forgotPasswordForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData })
+  }
+  const { orgSlug, email } = parsed.data
+  // Always succeeds silently to prevent enumeration
+  await AuthService.RequestPasswordReset({ orgSlug, email })
+  return data({ success: true as const })
+}
+export default function ForgotPasswordPage() {
+  const actionData = useActionData<typeof action>()
+  const navigation = useNavigation()
+  const isSubmitting = navigation.state === 'submitting'
+  const formError = actionData && !actionData.success && actionData.formSubmissionError?.issues?.[0]?.message
+  const submitted = actionData && 'success' in actionData && actionData.success
+  return (
+    <AuthLayout
+      title="Reset your password"
+      subtitle="Enter your details and we'll send reset instructions."
+      formError={formError}
+      footer={
+        <Link to="/auth/login" className="typography-link">
+          Back to sign in
+        </Link>
+      }
+    >
+      {submitted ? (
+        <InlineAlert
+          variant="positive"
+          description="If an account exists with that organization and email, we've sent password reset instructions."
+        />
+      ) : (
+        <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"
+          />
+          <Button type="submit" fullWidth isPending={isSubmitting}>
+            Send reset instructions
+          </Button>
+        </Form>
+      )}
+    </AuthLayout>
+  )
+}