🍞

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

@@ -1,6 +1,7 @@
 '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'
@@ -19,8 +20,12 @@ export default function AppIndexPage() {
   return (
     <>
       <section>
-        <h1 className='my-0! text-center text-balance leading-snug md:leading-none'>
-          Authenticated Dashboard
+        <h1
+          className='text-center text-balance leading-snug md:leading-none
+        text-4xl font-extrabold tracking-tight
+        '
+        >
+          Dashboard
         </h1>
 
         {!ctx || isLoading ? (
@@ -28,21 +33,25 @@ export default function AppIndexPage() {
         ) : (
           <div className='mt-8'>
             <h2 className='text-xl font-semibold mb-4'>Your Projects</h2>
-            {projects?.length === 0 ? (
+
+            {!projects?.length ? (
               <p>
                 No projects found. Create your first project to get started!
               </p>
             ) : (
               <div className='grid gap-4'>
                 {projects?.map((project) => (
-                  <div
+                  <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:{' '}
@@ -50,7 +59,7 @@ export default function AppIndexPage() {
                           project.lastPublishedDeployment.hash}
                       </p>
                     )}
-                  </div>
+                  </Link>
                 ))}
               </div>
             )}

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

@@ -0,0 +1,35 @@
+import { parseProjectIdentifier } from '@agentic/platform-validators'
+import { notFound } from 'next/navigation'
+
+import { toastError } from '@/lib/notifications'
+
+import ProjectIndex from './project-index'
+
+export default async function AppProjectIndexPage({
+  params
+}: {
+  params: Promise<{
+    namespace: string
+    'project-name': string
+  }>
+}) {
+  const { namespace: rawNamespace, 'project-name': rawProjectName } =
+    await params
+
+  try {
+    const namespace = decodeURIComponent(rawNamespace)
+    const projectName = decodeURIComponent(rawProjectName)
+
+    console.log('parsing project identifier', { namespace, projectName })
+    const { projectIdentifier } = parseProjectIdentifier(
+      `${namespace}/${projectName}`,
+      { strict: true }
+    )
+
+    return <ProjectIndex projectIdentifier={projectIdentifier} />
+  } catch (err: any) {
+    void toastError(err, { label: 'Invalid project identifier' })
+
+    return notFound()
+  }
+}

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

@@ -0,0 +1,54 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+
+import { useAuthenticatedAgentic } from '@/components/agentic-provider'
+import { LoadingIndicator } from '@/components/loading-indicator'
+import { toastError } from '@/lib/notifications'
+
+export default function ProjectIndex({
+  projectIdentifier
+}: {
+  projectIdentifier: string
+}) {
+  const ctx = useAuthenticatedAgentic()
+  const { data: project, isLoading } = useQuery({
+    queryKey: [`project:${projectIdentifier}`],
+    queryFn: () =>
+      ctx?.api
+        .getProjectByIdentifier({
+          projectIdentifier,
+          populate: ['lastPublishedDeployment']
+        })
+        .catch((err: any) => {
+          void toastError(err, {
+            label: `Error fetching project "${projectIdentifier}"`
+          })
+
+          throw err
+        }),
+    enabled: !!ctx
+  })
+
+  return (
+    <section>
+      {!ctx || !project || isLoading ? (
+        <LoadingIndicator />
+      ) : (
+        <>
+          <h1
+            className='text-center text-balance leading-snug md:leading-none
+        text-4xl font-extrabold tracking-tight
+        '
+          >
+            {project.name}
+          </h1>
+
+          <div className='mt-8'>
+            <pre className='max-w-lg'>{JSON.stringify(project, null, 2)}</pre>
+          </div>
+        </>
+      )}
+    </section>
+  )
+}