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

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/_browse/c.new.tsx

@@ -0,0 +1,47 @@
+import { ChannelSchemas } from '@chorus/schemas'
+import { data, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router'
+import { Button } from '../../components/button'
+import { Dialog } from '../../components/dialog'
+import { Form } from '../../components/form'
+import { TextField } from '../../components/text-field'
+import { TextArea } from '../../components/text-area'
+import { getRequestContext } from '../../features/request-context.server'
+import { ChannelService } from '~/services.server'
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+  return data({})
+}
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(ChannelSchemas.createChannelSchema, formData)
+
+  if (parsed.success) {
+    const { slug } = await ChannelService.CreateChannel(parsed.data, requestContext.profile)
+    return redirect(`/c/${slug}`)
+  } else {
+    return Form.validationError(parsed)
+  }
+}
+
+export default function CreateChannel() {
+  return (
+    <Dialog title="Create a Channel" isOpen={true} size="xs" close={{ to: '/' }} isDismissable>
+      <Form method="post" className="space-y-4">
+        <TextField name="name" label="Channel Name" isRequired maxLength={100} />
+        <TextArea name="description" label="Description" isRequired maxLength={2000} />
+        <div className="flex justify-end gap-2">
+          <Dialog.CancelButton />
+          <Button type="submit" variant="contained" color="primary">
+            Create Channel
+          </Button>
+        </div>
+      </Form>
+    </Dialog>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/_browse/index.tsx

@@ -0,0 +1,3 @@
+export default function BrowseIndex() {
+  return null
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/api/hide-post.$postId.tsx

@@ -0,0 +1,30 @@
+import { data, type ActionFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { PostService, RateLimiting } from '~/services.server'
+import { Permissions } from '@maestro-js/permissions'
+
+export async function action({ params, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  if (process.env.IS_TESTING !== 'true') {
+    if (await RateLimiting.tooManyAttempts(`hide.post.${requestContext.profile.profileId}`, 20)) {
+      throw new Response('Too Many Requests', { status: 429 })
+    }
+    await RateLimiting.increment(`hide.post.${requestContext.profile.profileId}`, 1, 60 * 60)
+  }
+
+  const postId = Number(params.postId)
+
+  try {
+    await PostService.HidePost({ postId }, requestContext.profile)
+    return data({ ok: true })
+  } catch (e) {
+    if (e instanceof Permissions.PermissionsError) {
+      throw new Response('Forbidden', { status: 403 })
+    }
+    throw e
+  }
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/api/like.$postId.tsx

@@ -0,0 +1,22 @@
+import { data, type ActionFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { LikeService } from '~/services.server'
+
+export async function action({ params, request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) {
+    throw new Response('Unauthorized', { status: 401 })
+  }
+
+  const postId = Number(params.postId)
+  const formData = await request.formData()
+  const intent = formData.get('intent')
+
+  if (intent === 'unlike') {
+    await LikeService.Unlike({ postId }, requestContext.profile)
+  } else {
+    await LikeService.Like({ postId }, requestContext.profile)
+  }
+
+  return data({ ok: true })
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/c.$slug/_layout.tsx

@@ -0,0 +1,108 @@
+import { data, Link, Outlet, useLoaderData, type LoaderFunctionArgs } from 'react-router'
+import { PostCard } from '../../components/post-card'
+import { ButtonLink } from '../../components/button-link'
+import { Menu } from '../../components/menu'
+import { Icon } from '../../components/icon'
+import { getRequestContext } from '../../features/request-context.server'
+import { ChannelService } from '~/services.server'
+
+export async function loader({ params, request, context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  const url = new URL(request.url)
+  const page = Number(url.searchParams.get('page') ?? '1')
+
+  try {
+    const result = await ChannelService.ViewChannelPosts({ slug: params.slug!, page }, requestContext.profile)
+
+    const isOwner = !!requestContext.profile && requestContext.profile.profileId === result.channel.ownerProfileId
+    return data({ ...result, isAuthenticated: !!requestContext.profile, isOwner })
+  } catch (e) {
+    if (e instanceof ChannelService.errors.ChannelNotFoundError) {
+      throw new Response('Not Found', { status: 404 })
+    }
+    throw e
+  }
+}
+
+export default function ChannelLayout() {
+  const { channel, posts, pagination, isAuthenticated, isOwner } = useLoaderData<typeof loader>()
+
+  return (
+    <div className="mx-auto max-w-lg px-4 py-8">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex items-center gap-2">
+          <div>
+            <ButtonLink to="/" shape="circle" color="neutral" variant="plain">
+              <Icon name="chevron-left" className="size-5" />
+            </ButtonLink>
+          </div>
+
+          <span className="font-medium text-neutral-900">Channel</span>
+        </div>
+        {isAuthenticated && (
+          <div>
+            <ButtonLink to={`/c/${channel.slug}/post/new`} color="primary" size="sm" viewTransition>
+              Create post
+            </ButtonLink>
+          </div>
+        )}
+      </div>
+
+      <div className="mb-6">
+        <div className="flex items-center justify-between gap-2">
+          <h1 className="typography-h1">{channel.name}</h1>
+          {isOwner && (
+            <Menu
+              Button={
+                <button type="button" className="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600">
+                  <Icon name="ellipsis-vertical" className="size-5" />
+                </button>
+              }
+            >
+              <Menu.LinkItem to={`/c/${channel.slug}/edit`}>Edit channel</Menu.LinkItem>
+              <Menu.LinkItem to={`/c/${channel.slug}/manage`}>Manage moderators</Menu.LinkItem>
+            </Menu>
+          )}
+        </div>
+        <p className="mt-1 text-neutral-600">{channel.description}</p>
+      </div>
+
+      <div className="space-y-4">
+        {posts.length === 0 && <p className="py-8 text-center text-neutral-500">No posts yet. Be the first to post!</p>}
+        {posts.map((post) => (
+          <PostCard key={post.id} post={{ ...post, replyCount: post.replyCount ?? 0 }} channelSlug={channel.slug} />
+        ))}
+      </div>
+
+      {pagination.totalPages > 1 && (
+        <nav className="mt-8 flex items-center justify-center gap-4" aria-label="Pagination">
+          {pagination.page > 1 ? (
+            <Link
+              to={`/c/${channel.slug}?page=${pagination.page - 1}`}
+              className="typography-link"
+            >
+              &larr; Previous
+            </Link>
+          ) : (
+            <span className="text-sm font-medium text-neutral-300">&larr; Previous</span>
+          )}
+          <span className="text-sm text-neutral-600">
+            Page {pagination.page} of {pagination.totalPages}
+          </span>
+          {pagination.page < pagination.totalPages ? (
+            <Link
+              to={`/c/${channel.slug}?page=${pagination.page + 1}`}
+              className="typography-link"
+            >
+              Next &rarr;
+            </Link>
+          ) : (
+            <span className="text-sm font-medium text-neutral-300">Next &rarr;</span>
+          )}
+        </nav>
+      )}
+
+      <Outlet />
+    </div>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/c.$slug/post.new.tsx

@@ -0,0 +1,59 @@
+import { PostSchemas } from '@chorus/schemas'
+import { redirect, useNavigate, useParams, type ActionFunctionArgs } from 'react-router'
+import { Dialog } from '../../components/dialog'
+import { Form } from '../../components/form'
+import { PostComposer } from '../../components/post-composer'
+import { getRequestContext } from '../../features/request-context.server'
+import { ChannelService, PostService } from '~/services.server'
+
+export async function action({ params, request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+
+  const channel = await ChannelService.GetChannel({ slug: params.slug! })
+
+  const parsed = await Form.serverSafeParse(PostSchemas.createPostSchema, await request.formData(), {
+    handleFile: async (file) => {
+      const { url } = await PostService.UploadImage({ file }, requestContext.profile!)
+      return url
+    }
+  })
+
+  if (parsed.success) {
+    const postId = await PostService.CreatePost(
+      { channelId: channel.id, content: parsed.data.content, images: parsed.data.images ?? [] },
+      requestContext.profile
+    )
+    return redirect(`/c/${params.slug}/post/${postId}`)
+  } else {
+    return Form.validationError(parsed)
+  }
+}
+
+export default function CreatePost() {
+  const navigate = useNavigate()
+  const params = useParams()
+
+  return (
+    <Dialog
+      title="New post"
+      isOpen={true}
+      close={(open) => {
+        if (!open) navigate(`/c/${params.slug}`, { viewTransition: true })
+      }}
+      isDismissable
+      className="max-w-md mx-auto [&>div:first-child]:px-4 [&>div:last-child]:px-0 [&>div:last-child]:pb-0 [&>div:last-child]:gap-0"
+    >
+      <Form method="post" encType="multipart/form-data">
+        <PostComposer maxImages={4}>
+          <PostComposer.ImagePreview className="px-4 pt-2" />
+          <PostComposer.Textarea placeholder="What's on your mind?" rows={5} autoFocus />
+          <div className="flex items-center justify-between border-t border-neutral-100 px-4 py-2">
+            <PostComposer.ImageTrigger />
+            <PostComposer.SubmitButton>Post</PostComposer.SubmitButton>
+          </div>
+        </PostComposer>
+      </Form>
+    </Dialog>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/c.$slug.edit.tsx

@@ -0,0 +1,53 @@
+import { ChannelSchemas } from '@chorus/schemas'
+import { data, redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router'
+import { Button } from '../components/button'
+import { Form } from '../components/form'
+import { TextField } from '../components/text-field'
+import { TextArea } from '../components/text-area'
+import { getRequestContext } from '../features/request-context.server'
+import { Permissions } from '@maestro-js/permissions'
+import { ChannelService } from '~/services.server'
+import { useLoaderData } from 'react-router'
+
+export async function loader({ params, context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+
+  const channel = await ChannelService.GetChannel({ slug: params.slug! })
+  if (channel.ownerProfileId !== requestContext.profile.profileId) {
+    throw new Permissions.PermissionsError({ action: 'manage', subject: 'channel' })
+  }
+  return data({ channel })
+}
+
+export async function action({ params, request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(ChannelSchemas.editChannelSchema, formData)
+
+  if (parsed.success) {
+    const { slug } = await ChannelService.EditChannel({ slug: params.slug!, ...parsed.data }, requestContext.profile)
+    return redirect(`/c/${slug}`)
+  } else {
+    return Form.validationError(parsed)
+  }
+}
+
+export default function EditChannel() {
+  const { channel } = useLoaderData<typeof loader>()
+
+  return (
+    <div className="mx-auto max-w-lg px-4 py-8">
+      <h1 className="mb-6 typography-h1">Edit Channel</h1>
+      <Form method="post" className="space-y-4">
+        <TextField name="name" label="Channel Name" isRequired defaultValue={channel.name} />
+        <TextArea name="description" label="Description" isRequired defaultValue={channel.description} />
+        <Button type="submit" variant="contained" color="primary">
+          Save Changes
+        </Button>
+      </Form>
+    </div>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/c.$slug.manage/_layout.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react'
+import { data, Outlet, redirect, useLoaderData, type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router'
+import { Button } from '../../components/button'
+import { ButtonLink } from '../../components/button-link'
+import { Form } from '../../components/form'
+import { Icon } from '../../components/icon'
+import { Avatar } from '../../components/avatar'
+import { getRequestContext } from '../../features/request-context.server'
+import { ChannelSchemas } from '@chorus/schemas'
+import { Permissions } from '@maestro-js/permissions'
+import { ChannelService } from '~/services.server'
+
+export async function loader({ params, context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+
+  const [moderatorProfiles, channel] = await Promise.all([
+    ChannelService.ListChannelModerators({ slug: params.slug! }, requestContext.profile),
+    ChannelService.GetChannel({ slug: params.slug! })
+  ])
+  return data({ channel, moderatorProfiles })
+}
+
+export async function action({ params, request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+
+  const formData = await request.formData()
+
+  const parsed = await Form.serverSafeParse(ChannelSchemas.removeModeratorSchema, formData)
+  if (!parsed.success) return Form.validationError(parsed)
+  try {
+    await ChannelService.RemoveModerator({ slug: params.slug!, ...parsed.data }, requestContext.profile)
+  } catch (e) {
+    if (e instanceof ChannelService.errors.UserNotFoundError) {
+      return Form.validationError({ issues: [{ path: ['username'], message: e.message }], formData })
+    }
+    throw e
+  }
+
+  return data({ ok: true })
+}
+
+export default function ChannelManageLayout() {
+  const { channel, moderatorProfiles } = useLoaderData<typeof loader>()
+  const [confirmRemoveId, setConfirmRemoveId] = React.useState<number | null>(null)
+
+  return (
+    <div className="mx-auto max-w-lg px-4 py-8">
+      <h1 className="mb-6 typography-h1">Manage {channel.name}</h1>
+
+      <section className="mb-8">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="typography-h2">Moderators</h2>
+          <ButtonLink to={`/c/${channel.slug}/manage/add-moderator`} color="primary" size="sm">
+            Add
+          </ButtonLink>
+        </div>
+        <div className="rounded-lg border border-neutral-200 bg-white p-4 space-y-4">
+          {moderatorProfiles.length === 0 ? (
+            <p className="text-sm text-neutral-500">No moderators yet.</p>
+          ) : (
+            <ul className="divide-y divide-neutral-200 rounded-lg border border-neutral-200">
+              {moderatorProfiles.map((profile) => {
+                const displayName = profile.username ?? `Profile #${profile.profileId}`
+                return (
+                  <li key={profile.profileId} className="flex items-center justify-between px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <Avatar src={profile.profileImage ?? undefined} alt={displayName} className="size-6 text-[10px]" />
+                      <span className="text-sm text-neutral-700">{displayName}</span>
+                    </div>
+                    {confirmRemoveId === profile.profileId ? (
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs text-neutral-500">Remove?</span>
+                        <Form method="post">
+                          <input type="hidden" name="username" value={profile.username ?? ''} />
+                          <Button type="submit" variant="contained" color="negative" size="xs">
+                            Confirm
+                          </Button>
+                        </Form>
+                        <Button
+                          type="button"
+                          variant="plain"
+                          color="neutral"
+                          size="xs"
+                          onClick={() => setConfirmRemoveId(null)}
+                        >
+                          Cancel
+                        </Button>
+                      </div>
+                    ) : (
+                      <Button
+                        type="button"
+                        variant="plain"
+                        color="negative"
+                        size="xs"
+                        onClick={() => setConfirmRemoveId(profile.profileId)}
+                      >
+                        <Icon name="trash" className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </div>
+      </section>
+
+      <section>
+        <h2 className="mb-4 text-lg font-medium text-red-600">Transfer Ownership</h2>
+        <div className="rounded-lg border border-neutral-200 bg-white p-4 space-y-4">
+          <p className="text-sm text-neutral-600">Transfer this channel to another user. This action cannot be undone.</p>
+          <ButtonLink to={`/c/${channel.slug}/manage/transfer-ownership`} color="negative" size="md">
+            Transfer
+          </ButtonLink>
+        </div>
+      </section>
+
+      <Outlet />
+    </div>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/c.$slug.manage/add-moderator.tsx

@@ -0,0 +1,48 @@
+import { ChannelSchemas } from '@chorus/schemas'
+import { redirect, useParams, type ActionFunctionArgs } from 'react-router'
+import { Dialog } from '../../components/dialog'
+import { Button } from '../../components/button'
+import { TextField } from '../../components/text-field'
+import { Form } from '../../components/form'
+import { getRequestContext } from '../../features/request-context.server'
+import { ChannelService } from '~/services.server'
+
+export async function action({ params, request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(ChannelSchemas.appointModeratorSchema, formData)
+  if (!parsed.success) return Form.validationError(parsed)
+
+  try {
+    await ChannelService.AppointModerator({ slug: params.slug!, ...parsed.data }, requestContext.profile)
+  } catch (e) {
+    if (e instanceof ChannelService.errors.UserNotFoundError) {
+      return Form.validationError({ issues: [{ path: ['username'], message: e.message }], formData })
+    }
+    throw e
+  }
+
+  return redirect(`/c/${params.slug}/manage`)
+}
+
+export default function AddModerator() {
+  const params = useParams()
+
+  return (
+    <Dialog title="Add moderator" size="xs" isOpen={true} close={{ to: `/c/${params.slug}/manage` }} isDismissable>
+      <Form method="post">
+        <div className="space-y-6">
+          <TextField name="username" placeholder="Username" isRequired helpText={null} />
+          <div className="flex gap-2 justify-end">
+            <Dialog.CancelButton />
+            <Button type="submit" variant="contained" color="primary">
+              Add
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </Dialog>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/routes/c.$slug.manage/transfer-ownership.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { ChannelSchemas } from '@chorus/schemas'
+import { redirect, useParams, type ActionFunctionArgs } from 'react-router'
+import { Dialog } from '../../components/dialog'
+import { AlertDialog } from '../../components/alert-dialog'
+import { Button } from '../../components/button'
+import { TextField } from '../../components/text-field'
+import { Form } from '../../components/form'
+import { getRequestContext } from '../../features/request-context.server'
+import { ChannelService } from '~/services.server'
+
+export async function action({ params, request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/login')
+
+  const formData = await request.formData()
+  const parsed = await Form.serverSafeParse(ChannelSchemas.transferOwnershipSchema, formData)
+  if (!parsed.success) return Form.validationError(parsed)
+
+  try {
+    await ChannelService.TransferOwnership({ slug: params.slug!, ...parsed.data }, requestContext.profile)
+  } catch (e) {
+    if (e instanceof ChannelService.errors.UserNotFoundError) {
+      return Form.validationError({ issues: [{ path: ['username'], message: e.message }], formData })
+    }
+    throw e
+  }
+
+  return redirect(`/c/${params.slug}`)
+}
+
+export default function TransferOwnership() {
+  const params = useParams()
+  const [showConfirm, setShowConfirm] = React.useState(false)
+
+  return (
+    <Dialog title="Transfer ownership" size="xs" isOpen={true} close={{ to: `/c/${params.slug}/manage` }} isDismissable>
+      <Form method="post" id="transfer-form">
+        <div className="space-y-6">
+          <p className="text-sm text-neutral-600">
+            This will permanently transfer ownership to the specified user. You will lose all owner privileges.
+          </p>
+          <TextField name="username" placeholder="New owner username" isRequired helpText={null} />
+          <div className="flex gap-2 justify-end">
+            <Dialog.CancelButton />
+            <Button type="button" variant="contained" color="negative" onClick={() => setShowConfirm(true)}>
+              Transfer
+            </Button>
+          </div>
+        </div>
+      </Form>
+
+      <AlertDialog
+        title="Transfer Ownership?"
+        description="This action cannot be undone. You will lose all owner privileges for this channel."
+        variant="negative"
+        isOpen={showConfirm}
+        onOpenChange={setShowConfirm}
+      >
+        {({ close }) => (
+          <div className="flex w-full gap-3">
+            <AlertDialog.CancelButton>Cancel</AlertDialog.CancelButton>
+            <Button type="submit" form="transfer-form" variant="contained" color="negative" onClick={close}>
+              Transfer
+            </Button>
+          </div>
+        )}
+      </AlertDialog>
+    </Dialog>
+  )
+}