FCE-3839: update Gemini model to 3.8

deep-sea-stories/packages/backend/src/agent/gemini/session.ts

@@ -1,4 +1,5 @@
 import {
+	Behavior,
 	type GoogleGenAI,
 	type LiveConnectParameters,
 	type LiveServerMessage,
@@ -98,23 +99,18 @@ export class GeminiSession implements VoiceAgentSession {
 				systemInstruction: getInstructionsForStory(this.config.story),
 				outputAudioTranscription: {},
 				temperature: 0.5,
-				thinkingConfig: {
-					thinkingBudget: -1,
-				},
 				tools: [
 					{
 						functionDeclarations: [
 							{
+								behavior: Behavior.BLOCKING,
 								name: 'endGame',
 								description:
 									'Call this function to end the game session. You MUST call this when: 1) The players have correctly solved the riddle, 2) The game time has expired, 3) You are saying goodbye or ending the conversation. Always call this function after delivering your final message to players.',
 							},
 						],
 					},
 				],
-				proactivity: {
-					proactiveAudio: true,
-				},
 				sessionResumption: { handle: this.previousHandle },
 			},
 			callbacks: {

deep-sea-stories/packages/backend/src/config.ts

@@ -24,7 +24,7 @@ export const configSchema = z.object({
 	GOOGLE_CLOUD_LOCATION: z.string().optional(),
 });
 
-export const GEMINI_MODEL = 'gemini-2.5-flash-native-audio-preview-12-2025';
+export const GEMINI_MODEL = 'gemini-3.8-live';
 
 export const stories: Story[] = JSON.parse(
 	fs.readFileSync(join(__dirname, 'prompts', 'stories.json'), 'utf8'),

deep-sea-stories/packages/backend/src/game/room.ts

@@ -49,7 +49,6 @@ export class GameRoom {
 			vertexai: CONFIG.GOOGLE_GENAI_USE_VERTEXAI,
 			project: CONFIG.GOOGLE_CLOUD_PROJECT,
 			location: CONFIG.GOOGLE_CLOUD_LOCATION,
-			httpOptions: { apiVersion: 'v1alpha' },
 		});
 	}
 

deep-sea-stories/packages/web/src/components/AnnouncementBanner.tsx

@@ -0,0 +1,24 @@
+import { X } from 'lucide-react';
+import { type PropsWithChildren, useState } from 'react';
+
+export function AnnouncementBanner({ children }: PropsWithChildren) {
+	const [isVisible, setIsVisible] = useState(true);
+
+	if (!isVisible) return null;
+
+	return (
+		<aside className="fixed inset-x-0 top-0 z-50 bg-linear-to-r from-[#4285f4] via-[#8e75ff] to-[#d96570] text-white shadow-lg">
+			<div className="relative flex min-h-10 items-center justify-center px-12 py-2 text-center text-sm">
+				<div>{children}</div>
+				<button
+					type="button"
+					onClick={() => setIsVisible(false)}
+					className="absolute right-3 rounded-full p-1 text-white/80 transition-colors hover:bg-white/15 hover:text-white"
+					aria-label="Dismiss announcement"
+				>
+					<X className="size-4" aria-hidden="true" />
+				</button>
+			</div>
+		</aside>
+	);
+}

deep-sea-stories/packages/web/src/components/GameControlPanel.tsx

@@ -27,7 +27,7 @@ const GameControlPanel: FC<GameControlPanelProps> = ({
 					onVolumeChange={onVolumeChange}
 				/>
 			</div>
-			<div className="flex-none md:flex-none md:w-1/4 border rounded-3xl p-2 md:p-3 lg:p-4 overflow-hidden">
+			<div className="flex-none md:flex-none md:w-1/4 min-h-0 border rounded-3xl p-2 md:p-3 lg:p-4 overflow-hidden">
 				<RoomControls roomId={roomId} userName={userName} />
 			</div>
 		</section>

deep-sea-stories/packages/web/src/components/RoomControls.tsx

@@ -70,13 +70,13 @@ const RoomControls: FC<RoomControlsProps> = ({ roomId, userName }) => {
 	};
 
 	return (
-		<div className="flex flex-col h-full py-2 md:py-2 lg:py-3 gap-2 md:gap-2 lg:gap-3">
+		<div className="flex h-full flex-col py-2 md:py-1 lg:py-2 gap-2">
 			<DeepSeaLogo className="hidden md:block flex-none" />
 			<section className="w-full flex-none grid grid-cols-2 md:flex md:flex-col gap-2">
 				{!isStorySelected ? (
 					<Button
 						size="large"
-						className="col-span-2 md:w-full text-xs md:text-base h-9 md:h-11 lg:h-12"
+						className="col-span-2 md:w-full text-xs md:text-sm lg:text-base h-9 md:h-9 lg:h-10"
 						onClick={() => setIsStoryPanelOpen(true)}
 					>
 						Choose a story
@@ -85,7 +85,7 @@ const RoomControls: FC<RoomControlsProps> = ({ roomId, userName }) => {
 					<Button
 						size="large"
 						variant="outline"
-						className="col-span-2 md:w-full text-xs md:text-base h-9 md:h-11 lg:h-12"
+						className="col-span-2 md:w-full text-xs md:text-sm lg:text-base h-9 md:h-9 lg:h-10"
 						onClick={handleCancelGame}
 						disabled={isCanceling}
 					>
@@ -94,14 +94,14 @@ const RoomControls: FC<RoomControlsProps> = ({ roomId, userName }) => {
 				) : (
 					<>
 						<Button
-							className="col-span-2 md:w-full text-xs md:text-base h-9 md:h-10 lg:h-11"
+							className="col-span-2 md:w-full text-xs md:text-sm lg:text-base h-9 lg:h-10"
 							onClick={handleStartGame}
 							disabled={isStarting}
 						>
 							{isStarting ? 'Starting...' : 'Start the Game'}
 						</Button>
 						<Button
-							className="col-span-2 md:w-full text-xs md:text-base h-9 md:h-10 lg:h-11"
+							className="col-span-2 md:w-full text-xs md:text-sm lg:text-base h-9 lg:h-10"
 							variant="outline"
 							onClick={() => setIsStoryPanelOpen(true)}
 						>
@@ -110,14 +110,13 @@ const RoomControls: FC<RoomControlsProps> = ({ roomId, userName }) => {
 					</>
 				)}
 			</section>
-			<div className="flex-1 min-h-0" />
 			<section className="w-full flex-none flex flex-col gap-2">
-				<HowToPlay className="w-full text-xs md:text-base h-9 md:h-10 lg:h-11" />
-				<HowItWorks className="w-full text-xs md:text-base h-9 md:h-10 lg:h-11" />
+				<HowToPlay className="w-full text-xs md:text-sm lg:text-base h-9 lg:h-10" />
+				<HowItWorks className="w-full text-xs md:text-sm lg:text-base h-9 lg:h-10" />
 
 				<CopyButton
 					variant="outline"
-					className="col-span-2 md:col-span-1 text-xs md:text-base h-9 md:h-10 lg:h-11"
+					className="col-span-2 md:col-span-1 text-xs md:text-sm lg:text-base h-9 lg:h-10"
 					onCopy={() => toast('Gameroom link copied to clipboard', Check)}
 					value={url}
 				>

deep-sea-stories/packages/web/src/views/HomeView.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
+import { AnnouncementBanner } from '@/components/AnnouncementBanner';
 import Footer from '@/components/Footer';
 import TitleBar from '@/components/TitleBar';
 import { Button } from '@/components/ui/button';
@@ -27,6 +28,18 @@ export default function HomeView() {
 
 	return (
 		<section className="h-full w-full flex justify-between flex-col py-16 px-4 lg:px-16">
+			<AnnouncementBanner>
+				Deep Sea Stories is now powered by{' '}
+				<a
+					href="https://ai.google.dev/gemini-api/docs/models/gemini-3.8-live"
+					target="_blank"
+					rel="noreferrer"
+					className="font-semibold underline decoration-white/70 underline-offset-2 transition-colors hover:decoration-white"
+				>
+					Gemini 3.8 Live
+				</a>
+				.
+			</AnnouncementBanner>
 			<TitleBar />
 			<section className="flex-1 py-16 grid place-items-center">
 				<Button