Merge main into jisti-integration branch

- Resolved conflicts in server/reflector/views/rooms.py to keep platform-agnostic approach
- Resolved conflicts in www/app/[roomName]/page.tsx to keep VideoPlatformEmbed approach
- Accepted main's version of generated API files (schemas.gen.ts, services.gen.ts, types.gen.ts)
- Removed config-template.ts as per main branch changes

www/app/(app)/AuthWrapper.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Flex, Spinner } from "@chakra-ui/react";
+import { useAuth } from "../lib/AuthProvider";
+import { useLoginRequiredPages } from "../lib/useLoginRequiredPages";
+
+export default function AuthWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const auth = useAuth();
+  const redirectPath = useLoginRequiredPages();
+  const redirectHappens = !!redirectPath;
+
+  if (auth.status === "loading" || redirectHappens) {
+    return (
+      <Flex
+        flexDir="column"
+        alignItems="center"
+        justifyContent="center"
+        h="calc(100vh - 80px)" // Account for header height
+      >
+        <Spinner size="xl" color="blue.500" />
+      </Flex>
+    );
+  }
+
+  return <>{children}</>;
+}

www/app/(app)/browse/_components/FilterSidebar.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { Box, Stack, Link, Heading } from "@chakra-ui/react";
 import NextLink from "next/link";
