Merge branch 'additional-ai-tools'

src/app/_components/Home/HomeHero.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import Link from "next/link";
+import { useRef } from "react";
+
+// The centerpiece is the site's own "G" mark (public/GLIcon.svg). GSAP draws the
+// outline on with a stroke-dash trick, fades the fill in, then keeps everything
+// gently alive (floating logo, counter-rotating rings). A curved arrow in the
+// lower-right corner, with its label above the tail, points at the chat FAB to
+// nudge people toward the assistant.
+export default function HomeHero() {
+	const root = useRef<HTMLDivElement>(null);
+	const gPath = useRef<SVGPathElement>(null);
+
+	useGSAP(
+		() => {
+			const logo = gPath.current;
+
+			if (logo) {
+				const len = logo.getTotalLength();
+				gsap.set(logo, { strokeDasharray: len, strokeDashoffset: len });
+			}
+			gsap.set(".hero-fill", { fillOpacity: 0 });
+
+			const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
+
+			tl.from(
+				".hero-ring",
+				{ scale: 0, opacity: 0, duration: 0.9, stagger: 0.12, svgOrigin: "100 100" },
+				0,
+			);
+			if (logo) tl.to(logo, { strokeDashoffset: 0, duration: 1.3 }, 0.25);
+			tl.to(".hero-fill", { fillOpacity: 1, duration: 0.6 }, "-=0.35");
+			tl.from(".hero-line", { yPercent: 120, opacity: 0, duration: 0.7, stagger: 0.12 }, "-=0.25");
+			tl.from(".hero-arrow-label", { yPercent: 120, opacity: 0, duration: 0.6 }, "-=0.1");
+			tl.from(
+				".hero-arrow-svg",
+				{ opacity: 0, scale: 0.7, transformOrigin: "top left", duration: 0.6 },
+				"<+=0.1",
+			);
+
+			// Idle life — runs forever once the entrance has settled.
+			gsap.to(".hero-logo", { y: -12, duration: 3.2, ease: "sine.inOut", yoyo: true, repeat: -1 });
+			gsap.to(".hero-ring-spin", { rotation: 360, duration: 44, ease: "none", repeat: -1, svgOrigin: "100 100" });
+			gsap.to(".hero-ring-spin-rev", { rotation: -360, duration: 32, ease: "none", repeat: -1, svgOrigin: "100 100" });
+			gsap.to(".hero-arrow-wrap", { y: 10, duration: 1.5, ease: "sine.inOut", yoyo: true, repeat: -1 });
+		},
+		{ scope: root },
+	);
+
+	return (
+		<div
+			ref={root}
+			className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden px-6 text-center"
+		>
+			{/* Logo + orbiting rings */}
+			<div className="hero-logo relative h-56 w-56 sm:h-64 sm:w-64">
+				<svg
+					className="absolute inset-0 h-full w-full text-primary/40"
+					viewBox="0 0 200 200"
+					fill="none"
+					aria-hidden="true"
+				>
+					<circle
+						className="hero-ring hero-ring-spin"
+						cx="100"
+						cy="100"
+						r="92"
+						stroke="currentColor"
+						strokeWidth="1"
+						strokeDasharray="2 10"
+					/>
+					<circle
+						className="hero-ring hero-ring-spin-rev"
+						cx="100"
+						cy="100"
+						r="78"
+						stroke="currentColor"
+						strokeWidth="1.5"
+						strokeDasharray="14 8"
+						opacity="0.6"
+					/>
+					<circle
+						className="hero-ring"
+						cx="100"
+						cy="100"
+						r="64"
+						stroke="currentColor"
+						strokeWidth="1"
+						opacity="0.35"
+					/>
+				</svg>
+
+				<svg
+					className="absolute inset-0 h-full w-full p-10 text-foreground"
+					viewBox="0 0 74.193405 74.232162"
+					aria-label="Gregor Lohaus logo"
+				>
+					<g transform="translate(-24.550957,-64.437925)">
+						<path
+							ref={gPath}
+							className="hero-fill"
+							d="m 61.66652,64.437927 c -20.498425,1.81e-4 -37.115669,16.617653 -37.115564,37.116083 -1.05e-4,20.49842 16.617139,37.1159 37.115564,37.11608 16.081184,-0.0265 30.316081,-10.4061 35.258313,-25.70903 1.144195,-3.51294 1.757471,-7.1771 1.819527,-10.87117 H 87.864404 67.217603 v 10.87117 h 17.977714 c -4.361366,9.03731 -13.494221,14.79672 -23.528797,14.83786 -14.494622,0 -26.244916,-11.75029 -26.244909,-26.24491 -7e-6,-14.494627 11.750287,-26.244918 26.244909,-26.244912 z"
+							fill="currentColor"
+							stroke="currentColor"
+							strokeWidth="0.9"
+						/>
+						<rect
+							className="hero-fill"
+							width="31.802109"
+							height="11.397169"
+							x="-96.2453"
+							y="67.460899"
+							transform="rotate(-90)"
+							fill="currentColor"
+						/>
+					</g>
+				</svg>
+			</div>
+
+			{/* Headline */}
+			<div className="mt-10 max-w-xl">
+				<h1 className="overflow-hidden pb-2">
+					<span className="hero-line block text-4xl font-semibold leading-tight tracking-tight sm:text-6xl">
+						Gregor Lohaus
+					</span>
+				</h1>
+				<div className="mt-4 overflow-hidden">
+					<p className="hero-line text-lg text-muted-foreground sm:text-xl">
+						Full Stack Developer
+					</p>
+				</div>
+			</div>
+
+			{/* Lower-right arrow pointing at the chat FAB */}
+			<Link
+				href="/assistant"
+				aria-label="Chat with my AI assistant"
+				className="hero-arrow-wrap absolute bottom-10 right-8 z-40 flex flex-col items-start text-foreground transition-opacity hover:opacity-80 sm:right-16"
+			>
+				<span className="mb-1 max-w-[11rem] -translate-x-20 -translate-y-2 overflow-hidden sm:-translate-x-24">
+					<span className="hero-arrow-label block font-semibold leading-snug text-foreground drop-shadow-[0_2px_10px_rgba(0,0,0,0.7)] sm:text-lg">
+						Chat with my AI&nbsp;assistant
+					</span>
+				</span>
+				<svg
+					className="hero-arrow-svg h-28 w-32 drop-shadow-[0_2px_10px_rgba(0,0,0,0.4)] sm:h-32 sm:w-36"
+					viewBox="0 0 776.09175 693.66538"
+					fill="currentColor"
+					aria-hidden="true"
+				>
+					<g transform="matrix(2.7190747,0,0,3.1037754,-326.9763,-1172.9045)">
+						<path
+							fillRule="evenodd"
+							clipRule="evenodd"
+							d="m 130.838,381.118 c 1.125,28.749 5.277,54.82 12.695,78.018 7.205,22.53 18.847,40.222 36.812,53.747 52.018,39.16 153.369,16.572 153.369,16.572 l -4.632,-32.843 72.918,42.778 -58.597,58.775 -3.85,-27.303 c 0,0 -100.347,18.529 -163.905,-34.881 -37.659,-31.646 -53.293,-84.021 -51.593,-153.962 0.266,-0.247 4.728,-0.908 6.783,-0.901 z"
+						/>
+					</g>
+				</svg>
+			</Link>
+		</div>
+	);
+}

src/app/actions/cancelMeeting.ts

