fix: handle session fetch errors

webapp/app/api/session/route.ts

@@ -1,26 +1,37 @@
+import { NextResponse } from "next/server";
+
 export async function GET() {
   try {
-    const r = await fetch("https://api.openai.com/v1/realtime/sessions", {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model: "gpt-4o-realtime-preview-2025-06-03",
-        voice: "verse",
-      }),
-    });
-
-    if (!r.ok) {
-      const error = await r.text();
-      return Response.json({ error }, { status: 500 });
+    const response = await fetch(
+      "https://api.openai.com/v1/realtime/sessions",
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          model: "gpt-4o-realtime-preview-2025-06-03",
+        }),
+      }
+    );
+    if (!response.ok) {
+      let errorBody;
+      try {
+        errorBody = await response.json();
+      } catch (e) {
+        errorBody = { error: response.statusText || 'Unknown error' };
+      }
+      console.error("Upstream API error:", response.status, errorBody);
+      return NextResponse.json(errorBody, { status: response.status });
     }
-
-    const data = await r.json();
-    return Response.json(data);
+    const data = await response.json();
+    return NextResponse.json(data);
   } catch (error) {
-    console.error("Error creating realtime session:", error);
-    return Response.json({ error: "Internal server error" }, { status: 500 });
+    console.error("Error in /session:", error);
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 }
+    );
   }
 }

webapp/components/call-interface.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import TopBar from "@/components/top-bar";
-import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Settings, Mic } from "lucide-react";
 import VoiceMiniApp from "@/components/voice-mini-app";
 import SessionConfigurationPanel from "@/components/session-configuration-panel";
@@ -130,6 +130,10 @@ const CallInterface = () => {
     <div className="h-screen bg-white flex flex-col">
       <Dialog open={voiceAppOpen} onOpenChange={setVoiceAppOpen}>
         <DialogContent className="max-w-sm w-full">
+          {/* Accessibility: DialogTitle for screen readers */}
+          <span style={{position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', border: 0}}>
+            <DialogTitle>Voice Mini App</DialogTitle>
+          </span>
           <VoiceMiniApp />
         </DialogContent>
       </Dialog>
@@ -157,6 +161,10 @@ const CallInterface = () => {
           </DialogTrigger>
         </TopBar>
         <DialogContent className="max-w-md w-full sm:max-w-lg">
+          {/* Accessibility: DialogTitle for screen readers */}
+          <span style={{position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', border: 0}}>
+            <DialogTitle>Session Settings</DialogTitle>
+          </span>
           <div className="space-y-5">
 
             <SessionConfigurationPanel

webapp/components/voice-mini-app.tsx

@@ -21,8 +21,16 @@ const VoiceMiniApp = () => {
     await connect({
       getEphemeralKey: async () => {
         const res = await fetch("/api/session");
+        if (!res.ok) {
+          const error = await res.text();
+          throw new Error(error || "Failed to fetch session");
+        }
         const data = await res.json();
-        return data?.client_secret?.value;
+        const ek = data?.client_secret?.value;
+        if (!ek) {
+          throw new Error("No ephemeral key returned");
+        }
+        return ek;
       },
       initialAgents: [agent],
       audioElement: audioRef.current ?? undefined,