🏉

apps/web/readme.md

@@ -2,3 +2,4 @@
 
 - better auth error handling
 - display validation errors in auth forms
+- race condition on login; sometimes doesn't actually login

apps/web/src/app/about/page.tsx

@@ -5,81 +5,79 @@ import styles from './styles.module.css'
 export default function AboutPage() {
   return (
     <>
-      <section>
+      <section className={cn('prose dark:prose-invert', styles.markdown)}>
         <h1>About</h1>
 
-        <div className={cn('prose dark:prose-invert', styles.markdown)}>
-          <h2>Our Mission</h2>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            <b>Ut enim ad minim veniam</b>, quis nostrud exercitation ullamco
-            laboris nisi ut aliquip ex ea commodo consequat.
-          </p>
+        <h2>Our Mission</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          <b>Ut enim ad minim veniam</b>, quis nostrud exercitation ullamco
+          laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
 
-          <h2>Our Story</h2>
-          <p>
-            Duis aute irure dolor in reprehenderit in voluptate velit esse
-            cillum dolore eu fugiat nulla pariatur.
-            <em>Excepteur sint occaecat cupidatat non proident</em>, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </p>
+        <h2>Our Story</h2>
+        <p>
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur.
+          <em>Excepteur sint occaecat cupidatat non proident</em>, sunt in culpa
+          qui officia deserunt mollit anim id est laborum.
+        </p>
 
-          <h2>Our Values</h2>
-          <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-            quae ab illo inventore veritatis et quasi architecto beatae vitae
-            dicta sunt explicabo.
-          </p>
+        <h2>Our Values</h2>
+        <p>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo.
+        </p>
 
-          <h2>Our Team</h2>
-          <p>
-            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
-            fugit, sed quia consequuntur magni dolores eos qui ratione
-            voluptatem sequi nesciunt.
-          </p>
+        <h2>Our Team</h2>
+        <p>
+          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+          fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
+          sequi nesciunt.
+        </p>
 
-          <h2>Our Technology</h2>
-          <p>
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui
-            blanditiis praesentium voluptatum deleniti atque corrupti quos
-            dolores et quas molestias <b>excepturi sint occaecati</b> cupiditate
-            non provident.
-          </p>
+        <h2>Our Technology</h2>
+        <p>
+          At vero eos et accusamus et iusto odio dignissimos ducimus qui
+          blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+          et quas molestias <b>excepturi sint occaecati</b> cupiditate non
+          provident.
+        </p>
 
-          <h2>Our Impact</h2>
-          <p>
-            Similique sunt in culpa qui officia deserunt mollitia animi, id est
-            laborum et dolorum fuga.
-            <em>Et harum quidem rerum facilis est et expedita distinctio</em>.
-            Nam libero tempore, cum soluta nobis est eligendi optio.
-          </p>
+        <h2>Our Impact</h2>
+        <p>
+          Similique sunt in culpa qui officia deserunt mollitia animi, id est
+          laborum et dolorum fuga.
+          <em>Et harum quidem rerum facilis est et expedita distinctio</em>. Nam
+          libero tempore, cum soluta nobis est eligendi optio.
+        </p>
 
-          <h2>Our Future</h2>
-          <p>
-            Temporibus autem quibusdam et aut officiis debitis aut rerum
-            necessitatibus saepe eveniet ut et voluptates repudiandae sint et
-            molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
-            delectus.
-          </p>
+        <h2>Our Future</h2>
+        <p>
+          Temporibus autem quibusdam et aut officiis debitis aut rerum
+          necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+          molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
+          delectus.
+        </p>
 
-          <h2>Our Community</h2>
-          <p>
-            Ut aut reiciendis voluptatibus maiores alias consequatur aut
-            perferendis doloribus asperiores repellat. Sed ut perspiciatis unde
-            omnis iste natus error sit voluptatem accusantium doloremque
-            laudantium.
-          </p>
+        <h2>Our Community</h2>
+        <p>
+          Ut aut reiciendis voluptatibus maiores alias consequatur aut
+          perferendis doloribus asperiores repellat. Sed ut perspiciatis unde
+          omnis iste natus error sit voluptatem accusantium doloremque
+          laudantium.
+        </p>
 
-          <h2>Our Commitment</h2>
-          <p>
-            Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
-            quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat
-            quo voluptas nulla pariatur?{' '}
-            <b>Excepteur sint occaecat cupidatat non proident</b>.
-          </p>
-        </div>
+        <h2>Our Commitment</h2>
+        <p>
+          Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
+          quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?{' '}
+          <b>Excepteur sint occaecat cupidatat non proident</b>.
+        </p>
       </section>
     </>
   )

apps/web/src/app/app/app-index.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import Link from 'next/link'
+
+import { useAuthenticatedAgentic } from '@/components/agentic-provider'
+import { LoadingIndicator } from '@/components/loading-indicator'
+import { toastError } from '@/lib/notifications'
+
+export function AppIndex() {
+  const ctx = useAuthenticatedAgentic()
+  const {
+    data: projects,
+    isLoading,
+    isError
+  } = useQuery({
+    queryKey: ['projects'],
+    queryFn: () =>
+      ctx?.api
+        .listProjects({ populate: ['lastPublishedDeployment'] })
+        .catch((err: any) => {
+          void toastError(err, { label: 'Failed to fetch projects' })
+          throw err
+        }),
+    enabled: !!ctx
+  })
+
+  return (
+    <>
+      <section>
+        <h1
+          className='text-center text-balance leading-snug md:leading-none
+        text-4xl font-extrabold tracking-tight
+        '
+        >
+          Dashboard
+        </h1>
+
+        {!ctx || isLoading ? (
+          <LoadingIndicator />
+        ) : (
+          <div className='mt-8'>
+            <h2 className='text-xl font-semibold mb-4'>Your Projects</h2>
+
+            {isError ? (
+              <p>Error fetching projects</p>
+            ) : !projects?.length ? (
+              <p>
+                No projects found. Create your first project to get started!
+              </p>
+            ) : (
+              <div className='grid gap-4'>
+                {projects.map((project) => (
+                  <Link
+                    key={project.id}
+                    className='p-4 border rounded-lg hover:border-gray-400 transition-colors'
+                    href={`/app/projects/${project.identifier}`}
+                  >
+                    <h3 className='font-medium'>{project.name}</h3>
+
+                    <p className='text-sm text-gray-500'>
+                      {project.identifier}
+                    </p>
+
+                    {project.lastPublishedDeployment && (
+                      <p className='text-sm text-gray-500 mt-1'>
+                        Last published:{' '}
+                        {project.lastPublishedDeployment.version ||
+                          project.lastPublishedDeployment.hash}
+                      </p>
+                    )}
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </section>
+    </>
+  )
+}

apps/web/src/app/app/page.tsx

@@ -1,71 +1,5 @@
-'use client'
-
-import { useQuery } from '@tanstack/react-query'
-import Link from 'next/link'
-
-import { useAuthenticatedAgentic } from '@/components/agentic-provider'
-import { LoadingIndicator } from '@/components/loading-indicator'
+import { AppIndex } from './app-index'
 
 export default function AppIndexPage() {
-  const ctx = useAuthenticatedAgentic()
-  const { data: projects, isLoading } = useQuery({
-    queryKey: ['projects'],
-    queryFn: () =>
-      ctx?.api
-        .listProjects({ populate: ['lastPublishedDeployment'] })
-        .catch(() => []),
-    enabled: !!ctx
-  })
-
-  return (
-    <>
-      <section>
-        <h1
-          className='text-center text-balance leading-snug md:leading-none
-        text-4xl font-extrabold tracking-tight
-        '
-        >
-          Dashboard
-        </h1>
-
-        {!ctx || isLoading ? (
-          <LoadingIndicator />
-        ) : (
-          <div className='mt-8'>
-            <h2 className='text-xl font-semibold mb-4'>Your Projects</h2>
-
-            {!projects?.length ? (
-              <p>
-                No projects found. Create your first project to get started!
-              </p>
-            ) : (
-              <div className='grid gap-4'>
-                {projects?.map((project) => (
-                  <Link
-                    key={project.id}
-                    className='p-4 border rounded-lg hover:border-gray-400 transition-colors'
-                    href={`/app/projects/${project.identifier}`}
-                  >
-                    <h3 className='font-medium'>{project.name}</h3>
-
-                    <p className='text-sm text-gray-500'>
-                      {project.identifier}
-                    </p>
-
-                    {project.lastPublishedDeployment && (
-                      <p className='text-sm text-gray-500 mt-1'>
-                        Last published:{' '}
-                        {project.lastPublishedDeployment.version ||
-                          project.lastPublishedDeployment.hash}
-                      </p>
-                    )}
-                  </Link>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      </section>
-    </>
-  )
+  return <AppIndex />
 }

apps/web/src/app/app/projects/[namespace]/[project-name]/app-project-index.tsx

@@ -6,14 +6,18 @@ import { useAuthenticatedAgentic } from '@/components/agentic-provider'
 import { LoadingIndicator } from '@/components/loading-indicator'
 import { toastError } from '@/lib/notifications'
 
-export default function ProjectIndex({
+export function AppProjectIndex({
   projectIdentifier
 }: {
   projectIdentifier: string
 }) {
   const ctx = useAuthenticatedAgentic()
-  const { data: project, isLoading } = useQuery({
-    queryKey: [`project:${projectIdentifier}`],
+  const {
+    data: project,
+    isLoading,
+    isError
+  } = useQuery({
+    queryKey: ['project', projectIdentifier],
     queryFn: () =>
       ctx?.api
         .getProjectByIdentifier({
@@ -32,8 +36,12 @@ export default function ProjectIndex({
 
   return (
     <section>
-      {!ctx || !project || isLoading ? (
+      {!ctx || isLoading ? (
         <LoadingIndicator />
+      ) : isError ? (
+        <p>Error fetching project</p>
+      ) : !project ? (
+        <p>Project "{projectIdentifier}" not found</p>
       ) : (
         <>
           <h1

apps/web/src/app/app/projects/[namespace]/[project-name]/page.tsx

@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation'
 
 import { toastError } from '@/lib/notifications'
 
-import ProjectIndex from './project-index'
+import { AppProjectIndex } from './app-project-index'
 
 export default async function AppProjectIndexPage({
   params
@@ -26,7 +26,7 @@ export default async function AppProjectIndexPage({
       { strict: true }
     )
 
-    return <ProjectIndex projectIdentifier={projectIdentifier} />
+    return <AppProjectIndex projectIdentifier={projectIdentifier} />
   } catch (err: any) {
     void toastError(err, { label: 'Invalid project identifier' })
 

apps/web/src/app/page.tsx

@@ -4,11 +4,11 @@ export default function IndexPage() {
   return (
     <>
       <section>
-        <h1 className='my-0! text-center text-balance leading-snug md:leading-none'>
+        <h1 className='my-0! text-center text-balance leading-snug md:leading-none text-4xl font-extrabold tracking-tight'>
           Agentic MCP Gateway
         </h1>
 
-        <h5 className='my-8! text-center text-balance'>
+        <h5 className='my-8! text-center text-balance text-lg'>
           An API gateway built exclusively for AI agents.
         </h5>
 
@@ -16,7 +16,7 @@ export default function IndexPage() {
       </section>
 
       <section className='flex-1'>
-        <h2 className='text-center text-balance'>How it works</h2>
+        <h2 className='text-center text-balance text-lg'>How it works</h2>
 
         <div>TODO</div>
       </section>