-import { Room, SourceKind } from "../../../api";
+import type { components } from "../../../reflector-api";
+
+type Room = components["schemas"]["Room"];
+type SourceKind = components["schemas"]["SourceKind"];
 
 interface FilterSidebarProps {
   rooms: Room[];
@@ -72,7 +75,7 @@ export default function FilterSidebar({
                 key={room.id}
                 as={NextLink}
                 href="#"
-                onClick={() => onFilterChange("room", room.id)}
+                onClick={() => onFilterChange("room" as SourceKind, room.id)}
                 color={
                   selectedSourceKind === "room" && selectedRoomId === room.id
                     ? "blue.500"

www/app/(app)/browse/_components/TranscriptCards.tsx

@@ -18,7 +18,10 @@ import {
   highlightMatches,
   generateTextFragment,
 } from "../../../lib/textHighlight";
-import { SearchResult } from "../../../api";
+import type { components } from "../../../reflector-api";
+
+type SearchResult = components["schemas"]["SearchResult"];
+type SourceKind = components["schemas"]["SourceKind"];
 
 interface TranscriptCardsProps {
   results: SearchResult[];
@@ -120,7 +123,7 @@ function TranscriptCard({
     : "N/A";
   const formattedDate = formatLocalDate(result.created_at);
   const source =
-    result.source_kind === "room"
+    result.source_kind === ("room" as SourceKind)
       ? result.room_name || result.room_id
       : result.source_kind;
 

www/app/(app)/browse/_components/TranscriptStatusIcon.tsx

@@ -7,9 +7,10 @@ import {
   FaMicrophone,
   FaGear,
 } from "react-icons/fa6";
+import { TranscriptStatus } from "../../../lib/transcript";
 
 interface TranscriptStatusIconProps {
-  status: string;
+  status: TranscriptStatus;
 }
 
 export default function TranscriptStatusIcon({

www/app/(app)/browse/page.tsx

@@ -19,37 +19,33 @@ import {
   parseAsStringLiteral,
 } from "nuqs";
 import { LuX } from "react-icons/lu";
-import { useSearchTranscripts } from "../transcripts/useSearchTranscripts";
-import useSessionUser from "../../lib/useSessionUser";
-import { Room, SourceKind, SearchResult, $SourceKind } from "../../api";
-import useApi from "../../lib/useApi";
-import { useError } from "../../(errors)/errorContext";
+import type { components } from "../../reflector-api";
+
+type Room = components["schemas"]["Room"];
+type SourceKind = components["schemas"]["SourceKind"];
+type SearchResult = components["schemas"]["SearchResult"];
+import {
+  useRoomsList,
+  useTranscriptsSearch,
+  useTranscriptDelete,
+  useTranscriptProcess,
+} from "../../lib/apiHooks";
 import FilterSidebar from "./_components/FilterSidebar";
 import Pagination, {
   FIRST_PAGE,
   PaginationPage,
   parsePaginationPage,
   totalPages as getTotalPages,
+  paginationPageTo0Based,
 } from "./_components/Pagination";
 import TranscriptCards from "./_components/TranscriptCards";
 import DeleteTranscriptDialog from "./_components/DeleteTranscriptDialog";
 import { formatLocalDate } from "../../lib/time";
 import { RECORD_A_MEETING_URL } from "../../api/urls";
+import { useUserName } from "../../lib/useUserName";
 
 const SEARCH_FORM_QUERY_INPUT_NAME = "query" as const;
 
-const usePrefetchRooms = (setRooms: (rooms: Room[]) => void): void => {
-  const { setError } = useError();
-  const api = useApi();
-  useEffect(() => {
-    if (!api) return;
-    api
-      .v1RoomsList({ page: 1 })
-      .then((rooms) => setRooms(rooms.items))
-      .catch((err) => setError(err, "There was an error fetching the rooms"));
-  }, [api, setError]);
-};
-
 const SearchForm: React.FC<{
   setPage: (page: PaginationPage) => void;
   sourceKind: SourceKind | null;
@@ -69,7 +65,6 @@ const SearchForm: React.FC<{
   searchQuery,
   setSearchQuery,
 }) => {
-  // to keep the search input controllable + more fine grained control (urlSearchQuery is updated on submits)
   const [searchInputValue, setSearchInputValue] = useState(searchQuery || "");
   const handleSearchQuerySubmit = async (d: FormData) => {
     await setSearchQuery((d.get(SEARCH_FORM_QUERY_INPUT_NAME) as string) || "");
@@ -163,7 +158,6 @@ const UnderSearchFormFilterIndicators: React.FC<{
                 p="1px"
                 onClick={() => {
                   setSourceKind(null);
-                  // TODO questionable
                   setRoomId(null);
                 }}
                 _hover={{ bg: "blue.200" }}
@@ -209,7 +203,11 @@ export default function TranscriptBrowser() {
 
   const [urlSourceKind, setUrlSourceKind] = useQueryState(
     "source",
-    parseAsStringLiteral($SourceKind.enum).withOptions({
+    parseAsStringLiteral([
+      "room",
+      "live",
+      "file",
+    ] as const satisfies SourceKind[]).withOptions({
       shallow: false,
     }),
   );
@@ -229,46 +227,40 @@ export default function TranscriptBrowser() {
   useEffect(() => {
     const maybePage = parsePaginationPage(urlPage);
     if ("error" in maybePage) {
-      setPage(FIRST_PAGE).then(() => {
-        /*may be called n times we dont care*/
-      });
+      setPage(FIRST_PAGE).then(() => {});
       return;
     }
     _setSafePage(maybePage.value);
   }, [urlPage]);
 
-  const [rooms, setRooms] = useState<Room[]>([]);
-
   const pageSize = 20;
+
   const {
-    results,
-    totalCount: totalResults,
-    isLoading,
-    reload,
-  } = useSearchTranscripts(
-    urlSearchQuery,
-    {
-      roomIds: urlRoomId ? [urlRoomId] : null,
-      sourceKind: urlSourceKind,
-    },
-    {
-      pageSize,
-      page,
-    },
-  );
+    data: searchData,
+    isLoading: searchLoading,
+    refetch: reloadSearch,
+  } = useTranscriptsSearch(urlSearchQuery, {
+    limit: pageSize,
+    offset: paginationPageTo0Based(page) * pageSize,
+    room_id: urlRoomId || undefined,
+    source_kind: urlSourceKind || undefined,
+  });
+
+  const results = searchData?.results || [];
+  const totalResults = searchData?.total || 0;
+
+  // Fetch rooms
+  const { data: roomsData } = useRoomsList(1);
+  const rooms = roomsData?.items || [];
 
   const totalPages = getTotalPages(totalResults, pageSize);
 
-  const userName = useSessionUser().name;
+  const userName = useUserName();
   const [deletionLoading, setDeletionLoading] = useState(false);
-  const api = useApi();
-  const { setError } = useError();
   const cancelRef = React.useRef(null);
   const [transcriptToDeleteId, setTranscriptToDeleteId] =
     React.useState<string>();
 
-  usePrefetchRooms(setRooms);
-
   const handleFilterTranscripts = (
     sourceKind: SourceKind | null,
     roomId: string,
@@ -280,44 +272,37 @@ export default function TranscriptBrowser() {
 
   const onCloseDeletion = () => setTranscriptToDeleteId(undefined);
 
+  const deleteTranscript = useTranscriptDelete();
+  const processTranscript = useTranscriptProcess();
+
   const confirmDeleteTranscript = (transcriptId: string) => {
-    if (!api || deletionLoading) return;
+    if (deletionLoading) return;
     setDeletionLoading(true);
-    api
-      .v1TranscriptDelete({ transcriptId })
-      .then(() => {
-        setDeletionLoading(false);
-        onCloseDeletion();
-        reload();
-      })
-      .catch((err) => {
-        setDeletionLoading(false);
-        setError(err, "There was an error deleting the transcript");
-      });
+    deleteTranscript.mutate(
+      {
+        params: {
+          path: { transcript_id: transcriptId },
+        },
+      },
+      {
+        onSuccess: () => {
+          setDeletionLoading(false);
+          onCloseDeletion();
+          reloadSearch();
+        },
+        onError: () => {
+          setDeletionLoading(false);
+        },
+      },
+    );
   };
 
   const handleProcessTranscript = (transcriptId: string) => {
-    if (!api) {
-      console.error("API not available on handleProcessTranscript");
-      return;
-    }
-    api
-      .v1TranscriptProcess({ transcriptId })
-      .then((result) => {
-        const status =
-          result && typeof result === "object" && "status" in result
-            ? (result as { status: string }).status
-            : undefined;
-        if (status === "already running") {
-          setError(
-            new Error("Processing is already running, please wait"),
-            "Processing is already running, please wait",
-          );
-        }
-      })
-      .catch((err) => {
-        setError(err, "There was an error processing the transcript");
-      });
+    processTranscript.mutate({
+      params: {
+        path: { transcript_id: transcriptId },
+      },
+    });
   };
 
   const transcriptToDelete = results?.find(
@@ -332,7 +317,7 @@ export default function TranscriptBrowser() {
       ? transcriptToDelete.room_name || transcriptToDelete.room_id
       : transcriptToDelete?.source_kind;
 
-  if (isLoading && results.length === 0) {
+  if (searchLoading && results.length === 0) {
     return (
       <Flex
         flexDir="column"
@@ -360,7 +345,7 @@ export default function TranscriptBrowser() {
       >
         <Heading size="lg">
           {userName ? `${userName}'s Transcriptions` : "Your Transcriptions"}{" "}
-          {(isLoading || deletionLoading) && <Spinner size="sm" />}
+          {(searchLoading || deletionLoading) && <Spinner size="sm" />}
         </Heading>
       </Flex>
 
@@ -403,12 +388,12 @@ export default function TranscriptBrowser() {
           <TranscriptCards
             results={results}
             query={urlSearchQuery}
-            isLoading={isLoading}
+            isLoading={searchLoading}
             onDelete={setTranscriptToDeleteId}
             onReprocess={handleProcessTranscript}
           />
 
-          {!isLoading && results.length === 0 && (
+          {!searchLoading && results.length === 0 && (
             <EmptyResult searchQuery={urlSearchQuery} />
           )}
         </Flex>

www/app/(app)/layout.tsx

@@ -1,10 +1,9 @@
 import { Container, Flex, Link } from "@chakra-ui/react";
-import { getConfig } from "../lib/edgeConfig";
+import { featureEnabled } from "../lib/features";
 import NextLink from "next/link";
 import Image from "next/image";
-import About from "../(aboutAndPrivacy)/about";
-import Privacy from "../(aboutAndPrivacy)/privacy";
 import UserInfo from "../(auth)/userInfo";
+import AuthWrapper from "./AuthWrapper";
 import { RECORD_A_MEETING_URL } from "../api/urls";
 
 export default async function AppLayout({
@@ -12,8 +11,6 @@ export default async function AppLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const config = await getConfig();
-  const { requireLogin, privacy, browse, rooms } = config.features;
   return (
     <Container
       minW="100vw"
@@ -59,7 +56,7 @@ export default async function AppLayout({
           >
             Create
           </Link>
-          {browse ? (
+          {featureEnabled("browse") ? (
             <>
               &nbsp;·&nbsp;
               <Link href="/browse" as={NextLink} className="font-light px-2">
@@ -69,7 +66,7 @@ export default async function AppLayout({
           ) : (
             <></>
           )}
-          {rooms ? (
+          {featureEnabled("rooms") ? (
             <>
               &nbsp;·&nbsp;
               <Link href="/rooms" as={NextLink} className="font-light px-2">
@@ -79,7 +76,7 @@ export default async function AppLayout({
           ) : (
             <></>
           )}
-          {requireLogin ? (
+          {featureEnabled("requireLogin") ? (
             <>
               &nbsp;·&nbsp;
               <UserInfo />
@@ -90,7 +87,7 @@ export default async function AppLayout({
         </div>
       </Flex>
 
-      {children}
+      <AuthWrapper>{children}</AuthWrapper>
     </Container>
   );
 }

www/app/(app)/rooms/_components/RoomCards.tsx

@@ -13,7 +13,9 @@ import {
   Badge,
 } from "@chakra-ui/react";
 import { LuLink } from "react-icons/lu";
-import { RoomDetails } from "../../../api";
+import type { components } from "../../../reflector-api";
+
+type Room = components["schemas"]["Room"];
 import { RoomActionsMenu } from "./RoomActionsMenu";
 import {
   getPlatformDisplayName,
@@ -21,7 +23,7 @@ import {
 } from "../../../lib/videoPlatforms";
 
 interface RoomCardsProps {
-  rooms: RoomDetails[];
+  rooms: Room[];
   linkCopied: string;
   onCopyUrl: (roomName: string) => void;
   onEdit: (roomId: string, roomData: any) => void;

www/app/(app)/rooms/_components/RoomList.tsx

@@ -1,11 +1,13 @@
 import { Box, Heading, Text, VStack } from "@chakra-ui/react";
-import { RoomDetails } from "../../../api";
+import type { components } from "../../../reflector-api";
+
+type Room = components["schemas"]["Room"];
 import { RoomTable } from "./RoomTable";
 import { RoomCards } from "./RoomCards";
 
 interface RoomListProps {
   title: string;
-  rooms: RoomDetails[];
+  rooms: Room[];
   linkCopied: string;
   onCopyUrl: (roomName: string) => void;
   onEdit: (roomId: string, roomData: any) => void;

www/app/(app)/rooms/_components/RoomTable.tsx

@@ -10,7 +10,9 @@ import {
   Badge,
 } from "@chakra-ui/react";
 import { LuLink } from "react-icons/lu";
-import { RoomDetails } from "../../../api";
+import type { components } from "../../../reflector-api";
+
+type Room = components["schemas"]["Room"];
 import { RoomActionsMenu } from "./RoomActionsMenu";
 import {
   getPlatformDisplayName,
@@ -18,7 +20,7 @@ import {
 } from "../../../lib/videoPlatforms";
 
 interface RoomTableProps {
-  rooms: RoomDetails[];
+  rooms: Room[];
   linkCopied: string;
   onCopyUrl: (roomName: string) => void;
   onEdit: (roomId: string, roomData: any) => void;

www/app/(app)/rooms/page.tsx

@@ -15,13 +15,24 @@ import {
   createListCollection,
   useDisclosure,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { LuEye, LuEyeOff } from "react-icons/lu";
-import useApi from "../../lib/useApi";
 import useRoomList from "./useRoomList";
-import { ApiError, RoomDetails } from "../../api";
+import type { components } from "../../reflector-api";
+import {
+  useRoomCreate,
+  useRoomUpdate,
+  useRoomDelete,
+  useZulipStreams,
+  useZulipTopics,
+  useRoomGet,
+  useRoomTestWebhook,
+} from "../../lib/apiHooks";
 import { RoomList } from "./_components/RoomList";
 import { PaginationPage } from "../browse/_components/Pagination";
+import { assertExists } from "../../lib/utils";
+
+type Room = components["schemas"]["Room"];
 
 interface SelectOption {
   label: string;
@@ -76,66 +87,77 @@ export default function RoomsList() {
   const recordingTypeCollection = createListCollection({
     items: recordingTypeOptions,
   });
-  const [room, setRoom] = useState(roomInitialState);
+  const [roomInput, setRoomInput] = useState<null | typeof roomInitialState>(
+    null,
+  );
   const [isEditing, setIsEditing] = useState(false);
-  const [editRoomId, setEditRoomId] = useState("");
-  const api = useApi();
-  // TODO seems to be no setPage calls
-  const [page, setPage] = useState<number>(1);
-  const { loading, response, refetch } = useRoomList(PaginationPage(page));
-  const [streams, setStreams] = useState<Stream[]>([]);
-  const [topics, setTopics] = useState<Topic[]>([]);
+  const [editRoomId, setEditRoomId] = useState<string | null>(null);
+  const {
+    loading,
+    response,
+    refetch,
+    error: roomListError,
+  } = useRoomList(PaginationPage(1));
   const [nameError, setNameError] = useState("");
   const [linkCopied, setLinkCopied] = useState("");
+  const [selectedStreamId, setSelectedStreamId] = useState<number | null>(null);
   const [testingWebhook, setTestingWebhook] = useState(false);
   const [webhookTestResult, setWebhookTestResult] = useState<string | null>(
     null,
   );
   const [showWebhookSecret, setShowWebhookSecret] = useState(false);
-  interface Stream {
-    stream_id: number;
-    name: string;
-  }
 
-  interface Topic {
-    name: string;
-  }
+  const createRoomMutation = useRoomCreate();
+  const updateRoomMutation = useRoomUpdate();
+  const deleteRoomMutation = useRoomDelete();
+  const { data: streams = [] } = useZulipStreams();
+  const { data: topics = [] } = useZulipTopics(selectedStreamId);
 
+  const {
+    data: detailedEditedRoom,
+    isLoading: isDetailedEditedRoomLoading,
+    error: detailedEditedRoomError,
+  } = useRoomGet(editRoomId);
+
+  const error = roomListError || detailedEditedRoomError;
+
+  // room being edited, as fetched from the server
+  const editedRoom: typeof roomInitialState | null = useMemo(
+    () =>
+      detailedEditedRoom
+        ? {
+            name: detailedEditedRoom.name,
+            zulipAutoPost: detailedEditedRoom.zulip_auto_post,
+            zulipStream: detailedEditedRoom.zulip_stream,
+            zulipTopic: detailedEditedRoom.zulip_topic,
+            isLocked: detailedEditedRoom.is_locked,
+            roomMode: detailedEditedRoom.room_mode,
+            recordingType: detailedEditedRoom.recording_type,
+            recordingTrigger: detailedEditedRoom.recording_trigger,
+            isShared: detailedEditedRoom.is_shared,
+            webhookUrl: detailedEditedRoom.webhook_url || "",
+            webhookSecret: detailedEditedRoom.webhook_secret || "",
+          }
+        : null,
+    [detailedEditedRoom],
+  );
+
+  // a room input value or a last api room state
+  const room = roomInput || editedRoom || roomInitialState;
+
+  const roomTestWebhookMutation = useRoomTestWebhook();
+
+  // Update selected stream ID when zulip stream changes
   useEffect(() => {
-    const fetchZulipStreams = async () => {
-      if (!api) return;
-
-      try {
-        const response = await api.v1ZulipGetStreams();
-        setStreams(response);
-      } catch (error) {
-        console.error("Error fetching Zulip streams:", error);
+    if (room.zulipStream && streams.length > 0) {
+      const selectedStream = streams.find((s) => s.name === room.zulipStream);
+      if (selectedStream !== undefined) {
+        setSelectedStreamId(selectedStream.stream_id);
       }
-    };
-
-    if (room.zulipAutoPost) {
-      fetchZulipStreams();
+    } else {
+      setSelectedStreamId(null);
     }
-  }, [room.zulipAutoPost, !api]);
-
-  useEffect(() => {
-    const fetchZulipTopics = async () => {
-      if (!api || !room.zulipStream) return;
-      try {
-        const selectedStream = streams.find((s) => s.name === room.zulipStream);
-        if (selectedStream) {
-          const response = await api.v1ZulipGetTopics({
-            streamId: selectedStream.stream_id,
-          });
-          setTopics(response);
-        }
-      } catch (error) {
-        console.error("Error fetching Zulip topics:", error);
-      }
-    };
-
-    fetchZulipTopics();
-  }, [room.zulipStream, streams, api]);
+  }, [room.zulipStream, streams]);
 
   const streamOptions: SelectOption[] = streams.map((stream) => {
     return { label: stream.name, value: stream.name };
@@ -167,35 +189,42 @@ export default function RoomsList() {
   const handleCloseDialog = () => {
     setShowWebhookSecret(false);
     setWebhookTestResult(null);
+    setEditRoomId(null);
     onClose();
   };
 
   const handleTestWebhook = async () => {
-    if (!room.webhookUrl || !editRoomId) {
+    if (!room.webhookUrl) {
       setWebhookTestResult("Please enter a webhook URL first");
       return;
     }
+    if (!editRoomId) {
+      console.error("No room ID to test webhook");
+      return;
+    }
 
     setTestingWebhook(true);
     setWebhookTestResult(null);
 
     try {
-      const response = await api?.v1RoomsTestWebhook({
-        roomId: editRoomId,
+      const response = await roomTestWebhookMutation.mutateAsync({
+        params: {
+          path: {
+            room_id: editRoomId,
+          },
+        },
       });
 
-      if (response?.success) {
+      if (response.success) {
         setWebhookTestResult(
           `✅ Webhook test successful! Status: ${response.status_code}`,
         );
       } else {
         let errorMsg = `❌ Webhook test failed`;
-        if (response?.status_code) {
-          errorMsg += ` (Status: ${response.status_code})`;
-        }
-        if (response?.error) {
+        errorMsg += ` (Status: ${response.status_code})`;
+        if (response.error) {
           errorMsg += `: ${response.error}`;
-        } else if (response?.response_preview) {
+        } else if (response.response_preview) {
           // Try to parse and extract meaningful error from response
           // Specific to N8N at the moment, as there is no specification for that
           // We could just display as is, but decided here to dig a little bit more.
@@ -249,27 +278,29 @@ export default function RoomsList() {
       };
 
       if (isEditing) {
-        await api?.v1RoomsUpdate({
-          roomId: editRoomId,
-          requestBody: roomData,
+        await updateRoomMutation.mutateAsync({
+          params: {
+            path: { room_id: assertExists(editRoomId) },
+          },
+          body: roomData,
         });
       } else {
-        await api?.v1RoomsCreate({
-          requestBody: roomData,
+        await createRoomMutation.mutateAsync({
+          body: roomData,
         });
       }
 
-      setRoom(roomInitialState);
+      setRoomInput(null);
       setIsEditing(false);
       setEditRoomId("");
       setNameError("");
       refetch();
+      onClose();
       handleCloseDialog();
-    } catch (err) {
+    } catch (err: any) {
       if (
-        err instanceof ApiError &&
-        err.status === 400 &&
-        (err.body as any).detail == "Room name is not unique"
+        err?.status === 400 &&
+        err?.body?.detail == "Room name is not unique"
       ) {
         setNameError(
           "This room name is already taken. Please choose a different name.",
@@ -280,46 +311,11 @@ export default function RoomsList() {
     }
   };
 
-  const handleEditRoom = async (roomId, roomData) => {
+  const handleEditRoom = async (roomId: string, roomData) => {
     // Reset states
     setShowWebhookSecret(false);
     setWebhookTestResult(null);
 
-    // Fetch full room details to get webhook fields
-    try {
-      const detailedRoom = await api?.v1RoomsGet({ roomId });
-      if (detailedRoom) {
-        setRoom({
-          name: detailedRoom.name,
-          zulipAutoPost: detailedRoom.zulip_auto_post,
-          zulipStream: detailedRoom.zulip_stream,
-          zulipTopic: detailedRoom.zulip_topic,
-          isLocked: detailedRoom.is_locked,
-          roomMode: detailedRoom.room_mode,
-          recordingType: detailedRoom.recording_type,
-          recordingTrigger: detailedRoom.recording_trigger,
-          isShared: detailedRoom.is_shared,
-          webhookUrl: detailedRoom.webhook_url || "",
-          webhookSecret: detailedRoom.webhook_secret || "",
-        });
-      }
-    } catch (error) {
-      console.error("Failed to fetch room details, using list data:", error);
-      // Fallback to using the data from the list
-      setRoom({
-        name: roomData.name,
-        zulipAutoPost: roomData.zulip_auto_post,
-        zulipStream: roomData.zulip_stream,
-        zulipTopic: roomData.zulip_topic,
-        isLocked: roomData.is_locked,
-        roomMode: roomData.room_mode,
-        recordingType: roomData.recording_type,
-        recordingTrigger: roomData.recording_trigger,
-        isShared: roomData.is_shared,
-        webhookUrl: roomData.webhook_url || "",
-        webhookSecret: roomData.webhook_secret || "",
-      });
-    }
     setEditRoomId(roomId);
     setIsEditing(true);
     setNameError("");
@@ -328,8 +324,10 @@ export default function RoomsList() {
 
   const handleDeleteRoom = async (roomId: string) => {
     try {
-      await api?.v1RoomsDelete({
-        roomId,
+      await deleteRoomMutation.mutateAsync({
+        params: {
+          path: { room_id: roomId },
+        },
       });
       refetch();
     } catch (err) {
@@ -346,15 +344,15 @@ export default function RoomsList() {
         .toLowerCase();
       setNameError("");
     }
-    setRoom({
+    setRoomInput({
       ...room,
       [name]: type === "checkbox" ? checked : value,
     });
   };
 
-  const myRooms: RoomDetails[] =
+  const myRooms: Room[] =
     response?.items.filter((roomData) => !roomData.is_shared) || [];
-  const sharedRooms: RoomDetails[] =
+  const sharedRooms: Room[] =
     response?.items.filter((roomData) => roomData.is_shared) || [];
 
   if (loading && !response)
@@ -369,6 +367,9 @@ export default function RoomsList() {
       </Flex>
     );
 
+  if (roomListError)
+    return <div>{`${roomListError.name}: ${roomListError.message}`}</div>;
+
   return (
     <Flex
       flexDir="column"
@@ -387,7 +388,7 @@ export default function RoomsList() {
           colorPalette="primary"
           onClick={() => {
             setIsEditing(false);
-            setRoom(roomInitialState);
+            setRoomInput(null);
             setNameError("");
             setShowWebhookSecret(false);
             setWebhookTestResult(null);
@@ -456,7 +457,7 @@ export default function RoomsList() {
                 <Select.Root
                   value={[room.roomMode]}
                   onValueChange={(e) =>
-                    setRoom({ ...room, roomMode: e.value[0] })
+                    setRoomInput({ ...room, roomMode: e.value[0] })
                   }
                   collection={roomModeCollection}
                 >
@@ -486,7 +487,7 @@ export default function RoomsList() {
                 <Select.Root
                   value={[room.recordingType]}
                   onValueChange={(e) =>
-                    setRoom({
+                    setRoomInput({
                       ...room,
                       recordingType: e.value[0],
                       recordingTrigger:
@@ -521,7 +522,7 @@ export default function RoomsList() {
                 <Select.Root
                   value={[room.recordingTrigger]}
                   onValueChange={(e) =>
-                    setRoom({ ...room, recordingTrigger: e.value[0] })
+                    setRoomInput({ ...room, recordingTrigger: e.value[0] })
                   }
                   collection={recordingTriggerCollection}
                   disabled={room.recordingType !== "cloud"}
@@ -576,7 +577,7 @@ export default function RoomsList() {
                 <Select.Root
                   value={room.zulipStream ? [room.zulipStream] : []}
                   onValueChange={(e) =>
-                    setRoom({
+                    setRoomInput({
                       ...room,
                       zulipStream: e.value[0],
                       zulipTopic: "",
@@ -611,7 +612,7 @@ export default function RoomsList() {
                 <Select.Root
                   value={room.zulipTopic ? [room.zulipTopic] : []}
                   onValueChange={(e) =>
-                    setRoom({ ...room, zulipTopic: e.value[0] })
+                    setRoomInput({ ...room, zulipTopic: e.value[0] })
                   }
                   collection={topicCollection}
                   disabled={!room.zulipAutoPost}

www/app/(app)/rooms/useRoomList.tsx

@@ -1,48 +1,27 @@
-import { useEffect, useState } from "react";
-import { useError } from "../../(errors)/errorContext";
-import useApi from "../../lib/useApi";
-import { Page_RoomDetails_ } from "../../api";
+import { useRoomsList } from "../../lib/apiHooks";
+import type { components } from "../../reflector-api";
+
+type Page_Room_ = components["schemas"]["Page_RoomDetails_"];
 import { PaginationPage } from "../browse/_components/Pagination";
 
 type RoomList = {
-  response: Page_RoomDetails_ | null;
+  response: Page_Room_ | null;
   loading: boolean;
   error: Error | null;
   refetch: () => void;
 };
 
-//always protected
+// Wrapper to maintain backward compatibility
 const useRoomList = (page: PaginationPage): RoomList => {
-  const [response, setResponse] = useState<Page_RoomDetails_ | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setErrorState] = useState<Error | null>(null);
-  const { setError } = useError();
-  const api = useApi();
-  const [refetchCount, setRefetchCount] = useState(0);
-
-  const refetch = () => {
-    setLoading(true);
-    setRefetchCount(refetchCount + 1);
+  const { data, isLoading, error, refetch } = useRoomsList(page);
+  return {
+    response: data || null,
+    loading: isLoading,
+    error: error
+      ? new Error(error.detail ? JSON.stringify(error.detail) : undefined)
+      : null,
+    refetch,
   };
-
-  useEffect(() => {
-    if (!api) return;
-    setLoading(true);
-    api
-      .v1RoomsList({ page })
-      .then((response) => {
-        setResponse(response);
-        setLoading(false);
-      })
-      .catch((err) => {
-        setResponse(null);
-        setLoading(false);
-        setError(err);
-        setErrorState(err);
-      });
-  }, [!api, page, refetchCount]);
-
-  return { response, loading, error, refetch };
 };
 
 export default useRoomList;

www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx

@@ -3,8 +3,10 @@ import ScrollToBottom from "../../scrollToBottom";
 import { Topic } from "../../webSocketTypes";
 import useParticipants from "../../useParticipants";
 import { Box, Flex, Text, Accordion } from "@chakra-ui/react";
-import { featureEnabled } from "../../../../domainContext";
 import { TopicItem } from "./TopicItem";
+import { TranscriptStatus } from "../../../../lib/transcript";
+
+import { featureEnabled } from "../../../../lib/features";
 
 type TopicListProps = {
   topics: Topic[];
@@ -14,7 +16,7 @@ type TopicListProps = {
   ];
   autoscroll: boolean;
   transcriptId: string;
-  status: string;
+  status: TranscriptStatus | null;
   currentTranscriptText: any;
 };
 

www/app/(app)/transcripts/[transcriptId]/correct/page.tsx

@@ -1,30 +1,35 @@
 "use client";
-import { useState } from "react";
+import { useState, use } from "react";
 import TopicHeader from "./topicHeader";
 import TopicWords from "./topicWords";
 import TopicPlayer from "./topicPlayer";
 import useParticipants from "../../useParticipants";
 import useTopicWithWords from "../../useTopicWithWords";
 import ParticipantList from "./participantList";
-import { GetTranscriptTopic } from "../../../../api";
+import type { components } from "../../../../reflector-api";
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
 import { SelectedText, selectedTextIsTimeSlice } from "./types";
-import useApi from "../../../../lib/useApi";
-import useTranscript from "../../useTranscript";
+import {
+  useTranscriptGet,
+  useTranscriptUpdate,
+} from "../../../../lib/apiHooks";
 import { useError } from "../../../../(errors)/errorContext";
 import { useRouter } from "next/navigation";
 import { Box, Grid } from "@chakra-ui/react";
 
 export type TranscriptCorrect = {
-  params: {
+  params: Promise<{
     transcriptId: string;
-  };
+  }>;
 };
 
-export default function TranscriptCorrect({
-  params: { transcriptId },
-}: TranscriptCorrect) {
-  const api = useApi();
-  const transcript = useTranscript(transcriptId);
+export default function TranscriptCorrect(props: TranscriptCorrect) {
+  const params = use(props.params);
+
+  const { transcriptId } = params;
+
+  const updateTranscriptMutation = useTranscriptUpdate();
+  const transcript = useTranscriptGet(transcriptId);
   const stateCurrentTopic = useState<GetTranscriptTopic>();
   const [currentTopic, _sct] = stateCurrentTopic;
   const stateSelectedText = useState<SelectedText>();
@@ -34,16 +39,21 @@ export default function TranscriptCorrect({
   const { setError } = useError();
   const router = useRouter();
 
-  const markAsDone = () => {
-    if (transcript.response && !transcript.response.reviewed) {
-      api
-        ?.v1TranscriptUpdate({ transcriptId, requestBody: { reviewed: true } })
-        .then(() => {
-          router.push(`/transcripts/${transcriptId}`);
-        })
-        .catch((e) => {
-          setError(e, "Error marking as done");
+  const markAsDone = async () => {
+    if (transcript.data && !transcript.data.reviewed) {
+      try {
+        await updateTranscriptMutation.mutateAsync({
+          params: {
+            path: {
+              transcript_id: transcriptId,
+            },
+          },
+          body: { reviewed: true },
         });
+        router.push(`/transcripts/${transcriptId}`);
+      } catch (e) {
+        setError(e as Error, "Error marking as done");
+      }
     }
   };
 
@@ -108,7 +118,7 @@ export default function TranscriptCorrect({
           }}
         />
       </Grid>
-      {transcript.response && !transcript.response?.reviewed && (
+      {transcript.data && !transcript.data?.reviewed && (
         <div className="flex flex-row justify-end">
           <button
             className="p-2 px-4 rounded bg-green-400"

www/app/(app)/transcripts/[transcriptId]/correct/participantList.tsx

@@ -1,8 +1,15 @@
 import { faArrowTurnDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
-import { Participant } from "../../../../api";
-import useApi from "../../../../lib/useApi";
+import type { components } from "../../../../reflector-api";
+type Participant = components["schemas"]["Participant"];
+import {
+  useTranscriptSpeakerAssign,
+  useTranscriptSpeakerMerge,
+  useTranscriptParticipantUpdate,
+  useTranscriptParticipantCreate,
+  useTranscriptParticipantDelete,
+} from "../../../../lib/apiHooks";
 import { UseParticipants } from "../../useParticipants";
 import { selectedTextIsSpeaker, selectedTextIsTimeSlice } from "./types";
 import { useError } from "../../../../(errors)/errorContext";
@@ -30,9 +37,19 @@ const ParticipantList = ({
   topicWithWords,
   stateSelectedText,
 }: ParticipantList) => {
-  const api = useApi();
   const { setError } = useError();
-  const [loading, setLoading] = useState(false);
+  const speakerAssignMutation = useTranscriptSpeakerAssign();
+  const speakerMergeMutation = useTranscriptSpeakerMerge();
+  const participantUpdateMutation = useTranscriptParticipantUpdate();
+  const participantCreateMutation = useTranscriptParticipantCreate();
+  const participantDeleteMutation = useTranscriptParticipantDelete();
+
+  const loading =
+    speakerAssignMutation.isPending ||
+    speakerMergeMutation.isPending ||
+    participantUpdateMutation.isPending ||
+    participantCreateMutation.isPending ||
+    participantDeleteMutation.isPending;
   const [participantInput, setParticipantInput] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
   const [selectedText, setSelectedText] = stateSelectedText;
@@ -103,7 +120,6 @@ const ParticipantList = ({
   const onSuccess = () => {
     topicWithWords.refetch();
     participants.refetch();
-    setLoading(false);
     setAction(null);
     setSelectedText(undefined);
     setSelectedParticipant(undefined);
@@ -120,11 +136,14 @@ const ParticipantList = ({
       if (loading || participants.loading || topicWithWords.loading) return;
       if (!selectedTextIsTimeSlice(selectedText)) return;
 
-      setLoading(true);
       try {
-        await api?.v1TranscriptAssignSpeaker({
-          transcriptId,
-          requestBody: {
+        await speakerAssignMutation.mutateAsync({
+          params: {
+            path: {
+              transcript_id: transcriptId,
+            },
+          },
+          body: {
             participant: participant.id,
             timestamp_from: selectedText.start,
             timestamp_to: selectedText.end,
@@ -132,8 +151,7 @@ const ParticipantList = ({
         });
         onSuccess();
       } catch (error) {
-        setError(error, "There was an error assigning");
-        setLoading(false);
+        setError(error as Error, "There was an error assigning");
         throw error;
       }
     };
@@ -141,32 +159,38 @@ const ParticipantList = ({
   const mergeSpeaker =
     (speakerFrom, participantTo: Participant) => async () => {
       if (loading || participants.loading || topicWithWords.loading) return;
-      setLoading(true);
+
       if (participantTo.speaker) {
         try {
-          await api?.v1TranscriptMergeSpeaker({
-            transcriptId,
-            requestBody: {
+          await speakerMergeMutation.mutateAsync({
+            params: {
+              path: {
+                transcript_id: transcriptId,
+              },
+            },
+            body: {
               speaker_from: speakerFrom,
               speaker_to: participantTo.speaker,
             },
           });
           onSuccess();
         } catch (error) {
-          setError(error, "There was an error merging");
-          setLoading(false);
+          setError(error as Error, "There was an error merging");
         }
       } else {
         try {
-          await api?.v1TranscriptUpdateParticipant({
-            transcriptId,
-            participantId: participantTo.id,
-            requestBody: { speaker: speakerFrom },
+          await participantUpdateMutation.mutateAsync({
+            params: {
+              path: {
+                transcript_id: transcriptId,
+                participant_id: participantTo.id,
+              },
+            },
+            body: { speaker: speakerFrom },
           });
           onSuccess();
         } catch (error) {
-          setError(error, "There was an error merging (update)");
-          setLoading(false);
+          setError(error as Error, "There was an error merging (update)");
         }
       }
     };
@@ -186,105 +210,106 @@ const ParticipantList = ({
         (p) => p.speaker == selectedText,
       );
       if (participant && participant.name !== participantInput) {
-        setLoading(true);
-        api
-          ?.v1TranscriptUpdateParticipant({
-            transcriptId,
-            participantId: participant.id,
-            requestBody: {
+        try {
+          await participantUpdateMutation.mutateAsync({
+            params: {
+              path: {
+                transcript_id: transcriptId,
+                participant_id: participant.id,
+              },
+            },
+            body: {
               name: participantInput,
             },
-          })
-          .then(() => {
-            participants.refetch();
-            setLoading(false);
-            setAction(null);
-          })
-          .catch((e) => {
-            setError(e, "There was an error renaming");
-            setLoading(false);
           });
+          participants.refetch();
+          setAction(null);
+        } catch (e) {
+          setError(e as Error, "There was an error renaming");
+        }
       }
     } else if (
       action == "Create to rename" &&
       selectedTextIsSpeaker(selectedText)
     ) {
-      setLoading(true);
-      api
-        ?.v1TranscriptAddParticipant({
-          transcriptId,
-          requestBody: {
+      try {
+        await participantCreateMutation.mutateAsync({
+          params: {
+            path: {
+              transcript_id: transcriptId,
+            },
+          },
+          body: {
             name: participantInput,
             speaker: selectedText,
           },
-        })
-        .then(() => {
-          participants.refetch();
-          setParticipantInput("");
-          setOneMatch(undefined);
-          setLoading(false);
-        })
-        .catch((e) => {
-          setError(e, "There was an error creating");
-          setLoading(false);
         });
+        participants.refetch();
+        setParticipantInput("");
+        setOneMatch(undefined);
+      } catch (e) {
+        setError(e as Error, "There was an error creating");
+      }
     } else if (
       action == "Create and assign" &&
       selectedTextIsTimeSlice(selectedText)
     ) {
-      setLoading(true);
       try {
-        const participant = await api?.v1TranscriptAddParticipant({
-          transcriptId,
-          requestBody: {
+        const participant = await participantCreateMutation.mutateAsync({
+          params: {
+            path: {
+              transcript_id: transcriptId,
+            },
+          },
+          body: {
             name: participantInput,
           },
         });
-        setLoading(false);
         assignTo(participant)().catch(() => {
           // error and loading are handled by assignTo catch
           participants.refetch();
         });
       } catch (error) {
-        setError(e, "There was an error creating");
-        setLoading(false);
+        setError(error as Error, "There was an error creating");
       }
     } else if (action == "Create") {
-      setLoading(true);
-      api
-        ?.v1TranscriptAddParticipant({
-          transcriptId,
-          requestBody: {
+      try {
+        await participantCreateMutation.mutateAsync({
+          params: {
+            path: {
+              transcript_id: transcriptId,
+            },
+          },
+          body: {
             name: participantInput,
           },
-        })
-        .then(() => {
-          participants.refetch();
-          setParticipantInput("");
-          setLoading(false);
-          inputRef.current?.focus();
-        })
-        .catch((e) => {
-          setError(e, "There was an error creating");
-          setLoading(false);
         });
+        participants.refetch();
+        setParticipantInput("");
+        inputRef.current?.focus();
+      } catch (e) {
+        setError(e as Error, "There was an error creating");
+      }
     }
   };
 
-  const deleteParticipant = (participantId) => (e) => {
+  const deleteParticipant = (participantId) => async (e) => {
     e.stopPropagation();
     if (loading || participants.loading || topicWithWords.loading) return;
-    setLoading(true);
-    api
-      ?.v1TranscriptDeleteParticipant({ transcriptId, participantId })
-      .then(() => {
-        participants.refetch();
-        setLoading(false);
-      })
-      .catch((e) => {
-        setError(e, "There was an error deleting");
-        setLoading(false);
+
+    try {
+      await participantDeleteMutation.mutateAsync({
+        params: {
+          path: {
+            transcript_id: transcriptId,
+            participant_id: participantId,
+          },
+        },
       });
+      participants.refetch();
+    } catch (e) {
+      setError(e as Error, "There was an error deleting");
+    }
   };
 
   const selectParticipant = (participant) => (e) => {

www/app/(app)/transcripts/[transcriptId]/correct/topicHeader.tsx

@@ -1,6 +1,7 @@
 import useTopics from "../../useTopics";
 import { Dispatch, SetStateAction, useEffect } from "react";
-import { GetTranscriptTopic } from "../../../../api";
+import type { components } from "../../../../reflector-api";
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
 import {
   BoxProps,
   Box,

www/app/(app)/transcripts/[transcriptId]/finalSummary.tsx

@@ -2,12 +2,10 @@ import { useEffect, useRef, useState } from "react";
 import React from "react";
 import Markdown from "react-markdown";
 import "../../../styles/markdown.css";
-import {
-  GetTranscript,
-  GetTranscriptTopic,
-  UpdateTranscript,
-} from "../../../api";
-import useApi from "../../../lib/useApi";
+import type { components } from "../../../reflector-api";
+type GetTranscript = components["schemas"]["GetTranscript"];
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
+import { useTranscriptUpdate } from "../../../lib/apiHooks";
 import {
   Flex,
   Heading,
@@ -33,9 +31,8 @@ export default function FinalSummary(props: FinalSummaryProps) {
   const [preEditSummary, setPreEditSummary] = useState("");
   const [editedSummary, setEditedSummary] = useState("");
 
-  const api = useApi();
-
   const { setError } = useError();
+  const updateTranscriptMutation = useTranscriptUpdate();
 
   useEffect(() => {
     setEditedSummary(props.transcriptResponse?.long_summary || "");
@@ -47,12 +44,15 @@ export default function FinalSummary(props: FinalSummaryProps) {
 
   const updateSummary = async (newSummary: string, transcriptId: string) => {
     try {
-      const requestBody: UpdateTranscript = {
-        long_summary: newSummary,
-      };
-      const updatedTranscript = await api?.v1TranscriptUpdate({
-        transcriptId,
-        requestBody,
+      const updatedTranscript = await updateTranscriptMutation.mutateAsync({
+        params: {
+          path: {
+            transcript_id: transcriptId,
+          },
+        },
+        body: {
+          long_summary: newSummary,
+        },
       });
       if (props.onUpdate) {
         props.onUpdate(newSummary);
@@ -60,7 +60,7 @@ export default function FinalSummary(props: FinalSummaryProps) {
       console.log("Updated long summary:", updatedTranscript);
     } catch (err) {
       console.error("Failed to update long summary:", err);
-      setError(err, "Failed to update long summary.");
+      setError(err as Error, "Failed to update long summary.");
     }
   };
 
@@ -114,7 +114,12 @@ export default function FinalSummary(props: FinalSummaryProps) {
             <Button onClick={onDiscardClick} variant="ghost">
               Cancel
             </Button>
-            <Button onClick={onSaveClick}>Save</Button>
+            <Button
+              onClick={onSaveClick}
+              disabled={updateTranscriptMutation.isPending}
+            >
+              Save
+            </Button>
           </Flex>
         )}
         {!isEditMode && (

www/app/(app)/transcripts/[transcriptId]/page.tsx

@@ -1,32 +1,38 @@
 "use client";
 import Modal from "../modal";
-import useTranscript from "../useTranscript";
 import useTopics from "../useTopics";
 import useWaveform from "../useWaveform";
 import useMp3 from "../useMp3";
 import { TopicList } from "./_components/TopicList";
 import { Topic } from "../webSocketTypes";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, use } from "react";
 import FinalSummary from "./finalSummary";
 import TranscriptTitle from "../transcriptTitle";
 import Player from "../player";
 import { useRouter } from "next/navigation";
 import { Box, Flex, Grid, GridItem, Skeleton, Text } from "@chakra-ui/react";
+import { useTranscriptGet } from "../../../lib/apiHooks";
+import { TranscriptStatus } from "../../../lib/transcript";
 
 type TranscriptDetails = {
-  params: {
+  params: Promise<{
     transcriptId: string;
-  };
+  }>;
 };
 
 export default function TranscriptDetails(details: TranscriptDetails) {
-  const transcriptId = details.params.transcriptId;
+  const params = use(details.params);
+  const transcriptId = params.transcriptId;
   const router = useRouter();
-  const statusToRedirect = ["idle", "recording", "processing"];
+  const statusToRedirect = [
+    "idle",
+    "recording",
+    "processing",
+  ] satisfies TranscriptStatus[] as TranscriptStatus[];
 
-  const transcript = useTranscript(transcriptId);
-  const transcriptStatus = transcript.response?.status;
-  const waiting = statusToRedirect.includes(transcriptStatus || "");
+  const transcript = useTranscriptGet(transcriptId);
+  const waiting =
+    transcript.data && statusToRedirect.includes(transcript.data.status);
 
   const mp3 = useMp3(transcriptId, waiting);
   const topics = useTopics(transcriptId);
@@ -38,7 +44,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
 
   useEffect(() => {
     if (waiting) {
-      const newUrl = "/transcripts/" + details.params.transcriptId + "/record";
+      const newUrl = "/transcripts/" + params.transcriptId + "/record";
       // Shallow redirection does not work on NextJS 13
       // https://github.com/vercel/next.js/discussions/48110
       // https://github.com/vercel/next.js/discussions/49540
@@ -56,7 +62,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
     );
   }
 
-  if (transcript?.loading || topics?.loading) {
+  if (transcript?.isLoading || topics?.loading) {
     return <Modal title="Loading" text={"Loading transcript..."} />;
   }
 
@@ -86,7 +92,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                 useActiveTopic={useActiveTopic}
                 waveform={waveform.waveform}
                 media={mp3.media}
-                mediaDuration={transcript.response.duration}
+                mediaDuration={transcript.data?.duration || null}
               />
             ) : !mp3.loading && (waveform.error || mp3.error) ? (
               <Box p={4} bg="red.100" borderRadius="md">
@@ -116,10 +122,10 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             <Flex direction="column" gap={0}>
               <Flex alignItems="center" gap={2}>
                 <TranscriptTitle
-                  title={transcript.response.title || "Unnamed Transcript"}
+                  title={transcript.data?.title || "Unnamed Transcript"}
                   transcriptId={transcriptId}
                   onUpdate={(newTitle) => {
-                    transcript.reload();
+                    transcript.refetch().then(() => {});
                   }}
                 />
               </Flex>
@@ -136,23 +142,23 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             useActiveTopic={useActiveTopic}
             autoscroll={false}
             transcriptId={transcriptId}
-            status={transcript.response?.status}
+            status={transcript.data?.status || null}
             currentTranscriptText=""
           />
-          {transcript.response && topics.topics ? (
+          {transcript.data && topics.topics ? (
             <>
               <FinalSummary
-                transcriptResponse={transcript.response}
+                transcriptResponse={transcript.data}
                 topicsResponse={topics.topics}
-                onUpdate={(newSummary) => {
-                  transcript.reload();
+                onUpdate={() => {
+                  transcript.refetch();
                 }}
               />
             </>
           ) : (
             <Flex justify={"center"} alignItems={"center"} h={"100%"}>
               <div className="flex flex-col h-full justify-center content-center">
-                {transcript.response.status == "processing" ? (
+                {transcript?.data?.status == "processing" ? (
                   <Text>Loading Transcript</Text>
                 ) : (
                   <Text>

www/app/(app)/transcripts/[transcriptId]/record/page.tsx

@@ -1,8 +1,7 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, use } from "react";
 import Recorder from "../../recorder";
 import { TopicList } from "../_components/TopicList";
-import useTranscript from "../../useTranscript";
 import { useWebSockets } from "../../useWebSockets";
 import { Topic } from "../../webSocketTypes";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
@@ -11,26 +10,29 @@ import useMp3 from "../../useMp3";
 import WaveformLoading from "../../waveformLoading";
 import { Box, Text, Grid, Heading, VStack, Flex } from "@chakra-ui/react";
 import LiveTrancription from "../../liveTranscription";
+import { useTranscriptGet } from "../../../../lib/apiHooks";
+import { TranscriptStatus } from "../../../../lib/transcript";
 
 type TranscriptDetails = {
-  params: {
+  params: Promise<{
     transcriptId: string;
-  };
+  }>;
 };
 
 const TranscriptRecord = (details: TranscriptDetails) => {
-  const transcript = useTranscript(details.params.transcriptId);
+  const params = use(details.params);
+  const transcript = useTranscriptGet(params.transcriptId);
   const [transcriptStarted, setTranscriptStarted] = useState(false);
   const useActiveTopic = useState<Topic | null>(null);
 
-  const webSockets = useWebSockets(details.params.transcriptId);
+  const webSockets = useWebSockets(params.transcriptId);
 
-  const mp3 = useMp3(details.params.transcriptId, true);
+  const mp3 = useMp3(params.transcriptId, true);
 
   const router = useRouter();
 
-  const [status, setStatus] = useState(
-    webSockets.status.value || transcript.response?.status || "idle",
+  const [status, setStatus] = useState<TranscriptStatus>(
+    webSockets.status?.value || transcript.data?.status || "idle",
   );
 
   useEffect(() => {
@@ -41,15 +43,15 @@ const TranscriptRecord = (details: TranscriptDetails) => {
   useEffect(() => {
     //TODO HANDLE ERROR STATUS BETTER
     const newStatus =
-      webSockets.status.value || transcript.response?.status || "idle";
+      webSockets.status?.value || transcript.data?.status || "idle";
     setStatus(newStatus);
     if (newStatus && (newStatus == "ended" || newStatus == "error")) {
       console.log(newStatus, "redirecting");
 
-      const newUrl = "/transcripts/" + details.params.transcriptId;
+      const newUrl = "/transcripts/" + params.transcriptId;
       router.replace(newUrl);
     }
-  }, [webSockets.status.value, transcript.response?.status]);
+  }, [webSockets.status?.value, transcript.data?.status]);
 
   useEffect(() => {
     if (webSockets.waveform && webSockets.waveform) mp3.getNow();
@@ -74,7 +76,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
         <WaveformLoading />
       ) : (
         // todo: only start recording animation when you get "recorded" status
-        <Recorder transcriptId={details.params.transcriptId} status={status} />
+        <Recorder transcriptId={params.transcriptId} status={status} />
       )}
       <VStack
         align={"left"}
@@ -97,7 +99,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
               topics={webSockets.topics}
               useActiveTopic={useActiveTopic}
               autoscroll={true}
-              transcriptId={details.params.transcriptId}
+              transcriptId={params.transcriptId}
               status={status}
               currentTranscriptText={webSockets.accumulatedText}
             />

www/app/(app)/transcripts/[transcriptId]/upload/page.tsx

@@ -1,33 +1,40 @@
 "use client";
-import { useEffect, useState } from "react";
-import useTranscript from "../../useTranscript";
+import { useEffect, useState, use } from "react";
 import { useWebSockets } from "../../useWebSockets";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
 import { useRouter } from "next/navigation";
 import useMp3 from "../../useMp3";
 import { Center, VStack, Text, Heading, Button } from "@chakra-ui/react";
 import FileUploadButton from "../../fileUploadButton";
+import { useTranscriptGet } from "../../../../lib/apiHooks";
 
 type TranscriptUpload = {
-  params: {
+  params: Promise<{
     transcriptId: string;
-  };
+  }>;
 };
 
 const TranscriptUpload = (details: TranscriptUpload) => {
-  const transcript = useTranscript(details.params.transcriptId);
+  const params = use(details.params);
+  const transcript = useTranscriptGet(params.transcriptId);
   const [transcriptStarted, setTranscriptStarted] = useState(false);
 
-  const webSockets = useWebSockets(details.params.transcriptId);
+  const webSockets = useWebSockets(params.transcriptId);
 
-  const mp3 = useMp3(details.params.transcriptId, true);
+  const mp3 = useMp3(params.transcriptId, true);
 
   const router = useRouter();
 
-  const [status, setStatus] = useState(
-    webSockets.status.value || transcript.response?.status || "idle",
+  const [status_, setStatus] = useState(
+    webSockets.status?.value || transcript.data?.status || "idle",
   );
 
+  // status is obviously done if we have transcript
+  const status =
+    !transcript.isLoading && transcript.data?.status === "ended"
+      ? transcript.data?.status
+      : status_;
+
   useEffect(() => {
     if (!transcriptStarted && webSockets.transcriptTextLive.length !== 0)
       setTranscriptStarted(true);
@@ -35,16 +42,19 @@ const TranscriptUpload = (details: TranscriptUpload) => {
 
   useEffect(() => {
     //TODO HANDLE ERROR STATUS BETTER
+    // TODO deprecate webSockets.status.value / depend on transcript.response?.status from query lib
     const newStatus =
-      webSockets.status.value || transcript.response?.status || "idle";
+      transcript.data?.status === "ended"
+        ? "ended"
+        : webSockets.status?.value || transcript.data?.status || "idle";
     setStatus(newStatus);
     if (newStatus && (newStatus == "ended" || newStatus == "error")) {
       console.log(newStatus, "redirecting");
 
-      const newUrl = "/transcripts/" + details.params.transcriptId;
+      const newUrl = "/transcripts/" + params.transcriptId;
       router.replace(newUrl);
     }
-  }, [webSockets.status.value, transcript.response?.status]);
+  }, [webSockets.status?.value, transcript.data?.status]);
 
   useEffect(() => {
     if (webSockets.waveform && webSockets.waveform) mp3.getNow();
@@ -75,7 +85,7 @@ const TranscriptUpload = (details: TranscriptUpload) => {
                   Please select the file, supported formats: .mp3, m4a, .wav,
                   .mp4, .mov or .webm
                 </Text>
-                <FileUploadButton transcriptId={details.params.transcriptId} />
+                <FileUploadButton transcriptId={params.transcriptId} />
               </>
             )}
             {status && status == "uploaded" && (

www/app/(app)/transcripts/createTranscript.ts

@@ -1,45 +1,33 @@
-import { useEffect, useState } from "react";
+import type { components } from "../../reflector-api";
+import { useTranscriptCreate } from "../../lib/apiHooks";
 
-import { useError } from "../../(errors)/errorContext";
-import { CreateTranscript, GetTranscript } from "../../api";
-import useApi from "../../lib/useApi";
+type CreateTranscript = components["schemas"]["CreateTranscript"];
+type GetTranscript = components["schemas"]["GetTranscript"];
 
 type UseCreateTranscript = {
   transcript: GetTranscript | null;
   loading: boolean;
   error: Error | null;
-  create: (transcriptCreationDetails: CreateTranscript) => void;
+  create: (transcriptCreationDetails: CreateTranscript) => Promise<void>;
 };
 
 const useCreateTranscript = (): UseCreateTranscript => {
-  const [transcript, setTranscript] = useState<GetTranscript | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setErrorState] = useState<Error | null>(null);
-  const { setError } = useError();
-  const api = useApi();
+  const createMutation = useTranscriptCreate();
 
-  const create = (transcriptCreationDetails: CreateTranscript) => {
-    if (loading || !api) return;
+  const create = async (transcriptCreationDetails: CreateTranscript) => {
+    if (createMutation.isPending) return;
 
-    setLoading(true);
-
-    api
-      .v1TranscriptsCreate({ requestBody: transcriptCreationDetails })
-      .then((transcript) => {
-        setTranscript(transcript);
-        setLoading(false);
-      })
-      .catch((err) => {
-        setError(
-          err,
-          "There was an issue creating a transcript, please try again.",
-        );
-        setErrorState(err);
-        setLoading(false);
-      });
+    await createMutation.mutateAsync({
+      body: transcriptCreationDetails,
+    });
   };
 
-  return { transcript, loading, error, create };
+  return {
+    transcript: createMutation.data || null,
+    loading: createMutation.isPending,
+    error: createMutation.error as Error | null,
+    create,
+  };
 };
 
 export default useCreateTranscript;

www/app/(app)/transcripts/fileUploadButton.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import useApi from "../../lib/useApi";
+import { useTranscriptUploadAudio } from "../../lib/apiHooks";
 import { Button, Spinner } from "@chakra-ui/react";
+import { useError } from "../../(errors)/errorContext";
 
 type FileUploadButton = {
   transcriptId: string;
@@ -8,13 +9,16 @@ type FileUploadButton = {
 
 export default function FileUploadButton(props: FileUploadButton) {
   const fileInputRef = React.useRef<HTMLInputElement>(null);
-  const api = useApi();
+  const uploadMutation = useTranscriptUploadAudio();
+  const { setError } = useError();
   const [progress, setProgress] = useState(0);
   const triggerFileUpload = () => {
     fileInputRef.current?.click();
   };
 
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
     const file = event.target.files?.[0];
 
     if (file) {
@@ -24,37 +28,45 @@ export default function FileUploadButton(props: FileUploadButton) {
       let start = 0;
       let uploadedSize = 0;
 
-      api?.httpRequest.config.interceptors.request.use((request) => {
-        request.onUploadProgress = (progressEvent) => {
-          const currentProgress = Math.floor(
-            ((uploadedSize + progressEvent.loaded) / file.size) * 100,
-          );
-          setProgress(currentProgress);
-        };
-        return request;
-      });
-
       const uploadNextChunk = async () => {
-        if (chunkNumber == totalChunks) return;
+        if (chunkNumber == totalChunks) {
+          setProgress(0);
+          return;
+        }
 
         const chunkSize = Math.min(maxChunkSize, file.size - start);
         const end = start + chunkSize;
         const chunk = file.slice(start, end);
 
-        await api?.v1TranscriptRecordUpload({
-          transcriptId: props.transcriptId,
-          formData: {
-            chunk,
-          },
-          chunkNumber,
-          totalChunks,
-        });
+        try {
+          const formData = new FormData();
+          formData.append("chunk", chunk);
 
-        uploadedSize += chunkSize;
-        chunkNumber++;
-        start = end;
+          await uploadMutation.mutateAsync({
+            params: {
+              path: {
+                transcript_id: props.transcriptId,
+              },
+              query: {
+                chunk_number: chunkNumber,
+                total_chunks: totalChunks,
+              },
+            },
+            body: formData as any,
+          });
 
-        uploadNextChunk();
+          uploadedSize += chunkSize;
+          const currentProgress = Math.floor((uploadedSize / file.size) * 100);
+          setProgress(currentProgress);
+
+          chunkNumber++;
+          start = end;
+
+          await uploadNextChunk();
+        } catch (error) {
+          setError(error as Error, "Failed to upload file");
+          setProgress(0);
+        }
       };
 
       uploadNextChunk();

www/app/(app)/transcripts/new/page.tsx

@@ -9,33 +9,25 @@ import { useRouter } from "next/navigation";
 import useCreateTranscript from "../createTranscript";
 import SelectSearch from "react-select-search";
 import { supportedLanguages } from "../../../supportedLanguages";
-import useSessionStatus from "../../../lib/useSessionStatus";
-import { featureEnabled } from "../../../domainContext";
-import { signIn } from "next-auth/react";
 import {
   Flex,
   Box,
   Spinner,
   Heading,
   Button,
-  Card,
   Center,
-  Link,
-  CardBody,
-  Stack,
   Text,
-  Icon,
-  Grid,
-  IconButton,
   Spacer,
-  Menu,
-  Tooltip,
-  Input,
 } from "@chakra-ui/react";
+import { useAuth } from "../../../lib/AuthProvider";
+import { featureEnabled } from "../../../lib/features";
+
 const TranscriptCreate = () => {
-  const isClient = typeof window !== "undefined";
   const router = useRouter();
-  const { isLoading, isAuthenticated } = useSessionStatus();
+  const auth = useAuth();
+  const isAuthenticated = auth.status === "authenticated";
+  const isAuthRefreshing = auth.status === "refreshing";
+  const isLoading = auth.status === "loading";
   const requireLogin = featureEnabled("requireLogin");
 
   const [name, setName] = useState<string>("");
@@ -54,20 +46,32 @@ const TranscriptCreate = () => {
   const [loadingUpload, setLoadingUpload] = useState(false);
 
   const getTargetLanguage = () => {
-    if (targetLanguage === "NOTRANSLATION") return;
+    if (targetLanguage === "NOTRANSLATION") return undefined;
     return targetLanguage;
   };
 
   const send = () => {
     if (loadingRecord || createTranscript.loading || permissionDenied) return;
     setLoadingRecord(true);
-    createTranscript.create({ name, target_language: getTargetLanguage() });
+    const targetLang = getTargetLanguage();
+    createTranscript.create({
+      name,
+      source_language: "en",
+      target_language: targetLang || "en",
+      source_kind: "live",
+    });
   };
 
   const uploadFile = () => {
     if (loadingUpload || createTranscript.loading || permissionDenied) return;
     setLoadingUpload(true);
-    createTranscript.create({ name, target_language: getTargetLanguage() });
+    const targetLang = getTargetLanguage();
+    createTranscript.create({
+      name,
+      source_language: "en",
+      target_language: targetLang || "en",
+      source_kind: "file",
+    });
   };
 
   useEffect(() => {
@@ -132,8 +136,8 @@ const TranscriptCreate = () => {
           <Center>
             {isLoading ? (
               <Spinner />
-            ) : requireLogin && !isAuthenticated ? (
-              <Button onClick={() => signIn("authentik")}>Log in</Button>
+            ) : requireLogin && !isAuthenticated && !isAuthRefreshing ? (
+              <Button onClick={() => auth.signIn("authentik")}>Log in</Button>
             ) : (
               <Flex
                 rounded="xl"
@@ -170,7 +174,7 @@ const TranscriptCreate = () => {
                     placeholder="Choose your language"
                   />
                 </Box>
-                {isClient && !loading ? (
+                {!loading ? (
                   permissionOk ? (
                     <Spacer />
                   ) : permissionDenied ? (

www/app/(app)/transcripts/player.tsx

@@ -5,7 +5,9 @@ import RegionsPlugin from "wavesurfer.js/dist/plugins/regions.esm.js";
 
 import { formatTime, formatTimeMs } from "../../lib/time";
 import { Topic } from "./webSocketTypes";
-import { AudioWaveform } from "../../api";
+import type { components } from "../../reflector-api";
+
+type AudioWaveform = components["schemas"]["AudioWaveform"];
 import { waveSurferStyles } from "../../styles/recorder";
 import { Box, Flex, IconButton } from "@chakra-ui/react";
 import { LuPause, LuPlay } from "react-icons/lu";
@@ -18,7 +20,7 @@ type PlayerProps = {
   ];
   waveform: AudioWaveform;
   media: HTMLMediaElement;
-  mediaDuration: number;
+  mediaDuration: number | null;
 };
 
 export default function Player(props: PlayerProps) {
@@ -50,7 +52,9 @@ export default function Player(props: PlayerProps) {
         container: waveformRef.current,
         peaks: [props.waveform.data],
         height: "auto",
-        duration: Math.floor(props.mediaDuration / 1000),
+        duration: props.mediaDuration
+          ? Math.floor(props.mediaDuration / 1000)
+          : undefined,
         media: props.media,
 
         ...waveSurferStyles.playerSettings,

www/app/(app)/transcripts/recorder.tsx

@@ -6,16 +6,16 @@ import RecordPlugin from "../../lib/custom-plugins/record";
 import { formatTime, formatTimeMs } from "../../lib/time";
 import { waveSurferStyles } from "../../styles/recorder";
 import { useError } from "../../(errors)/errorContext";
-import FileUploadButton from "./fileUploadButton";
 import useWebRTC from "./useWebRTC";
 import useAudioDevice from "./useAudioDevice";
 import { Box, Flex, IconButton, Menu, RadioGroup } from "@chakra-ui/react";
 import { LuScreenShare, LuMic, LuPlay, LuCircleStop } from "react-icons/lu";
 import { RECORD_A_MEETING_URL } from "../../api/urls";
+import { TranscriptStatus } from "../../lib/transcript";
 
 type RecorderProps = {
   transcriptId: string;
-  status: string;
+  status: TranscriptStatus;
 };
 
 export default function Recorder(props: RecorderProps) {

www/app/(app)/transcripts/shareAndPrivacy.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
-import { featureEnabled } from "../../domainContext";
 
 import { ShareMode, toShareMode } from "../../lib/shareMode";
-import { GetTranscript, GetTranscriptTopic, UpdateTranscript } from "../../api";
+import type { components } from "../../reflector-api";
+type GetTranscript = components["schemas"]["GetTranscript"];
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
+type UpdateTranscript = components["schemas"]["UpdateTranscript"];
 import {
   Box,
   Flex,
@@ -15,12 +17,13 @@ import {
   createListCollection,
 } from "@chakra-ui/react";
 import { LuShare2 } from "react-icons/lu";
-import useApi from "../../lib/useApi";
-import useSessionUser from "../../lib/useSessionUser";
-import { CustomSession } from "../../lib/types";
+import { useTranscriptUpdate } from "../../lib/apiHooks";
 import ShareLink from "./shareLink";
 import ShareCopy from "./shareCopy";
 import ShareZulip from "./shareZulip";
+import { useAuth } from "../../lib/AuthProvider";
+
+import { featureEnabled } from "../../lib/features";
 
 type ShareAndPrivacyProps = {
   finalSummaryRef: any;
@@ -50,12 +53,9 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
   );
   const [shareLoading, setShareLoading] = useState(false);
   const requireLogin = featureEnabled("requireLogin");
-  const api = useApi();
+  const updateTranscriptMutation = useTranscriptUpdate();
 
   const updateShareMode = async (selectedValue: string) => {
-    if (!api)
-      throw new Error("ShareLink's API should always be ready at this point");
-
     const selectedOption = shareOptionsData.find(
       (option) => option.value === selectedValue,
     );
@@ -67,19 +67,27 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
       share_mode: selectedValue as "public" | "semi-private" | "private",
     };
 
-    const updatedTranscript = await api.v1TranscriptUpdate({
-      transcriptId: props.transcriptResponse.id,
-      requestBody,
-    });
-    setShareMode(
-      shareOptionsData.find(
-        (option) => option.value === updatedTranscript.share_mode,
-      ) || shareOptionsData[0],
-    );
-    setShareLoading(false);
+    try {
+      const updatedTranscript = await updateTranscriptMutation.mutateAsync({
+        params: {
+          path: { transcript_id: props.transcriptResponse.id },
+        },
+        body: requestBody,
+      });
+      setShareMode(
+        shareOptionsData.find(
+          (option) => option.value === updatedTranscript.share_mode,
+        ) || shareOptionsData[0],
+      );
+    } catch (err) {
+      console.error("Failed to update share mode:", err);
+    } finally {
+      setShareLoading(false);
+    }
   };
 
-  const userId = useSessionUser().id;
+  const auth = useAuth();
+  const userId = auth.status === "authenticated" ? auth.user?.id : null;
 
   useEffect(() => {
     setIsOwner(!!(requireLogin && userId === props.transcriptResponse.user_id));
@@ -124,7 +132,7 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
                       "This transcript is public. Everyone can access it."}
                   </Text>
 
-                  {isOwner && api && (
+                  {isOwner && (
                     <Select.Root
                       key={shareMode.value}
                       value={[shareMode.value || ""]}

www/app/(app)/transcripts/shareCopy.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
-import { GetTranscript, GetTranscriptTopic } from "../../api";
+import type { components } from "../../reflector-api";
+type GetTranscript = components["schemas"]["GetTranscript"];
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
 import { Button, BoxProps, Box } from "@chakra-ui/react";
 
 type ShareCopyProps = {

www/app/(app)/transcripts/shareLink.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useRef, useEffect, use } from "react";
-import { featureEnabled } from "../../domainContext";
 import { Button, Flex, Input, Text } from "@chakra-ui/react";
 import QRCode from "react-qr-code";
 
+import { featureEnabled } from "../../lib/features";
+
 type ShareLinkProps = {
   transcriptId: string;
 };

www/app/(app)/transcripts/shareZulip.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect, useMemo } from "react";
-import { featureEnabled } from "../../domainContext";
-import { GetTranscript, GetTranscriptTopic } from "../../api";
+import type { components } from "../../reflector-api";
+
+type GetTranscript = components["schemas"]["GetTranscript"];
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
 import {
   BoxProps,
   Button,
@@ -12,12 +14,16 @@ import {
   Checkbox,
   Combobox,
   Spinner,
-  Portal,
-  useFilter,
-  useListCollection,
+  createListCollection,
 } from "@chakra-ui/react";
 import { TbBrandZulip } from "react-icons/tb";
-import useApi from "../../lib/useApi";
+import {
+  useZulipStreams,
+  useZulipTopics,
+  useTranscriptPostToZulip,
+} from "../../lib/apiHooks";
+
+import { featureEnabled } from "../../lib/features";
 
 type ShareZulipProps = {
   transcriptResponse: GetTranscript;
@@ -30,104 +36,77 @@ interface Stream {
   name: string;
 }
 
-interface Topic {
-  name: string;
-}
-
 export default function ShareZulip(props: ShareZulipProps & BoxProps) {
   const [showModal, setShowModal] = useState(false);
   const [stream, setStream] = useState<string | undefined>(undefined);
+  const [selectedStreamId, setSelectedStreamId] = useState<number | null>(null);
   const [topic, setTopic] = useState<string | undefined>(undefined);
   const [includeTopics, setIncludeTopics] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [streams, setStreams] = useState<Stream[]>([]);
-  const [topics, setTopics] = useState<Topic[]>([]);
-  const api = useApi();
-  const { contains } = useFilter({ sensitivity: "base" });
 
-  const {
-    collection: streamItemsCollection,
-    filter: streamItemsFilter,
-    set: streamItemsSet,
-  } = useListCollection({
-    initialItems: [] as { label: string; value: string }[],
-    filter: contains,
-  });
+  const { data: streams = [], isLoading: isLoadingStreams } = useZulipStreams();
+  const { data: topics = [] } = useZulipTopics(selectedStreamId);
+  const postToZulipMutation = useTranscriptPostToZulip();
 
-  const {
-    collection: topicItemsCollection,
-    filter: topicItemsFilter,
-    set: topicItemsSet,
-  } = useListCollection({
-    initialItems: [] as { label: string; value: string }[],
-    filter: contains,
-  });
+  const streamItems = useMemo(() => {
+    return streams.map((stream: Stream) => ({
+      label: stream.name,
+      value: stream.name,
+    }));
+  }, [streams]);
 
+  const topicItems = useMemo(() => {
+    return topics.map(({ name }) => ({
+      label: name,
+      value: name,
+    }));
+  }, [topics]);
+
+  const streamCollection = useMemo(
+    () =>
+      createListCollection({
+        items: streamItems,
+      }),
+    [streamItems],
+  );
+
+  const topicCollection = useMemo(
+    () =>
+      createListCollection({
+        items: topicItems,
+      }),
+    [topicItems],
+  );
+
+  // Update selected stream ID when stream changes
   useEffect(() => {
-    const fetchZulipStreams = async () => {
-      if (!api) return;
-
-      try {
-        const response = await api.v1ZulipGetStreams();
-        setStreams(response);
-
-        streamItemsSet(
-          response.map((stream) => ({
-            label: stream.name,
-            value: stream.name,
-          })),
-        );
-
-        setIsLoading(false);
-      } catch (error) {
-        console.error("Error fetching Zulip streams:", error);
-      }
-    };
-
-    fetchZulipStreams();
-  }, [!api]);
-
-  useEffect(() => {
-    const fetchZulipTopics = async () => {
-      if (!api || !stream) return;
-      try {
-        const selectedStream = streams.find((s) => s.name === stream);
-        if (selectedStream) {
-          const response = await api.v1ZulipGetTopics({
-            streamId: selectedStream.stream_id,
-          });
-          setTopics(response);
-          topicItemsSet(
-            response.map((topic) => ({
-              label: topic.name,
-              value: topic.name,
-            })),
-          );
-        } else {
-          topicItemsSet([]);
-        }
-      } catch (error) {
-        console.error("Error fetching Zulip topics:", error);
-      }
-    };
-
-    fetchZulipTopics();
-  }, [stream, streams, api]);
+    if (stream && streams) {
+      const selectedStream = streams.find((s: Stream) => s.name === stream);
+      setSelectedStreamId(selectedStream ? selectedStream.stream_id : null);
+    } else {
+      setSelectedStreamId(null);
+    }
+  }, [stream, streams]);
 
   const handleSendToZulip = async () => {
-    if (!api || !props.transcriptResponse) return;
+    if (!props.transcriptResponse) return;
 
     if (stream && topic) {
       try {
-        await api.v1TranscriptPostToZulip({
-          transcriptId: props.transcriptResponse.id,
-          stream,
-          topic,
-          includeTopics,
+        await postToZulipMutation.mutateAsync({
+          params: {
+            path: {
+              transcript_id: props.transcriptResponse.id,
+            },
+            query: {
+              stream,
+              topic,
+              include_topics: includeTopics,
+            },
+          },
         });
         setShowModal(false);
       } catch (error) {
-        console.log(error);
+        console.error("Error posting to Zulip:", error);
       }
     }
   };
@@ -155,7 +134,7 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
               </Dialog.CloseTrigger>
             </Dialog.Header>
             <Dialog.Body>
-              {isLoading ? (
+              {isLoadingStreams ? (
                 <Flex justify="center" py={8}>
                   <Spinner />
                 </Flex>
@@ -178,15 +157,12 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
                     <Flex align="center" gap={2}>
                       <Text>#</Text>
                       <Combobox.Root
-                        collection={streamItemsCollection}
+                        collection={streamCollection}
                         value={stream ? [stream] : []}
                         onValueChange={(e) => {
                           setTopic(undefined);
                           setStream(e.value[0]);
                         }}
-                        onInputValueChange={(e) =>
-                          streamItemsFilter(e.inputValue)
-                        }
                         openOnClick={true}
                         positioning={{
                           strategy: "fixed",
@@ -203,7 +179,7 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
                         <Combobox.Positioner>
                           <Combobox.Content>
                             <Combobox.Empty>No streams found</Combobox.Empty>
-                            {streamItemsCollection.items.map((item) => (
+                            {streamItems.map((item) => (
                               <Combobox.Item key={item.value} item={item}>
                                 {item.label}
                               </Combobox.Item>
@@ -219,12 +195,9 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
                       <Flex align="center" gap={2}>
                         <Text visibility="hidden">#</Text>
                         <Combobox.Root
-                          collection={topicItemsCollection}
+                          collection={topicCollection}
                           value={topic ? [topic] : []}
                           onValueChange={(e) => setTopic(e.value[0])}
-                          onInputValueChange={(e) =>
-                            topicItemsFilter(e.inputValue)
-                          }
                           openOnClick
                           selectionBehavior="replace"
                           skipAnimationOnMount={true}
@@ -244,7 +217,7 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
                           <Combobox.Positioner>
                             <Combobox.Content>
                               <Combobox.Empty>No topics found</Combobox.Empty>
-                              {topicItemsCollection.items.map((item) => (
+                              {topicItems.map((item) => (
                                 <Combobox.Item key={item.value} item={item}>
                                   {item.label}
                                   <Combobox.ItemIndicator />

www/app/(app)/transcripts/transcriptTitle.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
-import { UpdateTranscript } from "../../api";
-import useApi from "../../lib/useApi";
+import type { components } from "../../reflector-api";
+
+type UpdateTranscript = components["schemas"]["UpdateTranscript"];
+import { useTranscriptUpdate } from "../../lib/apiHooks";
 import { Heading, IconButton, Input, Flex, Spacer } from "@chakra-ui/react";
 import { LuPen } from "react-icons/lu";
 
@@ -14,24 +16,27 @@ const TranscriptTitle = (props: TranscriptTitle) => {
   const [displayedTitle, setDisplayedTitle] = useState(props.title);
   const [preEditTitle, setPreEditTitle] = useState(props.title);
   const [isEditing, setIsEditing] = useState(false);
-  const api = useApi();
+  const updateTranscriptMutation = useTranscriptUpdate();
 
   const updateTitle = async (newTitle: string, transcriptId: string) => {
-    if (!api) return;
     try {
       const requestBody: UpdateTranscript = {
         title: newTitle,
       };
-      const updatedTranscript = await api?.v1TranscriptUpdate({
-        transcriptId,
-        requestBody,
+      await updateTranscriptMutation.mutateAsync({
+        params: {
+          path: { transcript_id: transcriptId },
+        },
+        body: requestBody,
       });
       if (props.onUpdate) {
         props.onUpdate(newTitle);
       }
-      console.log("Updated transcript:", updatedTranscript);
+      console.log("Updated transcript title:", newTitle);
     } catch (err) {
       console.error("Failed to update transcript:", err);
+      // Revert title on error
+      setDisplayedTitle(preEditTitle);
     }
   };
 

www/app/(app)/transcripts/useMp3.ts

@@ -1,6 +1,7 @@
-import { useContext, useEffect, useState } from "react";
-import { DomainContext } from "../../domainContext";
-import getApi from "../../lib/useApi";
+import { useEffect, useState } from "react";
+import { useTranscriptGet } from "../../lib/apiHooks";
+import { useAuth } from "../../lib/AuthProvider";
+import { API_URL } from "../../lib/apiClient";
 
 export type Mp3Response = {
   media: HTMLMediaElement | null;
@@ -17,14 +18,16 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
   const [audioLoadingError, setAudioLoadingError] = useState<null | string>(
     null,
   );
-  const [transcriptMetadataLoading, setTranscriptMetadataLoading] =
-    useState<boolean>(true);
-  const [transcriptMetadataLoadingError, setTranscriptMetadataLoadingError] =
-    useState<string | null>(null);
   const [audioDeleted, setAudioDeleted] = useState<boolean | null>(null);
-  const api = getApi();
-  const { api_url } = useContext(DomainContext);
-  const accessTokenInfo = api?.httpRequest?.config?.TOKEN;
+  const auth = useAuth();
+  const accessTokenInfo =
+    auth.status === "authenticated" ? auth.accessToken : null;
+
+  const {
+    data: transcript,
+    isLoading: transcriptMetadataLoading,
+    error: transcriptError,
+  } = useTranscriptGet(later ? null : transcriptId);
 
   const [serviceWorker, setServiceWorker] =
     useState<ServiceWorkerRegistration | null>(null);
@@ -52,72 +55,50 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
   }, [navigator.serviceWorker, !serviceWorker, accessTokenInfo]);
 
   useEffect(() => {
-    if (!transcriptId || !api || later) return;
+    if (!transcriptId || later || !transcript) return;
 
     let stopped = false;
     let audioElement: HTMLAudioElement | null = null;
     let handleCanPlay: (() => void) | null = null;
     let handleError: (() => void) | null = null;
 
-    setTranscriptMetadataLoading(true);
     setAudioLoading(true);
 
-    // First fetch transcript info to check if audio is deleted
-    api
-      .v1TranscriptGet({ transcriptId })
-      .then((transcript) => {
-        if (stopped) {
-          return;
-        }
+    const deleted = transcript.audio_deleted || false;
+    setAudioDeleted(deleted);
 
-        const deleted = transcript.audio_deleted || false;
-        setAudioDeleted(deleted);
-        setTranscriptMetadataLoadingError(null);
+    if (deleted) {
+      // Audio is deleted, don't attempt to load it
+      setMedia(null);
+      setAudioLoadingError(null);
+      setAudioLoading(false);
+      return;
+    }
 
-        if (deleted) {
-          // Audio is deleted, don't attempt to load it
-          setMedia(null);
-          setAudioLoadingError(null);
-          setAudioLoading(false);
-          return;
-        }
+    // Audio is not deleted, proceed to load it
+    audioElement = document.createElement("audio");
+    audioElement.src = `${API_URL}/v1/transcripts/${transcriptId}/audio/mp3`;
+    audioElement.crossOrigin = "anonymous";
+    audioElement.preload = "auto";
 
-        // Audio is not deleted, proceed to load it
-        audioElement = document.createElement("audio");
-        audioElement.src = `${api_url}/v1/transcripts/${transcriptId}/audio/mp3`;
-        audioElement.crossOrigin = "anonymous";
-        audioElement.preload = "auto";
+    handleCanPlay = () => {
+      if (stopped) return;
+      setAudioLoading(false);
+      setAudioLoadingError(null);
+    };
 
-        handleCanPlay = () => {
-          if (stopped) return;
-          setAudioLoading(false);
-          setAudioLoadingError(null);
-        };
+    handleError = () => {
+      if (stopped) return;
+      setAudioLoading(false);
+      setAudioLoadingError("Failed to load audio");
+    };
 
-        handleError = () => {
-          if (stopped) return;
-          setAudioLoading(false);
-          setAudioLoadingError("Failed to load audio");
-        };
+    audioElement.addEventListener("canplay", handleCanPlay);
+    audioElement.addEventListener("error", handleError);
 
-        audioElement.addEventListener("canplay", handleCanPlay);
-        audioElement.addEventListener("error", handleError);
-
-        if (!stopped) {
-          setMedia(audioElement);
-        }
-      })
-      .catch((error) => {
-        if (stopped) return;
-        console.error("Failed to fetch transcript:", error);
-        setAudioDeleted(null);
-        setTranscriptMetadataLoadingError(error.message);
-        setAudioLoading(false);
-      })
-      .finally(() => {
-        if (stopped) return;
-        setTranscriptMetadataLoading(false);
-      });
+    if (!stopped) {
+      setMedia(audioElement);
+    }
 
     return () => {
       stopped = true;
@@ -128,14 +109,18 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
         if (handleError) audioElement.removeEventListener("error", handleError);
       }
     };
-  }, [transcriptId, api, later, api_url]);
+  }, [transcriptId, transcript, later]);
 
   const getNow = () => {
     setLater(false);
   };
 
   const loading = audioLoading || transcriptMetadataLoading;
-  const error = audioLoadingError || transcriptMetadataLoadingError;
+  const error =
+    audioLoadingError ||
+    (transcriptError
+      ? (transcriptError as any).message || String(transcriptError)
+      : null);
 
   return { media, loading, error, getNow, audioDeleted };
 };

www/app/(app)/transcripts/useParticipants.ts

@@ -1,8 +1,6 @@
-import { useEffect, useState } from "react";
-import { Participant } from "../../api";
-import { useError } from "../../(errors)/errorContext";
-import useApi from "../../lib/useApi";
-import { shouldShowError } from "../../lib/errorUtils";
+import type { components } from "../../reflector-api";
+type Participant = components["schemas"]["Participant"];
+import { useTranscriptParticipants } from "../../lib/apiHooks";
 
 type ErrorParticipants = {
   error: Error;
@@ -29,46 +27,38 @@ export type UseParticipants = (
 ) & { refetch: () => void };
 
 const useParticipants = (transcriptId: string): UseParticipants => {
-  const [response, setResponse] = useState<Participant[] | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setErrorState] = useState<Error | null>(null);
-  const { setError } = useError();
-  const api = useApi();
-  const [count, setCount] = useState(0);
+  const {
+    data: response,
+    isLoading: loading,
+    error,
+    refetch,
+  } = useTranscriptParticipants(transcriptId || null);
 
-  const refetch = () => {
-    if (!loading) {
-      setCount(count + 1);
-      setLoading(true);
-      setErrorState(null);
-    }
-  };
+  // Type-safe return based on state
+  if (error) {
+    return {
+      error: error as Error,
+      loading: false,
+      response: null,
+      refetch,
+    } satisfies ErrorParticipants & { refetch: () => void };
+  }
 
-  useEffect(() => {
-    if (!transcriptId || !api) return;
+  if (loading || !response) {
+    return {
+      response: response || null,
+      loading: true,
+      error: null,
+      refetch,
+    } satisfies LoadingParticipants & { refetch: () => void };
+  }
 
-    setLoading(true);
-    api
-      .v1TranscriptGetParticipants({ transcriptId })
-      .then((result) => {
-        setResponse(result);
-        setLoading(false);
-        console.debug("Participants Loaded:", result);
-      })
-      .catch((error) => {
-        const shouldShowHuman = shouldShowError(error);
-        if (shouldShowHuman) {
-          setError(error, "There was an error loading the participants");
-        } else {
-          setError(error);
-        }
-        setErrorState(error);
-        setResponse(null);
-        setLoading(false);
-      });
-  }, [transcriptId, !api, count]);
-
-  return { response, loading, error, refetch } as UseParticipants;
+  return {
+    response,
+    loading: false,
+    error: null,
+    refetch,
+  } satisfies SuccessParticipants & { refetch: () => void };
 };
 
 export default useParticipants;

www/app/(app)/transcripts/useSearchTranscripts.ts

@@ -1,123 +0,0 @@
-// this hook is not great, we want to substitute it with a proper state management solution that is also not re-invention
-
-import { useEffect, useRef, useState } from "react";
-import { SearchResult, SourceKind } from "../../api";
-import useApi from "../../lib/useApi";
-import {
-  PaginationPage,
-  paginationPageTo0Based,
-} from "../browse/_components/Pagination";
-
-interface SearchFilters {
-  roomIds: readonly string[] | null;
-  sourceKind: SourceKind | null;
-}
-
-const EMPTY_SEARCH_FILTERS: SearchFilters = {
-  roomIds: null,
-  sourceKind: null,
-};
-
-type UseSearchTranscriptsOptions = {
-  pageSize: number;
-  page: PaginationPage;
-};
-
-interface UseSearchTranscriptsReturn {
-  results: SearchResult[];
-  totalCount: number;
-  isLoading: boolean;
-  error: unknown;
-  reload: () => void;
-}
-
-function hashEffectFilters(filters: SearchFilters): string {
-  return JSON.stringify(filters);
-}
-
-export function useSearchTranscripts(
-  query: string = "",
-  filters: SearchFilters = EMPTY_SEARCH_FILTERS,
-  options: UseSearchTranscriptsOptions = {
-    pageSize: 20,
-    page: PaginationPage(1),
-  },
-): UseSearchTranscriptsReturn {
-  const { pageSize, page } = options;
-
-  const [reloadCount, setReloadCount] = useState(0);
-
-  const api = useApi();
-  const abortControllerRef = useRef<AbortController>();
-
-  const [data, setData] = useState<{ results: SearchResult[]; total: number }>({
-    results: [],
-    total: 0,
-  });
-  const [error, setError] = useState<any>();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const filterHash = hashEffectFilters(filters);
-
-  useEffect(() => {
-    if (!api) {
-      setData({ results: [], total: 0 });
-      setError(undefined);
-      setIsLoading(false);
-      return;
-    }
-
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-
-    const abortController = new AbortController();
-    abortControllerRef.current = abortController;
-
-    const performSearch = async () => {
-      setIsLoading(true);
-
-      try {
-        const response = await api.v1TranscriptsSearch({
-          q: query || "",
-          limit: pageSize,
-          offset: paginationPageTo0Based(page) * pageSize,
-          roomId: filters.roomIds?.[0],
-          sourceKind: filters.sourceKind || undefined,
-        });
-
-        if (abortController.signal.aborted) return;
-        setData(response);
-        setError(undefined);
-      } catch (err: unknown) {
-        if ((err as Error).name === "AbortError") {
-          return;
-        }
-        if (abortController.signal.aborted) {
-          console.error("Aborted search but error", err);
-          return;
-        }
-
-        setError(err);
-      } finally {
-        if (!abortController.signal.aborted) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    performSearch().then(() => {});
-
-    return () => {
-      abortController.abort();
-    };
-  }, [api, query, page, filterHash, pageSize, reloadCount]);
-
-  return {
-    results: data.results,
-    totalCount: data.total,
-    isLoading,
-    error,
-    reload: () => setReloadCount(reloadCount + 1),
-  };
-}

www/app/(app)/transcripts/useTopicWithWords.ts

@@ -1,9 +1,8 @@
-import { useEffect, useState } from "react";
+import type { components } from "../../reflector-api";
+import { useTranscriptTopicsWithWordsPerSpeaker } from "../../lib/apiHooks";
 
-import { GetTranscriptTopicWithWordsPerSpeaker } from "../../api";
-import { useError } from "../../(errors)/errorContext";
-import useApi from "../../lib/useApi";
-import { shouldShowError } from "../../lib/errorUtils";
+type GetTranscriptTopicWithWordsPerSpeaker =
+  components["schemas"]["GetTranscriptTopicWithWordsPerSpeaker"];
 
 type ErrorTopicWithWords = {
   error: Error;
@@ -33,47 +32,40 @@ const useTopicWithWords = (
   topicId: string | undefined,
   transcriptId: string,
 ): UseTopicWithWords => {
-  const [response, setResponse] =
-    useState<GetTranscriptTopicWithWordsPerSpeaker | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setErrorState] = useState<Error | null>(null);
-  const { setError } = useError();
-  const api = useApi();
+  const {
+    data: response,
+    isLoading: loading,
+    error,
+    refetch,
+  } = useTranscriptTopicsWithWordsPerSpeaker(
+    transcriptId || null,
+    topicId || null,
+  );
 
-  const [count, setCount] = useState(0);
+  if (error) {
+    return {
+      error: error as Error,
+      loading: false,
+      response: null,
+      refetch,
+    } satisfies ErrorTopicWithWords & { refetch: () => void };
+  }
 
-  const refetch = () => {
-    if (!loading) {
-      setCount(count + 1);
-      setLoading(true);
-      setErrorState(null);
-    }
-  };
+  if (loading || !response) {
+    return {
+      response: response || null,
+      loading: true,
+      error: false,
+      refetch,
+    } satisfies LoadingTopicWithWords & { refetch: () => void };
+  }
 
-  useEffect(() => {
-    if (!transcriptId || !topicId || !api) return;
-
-    setLoading(true);
-
-    api
-      .v1TranscriptGetTopicsWithWordsPerSpeaker({ transcriptId, topicId })
-      .then((result) => {
-        setResponse(result);
-        setLoading(false);
-        console.debug("Topics with words Loaded:", result);
-      })
-      .catch((error) => {
-        const shouldShowHuman = shouldShowError(error);
-        if (shouldShowHuman) {
-          setError(error, "There was an error loading the topics with words");
-        } else {
-          setError(error);
-        }
-        setErrorState(error);
-      });
-  }, [transcriptId, !api, topicId, count]);
-
-  return { response, loading, error, refetch } as UseTopicWithWords;
+  return {
+    response,
+    loading: false,
+    error: null,
+    refetch,
+  } satisfies SuccessTopicWithWords & { refetch: () => void };
 };
 
 export default useTopicWithWords;

www/app/(app)/transcripts/useTopics.ts

@@ -1,10 +1,7 @@
-import { useEffect, useState } from "react";
+import { useTranscriptTopics } from "../../lib/apiHooks";
+import type { components } from "../../reflector-api";
 
-import { useError } from "../../(errors)/errorContext";
-import { Topic } from "./webSocketTypes";
-import useApi from "../../lib/useApi";
-import { shouldShowError } from "../../lib/errorUtils";
-import { GetTranscriptTopic } from "../../api";
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
 
 type TranscriptTopics = {
   topics: GetTranscriptTopic[] | null;
@@ -13,34 +10,13 @@ type TranscriptTopics = {
 };
 
 const useTopics = (id: string): TranscriptTopics => {
-  const [topics, setTopics] = useState<Topic[] | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setErrorState] = useState<Error | null>(null);
-  const { setError } = useError();
-  const api = useApi();
-  useEffect(() => {
-    if (!id || !api) return;
+  const { data: topics, isLoading: loading, error } = useTranscriptTopics(id);
 
-    setLoading(true);
-    api
-      .v1TranscriptGetTopics({ transcriptId: id })
-      .then((result) => {
-        setTopics(result);
-        setLoading(false);
-        console.debug("Transcript topics loaded:", result);
-      })
-      .catch((err) => {
-        setErrorState(err);
-        const shouldShowHuman = shouldShowError(err);
-        if (shouldShowHuman) {
-          setError(err, "There was an error loading the topics");
-        } else {
-          setError(err);
-        }
-      });
-  }, [id, !api]);
-
-  return { topics, loading, error };
+  return {
+    topics: topics || null,
+    loading,
+    error: error as Error | null,
+  };
 };
 
 export default useTopics;

www/app/(app)/transcripts/useTranscript.ts

@@ -1,70 +0,0 @@
-import { useEffect, useState } from "react";
-import { GetTranscript } from "../../api";
-import { useError } from "../../(errors)/errorContext";
-import { shouldShowError } from "../../lib/errorUtils";
-import useApi from "../../lib/useApi";
-
-type ErrorTranscript = {
-  error: Error;
-  loading: false;
-  response: null;
-  reload: () => void;
-};
-
-type LoadingTranscript = {
-  response: null;
-  loading: true;
-  error: false;
-  reload: () => void;
-};
-
-type SuccessTranscript = {
-  response: GetTranscript;
-  loading: false;
-  error: null;
-  reload: () => void;
-};
-
-const useTranscript = (
-  id: string | null,
-): ErrorTranscript | LoadingTranscript | SuccessTranscript => {
-  const [response, setResponse] = useState<GetTranscript | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setErrorState] = useState<Error | null>(null);
-  const [reload, setReload] = useState(0);
-  const { setError } = useError();
-  const api = useApi();
-  const reloadHandler = () => setReload((prev) => prev + 1);
-
-  useEffect(() => {
-    if (!id || !api) return;
-
-    if (!response) {
-      setLoading(true);
-    }
-
-    api
-      .v1TranscriptGet({ transcriptId: id })
-      .then((result) => {
-        setResponse(result);
-        setLoading(false);
-        console.debug("Transcript Loaded:", result);
-      })
-      .catch((error) => {
-        const shouldShowHuman = shouldShowError(error);
-        if (shouldShowHuman) {
-          setError(error, "There was an error loading the transcript");
-        } else {
-          setError(error);
-        }
-        setErrorState(error);
-      });
-  }, [id, !api, reload]);
-
-  return { response, loading, error, reload: reloadHandler } as
-    | ErrorTranscript
-    | LoadingTranscript
-    | SuccessTranscript;
-};
-
-export default useTranscript;

www/app/(app)/transcripts/useWaveform.ts

@@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
-import { AudioWaveform } from "../../api";
-import { useError } from "../../(errors)/errorContext";
-import useApi from "../../lib/useApi";
-import { shouldShowError } from "../../lib/errorUtils";
+import type { components } from "../../reflector-api";
+import { useTranscriptWaveform } from "../../lib/apiHooks";
+
+type AudioWaveform = components["schemas"]["AudioWaveform"];
 
 type AudioWaveFormResponse = {
   waveform: AudioWaveform | null;
@@ -11,35 +10,17 @@ type AudioWaveFormResponse = {
 };
 
 const useWaveform = (id: string, skip: boolean): AudioWaveFormResponse => {
-  const [waveform, setWaveform] = useState<AudioWaveform | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setErrorState] = useState<Error | null>(null);
-  const { setError } = useError();
-  const api = useApi();
+  const {
+    data: waveform,
+    isLoading: loading,
+    error,
+  } = useTranscriptWaveform(skip ? null : id);
 
-  useEffect(() => {
-    if (!id || !api || skip) {
-      setLoading(false);
-      setErrorState(null);
-      setWaveform(null);
-      return;
-    }
-    setLoading(true);
-    setErrorState(null);
-    api
-      .v1TranscriptGetAudioWaveform({ transcriptId: id })
-      .then((result) => {
-        setWaveform(result);
-        setLoading(false);
-        console.debug("Transcript waveform loaded:", result);
-      })
-      .catch((err) => {
-        setErrorState(err);
-        setLoading(false);
-      });
-  }, [id, api, skip]);
-
-  return { waveform, loading, error };
+  return {
+    waveform: waveform || null,
+    loading,
+    error: error as Error | null,
+  };
 };
 
 export default useWaveform;

www/app/(app)/transcripts/useWebRTC.ts

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
 import Peer from "simple-peer";
 import { useError } from "../../(errors)/errorContext";
-import useApi from "../../lib/useApi";
-import { RtcOffer } from "../../api";
+import { useTranscriptWebRTC } from "../../lib/apiHooks";
+import type { components } from "../../reflector-api";
+type RtcOffer = components["schemas"]["RtcOffer"];
 
 const useWebRTC = (
   stream: MediaStream | null,
@@ -10,10 +11,10 @@ const useWebRTC = (
 ): Peer => {
   const [peer, setPeer] = useState<Peer | null>(null);
   const { setError } = useError();
-  const api = useApi();
+  const { mutateAsync: mutateWebRtcTranscriptAsync } = useTranscriptWebRTC();
 
   useEffect(() => {
-    if (!stream || !transcriptId || !api) {
+    if (!stream || !transcriptId) {
       return;
     }
 
@@ -24,7 +25,7 @@ const useWebRTC = (
     try {
       p = new Peer({ initiator: true, stream: stream });
     } catch (error) {
-      setError(error, "Error creating WebRTC");
+      setError(error as Error, "Error creating WebRTC");
       return;
     }
 
@@ -32,26 +33,31 @@ const useWebRTC = (
       setError(new Error(`WebRTC error: ${err}`));
     });
 
-    p.on("signal", (data: any) => {
-      if (!api) return;
+    p.on("signal", async (data: any) => {
       if ("sdp" in data) {
         const rtcOffer: RtcOffer = {
           sdp: data.sdp,
           type: data.type,
         };
 
-        api
-          .v1TranscriptRecordWebrtc({ transcriptId, requestBody: rtcOffer })
-          .then((answer) => {
-            try {
-              p.signal(answer);
-            } catch (error) {
-              setError(error);
-            }
-          })
-          .catch((error) => {
-            setError(error, "Error loading WebRTCOffer");
+        try {
+          const answer = await mutateWebRtcTranscriptAsync({
+            params: {
+              path: {
+                transcript_id: transcriptId,
+              },
+            },
+            body: rtcOffer,
           });
+
+          try {
+            p.signal(answer);
+          } catch (error) {
+            setError(error as Error);
+          }
+        } catch (error) {
+          setError(error as Error, "Error loading WebRTCOffer");
+        }
       }
     });
 
@@ -63,7 +69,7 @@ const useWebRTC = (
     return () => {
       p.destroy();
     };
-  }, [stream, transcriptId, !api]);
+  }, [stream, transcriptId, mutateWebRtcTranscriptAsync]);
 
   return peer;
 };

www/app/(app)/transcripts/useWebSockets.ts

@@ -1,9 +1,12 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Topic, FinalSummary, Status } from "./webSocketTypes";
 import { useError } from "../../(errors)/errorContext";
-import { DomainContext } from "../../domainContext";
-import { AudioWaveform, GetTranscriptSegmentTopic } from "../../api";
-import useApi from "../../lib/useApi";
+import type { components } from "../../reflector-api";
+type AudioWaveform = components["schemas"]["AudioWaveform"];
+type GetTranscriptSegmentTopic =
+  components["schemas"]["GetTranscriptSegmentTopic"];
+import { useQueryClient } from "@tanstack/react-query";
+import { $api, WEBSOCKET_URL } from "../../lib/apiClient";
 
 export type UseWebSockets = {
   transcriptTextLive: string;
@@ -12,7 +15,7 @@ export type UseWebSockets = {
   title: string;
   topics: Topic[];
   finalSummary: FinalSummary;
-  status: Status;
+  status: Status | null;
   waveform: AudioWaveform | null;
   duration: number | null;
 };
@@ -30,11 +33,10 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   const [finalSummary, setFinalSummary] = useState<FinalSummary>({
     summary: "",
   });
-  const [status, setStatus] = useState<Status>({ value: "" });
+  const [status, setStatus] = useState<Status | null>(null);
   const { setError } = useError();
 
-  const { websocket_url } = useContext(DomainContext);
-  const api = useApi();
+  const queryClient = useQueryClient();
 
   const [accumulatedText, setAccumulatedText] = useState<string>("");
 
@@ -105,6 +107,13 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
             title: "Topic 1: Introduction to Quantum Mechanics",
             transcript:
               "A brief overview of quantum mechanics and its principles.",
+            segments: [
+              {
+                speaker: 1,
+                start: 0,
+                text: "This is the transcription of an example title",
+              },
+            ],
           },
           {
             id: "2",
@@ -315,11 +324,9 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
       }
     };
 
-    if (!transcriptId || !api) return;
+    if (!transcriptId) return;
 
-    api?.v1TranscriptGetWebsocketEvents({ transcriptId }).then((result) => {});
-
-    const url = `${websocket_url}/v1/transcripts/${transcriptId}/events`;
+    const url = `${WEBSOCKET_URL}/v1/transcripts/${transcriptId}/events`;
     let ws = new WebSocket(url);
 
     ws.onopen = () => {
@@ -361,6 +368,16 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
               return [...prevTopics, topic];
             });
             console.debug("TOPIC event:", message.data);
+            // Invalidate topics query to sync with WebSocket data
+            queryClient.invalidateQueries({
+              queryKey: $api.queryOptions(
+                "get",
+                "/v1/transcripts/{transcript_id}/topics",
+                {
+                  params: { path: { transcript_id: transcriptId } },
+                },
+              ).queryKey,
+            });
             break;
 
           case "FINAL_SHORT_SUMMARY":
@@ -370,6 +387,16 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
           case "FINAL_LONG_SUMMARY":
             if (message.data) {
               setFinalSummary(message.data);
+              // Invalidate transcript query to sync summary
+              queryClient.invalidateQueries({
+                queryKey: $api.queryOptions(
+                  "get",
+                  "/v1/transcripts/{transcript_id}",
+                  {
+                    params: { path: { transcript_id: transcriptId } },
+                  },
+                ).queryKey,
+              });
             }
             break;
 
@@ -377,6 +404,16 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
             console.debug("FINAL_TITLE event:", message.data);
             if (message.data) {
               setTitle(message.data.title);
+              // Invalidate transcript query to sync title
+              queryClient.invalidateQueries({
+                queryKey: $api.queryOptions(
+                  "get",
+                  "/v1/transcripts/{transcript_id}",
+                  {
+                    params: { path: { transcript_id: transcriptId } },
+                  },
+                ).queryKey,
+              });
             }
             break;
 
@@ -434,6 +471,11 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
           break;
         case 1001: // Navigate away
           break;
+        case 1006: // Closed by client Chrome
+          console.warn(
+            "WebSocket closed by client, likely duplicated connection in react dev mode",
+          );
+          break;
         default:
           setError(
             new Error(`WebSocket closed unexpectedly with code: ${event.code}`),
@@ -450,7 +492,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
     return () => {
       ws.close();
     };
-  }, [transcriptId, !api]);
+  }, [transcriptId]);
 
   return {
     transcriptTextLive,

www/app/(app)/transcripts/webSocketTypes.ts

@@ -1,4 +1,7 @@
-import { GetTranscriptTopic } from "../../api";
+import type { components } from "../../reflector-api";
+import type { TranscriptStatus } from "../../lib/transcript";
+
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
 
 export type Topic = GetTranscriptTopic;
 
@@ -11,7 +14,7 @@ export type FinalSummary = {
 };
 
 export type Status = {
-  value: string;
+  value: TranscriptStatus;
 };
 
 export type TranslatedTopic = {

www/app/(auth)/userInfo.tsx

@@ -1,18 +1,21 @@
 "use client";
-import { signOut, signIn } from "next-auth/react";
-import useSessionStatus from "../lib/useSessionStatus";
+
 import { Spinner, Link } from "@chakra-ui/react";
+import { useAuth } from "../lib/AuthProvider";
 
 export default function UserInfo() {
-  const { isLoading, isAuthenticated } = useSessionStatus();
-
+  const auth = useAuth();
+  const status = auth.status;
+  const isLoading = status === "loading";
+  const isAuthenticated = status === "authenticated";
+  const isRefreshing = status === "refreshing";
   return isLoading ? (
     <Spinner size="xs" className="mx-3" />
-  ) : !isAuthenticated ? (
+  ) : !isAuthenticated && !isRefreshing ? (
     <Link
       href="/"
       className="font-light px-2"
-      onClick={() => signIn("authentik")}
+      onClick={() => auth.signIn("authentik")}
     >
       Log in
     </Link>
@@ -20,7 +23,7 @@ export default function UserInfo() {
     <Link
       href="#"
       className="font-light px-2"
-      onClick={() => signOut({ callbackUrl: "/" })}
+      onClick={() => auth.signOut({ callbackUrl: "/" })}
     >
       Log out
     </Link>

www/app/[roomName]/page.tsx

@@ -1,25 +1,28 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, use } from "react";
 import { Box, Spinner } from "@chakra-ui/react";
 import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import { notFound } from "next/navigation";
-import useSessionStatus from "../lib/useSessionStatus";
+import { useAuth } from "../lib/AuthProvider";
 import VideoPlatformEmbed from "../lib/videoPlatforms/VideoPlatformEmbed";
 
 export type RoomDetails = {
-  params: {
+  params: Promise<{
     roomName: string;
-  };
+  }>;
 };
 
 export default function Room(details: RoomDetails) {
   const [platformReady, setPlatformReady] = useState(false);
-  const roomName = details.params.roomName;
+  const params = use(details.params);
+  const roomName = params.roomName;
   const meeting = useRoomMeeting(roomName);
   const router = useRouter();
-  const { isLoading, isAuthenticated } = useSessionStatus();
+  const status = useAuth().status;
+  const isAuthenticated = status === "authenticated";
+  const isLoading = status === "loading" || meeting.loading;
 
   const handleLeave = useCallback(() => {
     router.push("/browse");

www/app/[roomName]/useRoomMeeting.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
 import { useError } from "../(errors)/errorContext";
-import { Meeting } from "../api";
+import type { components } from "../reflector-api";
 import { shouldShowError } from "../lib/errorUtils";
-import useApi from "../lib/useApi";
+
+type Meeting = components["schemas"]["Meeting"];
+import { useRoomsCreateMeeting } from "../lib/apiHooks";
 import { notFound } from "next/navigation";
 
 type ErrorMeeting = {
@@ -30,27 +32,25 @@ const useRoomMeeting = (
   roomName: string | null | undefined,
 ): ErrorMeeting | LoadingMeeting | SuccessMeeting => {
   const [response, setResponse] = useState<Meeting | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setErrorState] = useState<Error | null>(null);
   const [reload, setReload] = useState(0);
   const { setError } = useError();
-  const api = useApi();
+  const createMeetingMutation = useRoomsCreateMeeting();
   const reloadHandler = () => setReload((prev) => prev + 1);
 
   useEffect(() => {
-    if (!roomName || !api) return;
+    if (!roomName) return;
 
-    if (!response) {
-      setLoading(true);
-    }
-
-    api
-      .v1RoomsCreateMeeting({ roomName })
-      .then((result) => {
+    const createMeeting = async () => {
+      try {
+        const result = await createMeetingMutation.mutateAsync({
+          params: {
+            path: {
+              room_name: roomName,
+            },
+          },
+        });
         setResponse(result);
-        setLoading(false);
-      })
-      .catch((error) => {
+      } catch (error: any) {
         const shouldShowHuman = shouldShowError(error);
         if (shouldShowHuman && error.status !== 404) {
           setError(
@@ -60,9 +60,14 @@ const useRoomMeeting = (
         } else {
           setError(error);
         }
-        setErrorState(error);
-      });
-  }, [roomName, !api, reload]);
+      }
+    };
+
+    createMeeting();
+  }, [roomName, reload]);
+
+  const loading = createMeetingMutation.isPending && !response;
+  const error = createMeetingMutation.error as Error | null;
 
   return { response, loading, error, reload: reloadHandler } as
     | ErrorMeeting

www/app/api/OpenApi.ts

@@ -1,37 +0,0 @@
-import type { BaseHttpRequest } from "./core/BaseHttpRequest";
-import type { OpenAPIConfig } from "./core/OpenAPI";
-import { Interceptors } from "./core/OpenAPI";
-import { AxiosHttpRequest } from "./core/AxiosHttpRequest";
-
-import { DefaultService } from "./services.gen";
-
-type HttpRequestConstructor = new (config: OpenAPIConfig) => BaseHttpRequest;
-
-export class OpenApi {
-  public readonly default: DefaultService;
-
-  public readonly request: BaseHttpRequest;
-
-  constructor(
-    config?: Partial<OpenAPIConfig>,
-    HttpRequest: HttpRequestConstructor = AxiosHttpRequest,
-  ) {
-    this.request = new HttpRequest({
-      BASE: config?.BASE ?? "",
-      VERSION: config?.VERSION ?? "0.1.0",
-      WITH_CREDENTIALS: config?.WITH_CREDENTIALS ?? false,
-      CREDENTIALS: config?.CREDENTIALS ?? "include",
-      TOKEN: config?.TOKEN,
-      USERNAME: config?.USERNAME,
-      PASSWORD: config?.PASSWORD,
-      HEADERS: config?.HEADERS,
-      ENCODE_PATH: config?.ENCODE_PATH,
-      interceptors: {
-        request: config?.interceptors?.request ?? new Interceptors(),
-        response: config?.interceptors?.response ?? new Interceptors(),
-      },
-    });
-
-    this.default = new DefaultService(this.request);
-  }
-}

www/app/api/auth/[...nextauth]/route.ts

@@ -1,9 +1,6 @@
-// NextAuth route handler for Authentik
-// Refresh rotation has been taken from https://next-auth.js.org/v3/tutorials/refresh-token-rotation even if we are using 4.x
-
 import NextAuth from "next-auth";
-import { authOptions } from "../../../lib/auth";
+import { authOptions } from "../../../lib/authBackend";
 
-const handler = NextAuth(authOptions);
+const handler = NextAuth(authOptions());
 
 export { handler as GET, handler as POST };

www/app/api/core/ApiError.ts

@@ -1,25 +0,0 @@
-import type { ApiRequestOptions } from "./ApiRequestOptions";
-import type { ApiResult } from "./ApiResult";
-
-export class ApiError extends Error {
-  public readonly url: string;
-  public readonly status: number;
-  public readonly statusText: string;
-  public readonly body: unknown;
-  public readonly request: ApiRequestOptions;
-
-  constructor(
-    request: ApiRequestOptions,
-    response: ApiResult,
-    message: string,
-  ) {
-    super(message);
-
-    this.name = "ApiError";
-    this.url = response.url;
-    this.status = response.status;
-    this.statusText = response.statusText;
-    this.body = response.body;
-    this.request = request;
-  }
-}

www/app/api/core/ApiRequestOptions.ts

@@ -1,21 +0,0 @@
-export type ApiRequestOptions<T = unknown> = {
-  readonly method:
-    | "GET"
-    | "PUT"
-    | "POST"
-    | "DELETE"
-    | "OPTIONS"
-    | "HEAD"
-    | "PATCH";
-  readonly url: string;
-  readonly path?: Record<string, unknown>;
-  readonly cookies?: Record<string, unknown>;
-  readonly headers?: Record<string, unknown>;
-  readonly query?: Record<string, unknown>;
-  readonly formData?: Record<string, unknown>;
-  readonly body?: any;
-  readonly mediaType?: string;
-  readonly responseHeader?: string;
-  readonly responseTransformer?: (data: unknown) => Promise<T>;
-  readonly errors?: Record<number | string, string>;
-};

www/app/api/core/ApiResult.ts

@@ -1,7 +0,0 @@
-export type ApiResult<TData = any> = {
-  readonly body: TData;
-  readonly ok: boolean;
-  readonly status: number;
-  readonly statusText: string;
-  readonly url: string;
-};

www/app/api/core/AxiosHttpRequest.ts

@@ -1,23 +0,0 @@
-import type { ApiRequestOptions } from "./ApiRequestOptions";
-import { BaseHttpRequest } from "./BaseHttpRequest";
-import type { CancelablePromise } from "./CancelablePromise";
-import type { OpenAPIConfig } from "./OpenAPI";
-import { request as __request } from "./request";
-
-export class AxiosHttpRequest extends BaseHttpRequest {
-  constructor(config: OpenAPIConfig) {
-    super(config);
-  }
-
-  /**
-   * Request method
-   * @param options The request options from the service
-   * @returns CancelablePromise<T>
-   * @throws ApiError
-   */
-  public override request<T>(
-    options: ApiRequestOptions<T>,
-  ): CancelablePromise<T> {
-    return __request(this.config, options);
-  }
-}

www/app/api/core/BaseHttpRequest.ts

@@ -1,11 +0,0 @@
-import type { ApiRequestOptions } from "./ApiRequestOptions";
-import type { CancelablePromise } from "./CancelablePromise";
-import type { OpenAPIConfig } from "./OpenAPI";
-
-export abstract class BaseHttpRequest {
-  constructor(public readonly config: OpenAPIConfig) {}
-
-  public abstract request<T>(
-    options: ApiRequestOptions<T>,
-  ): CancelablePromise<T>;
-}

www/app/api/core/CancelablePromise.ts

@@ -1,126 +0,0 @@
-export class CancelError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "CancelError";
-  }
-
-  public get isCancelled(): boolean {
-    return true;
-  }
-}
-
-export interface OnCancel {
-  readonly isResolved: boolean;
-  readonly isRejected: boolean;
-  readonly isCancelled: boolean;
-
-  (cancelHandler: () => void): void;
-}
-
-export class CancelablePromise<T> implements Promise<T> {
-  private _isResolved: boolean;
-  private _isRejected: boolean;
-  private _isCancelled: boolean;
-  readonly cancelHandlers: (() => void)[];
-  readonly promise: Promise<T>;
-  private _resolve?: (value: T | PromiseLike<T>) => void;
-  private _reject?: (reason?: unknown) => void;
-
-  constructor(
-    executor: (
-      resolve: (value: T | PromiseLike<T>) => void,
-      reject: (reason?: unknown) => void,
-      onCancel: OnCancel,
-    ) => void,
-  ) {
-    this._isResolved = false;
-    this._isRejected = false;
-    this._isCancelled = false;
-    this.cancelHandlers = [];
-    this.promise = new Promise<T>((resolve, reject) => {
-      this._resolve = resolve;
-      this._reject = reject;
-
-      const onResolve = (value: T | PromiseLike<T>): void => {
-        if (this._isResolved || this._isRejected || this._isCancelled) {
-          return;
-        }
-        this._isResolved = true;
-        if (this._resolve) this._resolve(value);
-      };
-
-      const onReject = (reason?: unknown): void => {
-        if (this._isResolved || this._isRejected || this._isCancelled) {
-          return;
-        }
-        this._isRejected = true;
-        if (this._reject) this._reject(reason);
-      };
-
-      const onCancel = (cancelHandler: () => void): void => {
-        if (this._isResolved || this._isRejected || this._isCancelled) {
-          return;
-        }
-        this.cancelHandlers.push(cancelHandler);
-      };
-
-      Object.defineProperty(onCancel, "isResolved", {
-        get: (): boolean => this._isResolved,
-      });
-
-      Object.defineProperty(onCancel, "isRejected", {
-        get: (): boolean => this._isRejected,
-      });
-
-      Object.defineProperty(onCancel, "isCancelled", {
-        get: (): boolean => this._isCancelled,
-      });
-
-      return executor(onResolve, onReject, onCancel as OnCancel);
-    });
-  }
-
-  get [Symbol.toStringTag]() {
-    return "Cancellable Promise";
-  }
-
-  public then<TResult1 = T, TResult2 = never>(
-    onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
-    onRejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null,
-  ): Promise<TResult1 | TResult2> {
-    return this.promise.then(onFulfilled, onRejected);
-  }
-
-  public catch<TResult = never>(
-    onRejected?: ((reason: unknown) => TResult | PromiseLike<TResult>) | null,
-  ): Promise<T | TResult> {
-    return this.promise.catch(onRejected);
-  }
-
-  public finally(onFinally?: (() => void) | null): Promise<T> {
-    return this.promise.finally(onFinally);
-  }
-
-  public cancel(): void {
-    if (this._isResolved || this._isRejected || this._isCancelled) {
-      return;
-    }
-    this._isCancelled = true;
-    if (this.cancelHandlers.length) {
-      try {
-        for (const cancelHandler of this.cancelHandlers) {
-          cancelHandler();
-        }
-      } catch (error) {
-        console.warn("Cancellation threw an error", error);
-        return;
-      }
-    }
-    this.cancelHandlers.length = 0;
-    if (this._reject) this._reject(new CancelError("Request aborted"));
-  }
-
-  public get isCancelled(): boolean {
-    return this._isCancelled;
-  }
-}

www/app/api/core/OpenAPI.ts

@@ -1,57 +0,0 @@
-import type { AxiosRequestConfig, AxiosResponse } from "axios";
-import type { ApiRequestOptions } from "./ApiRequestOptions";
-
-type Headers = Record<string, string>;
-type Middleware<T> = (value: T) => T | Promise<T>;
-type Resolver<T> = (options: ApiRequestOptions<T>) => Promise<T>;
-
-export class Interceptors<T> {
-  _fns: Middleware<T>[];
-
-  constructor() {
-    this._fns = [];
-  }
-
-  eject(fn: Middleware<T>): void {
-    const index = this._fns.indexOf(fn);
-    if (index !== -1) {
-      this._fns = [...this._fns.slice(0, index), ...this._fns.slice(index + 1)];
-    }
-  }
-
-  use(fn: Middleware<T>): void {
-    this._fns = [...this._fns, fn];
-  }
-}
-
-export type OpenAPIConfig = {
-  BASE: string;
-  CREDENTIALS: "include" | "omit" | "same-origin";
-  ENCODE_PATH?: ((path: string) => string) | undefined;
-  HEADERS?: Headers | Resolver<Headers> | undefined;
-  PASSWORD?: string | Resolver<string> | undefined;
-  TOKEN?: string | Resolver<string> | undefined;
-  USERNAME?: string | Resolver<string> | undefined;
-  VERSION: string;
-  WITH_CREDENTIALS: boolean;
-  interceptors: {
-    request: Interceptors<AxiosRequestConfig>;
-    response: Interceptors<AxiosResponse>;
-  };
-};
-
-export const OpenAPI: OpenAPIConfig = {
-  BASE: "",
-  CREDENTIALS: "include",
-  ENCODE_PATH: undefined,
-  HEADERS: undefined,
-  PASSWORD: undefined,
-  TOKEN: undefined,
-  USERNAME: undefined,
-  VERSION: "0.1.0",
-  WITH_CREDENTIALS: false,
-  interceptors: {
-    request: new Interceptors(),
-    response: new Interceptors(),
-  },
-};

www/app/api/core/request.ts

@@ -1,387 +0,0 @@
-import axios from "axios";
-import type {
-  AxiosError,
-  AxiosRequestConfig,
-  AxiosResponse,
-  AxiosInstance,
-} from "axios";
-
-import { ApiError } from "./ApiError";
-import type { ApiRequestOptions } from "./ApiRequestOptions";
-import type { ApiResult } from "./ApiResult";
-import { CancelablePromise } from "./CancelablePromise";
-import type { OnCancel } from "./CancelablePromise";
-import type { OpenAPIConfig } from "./OpenAPI";
-
-export const isString = (value: unknown): value is string => {
-  return typeof value === "string";
-};
-
-export const isStringWithValue = (value: unknown): value is string => {
-  return isString(value) && value !== "";
-};
-
-export const isBlob = (value: any): value is Blob => {
-  return value instanceof Blob;
-};
-
-export const isFormData = (value: unknown): value is FormData => {
-  return value instanceof FormData;
-};
-
-export const isSuccess = (status: number): boolean => {
-  return status >= 200 && status < 300;
-};
-
-export const base64 = (str: string): string => {
-  try {
-    return btoa(str);
-  } catch (err) {
-    // @ts-ignore
-    return Buffer.from(str).toString("base64");
-  }
-};
-
-export const getQueryString = (params: Record<string, unknown>): string => {
-  const qs: string[] = [];
-
-  const append = (key: string, value: unknown) => {
-    qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
-  };
-
-  const encodePair = (key: string, value: unknown) => {
-    if (value === undefined || value === null) {
-      return;
-    }
-
-    if (value instanceof Date) {
-      append(key, value.toISOString());
-    } else if (Array.isArray(value)) {
-      value.forEach((v) => encodePair(key, v));
-    } else if (typeof value === "object") {
-      Object.entries(value).forEach(([k, v]) => encodePair(`${key}[${k}]`, v));
-    } else {
-      append(key, value);
-    }
-  };
-
-  Object.entries(params).forEach(([key, value]) => encodePair(key, value));
-
-  return qs.length ? `?${qs.join("&")}` : "";
-};
-
-const getUrl = (config: OpenAPIConfig, options: ApiRequestOptions): string => {
-  const encoder = config.ENCODE_PATH || encodeURI;
-
-  const path = options.url
-    .replace("{api-version}", config.VERSION)
-    .replace(/{(.*?)}/g, (substring: string, group: string) => {
-      if (options.path?.hasOwnProperty(group)) {
-        return encoder(String(options.path[group]));
-      }
-      return substring;
-    });
-
-  const url = config.BASE + path;
-  return options.query ? url + getQueryString(options.query) : url;
-};
-
-export const getFormData = (
-  options: ApiRequestOptions,
-): FormData | undefined => {
-  if (options.formData) {
-    const formData = new FormData();
-
-    const process = (key: string, value: unknown) => {
-      if (isString(value) || isBlob(value)) {
-        formData.append(key, value);
-      } else {
-        formData.append(key, JSON.stringify(value));
-      }
-    };
-
-    Object.entries(options.formData)
-      .filter(([, value]) => value !== undefined && value !== null)
-      .forEach(([key, value]) => {
-        if (Array.isArray(value)) {
-          value.forEach((v) => process(key, v));
-        } else {
-          process(key, value);
-        }
-      });
-
-    return formData;
-  }
-  return undefined;
-};
-
-type Resolver<T> = (options: ApiRequestOptions<T>) => Promise<T>;
-
-export const resolve = async <T>(
-  options: ApiRequestOptions<T>,
-  resolver?: T | Resolver<T>,
-): Promise<T | undefined> => {
-  if (typeof resolver === "function") {
-    return (resolver as Resolver<T>)(options);
-  }
-  return resolver;
-};
-
-export const getHeaders = async <T>(
-  config: OpenAPIConfig,
-  options: ApiRequestOptions<T>,
-): Promise<Record<string, string>> => {
-  const [token, username, password, additionalHeaders] = await Promise.all([
-    // @ts-ignore
-    resolve(options, config.TOKEN),
-    // @ts-ignore
-    resolve(options, config.USERNAME),
-    // @ts-ignore
-    resolve(options, config.PASSWORD),
-    // @ts-ignore
-    resolve(options, config.HEADERS),
-  ]);
-
-  const headers = Object.entries({
-    Accept: "application/json",
-    ...additionalHeaders,
-    ...options.headers,
-  })
-    .filter(([, value]) => value !== undefined && value !== null)
-    .reduce(
-      (headers, [key, value]) => ({
-        ...headers,
-        [key]: String(value),
-      }),
-      {} as Record<string, string>,
-    );
-
-  if (isStringWithValue(token)) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-
-  if (isStringWithValue(username) && isStringWithValue(password)) {
-    const credentials = base64(`${username}:${password}`);
-    headers["Authorization"] = `Basic ${credentials}`;
-  }
-
-  if (options.body !== undefined) {
-    if (options.mediaType) {
-      headers["Content-Type"] = options.mediaType;
-    } else if (isBlob(options.body)) {
-      headers["Content-Type"] = options.body.type || "application/octet-stream";
-    } else if (isString(options.body)) {
-      headers["Content-Type"] = "text/plain";
-    } else if (!isFormData(options.body)) {
-      headers["Content-Type"] = "application/json";
-    }
-  } else if (options.formData !== undefined) {
-    if (options.mediaType) {
-      headers["Content-Type"] = options.mediaType;
-    }
-  }
-
-  return headers;
-};
-
-export const getRequestBody = (options: ApiRequestOptions): unknown => {
-  if (options.body) {
-    return options.body;
-  }
-  return undefined;
-};
-
-export const sendRequest = async <T>(
-  config: OpenAPIConfig,
-  options: ApiRequestOptions<T>,
-  url: string,
-  body: unknown,
-  formData: FormData | undefined,
-  headers: Record<string, string>,
-  onCancel: OnCancel,
-  axiosClient: AxiosInstance,
-): Promise<AxiosResponse<T>> => {
-  const controller = new AbortController();
-
-  let requestConfig: AxiosRequestConfig = {
-    data: body ?? formData,
-    headers,
-    method: options.method,
-    signal: controller.signal,
-    url,
-    withCredentials: config.WITH_CREDENTIALS,
-  };
-
-  onCancel(() => controller.abort());
-
-  for (const fn of config.interceptors.request._fns) {
-    requestConfig = await fn(requestConfig);
-  }
-
-  try {
-    return await axiosClient.request(requestConfig);
-  } catch (error) {
-    const axiosError = error as AxiosError<T>;
-    if (axiosError.response) {
-      return axiosError.response;
-    }
-    throw error;
-  }
-};
-
-export const getResponseHeader = (
-  response: AxiosResponse<unknown>,
-  responseHeader?: string,
-): string | undefined => {
-  if (responseHeader) {
-    const content = response.headers[responseHeader];
-    if (isString(content)) {
-      return content;
-    }
-  }
-  return undefined;
-};
-
-export const getResponseBody = (response: AxiosResponse<unknown>): unknown => {
-  if (response.status !== 204) {
-    return response.data;
-  }
-  return undefined;
-};
-
-export const catchErrorCodes = (
-  options: ApiRequestOptions,
-  result: ApiResult,
-): void => {
-  const errors: Record<number, string> = {
-    400: "Bad Request",
-    401: "Unauthorized",
-    402: "Payment Required",
-    403: "Forbidden",
-    404: "Not Found",
-    405: "Method Not Allowed",
-    406: "Not Acceptable",
-    407: "Proxy Authentication Required",
-    408: "Request Timeout",
-    409: "Conflict",
-    410: "Gone",
-    411: "Length Required",
-    412: "Precondition Failed",
-    413: "Payload Too Large",
-    414: "URI Too Long",
-    415: "Unsupported Media Type",
-    416: "Range Not Satisfiable",
-    417: "Expectation Failed",
-    418: "Im a teapot",
-    421: "Misdirected Request",
-    422: "Unprocessable Content",
-    423: "Locked",
-    424: "Failed Dependency",
-    425: "Too Early",
-    426: "Upgrade Required",
-    428: "Precondition Required",
-    429: "Too Many Requests",
-    431: "Request Header Fields Too Large",
-    451: "Unavailable For Legal Reasons",
-    500: "Internal Server Error",
-    501: "Not Implemented",
-    502: "Bad Gateway",
-    503: "Service Unavailable",
-    504: "Gateway Timeout",
-    505: "HTTP Version Not Supported",
-    506: "Variant Also Negotiates",
-    507: "Insufficient Storage",
-    508: "Loop Detected",
-    510: "Not Extended",
-    511: "Network Authentication Required",
-    ...options.errors,
-  };
-
-  const error = errors[result.status];
-  if (error) {
-    throw new ApiError(options, result, error);
-  }
-
-  if (!result.ok) {
-    const errorStatus = result.status ?? "unknown";
-    const errorStatusText = result.statusText ?? "unknown";
-    const errorBody = (() => {
-      try {
-        return JSON.stringify(result.body, null, 2);
-      } catch (e) {
-        return undefined;
-      }
-    })();
-
-    throw new ApiError(
-      options,
-      result,
-      `Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`,
-    );
-  }
-};
-
-/**
- * Request method
- * @param config The OpenAPI configuration object
- * @param options The request options from the service
- * @param axiosClient The axios client instance to use
- * @returns CancelablePromise<T>
- * @throws ApiError
- */
-export const request = <T>(
-  config: OpenAPIConfig,
-  options: ApiRequestOptions<T>,
-  axiosClient: AxiosInstance = axios,
-): CancelablePromise<T> => {
-  return new CancelablePromise(async (resolve, reject, onCancel) => {
-    try {
-      const url = getUrl(config, options);
-      const formData = getFormData(options);
-      const body = getRequestBody(options);
-      const headers = await getHeaders(config, options);
-
-      if (!onCancel.isCancelled) {
-        let response = await sendRequest<T>(
-          config,
-          options,
-          url,
-          body,
-          formData,
-          headers,
-          onCancel,
-          axiosClient,
-        );
-
-        for (const fn of config.interceptors.response._fns) {
-          response = await fn(response);
-        }
-
-        const responseBody = getResponseBody(response);
-        const responseHeader = getResponseHeader(
-          response,
-          options.responseHeader,
-        );
-
-        let transformedBody = responseBody;
-        if (options.responseTransformer && isSuccess(response.status)) {
-          transformedBody = await options.responseTransformer(responseBody);
-        }
-
-        const result: ApiResult = {
-          url,
-          ok: isSuccess(response.status),
-          status: response.status,
-          statusText: response.statusText,
-          body: responseHeader ?? transformedBody,
-        };
-
-        catchErrorCodes(options, result);
-
-        resolve(result.body);
-      }
-    } catch (error) {
-      reject(error);
-    }
-  });
-};

www/app/api/index.ts

@@ -1,9 +0,0 @@
-// This file is auto-generated by @hey-api/openapi-ts
-export { OpenApi } from "./OpenApi";
-export { ApiError } from "./core/ApiError";
-export { BaseHttpRequest } from "./core/BaseHttpRequest";
-export { CancelablePromise, CancelError } from "./core/CancelablePromise";
-export { OpenAPI, type OpenAPIConfig } from "./core/OpenAPI";
-export * from "./schemas.gen";
-export * from "./services.gen";
-export * from "./types.gen";

www/app/api/urls.ts

@@ -1,2 +1 @@
-// TODO better connection with generated schema; it's duplication
 export const RECORD_A_MEETING_URL = "/transcripts/new" as const;

www/app/domainContext.tsx

@@ -1,49 +0,0 @@
-"use client";
-import { createContext, useContext, useEffect, useState } from "react";
-import { DomainConfig } from "./lib/edgeConfig";
-
-type DomainContextType = Omit<DomainConfig, "auth_callback_url">;
-
-export const DomainContext = createContext<DomainContextType>({
-  features: {
-    requireLogin: false,
-    privacy: true,
-    browse: false,
-    sendToZulip: false,
-  },
-  api_url: "",
-  websocket_url: "",
-});
-
-export const DomainContextProvider = ({
-  config,
-  children,
-}: {
-  config: DomainConfig;
-  children: any;
-}) => {
-  const [context, setContext] = useState<DomainContextType>();
-
-  useEffect(() => {
-    if (!config) return;
-    const { auth_callback_url, ...others } = config;
-    setContext(others);
-  }, [config]);
-
-  if (!context) return;
-
-  return (
-    <DomainContext.Provider value={context}>{children}</DomainContext.Provider>
-  );
-};
-
-// Get feature config client-side with
-export const featureEnabled = (
-  featureName: "requireLogin" | "privacy" | "browse" | "sendToZulip",
-) => {
-  const context = useContext(DomainContext);
-
-  return context.features[featureName] as boolean | undefined;
-};
-
-// Get config server-side (out of react) : see lib/edgeConfig.

www/app/layout.tsx

@@ -1,14 +1,12 @@
 import "./styles/globals.scss";
 import { Metadata, Viewport } from "next";
 import { Poppins } from "next/font/google";
-import SessionProvider from "./lib/SessionProvider";
 import { ErrorProvider } from "./(errors)/errorContext";
 import ErrorMessage from "./(errors)/errorMessage";
-import { DomainContextProvider } from "./domainContext";
 import { RecordingConsentProvider } from "./recordingConsentContext";
-import { getConfig } from "./lib/edgeConfig";
 import { ErrorBoundary } from "@sentry/nextjs";
 import { Providers } from "./providers";
+import { assertExistsAndNonEmptyString } from "./lib/utils";
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -23,8 +21,13 @@ export const viewport: Viewport = {
   maximumScale: 1,
 };
 
+const NEXT_PUBLIC_SITE_URL = assertExistsAndNonEmptyString(
+  process.env.NEXT_PUBLIC_SITE_URL,
+  "NEXT_PUBLIC_SITE_URL required",
+);
+
 export const metadata: Metadata = {
-  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL!),
+  metadataBase: new URL(NEXT_PUBLIC_SITE_URL),
   title: {
     template: "%s – Reflector",
     default: "Reflector - AI-Powered Meeting Transcriptions by Monadical",
@@ -69,23 +72,17 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const config = await getConfig();
-
   return (
     <html lang="en" className={poppins.className} suppressHydrationWarning>
       <body className={"h-[100svh] w-[100svw] overflow-x-hidden relative"}>
-        <SessionProvider>
-          <DomainContextProvider config={config}>
-            <RecordingConsentProvider>
-              <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
-                <ErrorProvider>
-                  <ErrorMessage />
-                  <Providers>{children}</Providers>
-                </ErrorProvider>
-              </ErrorBoundary>
-            </RecordingConsentProvider>
-          </DomainContextProvider>
-        </SessionProvider>
+        <RecordingConsentProvider>
+          <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
+            <ErrorProvider>
+              <ErrorMessage />
+              <Providers>{children}</Providers>
+            </ErrorProvider>
+          </ErrorBoundary>
+        </RecordingConsentProvider>
       </body>
     </html>
   );

www/app/lib/AuthProvider.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import { useSession as useNextAuthSession } from "next-auth/react";
+import { signOut, signIn } from "next-auth/react";
+import { configureApiAuth } from "./apiClient";
+import { assertCustomSession, CustomSession } from "./types";
+import { Session } from "next-auth";
+import { SessionAutoRefresh } from "./SessionAutoRefresh";
+import { REFRESH_ACCESS_TOKEN_ERROR } from "./auth";
+import { assertExists } from "./utils";
+import { featureEnabled } from "./features";
+
+type AuthContextType = (
+  | { status: "loading" }
+  | { status: "refreshing"; user: CustomSession["user"] }
+  | { status: "unauthenticated"; error?: string }
+  | {
+      status: "authenticated";
+      accessToken: string;
+      accessTokenExpires: number;
+      user: CustomSession["user"];
+    }
+) & {
+  update: () => Promise<Session | null>;
+  signIn: typeof signIn;
+  signOut: typeof signOut;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+const isAuthEnabled = featureEnabled("requireLogin");
+
+const noopAuthContext: AuthContextType = {
+  status: "unauthenticated",
+  update: async () => {
+    return null;
+  },
+  signIn: async () => {
+    throw new Error("signIn not supposed to be called");
+  },
+  signOut: async () => {
+    throw new Error("signOut not supposed to be called");
+  },
+};
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const { data: session, status, update } = useNextAuthSession();
+
+  const contextValue: AuthContextType = isAuthEnabled
+    ? {
+        ...(() => {
+          switch (status) {
+            case "loading": {
+              const sessionIsHere = !!session;
+              // actually exists sometimes; nextAuth types are something else
+              switch (sessionIsHere as boolean) {
+                case false: {
+                  return { status };
+                }
+                case true: {
+                  return {
+                    status: "refreshing" as const,
+                    user: assertCustomSession(
+                      assertExists(session as unknown as Session),
+                    ).user,
+                  };
+                }
+                default: {
+                  throw new Error("unreachable");
+                }
+              }
+            }
+            case "authenticated": {
+              const customSession = assertCustomSession(session);
+              if (customSession?.error === REFRESH_ACCESS_TOKEN_ERROR) {
+                // token had expired but next auth still returns "authenticated" so show user unauthenticated state
+                return {
+                  status: "unauthenticated" as const,
+                };
+              } else if (customSession?.accessToken) {
+                return {
+                  status,
+                  accessToken: customSession.accessToken,
+                  accessTokenExpires: customSession.accessTokenExpires,
+                  user: customSession.user,
+                };
+              } else {
+                console.warn(
+                  "illegal state: authenticated but have no session/or access token. ignoring",
+                );
+                return { status: "unauthenticated" as const };
+              }
+            }
+            case "unauthenticated": {
+              return { status: "unauthenticated" as const };
+            }
+            default: {
+              const _: never = status;
+              throw new Error("unreachable");
+            }
+          }
+        })(),
+        update,
+        signIn,
+        signOut,
+      }
+    : noopAuthContext;
+
+  // not useEffect, we need it ASAP
+  // apparently, still no guarantee this code runs before mutations are fired
+  configureApiAuth(
+    contextValue.status === "authenticated"
+      ? contextValue.accessToken
+      : contextValue.status === "loading"
+        ? undefined
+        : null,
+  );
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      <SessionAutoRefresh>{children}</SessionAutoRefresh>
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

www/app/lib/SessionAutoRefresh.tsx

@@ -1,5 +1,5 @@
 /**
- * This is a custom hook that automatically refreshes the session when the access token is about to expire.
+ * This is a custom provider that automatically refreshes the session when the access token is about to expire.
  * When communicating with the reflector API, we need to ensure that the access token is always valid.
  *
  * We could have implemented that as an interceptor on the API client, but not everything is using the
@@ -7,30 +7,35 @@
  */
 "use client";
 
-import { useSession } from "next-auth/react";
 import { useEffect } from "react";
-import { CustomSession } from "./types";
+import { useAuth } from "./AuthProvider";
+import { shouldRefreshToken } from "./auth";
 
-export function SessionAutoRefresh({
-  children,
-  refreshInterval = 20 /* seconds */,
-}) {
-  const { data: session, update } = useSession();
-  const customSession = session as CustomSession;
-  const accessTokenExpires = customSession?.accessTokenExpires;
+export function SessionAutoRefresh({ children }) {
+  const auth = useAuth();
+
+  const accessTokenExpires =
+    auth.status === "authenticated" ? auth.accessTokenExpires : null;
 
   useEffect(() => {
+    // technical value for how often the setInterval will be polling news - not too fast (no spam in case of errors)
+    // and not too slow (debuggable)
+    const INTERVAL_REFRESH_MS = 5000;
     const interval = setInterval(() => {
-      if (accessTokenExpires) {
-        const timeLeft = accessTokenExpires - Date.now();
-        if (timeLeft < refreshInterval * 1000) {
-          update();
-        }
+      if (accessTokenExpires === null) return;
+      if (shouldRefreshToken(accessTokenExpires)) {
+        auth
+          .update()
+          .then(() => {})
+          .catch((e) => {
+            // note: 401 won't be considered error here
+            console.error("error refreshing auth token", e);
+          });
       }
-    }, refreshInterval * 1000);
+    }, INTERVAL_REFRESH_MS);
 
     return () => clearInterval(interval);
-  }, [accessTokenExpires, refreshInterval, update]);
+  }, [accessTokenExpires, auth.update]);
 
   return children;
 }

www/app/lib/SessionProvider.tsx

@@ -1,11 +0,0 @@
-"use client";
-import { SessionProvider as SessionProviderNextAuth } from "next-auth/react";
-import { SessionAutoRefresh } from "./SessionAutoRefresh";
-
-export default function SessionProvider({ children }) {
-  return (
-    <SessionProviderNextAuth>
-      <SessionAutoRefresh>{children}</SessionAutoRefresh>
-    </SessionProviderNextAuth>
-  );
-}

www/app/lib/__tests__/redisTokenCache.test.ts

@@ -0,0 +1,85 @@
+import {
+  getTokenCache,
+  setTokenCache,
+  deleteTokenCache,
+  TokenCacheEntry,
+  KV,
+} from "../redisTokenCache";
+
+const mockKV: KV & {
+  clear: () => void;
+} = (() => {
+  const data = new Map<string, string>();
+  return {
+    async get(key: string): Promise<string | null> {
+      return data.get(key) || null;
+    },
+
+    async setex(key: string, seconds_: number, value: string): Promise<"OK"> {
+      data.set(key, value);
+      return "OK";
+    },
+
+    async del(key: string): Promise<number> {
+      const existed = data.has(key);
+      data.delete(key);
+      return existed ? 1 : 0;
+    },
+
+    clear() {
+      data.clear();
+    },
+  };
+})();
+
+describe("Redis Token Cache", () => {
+  beforeEach(() => {
+    mockKV.clear();
+  });
+
+  test("basic write/read - value written equals value read", async () => {
+    const testKey = "token:test-user-123";
+    const testValue: TokenCacheEntry = {
+      token: {
+        sub: "test-user-123",
+        name: "Test User",
+        email: "test@example.com",
+        accessToken: "access-token-123",
+        accessTokenExpires: Date.now() + 3600000, // 1 hour from now
+        refreshToken: "refresh-token-456",
+      },
+      timestamp: Date.now(),
+    };
+
+    await setTokenCache(mockKV, testKey, testValue);
+    const retrievedValue = await getTokenCache(mockKV, testKey);
+
+    expect(retrievedValue).not.toBeNull();
+    expect(retrievedValue).toEqual(testValue);
+    expect(retrievedValue?.token.accessToken).toBe(testValue.token.accessToken);
+    expect(retrievedValue?.token.sub).toBe(testValue.token.sub);
+    expect(retrievedValue?.timestamp).toBe(testValue.timestamp);
+  });
+
+  test("get returns null for non-existent key", async () => {
+    const result = await getTokenCache(mockKV, "non-existent-key");
+    expect(result).toBeNull();
+  });
+
+  test("delete removes token from cache", async () => {
+    const testKey = "token:delete-test";
+    const testValue: TokenCacheEntry = {
+      token: {
+        accessToken: "test-token",
+        accessTokenExpires: Date.now() + 3600000,
+      },
+      timestamp: Date.now(),
+    };
+
+    await setTokenCache(mockKV, testKey, testValue);
+    await deleteTokenCache(mockKV, testKey);
+
+    const result = await getTokenCache(mockKV, testKey);
+    expect(result).toBeNull();
+  });
+});

www/app/lib/apiClient.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import createClient from "openapi-fetch";
+import type { paths } from "../reflector-api";
+import createFetchClient from "openapi-react-query";
+import { assertExistsAndNonEmptyString, parseNonEmptyString } from "./utils";
+import { isBuildPhase } from "./next";
+import { getSession } from "next-auth/react";
+import { assertExtendedToken } from "./types";
+
+export const API_URL = !isBuildPhase
+  ? assertExistsAndNonEmptyString(
+      process.env.NEXT_PUBLIC_API_URL,
+      "NEXT_PUBLIC_API_URL required",
+    )
+  : "http://localhost";
+
+// TODO decide strict validation or not
+export const WEBSOCKET_URL =
+  process.env.NEXT_PUBLIC_WEBSOCKET_URL || "ws://127.0.0.1:1250";
+
+export const client = createClient<paths>({
+  baseUrl: API_URL,
+});
+
+// will assert presence/absence of login initially
+const initialSessionPromise = getSession();
+
+const waitForAuthTokenDefinitivePresenceOrAbsence = async () => {
+  const initialSession = await initialSessionPromise;
+  if (currentAuthToken === undefined) {
+    currentAuthToken =
+      initialSession === null
+        ? null
+        : assertExtendedToken(initialSession).accessToken;
+  }
+  // otherwise already overwritten by external forces
+  return currentAuthToken;
+};
+
+client.use({
+  async onRequest({ request }) {
+    const token = await waitForAuthTokenDefinitivePresenceOrAbsence();
+    if (token !== null) {
+      request.headers.set(
+        "Authorization",
+        `Bearer ${parseNonEmptyString(token)}`,
+      );
+    }
+    // XXX Only set Content-Type if not already set (FormData will set its own boundary)
+    // This is a work around for uploading file, we're passing a formdata
+    // but the content type was still application/json
+    if (
+      !request.headers.has("Content-Type") &&
+      !(request.body instanceof FormData)
+    ) {
+      request.headers.set("Content-Type", "application/json");
+    }
+    return request;
+  },
+});
+
+export const $api = createFetchClient<paths>(client);
+
+let currentAuthToken: string | null | undefined = undefined;
+
+// the function contract: lightweight, idempotent
+export const configureApiAuth = (token: string | null | undefined) => {
+  // watch only for the initial loading; "reloading" state assumes token presence/absence
+  if (token === undefined && currentAuthToken !== undefined) return;
+  currentAuthToken = token;
+};

www/app/lib/apiHooks.ts

@@ -0,0 +1,612 @@
+"use client";
+
+import { $api } from "./apiClient";
+import { useError } from "../(errors)/errorContext";
+import { useQueryClient } from "@tanstack/react-query";
+import type { components } from "../reflector-api";
+import { useAuth } from "./AuthProvider";
+
+/*
+ * XXX error types returned from the hooks are not always correct; declared types are ValidationError but real type could be string or any other
+ * this is either a limitation or incorrect usage of Python json schema generator
+ * or, limitation or incorrect usage of .d type generator from json schema
+ * */
+
+const useAuthReady = () => {
+  const auth = useAuth();
+
+  return {
+    isAuthenticated: auth.status === "authenticated",
+    isLoading: auth.status === "loading",
+  };
+};
+
+export function useRoomsList(page: number = 1) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/rooms",
+    {
+      params: {
+        query: { page },
+      },
+    },
+    {
+      enabled: isAuthenticated,
+    },
+  );
+}
+
+type SourceKind = components["schemas"]["SourceKind"];
+
+export function useTranscriptsSearch(
+  q: string = "",
+  options: {
+    limit?: number;
+    offset?: number;
+    room_id?: string;
+    source_kind?: SourceKind;
+  } = {},
+) {
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/search",
+    {
+      params: {
+        query: {
+          q,
+          limit: options.limit,
+          offset: options.offset,
+          room_id: options.room_id,
+          source_kind: options.source_kind,
+        },
+      },
+    },
+    {
+      enabled: true,
+    },
+  );
+}
+
+export function useTranscriptDelete() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation("delete", "/v1/transcripts/{transcript_id}", {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["get", "/v1/transcripts/search"],
+      });
+    },
+    onError: (error) => {
+      setError(error as Error, "There was an error deleting the transcript");
+    },
+  });
+}
+
+export function useTranscriptProcess() {
+  const { setError } = useError();
+
+  return $api.useMutation("post", "/v1/transcripts/{transcript_id}/process", {
+    onError: (error) => {
+      setError(error as Error, "There was an error processing the transcript");
+    },
+  });
+}
+
+export function useTranscriptGet(transcriptId: string | null) {
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}",
+    {
+      params: {
+        path: {
+          transcript_id: transcriptId || "",
+        },
+      },
+    },
+    {
+      enabled: !!transcriptId,
+    },
+  );
+}
+
+export function useRoomGet(roomId: string | null) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/rooms/{room_id}",
+    {
+      params: {
+        path: { room_id: roomId || "" },
+      },
+    },
+    {
+      enabled: !!roomId && isAuthenticated,
+    },
+  );
+}
+
+export function useRoomTestWebhook() {
+  const { setError } = useError();
+
+  return $api.useMutation("post", "/v1/rooms/{room_id}/webhook/test", {
+    onError: (error) => {
+      setError(error as Error, "There was an error testing the webhook");
+    },
+  });
+}
+
+export function useRoomCreate() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation("post", "/v1/rooms", {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: $api.queryOptions("get", "/v1/rooms").queryKey,
+      });
+    },
+    onError: (error) => {
+      setError(error as Error, "There was an error creating the room");
+    },
+  });
+}
+
+export function useRoomUpdate() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation("patch", "/v1/rooms/{room_id}", {
+    onSuccess: async (room) => {
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions("get", "/v1/rooms").queryKey,
+        }),
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions("get", "/v1/rooms/{room_id}", {
+            params: {
+              path: {
+                room_id: room.id,
+              },
+            },
+          }).queryKey,
+        }),
+      ]);
+    },
+    onError: (error) => {
+      setError(error as Error, "There was an error updating the room");
+    },
+  });
+}
+
+export function useRoomDelete() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation("delete", "/v1/rooms/{room_id}", {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: $api.queryOptions("get", "/v1/rooms").queryKey,
+      });
+    },
+    onError: (error) => {
+      setError(error as Error, "There was an error deleting the room");
+    },
+  });
+}
+
+export function useZulipStreams() {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/zulip/streams",
+    {},
+    {
+      enabled: isAuthenticated,
+    },
+  );
+}
+
+export function useZulipTopics(streamId: number | null) {
+  const { isAuthenticated } = useAuthReady();
+  const enabled = !!streamId && isAuthenticated;
+  return $api.useQuery(
+    "get",
+    "/v1/zulip/streams/{stream_id}/topics",
+    {
+      params: {
+        path: {
+          stream_id: enabled ? streamId : 0,
+        },
+      },
+    },
+    {
+      enabled,
+    },
+  );
+}
+
+export function useTranscriptUpdate() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation("patch", "/v1/transcripts/{transcript_id}", {
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: $api.queryOptions("get", "/v1/transcripts/{transcript_id}", {
+          params: {
+            path: { transcript_id: variables.params.path.transcript_id },
+          },
+        }).queryKey,
+      });
+    },
+    onError: (error) => {
+      setError(error as Error, "There was an error updating the transcript");
+    },
+  });
+}
+
+export function useTranscriptPostToZulip() {
+  const { setError } = useError();
+
+  // @ts-ignore - Zulip endpoint not in OpenAPI spec
+  return $api.useMutation("post", "/v1/transcripts/{transcript_id}/zulip", {
+    onError: (error) => {
+      setError(error as Error, "There was an error posting to Zulip");
+    },
+  });
+}
+
+export function useTranscriptUploadAudio() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation(
+    "post",
+    "/v1/transcripts/{transcript_id}/record/upload",
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions(
+            "get",
+            "/v1/transcripts/{transcript_id}",
+            {
+              params: {
+                path: { transcript_id: variables.params.path.transcript_id },
+              },
+            },
+          ).queryKey,
+        });
+      },
+      onError: (error) => {
+        setError(error as Error, "There was an error uploading the audio file");
+      },
+    },
+  );
+}
+
+export function useTranscriptWaveform(transcriptId: string | null) {
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}/audio/waveform",
+    {
+      params: {
+        path: { transcript_id: transcriptId! },
+      },
+    },
+    {
+      enabled: !!transcriptId,
+    },
+  );
+}
+
+export function useTranscriptMP3(transcriptId: string | null) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}/audio/mp3",
+    {
+      params: {
+        path: { transcript_id: transcriptId! },
+      },
+    },
+    {
+      enabled: !!transcriptId && isAuthenticated,
+    },
+  );
+}
+
+export function useTranscriptTopics(transcriptId: string | null) {
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}/topics",
+    {
+      params: {
+        path: { transcript_id: transcriptId || "" },
+      },
+    },
+    {
+      enabled: !!transcriptId,
+    },
+  );
+}
+
+export function useTranscriptTopicsWithWords(transcriptId: string | null) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}/topics/with-words",
+    {
+      params: {
+        path: { transcript_id: transcriptId || "" },
+      },
+    },
+    {
+      enabled: !!transcriptId && isAuthenticated,
+    },
+  );
+}
+
+export function useTranscriptTopicsWithWordsPerSpeaker(
+  transcriptId: string | null,
+  topicId: string | null,
+) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}/topics/{topic_id}/words-per-speaker",
+    {
+      params: {
+        path: {
+          transcript_id: transcriptId || "",
+          topic_id: topicId || "",
+        },
+      },
+    },
+    {
+      enabled: !!transcriptId && !!topicId && isAuthenticated,
+    },
+  );
+}
+
+export function useTranscriptParticipants(transcriptId: string | null) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}/participants",
+    {
+      params: {
+        path: { transcript_id: transcriptId || "" },
+      },
+    },
+    {
+      enabled: !!transcriptId && isAuthenticated,
+    },
+  );
+}
+
+export function useTranscriptParticipantUpdate() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation(
+    "patch",
+    "/v1/transcripts/{transcript_id}/participants/{participant_id}",
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions(
+            "get",
+            "/v1/transcripts/{transcript_id}/participants",
+            {
+              params: {
+                path: { transcript_id: variables.params.path.transcript_id },
+              },
+            },
+          ).queryKey,
+        });
+      },
+      onError: (error) => {
+        setError(error as Error, "There was an error updating the participant");
+      },
+    },
+  );
+}
+
+export function useTranscriptParticipantCreate() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation(
+    "post",
+    "/v1/transcripts/{transcript_id}/participants",
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions(
+            "get",
+            "/v1/transcripts/{transcript_id}/participants",
+            {
+              params: {
+                path: { transcript_id: variables.params.path.transcript_id },
+              },
+            },
+          ).queryKey,
+        });
+      },
+      onError: (error) => {
+        setError(error as Error, "There was an error creating the participant");
+      },
+    },
+  );
+}
+
+export function useTranscriptParticipantDelete() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation(
+    "delete",
+    "/v1/transcripts/{transcript_id}/participants/{participant_id}",
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions(
+            "get",
+            "/v1/transcripts/{transcript_id}/participants",
+            {
+              params: {
+                path: { transcript_id: variables.params.path.transcript_id },
+              },
+            },
+          ).queryKey,
+        });
+      },
+      onError: (error) => {
+        setError(error as Error, "There was an error deleting the participant");
+      },
+    },
+  );
+}
+
+export function useTranscriptSpeakerAssign() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation(
+    "patch",
+    "/v1/transcripts/{transcript_id}/speaker/assign",
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions(
+            "get",
+            "/v1/transcripts/{transcript_id}",
+            {
+              params: {
+                path: { transcript_id: variables.params.path.transcript_id },
+              },
+            },
+          ).queryKey,
+        });
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions(
+            "get",
+            "/v1/transcripts/{transcript_id}/participants",
+            {
+              params: {
+                path: { transcript_id: variables.params.path.transcript_id },
+              },
+            },
+          ).queryKey,
+        });
+      },
+      onError: (error) => {
+        setError(error as Error, "There was an error assigning the speaker");
+      },
+    },
+  );
+}
+
+export function useTranscriptSpeakerMerge() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation(
+    "patch",
+    "/v1/transcripts/{transcript_id}/speaker/merge",
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions(
+            "get",
+            "/v1/transcripts/{transcript_id}",
+            {
+              params: {
+                path: { transcript_id: variables.params.path.transcript_id },
+              },
+            },
+          ).queryKey,
+        });
+        queryClient.invalidateQueries({
+          queryKey: $api.queryOptions(
+            "get",
+            "/v1/transcripts/{transcript_id}/participants",
+            {
+              params: {
+                path: { transcript_id: variables.params.path.transcript_id },
+              },
+            },
+          ).queryKey,
+        });
+      },
+      onError: (error) => {
+        setError(error as Error, "There was an error merging speakers");
+      },
+    },
+  );
+}
+
+export function useMeetingAudioConsent() {
+  const { setError } = useError();
+
+  return $api.useMutation("post", "/v1/meetings/{meeting_id}/consent", {
+    onError: (error) => {
+      setError(error as Error, "There was an error recording consent");
+    },
+  });
+}
+
+export function useTranscriptWebRTC() {
+  const { setError } = useError();
+
+  return $api.useMutation(
+    "post",
+    "/v1/transcripts/{transcript_id}/record/webrtc",
+    {
+      onError: (error) => {
+        setError(error as Error, "There was an error with WebRTC connection");
+      },
+    },
+  );
+}
+
+export function useTranscriptCreate() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation("post", "/v1/transcripts", {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["get", "/v1/transcripts/search"],
+      });
+    },
+    onError: (error) => {
+      setError(error as Error, "There was an error creating the transcript");
+    },
+  });
+}
+
+export function useRoomsCreateMeeting() {
+  const { setError } = useError();
+  const queryClient = useQueryClient();
+
+  return $api.useMutation("post", "/v1/rooms/{room_name}/meeting", {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: $api.queryOptions("get", "/v1/rooms").queryKey,
+      });
+    },
+    onError: (error) => {
+      setError(error as Error, "There was an error creating the meeting");
+    },
+  });
+}

www/app/lib/array.ts

@@ -0,0 +1,12 @@
+export type NonEmptyArray<T> = [T, ...T[]];
+export const isNonEmptyArray = <T>(arr: T[]): arr is NonEmptyArray<T> =>
+  arr.length > 0;
+export const assertNonEmptyArray = <T>(
+  arr: T[],
+  err?: string,
+): NonEmptyArray<T> => {
+  if (isNonEmptyArray(arr)) {
+    return arr;
+  }
+  throw new Error(err ?? "Expected non-empty array");
+};

www/app/lib/auth.ts

@@ -1,157 +1,20 @@
-// import { kv } from "@vercel/kv";
-import Redlock, { ResourceLockedError } from "redlock";
-import { AuthOptions } from "next-auth";
-import AuthentikProvider from "next-auth/providers/authentik";
-import { JWT } from "next-auth/jwt";
-import { JWTWithAccessToken, CustomSession } from "./types";
-import Redis from "ioredis";
+import { assertExistsAndNonEmptyString } from "./utils";
 
-const PRETIMEOUT = 60; // seconds before token expires to refresh it
-const DEFAULT_REDIS_KEY_TIMEOUT = 60 * 60 * 24 * 30; // 30 days (refresh token expires in 30 days)
-const kv = new Redis(process.env.KV_URL || "", {
-  tls: {},
-});
-const redlock = new Redlock([kv], {});
+export const REFRESH_ACCESS_TOKEN_ERROR = "RefreshAccessTokenError" as const;
+// 4 min is 1 min less than default authentic value. here we assume that authentic won't be set to access tokens < 4 min
+export const REFRESH_ACCESS_TOKEN_BEFORE = 4 * 60 * 1000;
 
-redlock.on("error", (error) => {
-  if (error instanceof ResourceLockedError) {
-    return;
-  }
-
-  // Log all other errors.
-  console.error(error);
-});
-
-export const authOptions: AuthOptions = {
-  providers: [
-    AuthentikProvider({
-      clientId: process.env.AUTHENTIK_CLIENT_ID as string,
-      clientSecret: process.env.AUTHENTIK_CLIENT_SECRET as string,
-      issuer: process.env.AUTHENTIK_ISSUER,
-      authorization: {
-        params: {
-          scope: "openid email profile offline_access",
-        },
-      },
-    }),
-  ],
-  session: {
-    strategy: "jwt",
-  },
-  callbacks: {
-    async jwt({ token, account, user }) {
-      const extendedToken = token as JWTWithAccessToken;
-      if (account && user) {
-        // called only on first login
-        // XXX account.expires_in used in example is not defined for authentik backend, but expires_at is
-        const expiresAt = (account.expires_at as number) - PRETIMEOUT;
-        const jwtToken = {
-          ...extendedToken,
-          accessToken: account.access_token,
-          accessTokenExpires: expiresAt * 1000,
-          refreshToken: account.refresh_token,
-        };
-        kv.set(
-          `token:${jwtToken.sub}`,
-          JSON.stringify(jwtToken),
-          "EX",
-          DEFAULT_REDIS_KEY_TIMEOUT,
-        );
-        return jwtToken;
-      }
-
-      if (Date.now() < extendedToken.accessTokenExpires) {
-        return token;
-      }
-
-      // access token has expired, try to update it
-      return await redisLockedrefreshAccessToken(token);
-    },
-    async session({ session, token }) {
-      const extendedToken = token as JWTWithAccessToken;
-      const customSession = session as CustomSession;
-      customSession.accessToken = extendedToken.accessToken;
-      customSession.accessTokenExpires = extendedToken.accessTokenExpires;
-      customSession.error = extendedToken.error;
-      customSession.user = {
-        id: extendedToken.sub,
-        name: extendedToken.name,
-        email: extendedToken.email,
-      };
-      return customSession;
-    },
-  },
+export const shouldRefreshToken = (accessTokenExpires: number): boolean => {
+  const timeLeft = accessTokenExpires - Date.now();
+  return timeLeft < REFRESH_ACCESS_TOKEN_BEFORE;
 };
 
-async function redisLockedrefreshAccessToken(token: JWT) {
-  return await redlock.using(
-    [token.sub as string, "jwt-refresh"],
-    5000,
-    async () => {
-      const redisToken = await kv.get(`token:${token.sub}`);
-      const currentToken = JSON.parse(
-        redisToken as string,
-      ) as JWTWithAccessToken;
+export const LOGIN_REQUIRED_PAGES = [
+  "/transcripts/[!new]",
+  "/browse(.*)",
+  "/rooms(.*)",
+];
 
-      // if there is multiple requests for the same token, it may already have been refreshed
-      if (Date.now() < currentToken.accessTokenExpires) {
-        return currentToken;
-      }
-
-      // now really do the request
-      const newToken = await refreshAccessToken(currentToken);
-      await kv.set(
-        `token:${currentToken.sub}`,
-        JSON.stringify(newToken),
-        "EX",
-        DEFAULT_REDIS_KEY_TIMEOUT,
-      );
-      return newToken;
-    },
-  );
-}
-
-async function refreshAccessToken(token: JWT): Promise<JWTWithAccessToken> {
-  try {
-    const url = `${process.env.AUTHENTIK_REFRESH_TOKEN_URL}`;
-
-    const options = {
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-      },
-      body: new URLSearchParams({
-        client_id: process.env.AUTHENTIK_CLIENT_ID as string,
-        client_secret: process.env.AUTHENTIK_CLIENT_SECRET as string,
-        grant_type: "refresh_token",
-        refresh_token: token.refreshToken as string,
-      }).toString(),
-      method: "POST",
-    };
-
-    const response = await fetch(url, options);
-    if (!response.ok) {
-      console.error(
-        new Date().toISOString(),
-        "Failed to refresh access token. Response status:",
-        response.status,
-      );
-      const responseBody = await response.text();
-      console.error(new Date().toISOString(), "Response body:", responseBody);
-      throw new Error(`Failed to refresh access token: ${response.statusText}`);
-    }
-    const refreshedTokens = await response.json();
-    return {
-      ...token,
-      accessToken: refreshedTokens.access_token,
-      accessTokenExpires:
-        Date.now() + (refreshedTokens.expires_in - PRETIMEOUT) * 1000,
-      refreshToken: refreshedTokens.refresh_token,
-    };
-  } catch (error) {
-    console.error("Error refreshing access token", error);
-    return {
-      ...token,
-      error: "RefreshAccessTokenError",
-    } as JWTWithAccessToken;
-  }
-}
+export const PROTECTED_PAGES = new RegExp(
+  LOGIN_REQUIRED_PAGES.map((page) => `^${page}$`).join("|"),
+);

www/app/lib/authBackend.ts

@@ -0,0 +1,245 @@
+import { AuthOptions } from "next-auth";
+import AuthentikProvider from "next-auth/providers/authentik";
+import type { JWT } from "next-auth/jwt";
+import { JWTWithAccessToken, CustomSession } from "./types";
+import {
+  assertExists,
+  assertExistsAndNonEmptyString,
+  assertNotExists,
+} from "./utils";
+import {
+  REFRESH_ACCESS_TOKEN_BEFORE,
+  REFRESH_ACCESS_TOKEN_ERROR,
+  shouldRefreshToken,
+} from "./auth";
+import {
+  getTokenCache,
+  setTokenCache,
+  deleteTokenCache,
+} from "./redisTokenCache";
+import { tokenCacheRedis, redlock } from "./redisClient";
+import { isBuildPhase } from "./next";
+import { sequenceThrows } from "./errorUtils";
+import { featureEnabled } from "./features";
+
+const TOKEN_CACHE_TTL = REFRESH_ACCESS_TOKEN_BEFORE;
+const getAuthentikClientId = () =>
+  assertExistsAndNonEmptyString(
+    process.env.AUTHENTIK_CLIENT_ID,
+    "AUTHENTIK_CLIENT_ID required",
+  );
+const getAuthentikClientSecret = () =>
+  assertExistsAndNonEmptyString(
+    process.env.AUTHENTIK_CLIENT_SECRET,
+    "AUTHENTIK_CLIENT_SECRET required",
+  );
+const getAuthentikRefreshTokenUrl = () =>
+  assertExistsAndNonEmptyString(
+    process.env.AUTHENTIK_REFRESH_TOKEN_URL,
+    "AUTHENTIK_REFRESH_TOKEN_URL required",
+  );
+
+export const authOptions = (): AuthOptions =>
+  featureEnabled("requireLogin")
+    ? {
+        providers: [
+          AuthentikProvider({
+            ...(() => {
+              const [clientId, clientSecret] = sequenceThrows(
+                getAuthentikClientId,
+                getAuthentikClientSecret,
+              );
+              return {
+                clientId,
+                clientSecret,
+              };
+            })(),
+            issuer: process.env.AUTHENTIK_ISSUER,
+            authorization: {
+              params: {
+                scope: "openid email profile offline_access",
+              },
+            },
+          }),
+        ],
+        session: {
+          strategy: "jwt",
+        },
+        callbacks: {
+          async jwt({ token, account, user }) {
+            if (account && !account.access_token) {
+              await deleteTokenCache(tokenCacheRedis, `token:${token.sub}`);
+            }
+
+            if (account && user) {
+              // called only on first login
+              // XXX account.expires_in used in example is not defined for authentik backend, but expires_at is
+              if (account.access_token) {
+                const expiresAtS = assertExists(account.expires_at);
+                const expiresAtMs = expiresAtS * 1000;
+                const jwtToken: JWTWithAccessToken = {
+                  ...token,
+                  accessToken: account.access_token,
+                  accessTokenExpires: expiresAtMs,
+                  refreshToken: account.refresh_token,
+                };
+                if (jwtToken.error) {
+                  await deleteTokenCache(tokenCacheRedis, `token:${token.sub}`);
+                } else {
+                  assertNotExists(
+                    jwtToken.error,
+                    `panic! trying to cache token with error in jwt: ${jwtToken.error}`,
+                  );
+                  await setTokenCache(tokenCacheRedis, `token:${token.sub}`, {
+                    token: jwtToken,
+                    timestamp: Date.now(),
+                  });
+                  return jwtToken;
+                }
+              }
+            }
+
+            const currentToken = await getTokenCache(
+              tokenCacheRedis,
+              `token:${token.sub}`,
+            );
+            console.debug(
+              "currentToken from cache",
+              JSON.stringify(currentToken, null, 2),
+              "will be returned?",
+              currentToken &&
+                !shouldRefreshToken(currentToken.token.accessTokenExpires),
+            );
+            if (
+              currentToken &&
+              !shouldRefreshToken(currentToken.token.accessTokenExpires)
+            ) {
+              return currentToken.token;
+            }
+
+            // access token has expired, try to update it
+            return await lockedRefreshAccessToken(token);
+          },
+          async session({ session, token }) {
+            const extendedToken = token as JWTWithAccessToken;
+            return {
+              ...session,
+              accessToken: extendedToken.accessToken,
+              accessTokenExpires: extendedToken.accessTokenExpires,
+              error: extendedToken.error,
+              user: {
+                id: assertExists(extendedToken.sub),
+                name: extendedToken.name,
+                email: extendedToken.email,
+              },
+            } satisfies CustomSession;
+          },
+        },
+      }
+    : {
+        providers: [],
+      };
+
+async function lockedRefreshAccessToken(
+  token: JWT,
+): Promise<JWTWithAccessToken> {
+  const lockKey = `${token.sub}-lock`;
+
+  return redlock
+    .using([lockKey], 10000, async () => {
+      const cached = await getTokenCache(tokenCacheRedis, `token:${token.sub}`);
+      if (cached)
+        console.debug(
+          "received cached token. to delete?",
+          Date.now() - cached.timestamp > TOKEN_CACHE_TTL,
+        );
+      else console.debug("no cached token received");
+      if (cached) {
+        if (Date.now() - cached.timestamp > TOKEN_CACHE_TTL) {
+          await deleteTokenCache(tokenCacheRedis, `token:${token.sub}`);
+        } else if (!shouldRefreshToken(cached.token.accessTokenExpires)) {
+          console.debug("returning cached token", cached.token);
+          return cached.token;
+        }
+      }
+
+      const currentToken = cached?.token || (token as JWTWithAccessToken);
+      const newToken = await refreshAccessToken(currentToken);
+
+      console.debug("current token during refresh", currentToken);
+      console.debug("new token during refresh", newToken);
+
+      if (newToken.error) {
+        await deleteTokenCache(tokenCacheRedis, `token:${token.sub}`);
+        return newToken;
+      }
+
+      assertNotExists(
+        newToken.error,
+        `panic! trying to cache token with error during refresh: ${newToken.error}`,
+      );
+      await setTokenCache(tokenCacheRedis, `token:${token.sub}`, {
+        token: newToken,
+        timestamp: Date.now(),
+      });
+
+      return newToken;
+    })
+    .catch((e) => {
+      console.error("error refreshing token", e);
+      deleteTokenCache(tokenCacheRedis, `token:${token.sub}`).catch((e) => {
+        console.error("error deleting errored token", e);
+      });
+      return {
+        ...token,
+        error: REFRESH_ACCESS_TOKEN_ERROR,
+      } as JWTWithAccessToken;
+    });
+}
+
+async function refreshAccessToken(token: JWT): Promise<JWTWithAccessToken> {
+  const [url, clientId, clientSecret] = sequenceThrows(
+    getAuthentikRefreshTokenUrl,
+    getAuthentikClientId,
+    getAuthentikClientSecret,
+  );
+  try {
+    const options = {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: new URLSearchParams({
+        client_id: clientId,
+        client_secret: clientSecret,
+        grant_type: "refresh_token",
+        refresh_token: token.refreshToken as string,
+      }).toString(),
+      method: "POST",
+    };
+
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      console.error(
+        new Date().toISOString(),
+        "Failed to refresh access token. Response status:",
+        response.status,
+      );
+      const responseBody = await response.text();
+      console.error(new Date().toISOString(), "Response body:", responseBody);
+      throw new Error(`Failed to refresh access token: ${response.statusText}`);
+    }
+    const refreshedTokens = await response.json();
+    return {
+      ...token,
+      accessToken: refreshedTokens.access_token,
+      accessTokenExpires: Date.now() + refreshedTokens.expires_in * 1000,
+      refreshToken: refreshedTokens.refresh_token,
+    };
+  } catch (error) {
+    console.error("Error refreshing access token", error);
+    return {
+      ...token,
+      error: REFRESH_ACCESS_TOKEN_ERROR,
+    } as JWTWithAccessToken;
+  }
+}

www/app/lib/edgeConfig.ts

@@ -1,48 +0,0 @@
-import { get } from "@vercel/edge-config";
-import { isDevelopment } from "./utils";
-
-type EdgeConfig = {
-  [domainWithDash: string]: {
-    features: {
-      [featureName in
-        | "requireLogin"
-        | "privacy"
-        | "browse"
-        | "sendToZulip"]: boolean;
-    };
-    auth_callback_url: string;
-    websocket_url: string;
-    api_url: string;
-  };
-};
-
-export type DomainConfig = EdgeConfig["domainWithDash"];
-
-// Edge config main keys can only be alphanumeric and _ or -
-export function edgeKeyToDomain(key: string) {
-  return key.replaceAll("_", ".");
-}
-
-export function edgeDomainToKey(domain: string) {
-  return domain.replaceAll(".", "_");
-}
-
-// get edge config server-side (prefer DomainContext when available), domain is the hostname
-export async function getConfig() {
-  const domain = new URL(process.env.NEXT_PUBLIC_SITE_URL!).hostname;
-
-  if (process.env.NEXT_PUBLIC_ENV === "development") {
-    return require("../../config").localConfig;
-  }
-
-  let config = await get(edgeDomainToKey(domain));
-
-  if (typeof config !== "object") {
-    console.warn("No config for this domain, falling back to default");
-    config = await get(edgeDomainToKey("default"));
-  }
-
-  if (typeof config !== "object") throw Error("Error fetching config");
-
-  return config as DomainConfig;
-}

www/app/lib/errorUtils.ts

@@ -1,4 +1,6 @@
-function shouldShowError(error: Error | null | undefined) {
+import { isNonEmptyArray, NonEmptyArray } from "./array";
+
+export function shouldShowError(error: Error | null | undefined) {
   if (
     error?.name == "ResponseError" &&
     (error["response"].status == 404 || error["response"].status == 403)
@@ -8,4 +10,40 @@ function shouldShowError(error: Error | null | undefined) {
   return true;
 }
 
-export { shouldShowError };
+const defaultMergeErrors = (ex: NonEmptyArray<unknown>): unknown => {
+  try {
+    return new Error(
+      ex
+        .map((e) =>
+          e ? (e.toString ? e.toString() : JSON.stringify(e)) : `${e}`,
+        )
+        .join("\n"),
+    );
+  } catch (e) {
+    console.error("Error merging errors:", e);
+    return ex[0];
+  }
+};
+
+type ReturnTypes<T extends readonly (() => any)[]> = {
+  [K in keyof T]: T[K] extends () => infer R ? R : never;
+};
+
+// sequence semantic for "throws"
+// calls functions passed and collects its thrown values
+export function sequenceThrows<Fns extends readonly (() => any)[]>(
+  ...fs: Fns
+): ReturnTypes<Fns> {
+  const results: unknown[] = [];
+  const errors: unknown[] = [];
+
+  for (const f of fs) {
+    try {
+      results.push(f());
+    } catch (e) {
+      errors.push(e);
+    }
+  }
+  if (errors.length) throw defaultMergeErrors(errors as NonEmptyArray<unknown>);
+  return results as ReturnTypes<Fns>;
+}

www/app/lib/features.ts

@@ -0,0 +1,55 @@
+export const FEATURES = [
+  "requireLogin",
+  "privacy",
+  "browse",
+  "sendToZulip",
+  "rooms",
+] as const;
+
+export type FeatureName = (typeof FEATURES)[number];
+
+export type Features = Readonly<Record<FeatureName, boolean>>;
+
+export const DEFAULT_FEATURES: Features = {
+  requireLogin: true,
+  privacy: true,
+  browse: true,
+  sendToZulip: true,
+  rooms: true,
+} as const;
+
+function parseBooleanEnv(
+  value: string | undefined,
+  defaultValue: boolean = false,
+): boolean {
+  if (!value) return defaultValue;
+  return value.toLowerCase() === "true";
+}
+
+// WARNING: keep process.env.* as-is, next.js won't see them if you generate dynamically
+const features: Features = {
+  requireLogin: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_REQUIRE_LOGIN,
+    DEFAULT_FEATURES.requireLogin,
+  ),
+  privacy: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_PRIVACY,
+    DEFAULT_FEATURES.privacy,
+  ),
+  browse: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_BROWSE,
+    DEFAULT_FEATURES.browse,
+  ),
+  sendToZulip: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_SEND_TO_ZULIP,
+    DEFAULT_FEATURES.sendToZulip,
+  ),
+  rooms: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_ROOMS,
+    DEFAULT_FEATURES.rooms,
+  ),
+};
+
+export const featureEnabled = (featureName: FeatureName): boolean => {
+  return features[featureName];
+};

www/app/lib/next.ts

@@ -0,0 +1,2 @@
+// next.js tries to run all the lib code during build phase; we don't always want it when e.g. we have connections initialized we don't want to have
+export const isBuildPhase = process.env.NEXT_PHASE?.includes("build");

www/app/lib/queryClient.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 1000, // 1 minute
+      gcTime: 5 * 60 * 1000, // 5 minutes (formerly cacheTime)
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+    mutations: {
+      retry: 0,
+    },
+  },
+});

www/app/lib/redisClient.ts

@@ -0,0 +1,78 @@
+import Redis from "ioredis";
+import { isBuildPhase } from "./next";
+import Redlock, { ResourceLockedError } from "redlock";
+
+export type RedisClient = Pick<Redis, "get" | "setex" | "del">;
+export type RedlockClient = {
+  using: <T>(
+    keys: string | string[],
+    ttl: number,
+    cb: () => Promise<T>,
+  ) => Promise<T>;
+};
+const KV_USE_TLS = process.env.KV_USE_TLS
+  ? process.env.KV_USE_TLS === "true"
+  : undefined;
+
+let redisClient: Redis | null = null;
+
+const getRedisClient = (): RedisClient => {
+  if (redisClient) return redisClient;
+  const redisUrl = process.env.KV_URL;
+  if (!redisUrl) {
+    throw new Error("KV_URL environment variable is required");
+  }
+  redisClient = new Redis(redisUrl, {
+    maxRetriesPerRequest: 3,
+    ...(KV_USE_TLS === true
+      ? {
+          tls: {},
+        }
+      : {}),
+  });
+
+  redisClient.on("error", (error) => {
+    console.error("Redis error:", error);
+  });
+
+  return redisClient;
+};
+
+// next.js buildtime usage - we want to isolate next.js "build" time concepts here
+const noopClient: RedisClient = (() => {
+  const noopSetex: Redis["setex"] = async () => {
+    return "OK" as const;
+  };
+  const noopDel: Redis["del"] = async () => {
+    return 0;
+  };
+  return {
+    get: async () => {
+      return null;
+    },
+    setex: noopSetex,
+    del: noopDel,
+  };
+})();
+
+const noopRedlock: RedlockClient = {
+  using: <T>(resource: string | string[], ttl: number, cb: () => Promise<T>) =>
+    cb(),
+};
+
+export const redlock: RedlockClient = isBuildPhase
+  ? noopRedlock
+  : (() => {
+      const r = new Redlock([getRedisClient()], {});
+      r.on("error", (error) => {
+        if (error instanceof ResourceLockedError) {
+          return;
+        }
+
+        // Log all other errors.
+        console.error(error);
+      });
+      return r;
+    })();
+
+export const tokenCacheRedis = isBuildPhase ? noopClient : getRedisClient();

www/app/lib/redisTokenCache.ts

@@ -0,0 +1,61 @@
+import { z } from "zod";
+import { REFRESH_ACCESS_TOKEN_BEFORE } from "./auth";
+
+const TokenCacheEntrySchema = z.object({
+  token: z.object({
+    sub: z.string().optional(),
+    name: z.string().nullish(),
+    email: z.string().nullish(),
+    accessToken: z.string(),
+    accessTokenExpires: z.number(),
+    refreshToken: z.string().optional(),
+  }),
+  timestamp: z.number(),
+});
+
+const TokenCacheEntryCodec = z.codec(z.string(), TokenCacheEntrySchema, {
+  decode: (jsonString) => {
+    const parsed = JSON.parse(jsonString);
+    return TokenCacheEntrySchema.parse(parsed);
+  },
+  encode: (value) => JSON.stringify(value),
+});
+
+export type TokenCacheEntry = z.infer<typeof TokenCacheEntrySchema>;
+
+export type KV = {
+  get(key: string): Promise<string | null>;
+  setex(key: string, seconds: number, value: string): Promise<"OK">;
+  del(key: string): Promise<number>;
+};
+
+export async function getTokenCache(
+  redis: KV,
+  key: string,
+): Promise<TokenCacheEntry | null> {
+  const data = await redis.get(key);
+  if (!data) return null;
+
+  try {
+    return TokenCacheEntryCodec.decode(data);
+  } catch (error) {
+    console.error("Invalid token cache data:", error);
+    await redis.del(key);
+    return null;
+  }
+}
+
+const TTL_SECONDS = 30 * 24 * 60 * 60;
+
+export async function setTokenCache(
+  redis: KV,
+  key: string,
+  value: TokenCacheEntry,
+): Promise<void> {
+  const encodedValue = TokenCacheEntryCodec.encode(value);
+  await redis.setex(key, TTL_SECONDS, encodedValue);
+}
+
+export async function deleteTokenCache(redis: KV, key: string): Promise<void> {
+  await redis.del(key);
+}

www/app/lib/transcript.ts

@@ -0,0 +1,5 @@
+import { components } from "../reflector-api";
+
+type ApiTranscriptStatus = components["schemas"]["GetTranscript"]["status"];
+
+export type TranscriptStatus = ApiTranscriptStatus;

www/app/lib/types.ts

@@ -1,10 +1,11 @@
-import { Session } from "next-auth";
-import { JWT } from "next-auth/jwt";
+import type { Session } from "next-auth";
+import type { JWT } from "next-auth/jwt";
+import { parseMaybeNonEmptyString } from "./utils";
 
 export interface JWTWithAccessToken extends JWT {
   accessToken: string;
   accessTokenExpires: number;
-  refreshToken: string;
+  refreshToken?: string;
   error?: string;
 }
 
@@ -12,9 +13,68 @@ export interface CustomSession extends Session {
   accessToken: string;
   accessTokenExpires: number;
   error?: string;
-  user: {
-    id?: string;
-    name?: string | null;
-    email?: string | null;
+  user: Session["user"] & {
+    id: string;
   };
 }
+
+// assumption that JWT is JWTWithAccessToken - we set it in jwt callback of auth; typing isn't strong around there
+// but the assumption is crucial to auth working
+export const assertExtendedToken = <T>(
+  t: Exclude<T, null | undefined>,
+): T & {
+  accessTokenExpires: number;
+  accessToken: string;
+} => {
+  if (
+    typeof (t as { accessTokenExpires: any }).accessTokenExpires === "number" &&
+    !isNaN((t as { accessTokenExpires: any }).accessTokenExpires) &&
+    typeof (
+      t as {
+        accessToken: any;
+      }
+    ).accessToken === "string" &&
+    parseMaybeNonEmptyString((t as { accessToken: any }).accessToken) !== null
+  ) {
+    return t as T & {
+      accessTokenExpires: number;
+      accessToken: string;
+    };
+  }
+  throw new Error("Token is not extended with access token");
+};
+
+export const assertExtendedTokenAndUserId = <U, T extends { user?: U }>(
+  t: Exclude<T, null | undefined>,
+): T & {
+  accessTokenExpires: number;
+  accessToken: string;
+  user: U & {
+    id: string;
+  };
+} => {
+  const extendedToken = assertExtendedToken(t);
+  if (typeof (extendedToken.user as any)?.id === "string") {
+    return t as Exclude<T, null | undefined> & {
+      accessTokenExpires: number;
+      accessToken: string;
+      user: U & {
+        id: string;
+      };
+    };
+  }
+  throw new Error("Token is not extended with user id");
+};
+
+// best attempt to check the session is valid
+export const assertCustomSession = <T extends Session>(
+  s: Exclude<T, null | undefined>,
+): CustomSession => {
+  const r = assertExtendedTokenAndUserId(s);
+  // no other checks for now
+  return r as CustomSession;
+};
+
+export type Mutable<T> = {
+  -readonly [P in keyof T]: T[P];
+};

www/app/lib/useApi.ts

@@ -1,37 +0,0 @@
-import { useSession, signOut } from "next-auth/react";
-import { useContext, useEffect, useState } from "react";
-import { DomainContext, featureEnabled } from "../domainContext";
-import { OpenApi, DefaultService } from "../api";
-import { CustomSession } from "./types";
-import useSessionStatus from "./useSessionStatus";
-import useSessionAccessToken from "./useSessionAccessToken";
-
-export default function useApi(): DefaultService | null {
-  const api_url = useContext(DomainContext).api_url;
-  const [api, setApi] = useState<OpenApi | null>(null);
-  const { isLoading, isAuthenticated } = useSessionStatus();
-  const { accessToken, error } = useSessionAccessToken();
-
-  if (!api_url) throw new Error("no API URL");
-
-  useEffect(() => {
-    if (error === "RefreshAccessTokenError") {
-      signOut();
-    }
-  }, [error]);
-
-  useEffect(() => {
-    if (isLoading || (isAuthenticated && !accessToken)) {
-      return;
-    }
-
-    const openApi = new OpenApi({
-      BASE: api_url,
-      TOKEN: accessToken || undefined,
-    });
-
-    setApi(openApi);
-  }, [isLoading, isAuthenticated, accessToken]);
-
-  return api?.default ?? null;
-}

www/app/lib/useLoginRequiredPages.ts

@@ -0,0 +1,26 @@
+// for paths that are not supposed to be public
+import { PROTECTED_PAGES } from "./auth";
+import { usePathname } from "next/navigation";
+import { useAuth } from "./AuthProvider";
+import { useEffect } from "react";
+
+const HOME = "/" as const;
+
+export const useLoginRequiredPages = () => {
+  const pathname = usePathname();
+  const isProtected = PROTECTED_PAGES.test(pathname);
+  const auth = useAuth();
+  const isNotLoggedIn = auth.status === "unauthenticated";
+  // safety
+  const isLastDestination = pathname === HOME;
+  const shouldRedirect = isNotLoggedIn && isProtected && !isLastDestination;
+  useEffect(() => {
+    if (!shouldRedirect) return;
+    // on the backend, the redirect goes straight to the auth provider, but we don't have it because it's hidden inside next-auth middleware
+    // so we just "softly" lead the user to the main page
+    // warning: if HOME redirects somewhere else, we won't be protected by isLastDestination
+    window.location.href = HOME;
+  }, [shouldRedirect]);
+  // optionally save from blink, since window.location.href takes a bit of time
+  return shouldRedirect ? HOME : null;
+};

www/app/lib/useSessionAccessToken.ts

@@ -1,42 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useSession as useNextAuthSession } from "next-auth/react";
-import { CustomSession } from "./types";
-
-export default function useSessionAccessToken() {
-  const { data: session } = useNextAuthSession();
-  const customSession = session as CustomSession;
-  const naAccessToken = customSession?.accessToken;
-  const naAccessTokenExpires = customSession?.accessTokenExpires;
-  const naError = customSession?.error;
-  const [accessToken, setAccessToken] = useState<string | null>(null);
-  const [accessTokenExpires, setAccessTokenExpires] = useState<number | null>(
-    null,
-  );
-  const [error, setError] = useState<string | undefined>();
-
-  useEffect(() => {
-    if (naAccessToken !== accessToken) {
-      setAccessToken(naAccessToken);
-    }
-  }, [naAccessToken]);
-
-  useEffect(() => {
-    if (naAccessTokenExpires !== accessTokenExpires) {
-      setAccessTokenExpires(naAccessTokenExpires);
-    }
-  }, [naAccessTokenExpires]);
-
-  useEffect(() => {
-    if (naError !== error) {
-      setError(naError);
-    }
-  }, [naError]);
-
-  return {
-    accessToken,
-    accessTokenExpires,
-    error,
-  };
-}

www/app/lib/useSessionStatus.ts

@@ -1,22 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useSession as useNextAuthSession } from "next-auth/react";
-import { Session } from "next-auth";
-
-export default function useSessionStatus() {
-  const { status: naStatus } = useNextAuthSession();
-  const [status, setStatus] = useState("loading");
-
-  useEffect(() => {
-    if (naStatus !== "loading" && naStatus !== status) {
-      setStatus(naStatus);
-    }
-  }, [naStatus]);
-
-  return {
-    status,
-    isLoading: status === "loading",
-    isAuthenticated: status === "authenticated",
-  };
-}

www/app/lib/useSessionUser.ts

@@ -1,33 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useSession as useNextAuthSession } from "next-auth/react";
-import { Session } from "next-auth";
-
-// user type with id, name, email
-export interface User {
-  id?: string | null;
-  name?: string | null;
-  email?: string | null;
-}
-
-export default function useSessionUser() {
-  const { data: session } = useNextAuthSession();
-  const [user, setUser] = useState<User | null>(null);
-
-  useEffect(() => {
-    if (!session?.user) {
-      setUser(null);
-      return;
-    }
-    if (JSON.stringify(session.user) !== JSON.stringify(user)) {
-      setUser(session.user);
-    }
-  }, [session]);
-
-  return {
-    id: user?.id,
-    name: user?.name,
-    email: user?.email,
-  };
-}

www/app/lib/useUserName.ts

@@ -0,0 +1,8 @@
+import { useAuth } from "./AuthProvider";
+
+export const useUserName = (): string | null | undefined => {
+  const auth = useAuth();
+  if (auth.status !== "authenticated" && auth.status !== "refreshing")
+    return undefined;
+  return auth.user?.name || null;
+};

www/app/lib/utils.ts

@@ -137,9 +137,40 @@ export function extractDomain(url) {
   }
 }
 
-export function assertExists<T>(value: T | null | undefined, err?: string): T {
+export type NonEmptyString = string & { __brand: "NonEmptyString" };
+export const parseMaybeNonEmptyString = (
+  s: string,
+  trim = true,
+): NonEmptyString | null => {
+  s = trim ? s.trim() : s;
+  return s.length > 0 ? (s as NonEmptyString) : null;
+};
+export const parseNonEmptyString = (s: string, trim = true): NonEmptyString =>
+  assertExists(parseMaybeNonEmptyString(s, trim), "Expected non-empty string");
+
+export const assertExists = <T>(
+  value: T | null | undefined,
+  err?: string,
+): T => {
   if (value === null || value === undefined) {
     throw new Error(`Assertion failed: ${err ?? "value is null or undefined"}`);
   }
   return value;
-}
+};
+
+export const assertNotExists = <T>(
+  value: T | null | undefined,
+  err?: string,
+): void => {
+  if (value !== null && value !== undefined) {
+    throw new Error(
+      `Assertion failed: ${err ?? "value is not null or undefined"}`,
+    );
+  }
+};
+
+export const assertExistsAndNonEmptyString = (
+  value: string | null | undefined,
+  err?: string,
+): NonEmptyString =>
+  parseNonEmptyString(assertExists(value, err || "Expected non-empty string"));

www/app/providers.tsx

@@ -2,20 +2,38 @@
 
 import { ChakraProvider } from "@chakra-ui/react";
 import system from "./styles/theme";
+import dynamic from "next/dynamic";
 
-import { WherebyProvider } from "@whereby.com/browser-sdk/react";
 import { Toaster } from "./components/ui/toaster";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "./lib/queryClient";
+import { AuthProvider } from "./lib/AuthProvider";
+import { SessionProvider as SessionProviderNextAuth } from "next-auth/react";
+
+const WherebyProvider = dynamic(
+  () =>
+    import("@whereby.com/browser-sdk/react").then((mod) => ({
+      default: mod.WherebyProvider,
+    })),
+  { ssr: false },
+);
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <NuqsAdapter>
-      <ChakraProvider value={system}>
-        <WherebyProvider>
-          {children}
-          <Toaster />
-        </WherebyProvider>
-      </ChakraProvider>
+      <QueryClientProvider client={queryClient}>
+        <SessionProviderNextAuth>
+          <AuthProvider>
+            <ChakraProvider value={system}>
+              <WherebyProvider>
+                {children}
+                <Toaster />
+              </WherebyProvider>
+            </ChakraProvider>
+          </AuthProvider>
+        </SessionProviderNextAuth>
+      </QueryClientProvider>
     </NuqsAdapter>
   );
 }

www/app/webinars/[title]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, use } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { notFound } from "next/navigation";
@@ -30,9 +30,9 @@ const FORM_FIELDS = {
 };
 
 export type WebinarDetails = {
-  params: {
+  params: Promise<{
     title: string;
-  };
+  }>;
 };
 
 export type Webinar = {
@@ -63,7 +63,8 @@ const WEBINARS: Webinar[] = [
 ];
 
 export default function WebinarPage(details: WebinarDetails) {
-  const title = details.params.title;
+  const params = use(details.params);
+  const title = params.title;
   const webinar = WEBINARS.find((webinar) => webinar.title === title);
   if (!webinar) {
     return notFound();