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

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

@@ -0,0 +1,521 @@
+import * as React from 'react'
+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, InteractionService, Log } from '~/services.server'
+import { Button } from '~/components/button'
+import { ButtonLink } from '~/components/button-link'
+import { InlineAlert } from '~/components/inline-alert'
+import { Icon } from '~/components/icon'
+import { TagEditor } from '~/components/tag-editor'
+import { InteractionForm } from '~/components/interaction-form'
+import { sanitizeHtml } from '~/utils/sanitize-html'
+import { formatDateTime } from '~/utils/format-date'
+import { getColor, stringToNumber } from '~/utils/colors'
+import { EmptyState } from '~/components/empty-state'
+import { BackLink } from '~/components/back-link'
+import { Container } from '~/components/container'
+import { Chip } from '~/components/chip'
+import { InteractionSchemas } from '@cadence/schemas'
+import { Form } from '~/components/form'
+
+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, interactions }, { tags: allTags }] = await Promise.all([
+    ContactService.ViewContact({ contactId }, requestContext.profile),
+    ContactService.ListTags({}, requestContext.profile)
+  ])
+
+  // Sanitize interaction bodies server-side
+  const sanitizedInteractions = interactions.map((interaction) => ({
+    ...interaction,
+    body: sanitizeHtml(interaction.body)
+  }))
+
+  return data({
+    contact,
+    interactions: sanitizedInteractions,
+    allTags,
+    profile: requestContext.profile
+  })
+}
+
+const log = Log.channel('contact')
+
+export async function action({ request, params, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+
+  const contactId = Number(params.id)
+  const formData = await request.formData()
+  const intent = formData.get('intent')
+
+  switch (intent) {
+    case 'archive': {
+      try {
+        await ContactService.ArchiveContact({ contactId }, requestContext.profile)
+        log.info('Contact archived via UI', { action: 'contact.archive', contactId })
+        return redirectWithToast(
+          `/contacts/${contactId}`,
+          { title: 'Contact archived', variant: 'positive' },
+          requestContext.session
+        )
+      } catch (error) {
+        if (error instanceof Response) throw error
+        if (error instanceof ContactService.errors.ContactNotFoundError) {
+          return redirectWithToast(
+            '/contacts',
+            { title: 'Error', description: 'Contact not found', variant: 'negative' },
+            requestContext.session
+          )
+        }
+        throw error
+      }
+    }
+
+    case 'delete': {
+      try {
+        await ContactService.DeleteContact({ contactId }, requestContext.profile)
+        log.info('Contact deleted via UI', { action: 'contact.delete', contactId })
+        return redirectWithToast('/contacts', { title: 'Contact deleted', variant: 'positive' }, requestContext.session)
+      } catch (error) {
+        if (error instanceof Response) throw error
+        if (error instanceof ContactService.errors.ContactNotFoundError) {
+          return redirectWithToast(
+            '/contacts',
+            { title: 'Error', description: 'Contact not found', variant: 'negative' },
+            requestContext.session
+          )
+        }
+        throw error
+      }
+    }
+
+    case 'restore': {
+      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(
+            '/contacts',
+            { title: 'Error', description: 'Contact not found', variant: 'negative' },
+            requestContext.session
+          )
+        }
+        throw error
+      }
+    }
+
+    case 'create-interaction': {
+      const parsed = await Form.serverSafeParse(InteractionSchemas.createInteractionForm.omit({ contactId: true }), formData)
+      if (!parsed.success) {
+        return data({ success: false, formSubmissionError: { issues: parsed.issues } }, { status: 422 })
+      }
+
+      try {
+        const result = await InteractionService.LogInteraction({ contactId, ...parsed.data }, requestContext.profile)
+        log.info('Interaction created via UI', {
+          action: 'interaction.create',
+          contactId,
+          interactionId: result.interactionId,
+          type: parsed.data.type
+        })
+        return data({ success: true, interactionId: result.interactionId })
+      } catch (error) {
+        if (error instanceof Response) throw error
+        if (
+          error instanceof InteractionService.errors.ContactNotFoundError ||
+          error instanceof InteractionService.errors.EmptyBodyError ||
+          error instanceof InteractionService.errors.BodyTooLongError
+        ) {
+          return data(
+            { success: false, formSubmissionError: { issues: [{ path: '', message: error.message }] } },
+            { status: 422 }
+          )
+        }
+        throw error
+      }
+    }
+
+    case 'edit-interaction': {
+      const interactionId = Number(formData.get('interactionId'))
+      const parsed = await Form.serverSafeParse(InteractionSchemas.editInteractionForm, formData)
+      if (!parsed.success) {
+        return data({ success: false, formSubmissionError: { issues: parsed.issues } }, { status: 422 })
+      }
+
+      try {
+        await InteractionService.EditInteraction({ interactionId, ...parsed.data }, requestContext.profile)
+        log.info('Interaction edited via UI', { action: 'interaction.edit', interactionId })
+        return data({ success: true })
+      } catch (error) {
+        if (error instanceof Response) throw error
+        if (
+          error instanceof InteractionService.errors.InteractionNotFoundError ||
+          error instanceof InteractionService.errors.ForbiddenError ||
+          error instanceof InteractionService.errors.EmptyBodyError ||
+          error instanceof InteractionService.errors.BodyTooLongError
+        ) {
+          return data(
+            { success: false, formSubmissionError: { issues: [{ path: '', message: error.message }] } },
+            { status: 422 }
+          )
+        }
+        throw error
+      }
+    }
+
+    case 'delete-interaction': {
+      const interactionId = Number(formData.get('interactionId'))
+
+      try {
+        await InteractionService.DeleteInteraction({ interactionId }, requestContext.profile)
+        log.info('Interaction deleted via UI', { action: 'interaction.delete', interactionId })
+        return data({ success: true })
+      } catch (error) {
+        if (error instanceof Response) throw error
+        if (
+          error instanceof InteractionService.errors.InteractionNotFoundError ||
+          error instanceof InteractionService.errors.ForbiddenError
+        ) {
+          return data(
+            { success: false, formSubmissionError: { issues: [{ path: '', message: error.message }] } },
+            { status: 422 }
+          )
+        }
+        throw error
+      }
+    }
+
+    case 'update-tags': {
+      const rawTags = formData.getAll('tags')
+      const tags = rawTags.map((t) => String(t).trim()).filter((t) => t.length > 0)
+
+      await ContactService.UpdateTags({ contactId, tags }, requestContext.profile)
+      log.info('Contact tags updated via UI', { action: 'contact.updateTags', contactId })
+
+      return { success: true }
+    }
+
+    default:
+      throw new Response('Unknown intent', { status: 400 })
+  }
+}
+
+export default function ContactDetailPage() {
+  const { contact, interactions, allTags, profile } = useLoaderData<typeof loader>()
+  const canEdit = profile.role === 'admin' || profile.role === 'member'
+  const [showTagEditor, setShowTagEditor] = React.useState(false)
+  const [showEmailForm, setShowEmailForm] = React.useState(false)
+  const [showNoteForm, setShowNoteForm] = React.useState(false)
+  const [editingInteractionId, setEditingInteractionId] = React.useState<number | null>(null)
+  const [deletingInteractionId, setDeletingInteractionId] = React.useState<number | null>(null)
+  const isArchived = contact.archivedDate !== null
+  const navigation = useNavigation()
+  const isDeleting = navigation.state === 'submitting' && navigation.formData?.get('intent') === 'delete-interaction'
+
+  return (
+    <div className="mx-auto max-w-5xl">
+      <BackLink to="/contacts">Contacts</BackLink>
+
+      <div className="mt-4 grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {/* ---- Left column: contact info ---- */}
+        <div className="space-y-6 lg:col-span-1">
+          {/* Contact info card */}
+          <Container className="p-0">
+            <div className="p-5">
+              {/* Avatar + name */}
+              <div className="flex items-center gap-3.5">
+                <span className="inline-flex size-11 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-medium text-neutral-600">
+                  {(contact.firstName?.[0] ?? '').toUpperCase()}
+                  {(contact.lastName?.[0] ?? '').toUpperCase()}
+                </span>
+                <div className="min-w-0">
+                  <h1 className="truncate text-lg font-semibold text-neutral-900">
+                    {contact.firstName}
+                    {contact.lastName ? ` ${contact.lastName}` : ''}
+                  </h1>
+                  {contact.jobTitle && <p className="truncate text-sm text-neutral-500">{contact.jobTitle}</p>}
+                </div>
+              </div>
+
+              {/* Contact details */}
+              <dl className="mt-5 space-y-3 border-t border-neutral-950/5 pt-5 text-sm">
+                {contact.email && (
+                  <div className="flex items-start gap-2.5">
+                    <Icon name="envelope" className="mt-0.5 size-4 shrink-0 stroke-neutral-400" />
+                    <div className="min-w-0">
+                      <dt className="sr-only">Email</dt>
+                      <dd className="truncate">
+                        <a href={`mailto:${contact.email}`} className="text-neutral-700 hover:text-neutral-900">
+                          {contact.email}
+                        </a>
+                      </dd>
+                    </div>
+                  </div>
+                )}
+                {contact.phone && (
+                  <div className="flex items-start gap-2.5">
+                    <Icon name="chat-bubble-bottom-center-text" className="mt-0.5 size-4 shrink-0 stroke-neutral-400" />
+                    <div className="min-w-0">
+                      <dt className="sr-only">Phone</dt>
+                      <dd className="text-neutral-700">{contact.phone}</dd>
+                    </div>
+                  </div>
+                )}
+              </dl>
+            </div>
+
+            {/* Action buttons */}
+            {canEdit && (
+              <div className="flex items-center gap-2 border-t border-neutral-950/5 px-5 py-3">
+                <ButtonLink to={`/contacts/${contact.id}/edit`} variant="outlined" color="neutral" size="sm">
+                  <Icon name="pencil" className="size-4 shrink-0 stroke-current" />
+                  Edit
+                </ButtonLink>
+                {isArchived ? (
+                  <Form method="post">
+                    <input type="hidden" name="intent" value="restore" />
+                    <Button type="submit" variant="outlined" color="neutral" size="sm">
+                      <Icon name="arrow-path" className="size-4 shrink-0 stroke-current" />
+                      Restore
+                    </Button>
+                  </Form>
+                ) : (
+                  <Form method="post">
+                    <input type="hidden" name="intent" value="archive" />
+                    <Button type="submit" variant="outlined" color="neutral" size="sm">
+                      <Icon name="archive-box" className="size-4 shrink-0 stroke-current" />
+                      Archive
+                    </Button>
+                  </Form>
+                )}
+                <Form method="post" className="ml-auto">
+                  <input type="hidden" name="intent" value="delete" />
+                  <Button type="submit" variant="plain" color="negative" size="sm">
+                    <Icon name="trash" className="size-4 shrink-0 stroke-current" />
+                    Delete
+                  </Button>
+                </Form>
+              </div>
+            )}
+          </Container>
+
+          {isArchived && <InlineAlert variant="notice" description="This contact is archived." />}
+
+          {/* Tags card */}
+          <Container className="p-0">
+            <div className="flex items-center justify-between px-5 py-3">
+              <h2 className="typography-h3">Tags</h2>
+              {canEdit && (
+                <Button variant="plain" color="neutral" size="sm" onClick={() => setShowTagEditor(!showTagEditor)}>
+                  <Icon name={showTagEditor ? 'x-mark' : 'tag'} className="size-4 shrink-0 stroke-current" />
+                  {showTagEditor ? 'Cancel' : 'Edit'}
+                </Button>
+              )}
+            </div>
+            <div className="border-t border-neutral-950/5 px-5 py-4">
+              {contact.tags.length > 0 ? (
+                <div className="flex flex-wrap gap-1.5">
+                  {contact.tags.map((tag) => (
+                    <Chip key={tag} size="sm" style={{ backgroundColor: getColor(stringToNumber(tag)), color: 'white' }}>
+                      {tag}
+                    </Chip>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-neutral-400">No tags</p>
+              )}
+
+              {showTagEditor && canEdit && (
+                <div className="mt-4 border-t border-neutral-950/5 pt-4">
+                  <TagEditor currentTags={contact.tags} allTags={allTags} onDone={() => setShowTagEditor(false)} />
+                </div>
+              )}
+            </div>
+          </Container>
+        </div>
+
+        {/* ---- Right column: interactions ---- */}
+        <div className="lg:col-span-2">
+          <div className="flex items-center justify-between">
+            <h2 className="typography-h2">Interactions</h2>
+            {canEdit && (
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outlined"
+                  color="neutral"
+                  size="sm"
+                  onClick={() => {
+                    setShowEmailForm(!showEmailForm)
+                    setShowNoteForm(false)
+                  }}
+                >
+                  <Icon name="envelope" className="size-4 shrink-0 stroke-current" />
+                  Log Email
+                </Button>
+                <Button
+                  variant="outlined"
+                  color="neutral"
+                  size="sm"
+                  onClick={() => {
+                    setShowNoteForm(!showNoteForm)
+                    setShowEmailForm(false)
+                  }}
+                >
+                  <Icon name="document-text" className="size-4 shrink-0 stroke-current" />
+                  Log Note
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* Inline email form */}
+          {showEmailForm && canEdit && (
+            <Container className="mt-4">
+              <h3 className="typography-h3">Log Email</h3>
+              <div className="mt-3">
+                <InteractionForm type="email" onDone={() => setShowEmailForm(false)} />
+              </div>
+            </Container>
+          )}
+
+          {/* Inline note form */}
+          {showNoteForm && canEdit && (
+            <Container className="mt-4">
+              <h3 className="typography-h3">Log Note</h3>
+              <div className="mt-3">
+                <InteractionForm type="note" onDone={() => setShowNoteForm(false)} />
+              </div>
+            </Container>
+          )}
+
+          {interactions.length === 0 ? (
+            <div className="mt-4">
+              <EmptyState
+                icon={<Icon name="document-text" className="size-12" />}
+                heading="No interactions yet"
+                description="Log an email or note to start tracking your communication with this contact."
+              />
+            </div>
+          ) : (
+            <div className="mt-4 space-y-3">
+              {interactions.map((interaction) => {
+                const isOwner = interaction.userId === profile.userId
+                const isAdmin = profile.role === 'admin'
+                const canModify = isOwner || isAdmin
+                const isEditingThis = editingInteractionId === interaction.id
+                const isDeletingThis = deletingInteractionId === interaction.id
+
+                return (
+                  <Container key={interaction.id} className="p-0">
+                    <div className="flex items-center gap-3 px-5 py-3">
+                      <span
+                        className={`inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${
+                          interaction.type === 'email'
+                            ? 'bg-purple-50 text-purple-700 ring-purple-600/10'
+                            : 'bg-emerald-50 text-emerald-700 ring-emerald-600/10'
+                        }`}
+                      >
+                        {interaction.type === 'email' ? 'Email' : 'Note'}
+                      </span>
+                      {interaction.subject && (
+                        <p className="min-w-0 truncate text-sm font-medium text-neutral-900">{interaction.subject}</p>
+                      )}
+                      <p className="ml-auto shrink-0 text-xs tabular-nums text-neutral-400">
+                        {formatDateTime(interaction.date)}
+                      </p>
+                      {canModify && (
+                        <div className="flex shrink-0 items-center gap-1">
+                          <Button
+                            variant="plain"
+                            color="neutral"
+                            size="sm"
+                            onClick={() => setEditingInteractionId(isEditingThis ? null : interaction.id)}
+                          >
+                            {isEditingThis ? 'Cancel' : 'Edit'}
+                          </Button>
+                          <Button
+                            variant="plain"
+                            color="negative"
+                            size="sm"
+                            onClick={() => setDeletingInteractionId(isDeletingThis ? null : interaction.id)}
+                          >
+                            Delete
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Delete confirmation */}
+                    {isDeletingThis && (
+                      <div className="px-5 pb-4">
+                        <InlineAlert
+                          variant="negative"
+                          description="Delete this interaction?"
+                          actions={
+                            <div className="flex items-center gap-2">
+                              <Form method="post">
+                                <input type="hidden" name="intent" value="delete-interaction" />
+                                <input type="hidden" name="interactionId" value={interaction.id} />
+                                <Button type="submit" color="negative" size="sm" isPending={isDeleting}>
+                                  Confirm
+                                </Button>
+                              </Form>
+                              <Button
+                                variant="plain"
+                                color="neutral"
+                                size="sm"
+                                onClick={() => setDeletingInteractionId(null)}
+                              >
+                                Cancel
+                              </Button>
+                            </div>
+                          }
+                        />
+                      </div>
+                    )}
+
+                    {/* Edit form or body */}
+                    {isEditingThis ? (
+                      <div className="border-t border-neutral-950/5 px-5 py-4">
+                        <InteractionForm
+                          type={interaction.type as 'email' | 'note'}
+                          initialData={{
+                            interactionId: interaction.id,
+                            subject: interaction.subject,
+                            body: interaction.body,
+                            date: interaction.date
+                          }}
+                          onDone={() => setEditingInteractionId(null)}
+                        />
+                      </div>
+                    ) : (
+                      <div
+                        className="prose prose-sm max-w-none border-t border-neutral-950/5 px-5 py-4 text-neutral-700"
+                        dangerouslySetInnerHTML={{ __html: interaction.body }}
+                      />
+                    )}
+                  </Container>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/contacts.new.tsx

@@ -0,0 +1,56 @@
+import { redirect, useNavigation } from 'react-router'
+import type { ActionFunctionArgs } 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 action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(ContactSchemas.createContactForm, formData)
+  if (!parsed.success) {
+    return Form.validationError({ issues: parsed.issues, formData })
+  }
+
+  const { contactId } = await ContactService.CreateContact(parsed.data, requestContext.profile)
+
+  log.info('Contact created via UI', { action: 'contact.create', contactId })
+
+  return redirectWithToast(
+    `/contacts/${contactId}`,
+    { title: 'Contact created', variant: 'positive' },
+    requestContext.session
+  )
+}
+
+export default function NewContactPage() {
+  const navigation = useNavigation()
+  const isSubmitting = navigation.state === 'submitting'
+
+  return (
+    <FormPage
+      backTo="/contacts"
+      backLabel="Back to contacts"
+      title="New Contact"
+      description="Add a new contact to your CRM."
+      submitLabel="Create Contact"
+      isSubmitting={isSubmitting}
+    >
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <TextField name="firstName" label="First name" isRequired placeholder="First name" />
+        <TextField name="lastName" label="Last name" placeholder="Last name" />
+      </div>
+      <TextField name="email" label="Email" type="email" placeholder="email@example.com" />
+      <TextField name="phone" label="Phone" type="tel" placeholder="(555) 123-4567" />
+      <TextField name="jobTitle" label="Job title" placeholder="Job title" />
+    </FormPage>
+  )
+}