🦐

apps/web/package.json

@@ -32,6 +32,7 @@
     "@tanstack/react-form": "^1.12.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "ky": "catalog:",
     "lucide-react": "^0.515.0",
     "motion": "^12.18.1",
     "next": "^15.3.3",

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

@@ -12,20 +12,10 @@ import { useUnauthenticatedAgentic } from '@/components/agentic-provider'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { GitHubIcon } from '@/icons/github'
+import { toastError } from '@/lib/notifications'
 import { cn } from '@/lib/utils'
 
-// function FieldInfo({ field }: { field: AnyFieldApi }) {
-//   return (
-//     <>
-//       {field.state.meta.isTouched && !field.state.meta.isValid ? (
-//         <em>{field.state.meta.errors.join(',')}</em>
-//       ) : null}
-
-//       {field.state.meta.isValidating ? 'Validating...' : null}
-//     </>
-//   )
-// }
-
 export default function LoginPage() {
   const [error] = useState<PasswordLoginError | undefined>(undefined)
   const ctx = useUnauthenticatedAgentic()
@@ -52,10 +42,9 @@ export default function LoginPage() {
         })
 
         console.log('login success', res)
-      } catch (err) {
-        // TODO
-        console.error('login error', err)
-        throw err
+      } catch (err: any) {
+        void toastError(err, { label: 'Login error' })
+        return
       }
 
       return redirect('/app', RedirectType.push)
@@ -173,12 +162,7 @@ export default function LoginPage() {
                 className='w-full'
                 onClick={onAuthWithGitHub}
               >
-                <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
-                  <path
-                    d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'
-                    fill='currentColor'
-                  />
-                </svg>
+                <GitHubIcon />
 
                 <span>Login with GitHub</span>
               </Button>

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

@@ -10,7 +10,6 @@ import { useForm } from '@tanstack/react-form'
 import { Loader2Icon } from 'lucide-react'
 import { redirect, RedirectType } from 'next/navigation'
 import { useCallback, useState } from 'react'
-import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { useUnauthenticatedAgentic } from '@/components/agentic-provider'
@@ -18,6 +17,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { GitHubIcon } from '@/icons/github'
+import { toastError } from '@/lib/notifications'
 import { cn } from '@/lib/utils'
 
 export default function LoginPage() {
@@ -45,7 +45,7 @@ export default function LoginPage() {
     onSubmit: async ({ value }) => {
       try {
         if (value.password !== value.repeat) {
-          toast.error('Passwords do not match')
+          void toastError('Passwords do not match', { label: 'signup error' })
           return
         }
 
@@ -57,8 +57,7 @@ export default function LoginPage() {
 
         console.log('signup success', res)
       } catch (err: any) {
-        console.error('Signup error', err.message)
-        toast.error('Signup error', err.message)
+        void toastError(err, { label: 'signup error' })
         return
       }
 

apps/web/src/lib/notifications.ts

@@ -0,0 +1,41 @@
+import { HTTPError } from 'ky'
+import { toast as toastImpl } from 'sonner'
+
+export function toast(message: string) {
+  toastImpl(message)
+}
+
+export async function toastError(
+  error: any,
+  ctx: {
+    label?: string
+  }
+) {
+  let message: string | undefined
+  let details: Error | undefined
+
+  if (typeof error === 'string') {
+    message = error
+  } else if (error instanceof Error) {
+    details = error
+    message = error.message
+
+    if (error instanceof HTTPError) {
+      if (error.response) {
+        try {
+          message = error.response.statusText
+
+          const body = await error.response.json()
+          if (typeof body.error === 'string') {
+            message = body.error
+          }
+        } catch {
+          // TODO
+        }
+      }
+    }
+  }
+
+  console.error(ctx.label, message, ...[details].filter(Boolean))
+  toastImpl.error(message)
+}

pnpm-lock.yaml

@@ -542,6 +542,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      ky:
+        specifier: 'catalog:'
+        version: 1.8.1
       lucide-react:
         specifier: ^0.515.0
         version: 0.515.0(react@19.1.0)