@@ -0,0 +1,25 @@
+'use server'
+import { getGoogleCalendarClient, getGoogleCalendarId } from '~/server/googleCalendar'
+
+export async function cancelMeeting({ eventId }: { eventId: string }) {
+	try {
+		const calendar = getGoogleCalendarClient()
+
+		await calendar.events.delete({
+			calendarId: getGoogleCalendarId(),
+			eventId,
+		})
+
+		return {
+			success: true,
+			eventId,
+			message: 'Meeting removed from Gregor availability calendar.',
+		}
+	} catch (error) {
+		console.error('Failed to cancel meeting:', error)
+		return {
+			success: false,
+			error: 'Failed to remove the meeting from Gregor availability calendar.',
+		}
+	}
+}

src/app/actions/scheduleMeeting.ts

@@ -1,7 +1,34 @@
 'use server'
-import { clerkClient, auth } from '@clerk/nextjs/server'
-import { google } from 'googleapis'
 import { env } from '~/env'
+import { getGoogleCalendarClient, getGoogleCalendarId } from '~/server/googleCalendar'
+
+function googleCalendarDate(date: Date) {
+	return date.toISOString().replace(/[-:]|\.\d{3}/g, '')
+}
+
+function createGoogleCalendarTemplateLink({
+	title,
+	description,
+	startTime,
+	endTime,
+	gregorEmail,
+}: {
+	title: string
+	description: string
+	startTime: Date
+	endTime: Date
+	gregorEmail: string
+}) {
+	const params = new URLSearchParams({
+		action: 'TEMPLATE',
+		text: title,
+		dates: `${googleCalendarDate(startTime)}/${googleCalendarDate(endTime)}`,
+		details: description,
+		add: gregorEmail,
+	})
+
+	return `https://calendar.google.com/calendar/render?${params.toString()}`
+}
 
 export async function scheduleMeeting({
 	title,
@@ -19,56 +46,39 @@ export async function scheduleMeeting({
 	attendeeName?: string
 }) {
 	try {
-		const clerk = await clerkClient()
-		const userAuth = await auth()
-		const user = await clerk.users.getUser(userAuth.userId?userAuth.userId:"")
-		// Get admin's Google OAuth token to create the event on Gregor's calendar
-		const adminTokenResponse = await clerk.users.getUserOauthAccessToken(
-			env.ADMIN_USER_CLERK_ID,
-			'oauth_google',
-		)
-		const adminToken = adminTokenResponse.data[0]
-
-		if (!adminToken?.token) {
-			return { success: false, error: 'Admin Google Calendar not connected. Ensure the admin account is linked with Google and has calendar scope enabled.' }
-		}
-
-		// Try to resolve visitor's Google email for the invite
-		let visitorEmail: string | undefined = attendeeEmail
-		if (!visitorEmail) {
-			visitorEmail = user?.emailAddresses.at(0)?.emailAddress ?? undefined
-		}
-
-		const oAuth2Client = new google.auth.OAuth2()
-		oAuth2Client.setCredentials({ access_token: adminToken.token })
-		const calendar = google.calendar({ version: 'v3', auth: oAuth2Client })
+		const calendar = getGoogleCalendarClient()
 
 		const startTime = new Date(dateTime)
 		const endTime = new Date(startTime.getTime() + durationMinutes * 60 * 1000)
+		const attendeeNote = attendeeEmail
+			? `\n\nVisitor: ${attendeeName ?? 'Unknown'} <${attendeeEmail}>`
+			: ''
+		const eventDescription = `${description}${attendeeNote}`
 
-		const attendees: { email: string; displayName?: string }[] = []
-		if (visitorEmail) {
-			attendees.push({ email: visitorEmail, displayName: attendeeName })
+		const eventRequest = {
+			summary: title,
+			description: eventDescription,
+			start: { dateTime: startTime.toISOString(), timeZone: 'UTC' },
+			end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
 		}
-
 		const event = await calendar.events.insert({
-			calendarId: 'primary',
-			sendUpdates: 'all',
-			requestBody: {
-				summary: title,
-				description,
-				start: { dateTime: startTime.toISOString(), timeZone: 'UTC' },
-				end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
-				attendees,
-			},
-			sendNotifications: true
+			calendarId: getGoogleCalendarId(),
+			requestBody: eventRequest,
+		})
+
+		const addToCalendarLink = createGoogleCalendarTemplateLink({
+			title,
+			description,
+			startTime,
+			endTime,
+			gregorEmail: env.GREGOR_MEETING_EMAIL,
 		})
 
 		return {
 			success: true,
 			eventId: event.data.id,
-			htmlLink: event.data.htmlLink,
-			message: `Meeting "${title}" scheduled for ${startTime.toLocaleString()}${visitorEmail ? `. Invite sent to ${visitorEmail}.` : '.'}`,
+			addToCalendarLink,
+			message: `Meeting "${title}" scheduled for ${startTime.toLocaleString()}.${attendeeEmail ? ` Visitor email noted: ${attendeeEmail}.` : ''} The add-to-calendar link invites ${env.GREGOR_MEETING_EMAIL}.`,
 		}
 	} catch (error) {
 		console.error('Failed to schedule meeting:', error)

src/app/api/chat/route.ts

@@ -1,14 +1,12 @@
 import { auth } from '@clerk/nextjs/server'
 import { createOpenAI } from '@ai-sdk/openai'
-import { streamText, tool, convertToModelMessages, stepCountIs, type UIMessage } from 'ai'
-import { success, z } from 'zod'
+import { streamText, convertToModelMessages, stepCountIs, type UIMessage } from 'ai'
 import { eq, and } from 'drizzle-orm'
 import { env } from '~/env'
 import { db } from '~/server/db'
 import { chatSession, chatMessage } from '~/server/dbschema/schema'
 import { servTrpc } from '~/app/_trpc/ServerClient'
-import { scheduleMeeting } from '~/app/actions/scheduleMeeting'
-import currentTime from '~/app/actions/currentTime';
+import { createChatTools } from '~/server/ai/tools'
 
 const openai = createOpenAI({ apiKey: env.OPENAI_API_KEY })
 
@@ -31,7 +29,17 @@ export async function POST(req: Request) {
 
 	if (!session) return new Response('Session not found', { status: 404 })
 
-	const systemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
+	const configuredSystemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
+	const systemPrompt = `${configuredSystemPrompt}
+
+Runtime context:
+- Current server time: ${new Date().toISOString()}.
+- Default meeting timezone: Europe/Berlin.
+- For availability questions like "next open spot", call getAvailability once. It defaults to checking from now. Use nextAvailableSlot for the next opening, or the first item in availableSlots if needed. Do not call getAvailability again just to get more slots.
+- After scheduleMeeting succeeds, include only the returned addToCalendarLink for the visitor. Format it as a Markdown link like [Add this meeting to your Google Calendar](URL); do not paste the raw URL. Explain briefly that this link lets them add the meeting to their own calendar and invite Gregor. Do not mention internal Google Calendar event links.
+- You can remove meetings from Gregor's availability calendar with cancelMeeting only when you have the exact eventId from a previous scheduleMeeting result. If a visitor asks to reschedule and you have both the old eventId and a confirmed new slot, call cancelMeeting once for the old event and scheduleMeeting once for the new event. If you do not have the old eventId, ask for clarification instead of guessing.
+- When rescheduling, make clear that cancelMeeting only removes the old slot from Gregor's availability calendar. If the visitor already added the old link to their own calendar, they may need to remove that copy themselves.
+- Do not calculate or invent calendar availability yourself.`
 	const model = await servTrpc.chat.getModel()
 
 	// Save the latest user message
@@ -50,42 +58,14 @@ export async function POST(req: Request) {
 		model: openai(model),
 		system: systemPrompt,
 		messages: await convertToModelMessages(messages),
-		tools: {
-			scheduleMeeting: tool({
-				description: 'Schedule a meeting with Gregor Lohaus and add it to his Google Calendar',
-				inputSchema: z.object({
-					title: z.string().describe('Meeting title, make something up if not provided'),
-					description: z.string().describe('Meeting description / agenda,  make something up if not provided'),
-					dateTime: z
-						.string()
-						.describe(
-							'ISO 8601 datetime for the meeting start, e.g. 2025-04-01T10:00:00',
-						),
-					durationMinutes: z
-						.number()
-						.int()
-						.min(15)
-						.max(120)
-						.describe('Duration of the meeting in minutes, if none provided ask if 20 minutes is ok'),
-					attendeeEmail: z
-						.string()
-						.email()
-						.optional()
-						.describe('Optional Email of the visitor to invite (if provided)'),
-					attendeeName: z.string().optional().describe('Name of the visitor'),
-				}),
-				execute: async (input) => scheduleMeeting({ ...input }),
-			}),
-			getCurrentUnixTime: tool({
-				description: 'Get the current unix time to reference for meeting dates',
-				inputSchema: z.object({
-					none: z.string().optional().describe("no inputs are needed")
-				}),
-				execute: async () => currentTime()
-			})
-		},
-		stopWhen: stepCountIs(5),
+		tools: createChatTools(),
+		stopWhen: stepCountIs(3),
 		onFinish: async ({ text, finishReason }) => {
+			console.log('[ai:chat:onFinish]', {
+				finishReason,
+				hasText: Boolean(text),
+				textLength: text.length,
+			})
 			if (text && finishReason === 'stop') {
 				await db.insert(chatMessage).values({
 					sessionId,

src/app/blog/[slug]/page.tsx

@@ -32,7 +32,7 @@ export default async function BlogPostPage({ params }: Props) {
   const date = typeof parsed.data.date === "string" ? parsed.data.date : post.date;
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-12">
+    <main className="mx-auto h-full max-w-2xl overflow-y-auto px-4 py-12">
       <header className="mb-8">
         <h1 className="text-3xl font-bold">{title}</h1>
         {date && (

src/app/blog/page.tsx

@@ -6,7 +6,7 @@ export default async function BlogPage() {
   const posts = await servTrpc.blog.list();
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-12">
+    <main className="mx-auto h-full max-w-2xl overflow-y-auto px-4 py-12">
       <h1 className="mb-8 text-3xl font-bold">Blog</h1>
       {posts.length === 0 ? (
         <p className="text-muted-foreground">No posts yet.</p>

src/app/chat/_components/AssistantMessage.tsx

@@ -1,6 +1,25 @@
 import type { UIMessage } from "ai";
 import { ClientMdx } from "~/components/ClientMdx";
 
+function toolLabel(type: string) {
+	switch (type) {
+		case "tool-searchSiteContent":
+			return "Searching site content";
+		case "tool-getRelevantExperience":
+			return "Finding relevant experience";
+		case "tool-getProjectDetails":
+			return "Loading project details";
+		case "tool-getAvailability":
+			return "Checking availability";
+		case "tool-cancelMeeting":
+			return "Removing meeting";
+		case "tool-getCurrentUnixTime":
+			return "Checking current time";
+		default:
+			return "Using tool";
+	}
+}
+
 export const AssistantMessage = (props: { message: UIMessage }) => {
   let message = props.message;
   return (
@@ -10,7 +29,7 @@ export const AssistantMessage = (props: { message: UIMessage }) => {
     >
       <div
         className=
-        'max-w-[80%] px-4 py-2 text-sm space-y-2 bg-muted'
+        'max-w-[80%] min-w-0 px-4 py-2 text-sm space-y-2 bg-muted break-words [overflow-wrap:anywhere] [&_a]:break-all [&_pre]:max-w-full [&_pre]:overflow-x-auto'
       >
         {message.parts.map((part, i) => {
           if (part.type === 'text') {
@@ -18,47 +37,82 @@ export const AssistantMessage = (props: { message: UIMessage }) => {
               <ClientMdx key={i} source={part.text} fallback={part.text} />
             )
           }
-          if (part.type === 'tool-scheduleMeeting') {
-            const toolPart = part as unknown as {
-              type: 'tool-scheduleMeeting'
-              state: string
-              input: unknown
-              output?: { success: boolean; message?: string; htmlLink?: string; error?: string }
-            }
+	          if (part.type === 'tool-scheduleMeeting') {
+	            const toolPart = part as unknown as {
+	              type: 'tool-scheduleMeeting'
+	              state: string
+	              input: unknown
+	              output?: { success: boolean; error?: string }
+	            }
             if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
               return (
                 <p key={i} className="text-xs opacity-70 italic">
                   Scheduling meeting…
                 </p>
               )
-            }
-            if (toolPart.state === 'output-available' && toolPart.output) {
-              const result = toolPart.output
-              return (
-                <div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
-                  {result.success ? (
-                    <span>
-                      ✓ {result.message}{' '}
-                      {result.htmlLink && (
-                        <a
-                          href={result.htmlLink}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="underline"
-                        >
-                          View event
-                        </a>
-                      )}
-                    </span>
-                  ) : (
-                    <span>✗ {result.error}</span>
-                  )}
+	            }
+	            if (toolPart.state === 'output-available' && toolPart.output) {
+	              const result = toolPart.output
+	              if (result.success) return null
+	              return (
+	                <div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
+	                  <span>✗ {result.error}</span>
                 </div>
-              )
-            }
-          }
-          return null
-        })}
+	              )
+	            }
+	          }
+	          if (part.type === 'tool-cancelMeeting') {
+	            const toolPart = part as unknown as {
+	              type: 'tool-cancelMeeting'
+	              state: string
+	              output?: { success: boolean; error?: string }
+	            }
+	            if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  Removing meeting…
+	                </p>
+	              )
+	            }
+	            if (toolPart.state === 'output-available' && toolPart.output) {
+	              if (toolPart.output.success) return null
+	              return (
+	                <div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
+	                  <span>✗ {toolPart.output.error}</span>
+	                </div>
+	              )
+	            }
+	          }
+	          if (part.type.startsWith('tool-')) {
+	            const toolPart = part as unknown as {
+	              type: string
+	              state: string
+	              output?: { success?: boolean; results?: unknown[]; matches?: unknown[]; availableSlots?: unknown[]; project?: unknown; error?: string }
+	            }
+	            if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  {toolLabel(toolPart.type)}...
+	                </p>
+	              )
+	            }
+	            if (toolPart.state === 'output-available') {
+	              const count = toolPart.output?.results?.length
+	                ?? toolPart.output?.matches?.length
+	                ?? toolPart.output?.availableSlots?.length
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  {toolPart.output?.success === false
+	                    ? (toolPart.output.error ?? `${toolLabel(toolPart.type)} failed`)
+	                    : count != null
+	                      ? `${toolLabel(toolPart.type)} complete (${count})`
+	                      : `${toolLabel(toolPart.type)} complete`}
+	                </p>
+	              )
+	            }
+	          }
+	          return null
+	        })}
       </div>
     </div>
   )

src/app/chat/_components/ChatInterface.tsx

@@ -54,7 +54,7 @@ function addInitMessage(messageArray: UIMessage[]) {
 			role: 'assistant',
 			parts: [{
 				type: 'text',
-				text: "Hi im gregors ai assistant,you can ask me to provide general information or to schedule a meeting."
+				text: "Hi, I'm Gregor's AI assistant. Ask me about his experience, projects, blog posts, or availability for a meeting."
 			}],
 		})
 	}

src/app/chat/_components/UserMessage.tsx

@@ -14,7 +14,7 @@ export const UserMessage = (props:{message: UIMessage}) => {
     >
       <div
         className=
-        'max-w-[80%] px-4 py-2 text-sm space-y-2 bg-primary'
+        'max-w-[80%] min-w-0 px-4 py-2 text-sm space-y-2 bg-primary break-words whitespace-pre-wrap [overflow-wrap:anywhere]'
       >
       {message}
       </div>

src/app/cv/_components/CvCategory.tsx

@@ -5,7 +5,7 @@ import { cn } from "~/lib/utils"
 import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
 import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
+import AnimatedDiv from "~/app/_components/Animated/AnimatedDiv"
 import { ScrollArea } from "~/components/ui/scroll-area";
 
 export type CvCategoryData = ArrayElement<RouterOutputs['categoryv2']['listAllWithEntries']>
@@ -18,22 +18,46 @@ type CvCategoryProps = {
 }
 export default function CvCategory({ category, layout, position = 0, descriptions }: CvCategoryProps) {
   const entries = category.cvEntry
+  const isRowLayout = layout === "row"
+  const entryStart = position + 1
+  const entryStagger = 1.1
+  const entryItems = entries.map((entry, i) => {
+    const entryPosition = entryStart + i * entryStagger
+
+    return (
+      <AnimatedDiv
+        className={cn(isRowLayout ? "min-w-[min(100%,18rem)] flex-1" : "w-full", "opacity-0 -translate-x-6")}
+        position={entryPosition}
+        debugId={`cv-entry-wrapper:${category.name}:${entry.title}:${entryPosition}`}
+        opacity={1}
+        x={0}
+        duration={0.4}
+        ease="power2.out"
+        key={entry.id}
+      >
+        <CvEntry position={entryPosition} entry={entry} description={descriptions[entry.id]} row={isRowLayout} className="w-full" />
+      </AnimatedDiv>
+    )
+  })
+
   return (
-    <AnimatedCard position={position} className={cn(layout == "row" ? "w-full" : "", "h-screen")}>
+    <AnimatedCard position={position} className={cn(isRowLayout ? "h-fit min-w-[min(100%,18rem)] flex-1" : "lg:h-full lg:min-h-0")}>
       <CardHeader>
-        <AnimateTextIn once position={position + 0.2} animation="slide" debugId={`cv-category-title:${category.name}:${position + 0.2}`}>
+        <AnimateTextIn once position={position + 0.35} animation="slide" debugId={`cv-category-title:${category.name}:${position + 0.35}`}>
           <CardTitle>{category.name}</CardTitle>
         </AnimateTextIn>
       </CardHeader>
       {entries.length > 0 ?
-        <CardContent className={cn(layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col", "gap-4", "overflow-scroll")}>
-          <ScrollArea>
-            {entries.map((entry, i) => (
-              <AnimatePopUp position={position + 0.4 + i * 0.2} debugId={`cv-entry-wrapper:${category.name}:${entry.title}:${position + 0.4 + i * 0.2}`} key={entry.id}>
-                <CvEntry position={position + 0.4 + i * 0.2} entry={entry} description={descriptions[entry.id]} className={layout == "row" ? "w-full lg:w-fit" : undefined} />
-              </AnimatePopUp>
-            ))}
-          </ScrollArea>
+        <CardContent className={cn(isRowLayout ? "flex flex-row flex-wrap items-stretch justify-center lg:justify-between" : "flex flex-col flex-1 min-h-0", "gap-4")}>
+          {isRowLayout ? (
+            entryItems
+          ) : (
+            <ScrollArea className="min-h-0 w-full flex-1">
+              <div className="flex flex-col gap-4 pr-2">
+                {entryItems}
+              </div>
+            </ScrollArea>
+          )}
         </CardContent>
         :
         <></>

src/app/cv/_components/CvEntry.tsx

@@ -9,30 +9,34 @@ import type { CvCategoryData } from "./CvCategory"
 
 export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
 
-export default function CvEntry({ entry, description, className, position = 0 }: {
+export default function CvEntry({ entry, description, className, position = 0, row = false }: {
 	entry: CvEntryData,
 	description?: ReactNode,
 	className?: string,
-	position?: number
+	position?: number,
+	row?: boolean,
 }) {
+	const from = format(new Date(entry.fromTime), 'MMMM yyyy')
+	const to = format(new Date(entry.toTime), 'MMMM yyyy')
+
 	return (
-		<Card className={className ? cn("w-fit", className) : "w-fit"}>
+		<Card className={cn("w-full ring-0", row && "h-full", className)}>
 			{entry.title ?
 				<CardHeader>
-					<AnimateTextIn position={position} animation="slide" debugId={`cv-entry-title:${entry.title}:${position}`}>
+					<AnimateTextIn once position={position + 0.25} animation="slide" debugId={`cv-entry-title:${entry.title}:${position + 0.25}`}>
 						<CardTitle> {entry.title} </CardTitle>
 					</AnimateTextIn>
 				</CardHeader> :
 				<></>
 			}
 			{entry.description ?
-				<CardContent className="text-sm lg:text-base">
+				<CardContent className={cn("text-sm lg:text-base", row && "flex flex-1 items-center justify-center")}>
 					{/* Fade the description in place instead of collapsing its height:
 					    the outer entry pop-up (CvCategory) measures height:auto when it
 					    plays, so the description must stay laid out at full height or the
 					    entry reveals too short. */}
-					<AnimatedDiv once position={position + 0.2} className="opacity-0" opacity={1} duration={0.5} debugId={`cv-entry-description:${entry.title}:${position + 0.2}`}>
-						<article className="prose prose-zinc dark:prose-invert max-w-none">
+					<AnimatedDiv once position={position + 0.75} className={cn("opacity-0", row && "w-full")} opacity={1} duration={0.5} debugId={`cv-entry-description:${entry.title}:${position + 0.75}`}>
+						<article className={cn("prose prose-zinc dark:prose-invert max-w-none", row && "text-center")}>
 							{description ?? entry.description}
 						</article>
 					</AnimatedDiv>
@@ -40,9 +44,9 @@ export default function CvEntry({ entry, description, className, position = 0 }:
 				<></>
 			}
 			{!entry.hideDates ?
-				<CardFooter className="text-sm">
-					<AnimateTextIn position={position + 0.4} debugId={`cv-entry-dates:${entry.title}:${position + 0.4}`}>
-						{`von ${format(new Date(entry.fromTime), 'M. yyyy')} bis zum ${format(new Date(entry.toTime), 'M. yyyy')}`}
+				<CardFooter className="border-t-0 text-sm">
+					<AnimateTextIn once position={position + 1.15} debugId={`cv-entry-dates:${entry.title}:${position + 1.15}`}>
+						{`${from} to ${to}`}
 					</AnimateTextIn>
 				</CardFooter> :
 				<></>

src/app/cv/_components/Page.tsx

@@ -1,10 +1,12 @@
 'use client'
 import type { ReactNode } from "react";
-import { Sidebar, SidebarContent, SidebarProvider } from "~/components/ui/sidebar";
+import { Sidebar, SidebarContent, SidebarProvider, useSidebar } from "~/components/ui/sidebar";
+import { ScrollArea } from "~/components/ui/scroll-area";
 import type { RouterOutputs } from "~/server/routers/_app"
 import SidebarTriggerDisappearsOnMobile from "./SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./CvCategory";
 import { useTimeLine } from "~/app/_providers/GsapProvicer";
+import { cn } from "~/lib/utils";
 export default function CvPage(props: {
   cv: RouterOutputs['categoryv2']['listAllWithEntries'],
   descriptions: Record<string, ReactNode>,
@@ -17,43 +19,104 @@ export default function CvPage(props: {
   const headerCategories = byPosition("header")
   const col1Categories = byPosition("col1")
   const col2Categories = byPosition("col2")
+  const hasSidebar = sidebarCategories.length > 0
+  const hasTwoMainColumns = col1Categories.length > 0 && col2Categories.length > 0
+  const mainColumnWidthClass = hasTwoMainColumns ? "lg:w-1/2 lg:h-full" : ""
+  const sequencePositions = <T extends { cvEntry: unknown[] }>(categories: T[], start = 0) => {
+    let cursor = start
+    const positions = categories.map((category) => {
+      const position = cursor
+      cursor += 1.8 + category.cvEntry.length * 1.2
+      return position
+    })
+
+    return { end: cursor, positions }
+  }
+  const headerSequence = sequencePositions(headerCategories)
+  const sidebarSequence = sequencePositions(sidebarCategories)
+  const contentStart = Math.max(headerSequence.end, sidebarSequence.end)
+  const col1Sequence = sequencePositions(col1Categories, contentStart)
+  const col2Sequence = sequencePositions(col2Categories, contentStart)
+
   return (
     <>
-      <SidebarProvider>
+      <SidebarProvider className="h-full min-h-0 overflow-hidden">
         {sidebarCategories.length > 0 &&
           <>
             <SidebarTriggerDisappearsOnMobile />
             <Sidebar>
               <SidebarContent className="p-2 lg:pt-[3.2rem]">
                 {sidebarCategories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
+                  <CvCategory layout="col" position={sidebarSequence.positions[i] ?? 0} category={cat} descriptions={descriptions} key={cat.id} />
                 ))}
               </SidebarContent>
             </Sidebar>
           </>
         }
-        <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
-          <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
-            <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
-              {headerCategories.map((cat, i) => (
-                <CvCategory layout="row" position={i} category={cat} descriptions={descriptions} key={cat.id} />
-              ))}
-            </div>
-            <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
-              <div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
-                ))}
-              </div>
-              <div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
+        <MainContent
+          hasSidebar={hasSidebar}
+          mainColumnWidthClass={mainColumnWidthClass}
+          headerCategories={headerCategories}
+          headerSequence={headerSequence}
+          col1Categories={col1Categories}
+          col1Sequence={col1Sequence}
+          col2Categories={col2Categories}
+          col2Sequence={col2Sequence}
+          descriptions={descriptions}
+        />
       </SidebarProvider>
     </>
   )
 }
+
+type Sequence = { positions: number[] }
+type Category = NonNullable<RouterOutputs['categoryv2']['listAllWithEntries']>[number]
+
+function MainContent(props: {
+  hasSidebar: boolean,
+  mainColumnWidthClass: string,
+  headerCategories: Category[],
+  headerSequence: Sequence,
+  col1Categories: Category[],
+  col1Sequence: Sequence,
+  col2Categories: Category[],
+  col2Sequence: Sequence,
+  descriptions: Record<string, ReactNode>,
+}) {
+  const {
+    hasSidebar, mainColumnWidthClass, headerCategories, headerSequence,
+    col1Categories, col1Sequence, col2Categories, col2Sequence, descriptions,
+  } = props
+  const { open } = useSidebar()
+
+  return (
+    <ScrollArea className="h-full min-h-0 w-full flex-1">
+      <div
+        id="mainwrap"
+        className={cn(
+          "flex w-full flex-col gap-4 p-4 pt-8",
+          !hasSidebar && "lg:px-[15vw]",
+          hasSidebar && !open && "lg:px-[8vw]",
+        )}
+      >
+        <div id="header" className="flex w-full flex-row flex-wrap items-stretch gap-4">
+          {headerCategories.map((cat, i) => (
+            <CvCategory layout="row" position={headerSequence.positions[i] ?? 0} category={cat} descriptions={descriptions} key={cat.id} />
+          ))}
+        </div>
+        <div id="colwrapper" className="flex w-full flex-col gap-4 lg:h-[80vh] lg:flex-row">
+          <div id="col1" className={cn("flex min-h-0 w-full flex-col gap-4", mainColumnWidthClass)}>
+            {col1Categories.map((cat, i) => (
+              <CvCategory layout="col" position={col1Sequence.positions[i] ?? 0} category={cat} descriptions={descriptions} key={cat.id} />
+            ))}
+          </div>
+          <div id="col2" className={cn("flex min-h-0 w-full flex-col gap-4", mainColumnWidthClass)}>
+            {col2Categories.map((cat, i) => (
+              <CvCategory layout="col" position={col2Sequence.positions[i] ?? 0} category={cat} descriptions={descriptions} key={cat.id} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  )
+}

src/app/page.tsx

@@ -1,9 +1,9 @@
+import HomeHero from "./_components/Home/HomeHero";
+
 export default function HomePage() {
 	return (
-		<main>
-			<div>
-				hello world
-			</div>
+		<main className="h-full w-full">
+			<HomeHero />
 		</main>
 	);
 }

src/components/mdx-components.tsx

@@ -91,6 +91,26 @@ function Figure({
   );
 }
 
+// A bare markdown image (![alt](src)) fills the prose width. Pass a numeric
+// markdown title — ![alt](src "160") — to render it as a fixed-size, circular
+// avatar instead (used by the CV header). Untitled images keep the old look.
+function Img({ src, alt, title }: { src: string; alt?: string; title?: string }) {
+  const size = title && /^\d+$/.test(title) ? Number(title) : undefined;
+  if (size) {
+    return (
+      <img
+        src={src}
+        alt={alt ?? ""}
+        width={size}
+        height={size}
+        style={{ width: size, height: size }}
+        className="mx-auto !my-0 shrink-0 rounded-full object-cover ring-2 ring-foreground/10"
+      />
+    );
+  }
+  return <img src={src} alt={alt ?? ""} className="w-full rounded-md border object-cover" />;
+}
+
 function PullQuote({ children }: { children: ReactNode }) {
   return (
     <blockquote className="border-primary my-8 border-l-4 pl-5 text-xl leading-8 font-medium">
@@ -100,12 +120,19 @@ function PullQuote({ children }: { children: ReactNode }) {
 }
 
 function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
-  const href = props.href ?? "";
-  const isExternal = /^https?:\/\//.test(href);
+  const { className, ...rest } = props;
 
-  if (!isExternal) return <a {...props} />;
-
-  return <a {...props} target="_blank" rel="noreferrer" />;
+  return (
+    <a
+      {...rest}
+      target="_blank"
+      rel="noreferrer"
+      className={cn(
+        "text-sky-600 underline underline-offset-4 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300",
+        className,
+      )}
+    />
+  );
 }
 
 const blockComponents = new Set<unknown>([Callout, Figure, PullQuote, TagList]);
@@ -127,6 +154,7 @@ export const mdxComponents = {
   ButtonLink,
   Callout,
   Figure,
+  img: Img,
   Lead,
   PullQuote,
   TagList,

src/env.js

@@ -31,6 +31,10 @@ export const env = createEnv({
 		CLERK_SECRET_KEY: z.string(),
 		ADMIN_USER_CLERK_ID: z.string(),
 		OPENAI_API_KEY: z.string(),
+		GOOGLE_SERVICE_ACCOUNT_EMAIL: z.string().email(),
+		GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: z.string(),
+		GOOGLE_CALENDAR_ID: z.string(),
+		GREGOR_MEETING_EMAIL: z.string().email(),
 		NODE_ENV: z
 			.enum(["development", "test", "production"])
 			.default("development"),
@@ -72,6 +76,10 @@ export const env = createEnv({
 		POSTGRES_PRISMA_URL: process.env.POSTGRES_PRISMA_URL,
 		ADMIN_USER_CLERK_ID: process.env.ADMIN_USER_CLERK_ID,
 		OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+		GOOGLE_SERVICE_ACCOUNT_EMAIL: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
+		GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY,
+		GOOGLE_CALENDAR_ID: process.env.GOOGLE_CALENDAR_ID,
+		GREGOR_MEETING_EMAIL: process.env.GREGOR_MEETING_EMAIL,
 		NEXT_PUBLIC_ADMIN_USER_CLERK_ID: process.env.NEXT_PUBLIC_ADMIN_USER_CLERK_ID,
 		CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
 		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,

src/server/ai/tools.ts

@@ -0,0 +1,586 @@
+import "server-only";
+
+import { tool } from "ai";
+import { desc } from "drizzle-orm";
+import { z } from "zod";
+import { cancelMeeting } from "~/app/actions/cancelMeeting";
+import { scheduleMeeting } from "~/app/actions/scheduleMeeting";
+import { db } from "~/server/db";
+import { blogPost, music } from "~/server/dbschema/schema";
+import { getGoogleCalendarClient, getGoogleCalendarId } from "~/server/googleCalendar";
+
+const contentTypeSchema = z.enum(["cv", "project", "blog", "music"]);
+
+type ContentType = z.infer<typeof contentTypeSchema>;
+
+type SearchResult = {
+	type: ContentType;
+	title: string;
+	snippet: string;
+	url: string;
+	score: number;
+	metadata?: Record<string, unknown>;
+};
+
+type ProjectWithStack = Awaited<ReturnType<typeof loadProjects>>[number];
+
+function stripMarkup(value: string | null | undefined) {
+	return (value ?? "")
+		.replace(/```[\s\S]*?```/g, " ")
+		.replace(/`([^`]+)`/g, "$1")
+		.replace(/<[^>]+>/g, " ")
+		.replace(/[#*_~[\]()>-]/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+}
+
+function tokenize(value: string) {
+	return Array.from(new Set(value.toLowerCase().match(/[a-z0-9+#.-]+/g) ?? []));
+}
+
+function scoreText(query: string, title: string, body: string, extraTerms: string[] = []) {
+	const normalizedQuery = query.trim().toLowerCase();
+	const titleLower = title.toLowerCase();
+	const bodyLower = body.toLowerCase();
+	const tokens = tokenize(query);
+	let score = 0;
+
+	if (normalizedQuery && titleLower.includes(normalizedQuery)) score += 40;
+	if (normalizedQuery && bodyLower.includes(normalizedQuery)) score += 20;
+
+	for (const token of tokens) {
+		if (titleLower.includes(token)) score += 12;
+		if (bodyLower.includes(token)) score += 6;
+		if (extraTerms.some((term) => term.toLowerCase() === token)) score += 10;
+	}
+
+	return score;
+}
+
+const projectCatalogTerms = new Set(["project", "projects", "portfolio", "work"]);
+const genericQuestionTerms = new Set([
+	"a",
+	"about",
+	"all",
+	"any",
+	"are",
+	"can",
+	"current",
+	"do",
+	"give",
+	"have",
+	"list",
+	"me",
+	"of",
+	"on",
+	"show",
+	"site",
+	"tell",
+	"the",
+	"there",
+	"these",
+	"this",
+	"what",
+	"which",
+	"you",
+]);
+
+function isProjectCatalogQuery(query: string) {
+	const tokens = tokenize(query);
+	if (!tokens.some((token) => projectCatalogTerms.has(token))) return false;
+	return tokens.every((token) => projectCatalogTerms.has(token) || genericQuestionTerms.has(token));
+}
+
+function snippet(value: string, query: string, maxLength = 240) {
+	const text = stripMarkup(value);
+	if (text.length <= maxLength) return text;
+
+	const tokens = tokenize(query);
+	const lower = text.toLowerCase();
+	const firstMatch = tokens
+		.map((token) => lower.indexOf(token))
+		.filter((index) => index >= 0)
+		.sort((a, b) => a - b)[0] ?? 0;
+	const start = Math.max(0, firstMatch - 60);
+	const excerpt = text.slice(start, start + maxLength).trim();
+
+	return `${start > 0 ? "..." : ""}${excerpt}${start + maxLength < text.length ? "..." : ""}`;
+}
+
+function uniqueByUrl(results: SearchResult[]) {
+	const seen = new Set<string>();
+	return results.filter((result) => {
+		const key = `${result.type}:${result.url}:${result.title}`;
+		if (seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	});
+}
+
+async function loadCvEntries() {
+	const categories = await db.query.cvCategory.findMany({
+		orderBy: (fields, { asc }) => [asc(fields.layoutPosition), asc(fields.name)],
+		with: {
+			cvEntry: {
+				orderBy: (fields, { desc }) => [desc(fields.toTime), desc(fields.fromTime)],
+			},
+		},
+	});
+
+	return categories.flatMap((category) =>
+		category.cvEntry.map((entry) => ({
+			...entry,
+			categoryName: category.name ?? "CV",
+		})),
+	);
+}
+
+async function loadProjects() {
+	return db.query.project.findMany({
+		orderBy: (fields, { asc }) => [asc(fields.orderPos), asc(fields.title), asc(fields.id)],
+		with: {
+			techStack: true,
+		},
+	});
+}
+
+async function buildSearchResults(query: string, types: ContentType[]) {
+	const selected = new Set(types);
+	const results: SearchResult[] = [];
+
+	if (selected.has("cv")) {
+		const entries = await loadCvEntries();
+		for (const entry of entries) {
+			const body = stripMarkup(`${entry.categoryName} ${entry.description ?? ""}`);
+			const score = scoreText(query, entry.title, body);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "cv",
+					title: entry.title,
+					snippet: snippet(body, query),
+					url: "/cv",
+					score,
+					metadata: {
+						category: entry.categoryName,
+						fromTime: entry.fromTime,
+						toTime: entry.toTime,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("project")) {
+		const projects = await loadProjects();
+		const catalogQuery = isProjectCatalogQuery(query);
+		for (const [index, item] of projects.entries()) {
+			const stackItems = item.techStack?.stackItems ?? [];
+			const body = stripMarkup(`${item.description ?? ""} ${stackItems.join(" ")}`);
+			const score = catalogQuery ? 1000 - index : scoreText(query, item.title, body, stackItems);
+			if (score > 0 || !query.trim() || catalogQuery) {
+				results.push({
+					type: "project",
+					title: item.title,
+					snippet: snippet(body || item.title, query),
+					url: `/projects#${item.id}`,
+					score,
+					metadata: {
+						id: item.id,
+						stackItems,
+						sourceType: item.sourceType,
+						releaseStatus: item.releaseStatus,
+						sourceLink: item.sourceLink,
+						releaseLink: item.releaseLink,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("blog")) {
+		const posts = await db
+			.select({
+				slug: blogPost.slug,
+				title: blogPost.title,
+				date: blogPost.date,
+				description: blogPost.description,
+				tags: blogPost.tags,
+			})
+			.from(blogPost)
+			.orderBy(desc(blogPost.date), desc(blogPost.createdAt));
+
+		for (const post of posts) {
+			const tags = post.tags ?? [];
+			const body = stripMarkup(`${post.description ?? ""} ${tags.join(" ")}`);
+			const score = scoreText(query, post.title, body, tags);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "blog",
+					title: post.title,
+					snippet: snippet(body || post.title, query),
+					url: `/blog/${post.slug}`,
+					score,
+					metadata: {
+						slug: post.slug,
+						date: post.date,
+						tags,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("music")) {
+		const tracks = await db.select().from(music).orderBy(desc(music.createdAt));
+		for (const track of tracks) {
+			const body = stripMarkup(track.description);
+			const score = scoreText(query, track.title, body);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "music",
+					title: track.title,
+					snippet: snippet(body || track.fileName, query),
+					url: "/music",
+					score,
+					metadata: {
+						id: track.id,
+						fileName: track.fileName,
+						hasStream: Boolean(track.streamUrl),
+					},
+				});
+			}
+		}
+	}
+
+	return uniqueByUrl(results).sort((a, b) => b.score - a.score || a.title.localeCompare(b.title));
+}
+
+function projectMatches(projectItem: ProjectWithStack, idOrTitle: string) {
+	const normalized = idOrTitle.trim().toLowerCase();
+	const title = projectItem.title.toLowerCase();
+	return projectItem.id === idOrTitle || title === normalized || title.includes(normalized);
+}
+
+function matchedTerms(text: string, terms: string[]) {
+	const lower = text.toLowerCase();
+	return terms.filter((term) => lower.includes(term.toLowerCase()));
+}
+
+function parseDate(value: string | undefined, fallback: Date) {
+	if (!value?.trim()) return fallback;
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? fallback : date;
+}
+
+function safeTimeZone(value: string | undefined) {
+	const timeZone = value?.trim() || "Europe/Berlin";
+	try {
+		new Intl.DateTimeFormat("en-US", { timeZone }).format(new Date());
+		return timeZone;
+	} catch {
+		return "Europe/Berlin";
+	}
+}
+
+function isLikelyEmail(value: string) {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+
+function overlaps(
+	start: Date,
+	end: Date,
+	busy: Array<{ start: Date; end: Date }>,
+) {
+	return busy.some((item) => start < item.end && end > item.start);
+}
+
+function getZonedParts(date: Date, timeZone: string) {
+	const formatter = new Intl.DateTimeFormat("en-US", {
+		timeZone,
+		weekday: "short",
+		hourCycle: "h23",
+		hour: "2-digit",
+		minute: "2-digit",
+	});
+	const parts = Object.fromEntries(formatter.formatToParts(date).map((part) => [part.type, part.value]));
+	return {
+		weekday: parts.weekday ?? "",
+		hour: Number(parts.hour ?? 0),
+		minute: Number(parts.minute ?? 0),
+	};
+}
+
+function isInsideWorkingHours(start: Date, end: Date, timeZone: string, workdayStartHour: number, workdayEndHour: number) {
+	const startParts = getZonedParts(start, timeZone);
+	const endParts = getZonedParts(end, timeZone);
+	const weekend = startParts.weekday === "Sat" || startParts.weekday === "Sun";
+	const startMinutes = startParts.hour * 60 + startParts.minute;
+	const endMinutes = endParts.hour * 60 + endParts.minute;
+
+	return !weekend && startMinutes >= workdayStartHour * 60 && endMinutes <= workdayEndHour * 60;
+}
+
+function availabilitySlots({
+	rangeStart,
+	rangeEnd,
+	busy,
+	durationMinutes,
+	timeZone,
+	workdayStartHour,
+	workdayEndHour,
+}: {
+	rangeStart: Date;
+	rangeEnd: Date;
+	busy: Array<{ start: Date; end: Date }>;
+	durationMinutes: number;
+	timeZone: string;
+	workdayStartHour: number;
+	workdayEndHour: number;
+}) {
+	const slots: Array<{ start: string; end: string }> = [];
+	const stepMinutes = 30;
+	const durationMs = durationMinutes * 60 * 1000;
+	const cursor = new Date(Math.ceil(rangeStart.getTime() / (stepMinutes * 60 * 1000)) * stepMinutes * 60 * 1000);
+
+	while (cursor.getTime() + durationMs <= rangeEnd.getTime() && slots.length < 10) {
+		const end = new Date(cursor.getTime() + durationMs);
+		if (
+			isInsideWorkingHours(cursor, end, timeZone, workdayStartHour, workdayEndHour)
+			&& !overlaps(cursor, end, busy)
+		) {
+			slots.push({ start: cursor.toISOString(), end: end.toISOString() });
+		}
+		cursor.setMinutes(cursor.getMinutes() + stepMinutes);
+	}
+
+	return slots;
+}
+
+function logAvailability(requestId: string, message: string, data?: Record<string, unknown>) {
+	console.log(`[ai:getAvailability:${requestId}] ${message}`, data ?? "");
+}
+
+export function createChatTools() {
+	return {
+		scheduleMeeting: tool({
+			description: "Schedule a meeting with Gregor Lohaus and add it to his Google Calendar. Use getAvailability first when the user asks for a meeting at a flexible or uncertain time.",
+			inputSchema: z.object({
+				title: z.string().describe("Meeting title, make something up if not provided"),
+				description: z.string().describe("Meeting description / agenda, make something up if not provided"),
+				dateTime: z
+					.string()
+					.describe("ISO 8601 datetime for the meeting start, e.g. 2026-06-18T10:00:00+02:00"),
+				durationMinutes: z
+					.number()
+					.int()
+					.min(15)
+					.max(120)
+					.describe("Duration of the meeting in minutes, if none provided ask if 20 minutes is ok"),
+				attendeeEmail: z
+					.string()
+					.optional()
+					.describe("Optional email of the visitor to invite, if provided"),
+				attendeeName: z.string().optional().describe("Name of the visitor"),
+			}),
+			execute: async (input) => {
+				if (input.attendeeEmail && !isLikelyEmail(input.attendeeEmail)) {
+					return {
+						success: false,
+						error: "The attendee email does not look valid. Ask the visitor to provide a valid email address before scheduling.",
+					};
+				}
+
+				return scheduleMeeting({ ...input });
+			},
+		}),
+		cancelMeeting: tool({
+			description: "Remove a previously scheduled meeting from Gregor's dedicated availability calendar. Use only when you have the exact eventId returned by scheduleMeeting.",
+			inputSchema: z.object({
+				eventId: z.string().min(1).describe("Google Calendar event id returned by a previous scheduleMeeting tool call."),
+			}),
+			execute: async ({ eventId }) => cancelMeeting({ eventId }),
+		}),
+		searchSiteContent: tool({
+			description: "Search Gregor Lohaus's own website content across CV entries, projects, blog posts, and music. Use this for questions about Gregor's work, skills, writing, projects, or site content. For broad questions about Gregor's projects, use types ['project'] so the tool returns the project catalog.",
+			inputSchema: z.object({
+				query: z.string().describe("Search query, skill, technology, topic, or phrase."),
+				types: z.array(contentTypeSchema).optional().describe("Optional content types to search. Omit to search all site content."),
+				limit: z.number().int().min(1).max(12).optional().describe("Maximum number of results to return."),
+			}),
+			execute: async ({ query, types, limit }) => {
+				const results = await buildSearchResults(query, types?.length ? types : ["cv", "project", "blog", "music"]);
+				return {
+					success: true,
+					query,
+					results: results.slice(0, limit ?? 8).map(({ score, ...result }) => result),
+				};
+			},
+		}),
+		getRelevantExperience: tool({
+			description: "Find Gregor's most relevant CV entries and projects for a role, skill set, seniority, or domain. Use this for recruiter-style qualification questions.",
+			inputSchema: z.object({
+				role: z.string().optional().describe("Role or job title, such as full-stack engineer or React Native developer."),
+				skills: z.array(z.string()).optional().describe("Technologies, tools, or skills to match."),
+				domain: z.string().optional().describe("Product or business domain to match, if any."),
+				seniority: z.string().optional().describe("Seniority or responsibility level to match, if any."),
+				limit: z.number().int().min(1).max(10).optional().describe("Maximum matching entries to return."),
+			}),
+			execute: async ({ role, skills, domain, seniority, limit }) => {
+				const terms = [role, domain, seniority, ...(skills ?? [])].filter((value): value is string => Boolean(value?.trim()));
+				const query = terms.join(" ");
+				const results = await buildSearchResults(query, ["cv", "project"]);
+				const selected = results.slice(0, limit ?? 6);
+
+				return {
+					success: true,
+					query,
+					matches: selected.map(({ score, ...result }) => ({
+						...result,
+						matchedTerms: matchedTerms(`${result.title} ${result.snippet} ${(result.metadata?.stackItems as string[] | undefined)?.join(" ") ?? ""}`, terms),
+						whyRelevant: result.type === "project"
+							? "Project match based on title, description, and technology stack."
+							: "CV match based on experience title, category, and description.",
+					})),
+				};
+			},
+		}),
+		getProjectDetails: tool({
+			description: "Get detailed information for one of Gregor's projects, including description, stack, source link, release link, and project page URL.",
+			inputSchema: z.object({
+				idOrTitle: z.string().min(1).describe("Project id, exact title, or partial project title."),
+			}),
+			execute: async ({ idOrTitle }) => {
+				const projects = await loadProjects();
+				const found = projects.find((item) => projectMatches(item, idOrTitle));
+
+				if (!found) {
+					return {
+						success: false,
+						error: `No project matched "${idOrTitle}".`,
+						suggestions: projects.slice(0, 5).map((item) => ({
+							id: item.id,
+							title: item.title,
+							url: `/projects#${item.id}`,
+						})),
+					};
+				}
+
+				return {
+					success: true,
+					project: {
+						id: found.id,
+						title: found.title,
+						description: stripMarkup(found.description),
+						sourceType: found.sourceType,
+						sourceLink: found.sourceLink,
+						releaseStatus: found.releaseStatus,
+						releaseLink: found.releaseLink,
+						stackItems: found.techStack?.stackItems ?? [],
+						url: `/projects#${found.id}`,
+					},
+				};
+			},
+		}),
+		getAvailability: tool({
+			description: "Check Gregor's Google Calendar availability and suggest open meeting slots. Use this directly for questions like 'when is the next open spot?' or 'what times are available?'. If no date range is provided, it checks from now. Use before scheduling when the requested time is flexible.",
+			inputSchema: z.object({
+				fromDateTime: z.string().optional().describe("ISO 8601 range start. Defaults to now."),
+				toDateTime: z.string().optional().describe("ISO 8601 range end. Defaults to 14 days after the range start."),
+				durationMinutes: z.number().int().min(15).max(120).optional().describe("Desired meeting duration. Defaults to 30 minutes."),
+				timeZone: z.string().optional().describe("IANA time zone for working-hours filtering. Defaults to Europe/Berlin."),
+				workdayStartHour: z.number().int().min(0).max(23).optional().describe("Earliest local start hour. Defaults to 9."),
+				workdayEndHour: z.number().int().min(1).max(24).optional().describe("Latest local end hour. Defaults to 17."),
+			}),
+			execute: async (input) => {
+				const requestId = crypto.randomUUID();
+				logAvailability(requestId, "start", {
+					input,
+				});
+
+				const durationMinutes = input.durationMinutes ?? 30;
+				const timeZone = safeTimeZone(input.timeZone);
+				const workdayStartHour = input.workdayStartHour ?? 9;
+				const workdayEndHour = Math.max(input.workdayEndHour ?? 17, workdayStartHour + 1);
+				const rangeStart = parseDate(input.fromDateTime, new Date());
+				const defaultEnd = new Date(rangeStart.getTime() + 14 * 24 * 60 * 60 * 1000);
+				const requestedEnd = parseDate(input.toDateTime, defaultEnd);
+				const maxEnd = new Date(rangeStart.getTime() + 31 * 24 * 60 * 60 * 1000);
+				const rangeEnd = requestedEnd <= rangeStart ? defaultEnd : requestedEnd > maxEnd ? maxEnd : requestedEnd;
+				logAvailability(requestId, "resolved range", {
+					durationMinutes,
+					timeZone,
+					workdayStartHour,
+					workdayEndHour,
+					rangeStart: rangeStart.toISOString(),
+					rangeEnd: rangeEnd.toISOString(),
+				});
+
+				const calendar = getGoogleCalendarClient();
+				const calendarId = getGoogleCalendarId();
+				logAvailability(requestId, "service account calendar ready", {
+					calendarId,
+				});
+
+				let busy: Array<{ start: Date; end: Date }>;
+				try {
+					logAvailability(requestId, "freebusy request");
+					const response = await calendar.freebusy.query({
+						requestBody: {
+							timeMin: rangeStart.toISOString(),
+							timeMax: rangeEnd.toISOString(),
+							timeZone,
+							items: [{ id: calendarId }],
+						},
+					});
+					busy = (response.data.calendars?.[calendarId]?.busy ?? [])
+						.map((item) => ({
+							start: parseDate(item.start ?? undefined, rangeStart),
+							end: parseDate(item.end ?? undefined, rangeStart),
+						}))
+						.filter((item) => item.end > item.start);
+					logAvailability(requestId, "freebusy response", {
+						busyCount: busy.length,
+					});
+				} catch (error) {
+					console.error(`[ai:getAvailability:${requestId}] freebusy failed`, error);
+					return {
+						success: false,
+						error: "Failed to read Gregor's Google Calendar availability.",
+					};
+				}
+
+				const availableSlots = availabilitySlots({
+					rangeStart,
+					rangeEnd,
+					busy,
+					durationMinutes,
+					timeZone,
+					workdayStartHour,
+					workdayEndHour,
+				});
+				logAvailability(requestId, "complete", {
+					busyCount: busy.length,
+					availableSlotCount: availableSlots.length,
+					firstAvailableSlot: availableSlots[0],
+				});
+				const nextAvailableSlot = availableSlots[0] ?? null;
+
+				return {
+					success: true,
+					range: {
+						start: rangeStart.toISOString(),
+						end: rangeEnd.toISOString(),
+						timeZone,
+					},
+					durationMinutes,
+					busy: busy.map((item) => ({
+						start: item.start.toISOString(),
+						end: item.end.toISOString(),
+					})),
+					nextAvailableSlot,
+					availableSlots,
+				};
+			},
+		}),
+	};
+}

src/server/googleCalendar.ts

@@ -0,0 +1,20 @@
+import "server-only";
+
+import { google } from "googleapis";
+import { env } from "~/env";
+
+const calendarScope = "https://www.googleapis.com/auth/calendar";
+
+export function getGoogleCalendarClient() {
+	const auth = new google.auth.JWT({
+		email: env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
+		key: env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY.replace(/\\n/g, "\n"),
+		scopes: [calendarScope],
+	});
+
+	return google.calendar({ version: "v3", auth });
+}
+
+export function getGoogleCalendarId() {
+	return env.GOOGLE_CALENDAR_ID;
+}