feat: frontend openapi react query (#606)

* refactor: migrate from @hey-api/openapi-ts to openapi-react-query

- Replace @hey-api/openapi-ts with openapi-typescript and openapi-react-query
- Generate TypeScript types from OpenAPI spec
- Set up React Query infrastructure with QueryClientProvider
- Migrate all API hooks to use React Query patterns
- Maintain backward compatibility for existing components
- Remove old API infrastructure and dependencies

* fix: resolve import errors and add missing api hooks

- Create constants.ts for RECORD_A_MEETING_URL
- Add api-types.ts for backward compatible type exports
- Update all imports from deleted api folder to new locations
- Add missing React Query hooks for rooms and zulip operations
- Create useApi compatibility layer for unmigrated components

* feat: migrate components to React Query hooks

- Add comprehensive API hooks for all operations
- Migrate rooms page to use React Query mutations
- Update transcript title component to use mutation hook
- Refactor share/privacy component with proper error handling
- Remove direct API client usage in favor of hooks

* feat: complete migration from @hey-api/openapi-ts to openapi-react-query

- Migrated all components from useApi compatibility layer to direct React Query hooks
- Added new hooks for participant operations, room meetings, and speaker operations
- Updated all imports from old api module to api-types
- Fixed TypeScript types and API endpoint signatures
- Removed deprecated useApi.ts compatibility layer
- Fixed SourceKind enum values to match OpenAPI spec
- Added @ts-ignore for Zulip endpoints not in OpenAPI spec yet
- Fixed all compilation errors and type issues

* fix: authentication flow with React Query migration

- Fix middleware management in apiClient to properly handle auth tokens
- Update ApiAuthProvider to correctly configure base URL and auth
- Add missing NextAuth API route handler at app/api/auth/[...nextauth]/route.ts
- Remove middleware ejection attempts (not supported by openapi-fetch)
- Use global variables to store current auth token and API URL
- Setup middleware once on initialization instead of repeatedly adding

This fixes the login/logout flow that was broken after migrating from
the useApi compatibility layer to native React Query hooks.

* fix: prevent unauthorized API calls before authentication

- Add global AuthGuard component to handle authentication at layout level
- Make all API query hooks conditional on authentication status
- Define public routes (like /transcripts/new) that don't require auth
- Fix login flow to use NextAuth signIn instead of non-existent /login route
- Prevent 401 errors by waiting for auth token before making API calls

Previously, all routes under (app) were publicly accessible with each page
handling auth individually. Now authentication is enforced globally while
still allowing specific routes to remain public.

* refactor: remove redundant client-side AuthGuard

The authentication is already properly handled by Next.js middleware
in middleware.ts with LOGIN_REQUIRED_PAGES. The middleware approach is
superior as it:
- Provides server-side protection before page loads
- Prevents flash of unauthorized content
- Centralizes auth logic in one place
- Better performance (no client-side JS needed)

Keep the API hooks conditional to prevent 401 errors before token is ready.

* fix: use direct status check for API query authentication

Changed all query hooks to use direct `status === "authenticated"` check
instead of derived `isAuthenticated && !isLoading` to avoid race conditions
where queries might fire before the authentication token is properly set.

This prevents the brief 401 errors that occur on page refresh when the
session is being restored.

* fix: correct content-type header for FormData uploads

Previously, the API client was setting a default Content-Type of application/json
for all requests, which broke file uploads that need multipart/form-data.

Now the client only sets application/json when the body is not FormData,
allowing FormData to automatically set the correct multipart boundary.

* fix: resolve authentication race condition with React Query

Previously, API calls were being made before the auth token was configured,
causing initial 401 errors that would retry with 200 after token setup.

Changes:
- Add global auth readiness tracking in apiClient
- Create useAuthReady hook that checks both session and token state
- Update all API hooks to use isAuthReady instead of just session status
- Add AuthWrapper component at layout level for consistent loading UX
- Show spinner while authentication initializes across all pages

This ensures API calls only fire after authentication is fully configured,
eliminating the 401/retry pattern and improving user experience.

* refactor: clean up api-hooks.ts comments and improve search invalidation

- Remove redundant function category comments (exports are self-explanatory)
- Remove obvious inline comments for query invalidation
- Fix search endpoint invalidation to clear all queries regardless of parameters

* refactor: remove api-types.ts compatibility layer

- Migrated all 29 files from api-types.ts to use reflector-api.d.ts directly
- Removed $SourceKind manual enum in favor of OpenAPI-generated types
- Fixed unrelated Spinner component TypeScript error in AuthWrapper.tsx
- All imports now use: import type { components } from "path/to/reflector-api"
- Deleted api-types.ts file completely

* refactor: rename api-hooks.ts to apiHooks.ts for consistency

- Renamed api-hooks.ts to apiHooks.ts to follow camelCase convention
- Updated all 21 import statements across the codebase
- Maintains consistency with other non-component files (apiClient.tsx, useAuthReady.ts, etc.)
- Follows established naming pattern: PascalCase for components, camelCase for utilities/hooks

* chore: add .playwright-mcp to .gitignore

* refactor: remove SK helper object and use inline type casting in FilterSidebar

Replace the SK (SourceKind) helper object with direct inline type casting
to simplify the code and reduce unnecessary abstraction.

* chore: clean up migration comments from React Query refactoring

- Remove temporary "// Use new React Query hooks" comments
- Remove "// React Query hooks" comments from browse and rooms pages
- Update package.json script name from codegen to openapi for consistency

* refactor: remove Redis dependencies from frontend authentication

- Replace Redis/Redlock with in-memory cache for token management
- Remove @vercel/kv, ioredis, and redlock dependencies from package.json
- Implement simple lock mechanism for concurrent token refresh prevention
- Use Map-based cache with TTL for token storage
- Maintain same authentication flow without external dependencies

This simplifies the infrastructure requirements and removes the need for
Redis while maintaining the same functionality through in-memory caching.

* fix: add staleTime to prevent cross-tab staled data

* fix: remove infinite re-render loop in useSessionAccessToken

The hook was maintaining redundant local state that caused re-renders
on every update, which triggered NextAuth to continuously refetch the
session, resulting in hundreds of POST requests to /api/auth/session.

Simplified the hook to directly return session values without
unnecessary state duplication.

* fix: handle undefined access tokens in auth.ts

Added fallback to empty string for potentially undefined access_token
and refresh_token from NextAuth account object to satisfy
JWTWithAccessToken type requirements.

* Igor/mathieu/frontend openapi react query (#597)

* small typing

* typing fixes

---------

Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>

* self-review-fix

* authReady callback simplify

* fix auth

* fix compose

* room detail page fix

* compile fix

* room edit fix

* normalize auth provider

* room edition state granular management

* cover TODOs + cross-tab cache

* session auto refresh blink

* schema generator error type doc

* protect from zombie auth

* clarify access token refresh logic a bit

* remove react-query tab sharing cache

* remove react-query tab sharing cache

* websocket dupe react devmode protection

* invalidate room on room update

* redis cache

* test ts server

* ci randomness

* less edgy config (ci)

* less edgy config (ci)

* less edgy config (ci)

* ci randomness

* ci randomness

* ci randomness

* ci randomness

* less edgy config (ci)

* added vs edited room state cleanup

* file upload real-time state management fix

* prettier auth state ternary

* prettier auth state ternary

* proper api address from env

* INTERVAL_REFRESH_MS

* node version 20 for tests

* github debug

* github debug

* github debug

* github debug

* github debug

* github debug

* github debug

* github debug

* github debug

* github debug

* github debug

* CI debug

* CI debug

* nextjs magic

* nextjs magic

* doc

* client-side stale auth soft safety net

---------

Co-authored-by: Mathieu Virbel <mat@meltingrocks.com>
Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>

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/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

@@ -2,9 +2,8 @@ import { Container, Flex, Link } from "@chakra-ui/react";
 import { getConfig } from "../lib/edgeConfig";
 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({
@@ -90,7 +89,7 @@ export default async function AppLayout({
         </div>
       </Flex>
 
-      {children}
+      <AuthWrapper>{children}</AuthWrapper>
     </Container>
   );
 }

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

@@ -12,11 +12,13 @@ import {
   HStack,
 } 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";
 
 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

@@ -9,11 +9,13 @@ import {
   Spinner,
 } 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";
 
 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]/correct/page.tsx

@@ -6,9 +6,10 @@ 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 { useTranscriptUpdate } from "../../../../lib/apiHooks";
 import useTranscript from "../../useTranscript";
 import { useError } from "../../../../(errors)/errorContext";
 import { useRouter } from "next/navigation";
@@ -23,7 +24,7 @@ export type TranscriptCorrect = {
 export default function TranscriptCorrect({
   params: { transcriptId },
 }: TranscriptCorrect) {
-  const api = useApi();
+  const updateTranscriptMutation = useTranscriptUpdate();
   const transcript = useTranscript(transcriptId);
   const stateCurrentTopic = useState<GetTranscriptTopic>();
   const [currentTopic, _sct] = stateCurrentTopic;
@@ -34,16 +35,21 @@ export default function TranscriptCorrect({
   const { setError } = useError();
   const router = useRouter();
 
-  const markAsDone = () => {
+  const markAsDone = async () => {
     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");
+      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");
+      }
     }
   };
 

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

@@ -86,7 +86,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                 useActiveTopic={useActiveTopic}
                 waveform={waveform.waveform}
                 media={mp3.media}
-                mediaDuration={transcript.response.duration}
+                mediaDuration={transcript.response?.duration || null}
               />
             ) : !mp3.loading && (waveform.error || mp3.error) ? (
               <Box p={4} bg="red.100" borderRadius="md">
@@ -116,7 +116,7 @@ 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.response?.title || "Unnamed Transcript"}
                   transcriptId={transcriptId}
                   onUpdate={(newTitle) => {
                     transcript.reload();

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

@@ -24,10 +24,16 @@ const TranscriptUpload = (details: TranscriptUpload) => {
 
   const router = useRouter();
 
-  const [status, setStatus] = useState(
+  const [status_, setStatus] = useState(
     webSockets.status.value || transcript.response?.status || "idle",
   );
 
+  // status is obviously done if we have transcript
+  const status =
+    !transcript.loading && transcript.response?.status === "ended"
+      ? transcript.response?.status
+      : status_;
+
   useEffect(() => {
     if (!transcriptStarted && webSockets.transcriptTextLive.length !== 0)
       setTranscriptStarted(true);
@@ -35,8 +41,11 @@ 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.response?.status === "ended"
+        ? "ended"
+        : webSockets.status.value || transcript.response?.status || "idle";
     setStatus(newStatus);
     if (newStatus && (newStatus == "ended" || newStatus == "error")) {
       console.log(newStatus, "redirecting");

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

@@ -7,36 +7,29 @@ import About from "../../../(aboutAndPrivacy)/about";
 import Privacy from "../../../(aboutAndPrivacy)/privacy";
 import { useRouter } from "next/navigation";
 import useCreateTranscript from "../createTranscript";
-import { SourceKind } from "../../../api";
 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 type { components } from "../../../reflector-api";
+
 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>("");
@@ -55,27 +48,31 @@ 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);
+    const targetLang = getTargetLanguage();
     createTranscript.create({
       name,
-      target_language: getTargetLanguage(),
-      source_kind: "live" as SourceKind,
+      source_language: "en",
+      target_language: targetLang || "en",
+      source_kind: "live",
     });
   };
 
   const uploadFile = () => {
     if (loadingUpload || createTranscript.loading || permissionDenied) return;
     setLoadingUpload(true);
+    const targetLang = getTargetLanguage();
     createTranscript.create({
       name,
-      target_language: getTargetLanguage(),
-      source_kind: "file" as SourceKind,
+      source_language: "en",
+      target_language: targetLang || "en",
+      source_kind: "file",
     });
   };
 
@@ -141,8 +138,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"

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,7 +6,6 @@ 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";

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

@@ -2,7 +2,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 +18,11 @@ 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";
 
 type ShareAndPrivacyProps = {
   finalSummaryRef: any;
@@ -50,12 +52,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 +66,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 +131,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/shareZulip.tsx

@@ -1,6 +1,9 @@
 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 +15,15 @@ import {
   Checkbox,
   Combobox,
   Spinner,
-  Portal,
   useFilter,
   useListCollection,
 } from "@chakra-ui/react";
 import { TbBrandZulip } from "react-icons/tb";
-import useApi from "../../lib/useApi";
+import {
+  useZulipStreams,
+  useZulipTopics,
+  useTranscriptPostToZulip,
+} from "../../lib/apiHooks";
 
 type ShareZulipProps = {
   transcriptResponse: GetTranscript;
@@ -30,104 +36,75 @@ 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 { data: streams = [], isLoading: isLoadingStreams } = useZulipStreams();
+  const { data: topics = [] } = useZulipTopics(selectedStreamId);
+  const postToZulipMutation = useTranscriptPostToZulip();
+
   const { contains } = useFilter({ sensitivity: "base" });
 
-  const {
-    collection: streamItemsCollection,
-    filter: streamItemsFilter,
-    set: streamItemsSet,
-  } = 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 {
-    collection: topicItemsCollection,
-    filter: topicItemsFilter,
-    set: topicItemsSet,
-  } = useListCollection({
-    initialItems: [] as { label: string; value: string }[],
-    filter: contains,
-  });
+  const topicItems = useMemo(() => {
+    return topics.map(({ name }) => ({
+      label: name,
+      value: name,
+    }));
+  }, [topics]);
 
+  const { collection: streamItemsCollection, filter: streamItemsFilter } =
+    useListCollection({
+      initialItems: streamItems,
+      filter: contains,
+    });
+
+  const { collection: topicItemsCollection, filter: topicItemsFilter } =
+    useListCollection({
+      initialItems: topicItems,
+      filter: contains,
+    });
+
+  // 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 +132,7 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
               </Dialog.CloseTrigger>
             </Dialog.Header>
             <Dialog.Body>
-              {isLoading ? (
+              {isLoadingStreams ? (
                 <Flex justify="center" py={8}>
                   <Spinner />
                 </Flex>

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 { useTranscriptGet } from "../../lib/apiHooks";
+import { useAuth } from "../../lib/AuthProvider";
 
 export type Mp3Response = {
   media: HTMLMediaElement | null;
@@ -17,14 +18,17 @@ 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 +56,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 +110,18 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
         if (handleError) audioElement.removeEventListener("error", handleError);
       }
     };
-  }, [transcriptId, api, later, api_url]);
+  }, [transcriptId, transcript, later, api_url]);
 
   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,8 +1,7 @@
-import { useEffect, useState } from "react";
-import { GetTranscript } from "../../api";
-import { useError } from "../../(errors)/errorContext";
-import { shouldShowError } from "../../lib/errorUtils";
-import useApi from "../../lib/useApi";
+import type { components } from "../../reflector-api";
+import { useTranscriptGet } from "../../lib/apiHooks";
+
+type GetTranscript = components["schemas"]["GetTranscript"];
 
 type ErrorTranscript = {
   error: Error;
@@ -28,43 +27,43 @@ type SuccessTranscript = {
 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);
+  const { data, isLoading, error, refetch } = useTranscriptGet(id);
 
-  useEffect(() => {
-    if (!id || !api) return;
+  // Map to the expected return format
+  if (isLoading) {
+    return {
+      response: null,
+      loading: true,
+      error: false,
+      reload: refetch,
+    };
+  }
 
-    if (!response) {
-      setLoading(true);
-    }
+  if (error) {
+    return {
+      error: error as Error,
+      loading: false,
+      response: null,
+      reload: refetch,
+    };
+  }
 
-    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]);
+  // Check if data is undefined or null
+  if (!data) {
+    return {
+      response: null,
+      loading: true,
+      error: false,
+      reload: refetch,
+    };
+  }
 
-  return { response, loading, error, reload: reloadHandler } as
-    | ErrorTranscript
-    | LoadingTranscript
-    | SuccessTranscript;
+  return {
+    response: data,
+    loading: false,
+    error: null,
+    reload: refetch,
+  };
 };
 
 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

@@ -2,8 +2,12 @@ import { useContext, 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 } from "../../lib/apiClient";
 
 export type UseWebSockets = {
   transcriptTextLive: string;
@@ -33,8 +37,8 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   const [status, setStatus] = useState<Status>({ value: "" });
   const { setError } = useError();
 
-  const { websocket_url } = useContext(DomainContext);
-  const api = useApi();
+  const { websocket_url: websocketUrl } = useContext(DomainContext);
+  const queryClient = useQueryClient();
 
   const [accumulatedText, setAccumulatedText] = useState<string>("");
 
@@ -105,6 +109,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 +326,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 = `${websocketUrl}/v1/transcripts/${transcriptId}/events`;
     let ws = new WebSocket(url);
 
     ws.onopen = () => {
@@ -361,6 +370,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 +389,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 +406,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 +473,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 +494,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
     return () => {
       ws.close();
     };
-  }, [transcriptId, !api]);
+  }, [transcriptId, websocketUrl]);
 
   return {
     transcriptTextLive,

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

@@ -1,4 +1,6 @@
-import { GetTranscriptTopic } from "../../api";
+import type { components } from "../../reflector-api";
+
+type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
 
 export type Topic = GetTranscriptTopic;
 

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

@@ -21,11 +21,13 @@ import { toaster } from "../components/ui/toaster";
 import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import { notFound } from "next/navigation";
-import useSessionStatus from "../lib/useSessionStatus";
 import { useRecordingConsent } from "../recordingConsentContext";
-import useApi from "../lib/useApi";
-import { Meeting } from "../api";
+import { useMeetingAudioConsent } from "../lib/apiHooks";
+import type { components } from "../reflector-api";
+
+type Meeting = components["schemas"]["Meeting"];
 import { FaBars } from "react-icons/fa6";
+import { useAuth } from "../lib/AuthProvider";
 
 export type RoomDetails = {
   params: {
@@ -76,31 +78,30 @@ const useConsentDialog = (
   wherebyRef: RefObject<HTMLElement> /*accessibility*/,
 ) => {
   const { state: consentState, touch, hasConsent } = useRecordingConsent();
-  const [consentLoading, setConsentLoading] = useState(false);
   // toast would open duplicates, even with using "id=" prop
   const [modalOpen, setModalOpen] = useState(false);
-  const api = useApi();
+  const audioConsentMutation = useMeetingAudioConsent();
 
   const handleConsent = useCallback(
     async (meetingId: string, given: boolean) => {
-      if (!api) return;
-
-      setConsentLoading(true);
-
       try {
-        await api.v1MeetingAudioConsent({
-          meetingId,
-          requestBody: { consent_given: given },
+        await audioConsentMutation.mutateAsync({
+          params: {
+            path: {
+              meeting_id: meetingId,
+            },
+          },
+          body: {
+            consent_given: given,
+          },
         });
 
         touch(meetingId);
       } catch (error) {
         console.error("Error submitting consent:", error);
-      } finally {
-        setConsentLoading(false);
       }
     },
-    [api, touch],
+    [audioConsentMutation, touch],
   );
 
   const showConsentModal = useCallback(() => {
@@ -194,7 +195,12 @@ const useConsentDialog = (
     return cleanup;
   }, [meetingId, handleConsent, wherebyRef, modalOpen]);
 
-  return { showConsentModal, consentState, hasConsent, consentLoading };
+  return {
+    showConsentModal,
+    consentState,
+    hasConsent,
+    consentLoading: audioConsentMutation.isPending,
+  };
 };
 
 function ConsentDialogButton({
@@ -254,7 +260,9 @@ export default function Room(details: RoomDetails) {
   const roomName = details.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 roomUrl = meeting?.response?.host_room_url
     ? meeting?.response?.host_room_url

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,8 +1,5 @@
-// 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);
 

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/services.gen.ts

@@ -1,942 +0,0 @@
-// This file is auto-generated by @hey-api/openapi-ts
-
-import type { CancelablePromise } from "./core/CancelablePromise";
-import type { BaseHttpRequest } from "./core/BaseHttpRequest";
-import type {
-  MetricsResponse,
-  V1MeetingAudioConsentData,
-  V1MeetingAudioConsentResponse,
-  V1RoomsListData,
-  V1RoomsListResponse,
-  V1RoomsCreateData,
-  V1RoomsCreateResponse,
-  V1RoomsGetData,
-  V1RoomsGetResponse,
-  V1RoomsUpdateData,
-  V1RoomsUpdateResponse,
-  V1RoomsDeleteData,
-  V1RoomsDeleteResponse,
-  V1RoomsCreateMeetingData,
-  V1RoomsCreateMeetingResponse,
-  V1RoomsTestWebhookData,
-  V1RoomsTestWebhookResponse,
-  V1TranscriptsListData,
-  V1TranscriptsListResponse,
-  V1TranscriptsCreateData,
-  V1TranscriptsCreateResponse,
-  V1TranscriptsSearchData,
-  V1TranscriptsSearchResponse,
-  V1TranscriptGetData,
-  V1TranscriptGetResponse,
-  V1TranscriptUpdateData,
-  V1TranscriptUpdateResponse,
-  V1TranscriptDeleteData,
-  V1TranscriptDeleteResponse,
-  V1TranscriptGetTopicsData,
-  V1TranscriptGetTopicsResponse,
-  V1TranscriptGetTopicsWithWordsData,
-  V1TranscriptGetTopicsWithWordsResponse,
-  V1TranscriptGetTopicsWithWordsPerSpeakerData,
-  V1TranscriptGetTopicsWithWordsPerSpeakerResponse,
-  V1TranscriptPostToZulipData,
-  V1TranscriptPostToZulipResponse,
-  V1TranscriptHeadAudioMp3Data,
-  V1TranscriptHeadAudioMp3Response,
-  V1TranscriptGetAudioMp3Data,
-  V1TranscriptGetAudioMp3Response,
-  V1TranscriptGetAudioWaveformData,
-  V1TranscriptGetAudioWaveformResponse,
-  V1TranscriptGetParticipantsData,
-  V1TranscriptGetParticipantsResponse,
-  V1TranscriptAddParticipantData,
-  V1TranscriptAddParticipantResponse,
-  V1TranscriptGetParticipantData,
-  V1TranscriptGetParticipantResponse,
-  V1TranscriptUpdateParticipantData,
-  V1TranscriptUpdateParticipantResponse,
-  V1TranscriptDeleteParticipantData,
-  V1TranscriptDeleteParticipantResponse,
-  V1TranscriptAssignSpeakerData,
-  V1TranscriptAssignSpeakerResponse,
-  V1TranscriptMergeSpeakerData,
-  V1TranscriptMergeSpeakerResponse,
-  V1TranscriptRecordUploadData,
-  V1TranscriptRecordUploadResponse,
-  V1TranscriptGetWebsocketEventsData,
-  V1TranscriptGetWebsocketEventsResponse,
-  V1TranscriptRecordWebrtcData,
-  V1TranscriptRecordWebrtcResponse,
-  V1TranscriptProcessData,
-  V1TranscriptProcessResponse,
-  V1UserMeResponse,
-  V1ZulipGetStreamsResponse,
-  V1ZulipGetTopicsData,
-  V1ZulipGetTopicsResponse,
-  V1WherebyWebhookData,
-  V1WherebyWebhookResponse,
-} from "./types.gen";
-
-export class DefaultService {
-  constructor(public readonly httpRequest: BaseHttpRequest) {}
-
-  /**
-   * Metrics
-   * Endpoint that serves Prometheus metrics.
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public metrics(): CancelablePromise<MetricsResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/metrics",
-    });
-  }
-
-  /**
-   * Meeting Audio Consent
-   * @param data The data for the request.
-   * @param data.meetingId
-   * @param data.requestBody
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1MeetingAudioConsent(
-    data: V1MeetingAudioConsentData,
-  ): CancelablePromise<V1MeetingAudioConsentResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/meetings/{meeting_id}/consent",
-      path: {
-        meeting_id: data.meetingId,
-      },
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Rooms List
-   * @param data The data for the request.
-   * @param data.page Page number
-   * @param data.size Page size
-   * @returns Page_RoomDetails_ Successful Response
-   * @throws ApiError
-   */
-  public v1RoomsList(
-    data: V1RoomsListData = {},
-  ): CancelablePromise<V1RoomsListResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/rooms",
-      query: {
-        page: data.page,
-        size: data.size,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Rooms Create
-   * @param data The data for the request.
-   * @param data.requestBody
-   * @returns Room Successful Response
-   * @throws ApiError
-   */
-  public v1RoomsCreate(
-    data: V1RoomsCreateData,
-  ): CancelablePromise<V1RoomsCreateResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/rooms",
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Rooms Get
-   * @param data The data for the request.
-   * @param data.roomId
-   * @returns RoomDetails Successful Response
-   * @throws ApiError
-   */
-  public v1RoomsGet(
-    data: V1RoomsGetData,
-  ): CancelablePromise<V1RoomsGetResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/rooms/{room_id}",
-      path: {
-        room_id: data.roomId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Rooms Update
-   * @param data The data for the request.
-   * @param data.roomId
-   * @param data.requestBody
-   * @returns RoomDetails Successful Response
-   * @throws ApiError
-   */
-  public v1RoomsUpdate(
-    data: V1RoomsUpdateData,
-  ): CancelablePromise<V1RoomsUpdateResponse> {
-    return this.httpRequest.request({
-      method: "PATCH",
-      url: "/v1/rooms/{room_id}",
-      path: {
-        room_id: data.roomId,
-      },
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Rooms Delete
-   * @param data The data for the request.
-   * @param data.roomId
-   * @returns DeletionStatus Successful Response
-   * @throws ApiError
-   */
-  public v1RoomsDelete(
-    data: V1RoomsDeleteData,
-  ): CancelablePromise<V1RoomsDeleteResponse> {
-    return this.httpRequest.request({
-      method: "DELETE",
-      url: "/v1/rooms/{room_id}",
-      path: {
-        room_id: data.roomId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Rooms Create Meeting
-   * @param data The data for the request.
-   * @param data.roomName
-   * @returns Meeting Successful Response
-   * @throws ApiError
-   */
-  public v1RoomsCreateMeeting(
-    data: V1RoomsCreateMeetingData,
-  ): CancelablePromise<V1RoomsCreateMeetingResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/rooms/{room_name}/meeting",
-      path: {
-        room_name: data.roomName,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Rooms Test Webhook
-   * Test webhook configuration by sending a sample payload.
-   * @param data The data for the request.
-   * @param data.roomId
-   * @returns WebhookTestResult Successful Response
-   * @throws ApiError
-   */
-  public v1RoomsTestWebhook(
-    data: V1RoomsTestWebhookData,
-  ): CancelablePromise<V1RoomsTestWebhookResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/rooms/{room_id}/webhook/test",
-      path: {
-        room_id: data.roomId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcripts List
-   * @param data The data for the request.
-   * @param data.sourceKind
-   * @param data.roomId
-   * @param data.searchTerm
-   * @param data.page Page number
-   * @param data.size Page size
-   * @returns Page_GetTranscriptMinimal_ Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptsList(
-    data: V1TranscriptsListData = {},
-  ): CancelablePromise<V1TranscriptsListResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts",
-      query: {
-        source_kind: data.sourceKind,
-        room_id: data.roomId,
-        search_term: data.searchTerm,
-        page: data.page,
-        size: data.size,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcripts Create
-   * @param data The data for the request.
-   * @param data.requestBody
-   * @returns GetTranscript Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptsCreate(
-    data: V1TranscriptsCreateData,
-  ): CancelablePromise<V1TranscriptsCreateResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/transcripts",
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcripts Search
-   * Full-text search across transcript titles and content.
-   * @param data The data for the request.
-   * @param data.q Search query text
-   * @param data.limit Results per page
-   * @param data.offset Number of results to skip
-   * @param data.roomId
-   * @param data.sourceKind
-   * @returns SearchResponse Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptsSearch(
-    data: V1TranscriptsSearchData,
-  ): CancelablePromise<V1TranscriptsSearchResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/search",
-      query: {
-        q: data.q,
-        limit: data.limit,
-        offset: data.offset,
-        room_id: data.roomId,
-        source_kind: data.sourceKind,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @returns GetTranscript Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGet(
-    data: V1TranscriptGetData,
-  ): CancelablePromise<V1TranscriptGetResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Update
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.requestBody
-   * @returns GetTranscript Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptUpdate(
-    data: V1TranscriptUpdateData,
-  ): CancelablePromise<V1TranscriptUpdateResponse> {
-    return this.httpRequest.request({
-      method: "PATCH",
-      url: "/v1/transcripts/{transcript_id}",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Delete
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @returns DeletionStatus Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptDelete(
-    data: V1TranscriptDeleteData,
-  ): CancelablePromise<V1TranscriptDeleteResponse> {
-    return this.httpRequest.request({
-      method: "DELETE",
-      url: "/v1/transcripts/{transcript_id}",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Topics
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @returns GetTranscriptTopic Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGetTopics(
-    data: V1TranscriptGetTopicsData,
-  ): CancelablePromise<V1TranscriptGetTopicsResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}/topics",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Topics With Words
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @returns GetTranscriptTopicWithWords Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGetTopicsWithWords(
-    data: V1TranscriptGetTopicsWithWordsData,
-  ): CancelablePromise<V1TranscriptGetTopicsWithWordsResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}/topics/with-words",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Topics With Words Per Speaker
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.topicId
-   * @returns GetTranscriptTopicWithWordsPerSpeaker Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGetTopicsWithWordsPerSpeaker(
-    data: V1TranscriptGetTopicsWithWordsPerSpeakerData,
-  ): CancelablePromise<V1TranscriptGetTopicsWithWordsPerSpeakerResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}/topics/{topic_id}/words-per-speaker",
-      path: {
-        transcript_id: data.transcriptId,
-        topic_id: data.topicId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Post To Zulip
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.stream
-   * @param data.topic
-   * @param data.includeTopics
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptPostToZulip(
-    data: V1TranscriptPostToZulipData,
-  ): CancelablePromise<V1TranscriptPostToZulipResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/transcripts/{transcript_id}/zulip",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      query: {
-        stream: data.stream,
-        topic: data.topic,
-        include_topics: data.includeTopics,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Audio Mp3
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.token
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptHeadAudioMp3(
-    data: V1TranscriptHeadAudioMp3Data,
-  ): CancelablePromise<V1TranscriptHeadAudioMp3Response> {
-    return this.httpRequest.request({
-      method: "HEAD",
-      url: "/v1/transcripts/{transcript_id}/audio/mp3",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      query: {
-        token: data.token,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Audio Mp3
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.token
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGetAudioMp3(
-    data: V1TranscriptGetAudioMp3Data,
-  ): CancelablePromise<V1TranscriptGetAudioMp3Response> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}/audio/mp3",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      query: {
-        token: data.token,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Audio Waveform
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @returns AudioWaveform Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGetAudioWaveform(
-    data: V1TranscriptGetAudioWaveformData,
-  ): CancelablePromise<V1TranscriptGetAudioWaveformResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}/audio/waveform",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Participants
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @returns Participant Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGetParticipants(
-    data: V1TranscriptGetParticipantsData,
-  ): CancelablePromise<V1TranscriptGetParticipantsResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}/participants",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Add Participant
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.requestBody
-   * @returns Participant Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptAddParticipant(
-    data: V1TranscriptAddParticipantData,
-  ): CancelablePromise<V1TranscriptAddParticipantResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/transcripts/{transcript_id}/participants",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Participant
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.participantId
-   * @returns Participant Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGetParticipant(
-    data: V1TranscriptGetParticipantData,
-  ): CancelablePromise<V1TranscriptGetParticipantResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}/participants/{participant_id}",
-      path: {
-        transcript_id: data.transcriptId,
-        participant_id: data.participantId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Update Participant
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.participantId
-   * @param data.requestBody
-   * @returns Participant Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptUpdateParticipant(
-    data: V1TranscriptUpdateParticipantData,
-  ): CancelablePromise<V1TranscriptUpdateParticipantResponse> {
-    return this.httpRequest.request({
-      method: "PATCH",
-      url: "/v1/transcripts/{transcript_id}/participants/{participant_id}",
-      path: {
-        transcript_id: data.transcriptId,
-        participant_id: data.participantId,
-      },
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Delete Participant
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.participantId
-   * @returns DeletionStatus Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptDeleteParticipant(
-    data: V1TranscriptDeleteParticipantData,
-  ): CancelablePromise<V1TranscriptDeleteParticipantResponse> {
-    return this.httpRequest.request({
-      method: "DELETE",
-      url: "/v1/transcripts/{transcript_id}/participants/{participant_id}",
-      path: {
-        transcript_id: data.transcriptId,
-        participant_id: data.participantId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Assign Speaker
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.requestBody
-   * @returns SpeakerAssignmentStatus Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptAssignSpeaker(
-    data: V1TranscriptAssignSpeakerData,
-  ): CancelablePromise<V1TranscriptAssignSpeakerResponse> {
-    return this.httpRequest.request({
-      method: "PATCH",
-      url: "/v1/transcripts/{transcript_id}/speaker/assign",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Merge Speaker
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.requestBody
-   * @returns SpeakerAssignmentStatus Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptMergeSpeaker(
-    data: V1TranscriptMergeSpeakerData,
-  ): CancelablePromise<V1TranscriptMergeSpeakerResponse> {
-    return this.httpRequest.request({
-      method: "PATCH",
-      url: "/v1/transcripts/{transcript_id}/speaker/merge",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Record Upload
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.chunkNumber
-   * @param data.totalChunks
-   * @param data.formData
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptRecordUpload(
-    data: V1TranscriptRecordUploadData,
-  ): CancelablePromise<V1TranscriptRecordUploadResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/transcripts/{transcript_id}/record/upload",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      query: {
-        chunk_number: data.chunkNumber,
-        total_chunks: data.totalChunks,
-      },
-      formData: data.formData,
-      mediaType: "multipart/form-data",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Get Websocket Events
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptGetWebsocketEvents(
-    data: V1TranscriptGetWebsocketEventsData,
-  ): CancelablePromise<V1TranscriptGetWebsocketEventsResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/transcripts/{transcript_id}/events",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Record Webrtc
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @param data.requestBody
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptRecordWebrtc(
-    data: V1TranscriptRecordWebrtcData,
-  ): CancelablePromise<V1TranscriptRecordWebrtcResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/transcripts/{transcript_id}/record/webrtc",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Transcript Process
-   * @param data The data for the request.
-   * @param data.transcriptId
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1TranscriptProcess(
-    data: V1TranscriptProcessData,
-  ): CancelablePromise<V1TranscriptProcessResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/transcripts/{transcript_id}/process",
-      path: {
-        transcript_id: data.transcriptId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * User Me
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1UserMe(): CancelablePromise<V1UserMeResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/me",
-    });
-  }
-
-  /**
-   * Zulip Get Streams
-   * Get all Zulip streams.
-   * @returns Stream Successful Response
-   * @throws ApiError
-   */
-  public v1ZulipGetStreams(): CancelablePromise<V1ZulipGetStreamsResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/zulip/streams",
-    });
-  }
-
-  /**
-   * Zulip Get Topics
-   * Get all topics for a specific Zulip stream.
-   * @param data The data for the request.
-   * @param data.streamId
-   * @returns Topic Successful Response
-   * @throws ApiError
-   */
-  public v1ZulipGetTopics(
-    data: V1ZulipGetTopicsData,
-  ): CancelablePromise<V1ZulipGetTopicsResponse> {
-    return this.httpRequest.request({
-      method: "GET",
-      url: "/v1/zulip/streams/{stream_id}/topics",
-      path: {
-        stream_id: data.streamId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-
-  /**
-   * Whereby Webhook
-   * @param data The data for the request.
-   * @param data.requestBody
-   * @returns unknown Successful Response
-   * @throws ApiError
-   */
-  public v1WherebyWebhook(
-    data: V1WherebyWebhookData,
-  ): CancelablePromise<V1WherebyWebhookResponse> {
-    return this.httpRequest.request({
-      method: "POST",
-      url: "/v1/whereby",
-      body: data.requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    });
-  }
-}

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/layout.tsx

@@ -1,7 +1,6 @@
 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";
@@ -74,18 +73,16 @@ export default async function RootLayout({
   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>
+        <DomainContextProvider config={config}>
+          <RecordingConsentProvider>
+            <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
+              <ErrorProvider>
+                <ErrorMessage />
+                <Providers>{children}</Providers>
+              </ErrorProvider>
+            </ErrorBoundary>
+          </RecordingConsentProvider>
+        </DomainContextProvider>
       </body>
     </html>
   );

www/app/lib/AuthProvider.tsx

@@ -0,0 +1,104 @@
+"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";
+
+type AuthContextType = (
+  | { status: "loading" }
+  | { status: "refreshing" }
+  | { 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);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const { data: session, status, update } = useNextAuthSession();
+  const customSession = session ? assertCustomSession(session) : null;
+
+  const contextValue: AuthContextType = {
+    ...(() => {
+      switch (status) {
+        case "loading": {
+          const sessionIsHere = !!customSession;
+          switch (sessionIsHere) {
+            case false: {
+              return { status };
+            }
+            case true: {
+              return { status: "refreshing" as const };
+            }
+            default: {
+              const _: never = sessionIsHere;
+              throw new Error("unreachable");
+            }
+          }
+        }
+        case "authenticated": {
+          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,
+  };
+
+  // not useEffect, we need it ASAP
+  configureApiAuth(
+    contextValue.status === "authenticated" ? contextValue.accessToken : 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,38 @@
  */
 "use client";
 
-import { useSession } from "next-auth/react";
 import { useEffect } from "react";
-import { CustomSession } from "./types";
+import { useAuth } from "./AuthProvider";
+import { REFRESH_ACCESS_TOKEN_BEFORE } from "./auth";
 
-export function SessionAutoRefresh({
-  children,
-  refreshInterval = 20 /* seconds */,
-}) {
-  const { data: session, update } = useSession();
-  const customSession = session as CustomSession;
-  const accessTokenExpires = customSession?.accessTokenExpires;
+const REFRESH_BEFORE = REFRESH_ACCESS_TOKEN_BEFORE;
+
+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) {
+      if (accessTokenExpires !== null) {
         const timeLeft = accessTokenExpires - Date.now();
-        if (timeLeft < refreshInterval * 1000) {
-          update();
+        if (timeLeft < REFRESH_BEFORE) {
+          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,50 @@
+"use client";
+
+import createClient from "openapi-fetch";
+import type { paths } from "../reflector-api";
+import {
+  queryOptions,
+  useMutation,
+  useQuery,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import createFetchClient from "openapi-react-query";
+import { assertExistsAndNonEmptyString } from "./utils";
+import { isBuildPhase } from "./next";
+
+const API_URL = !isBuildPhase
+  ? assertExistsAndNonEmptyString(process.env.NEXT_PUBLIC_API_URL)
+  : "http://localhost";
+
+// Create the base openapi-fetch client with a default URL
+// The actual URL will be set via middleware in AuthProvider
+export const client = createClient<paths>({
+  baseUrl: API_URL,
+});
+
+export const $api = createFetchClient<paths>(client);
+
+let currentAuthToken: string | null | undefined = null;
+
+client.use({
+  onRequest({ request }) {
+    if (currentAuthToken) {
+      request.headers.set("Authorization", `Bearer ${currentAuthToken}`);
+    }
+    // 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;
+  },
+});
+
+// the function contract: lightweight, idempotent
+export const configureApiAuth = (token: string | null | undefined) => {
+  currentAuthToken = token;
+};

www/app/lib/apiHooks.ts

@@ -0,0 +1,618 @@
+"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) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}",
+    {
+      params: {
+        path: {
+          transcript_id: transcriptId || "",
+        },
+      },
+    },
+    {
+      enabled: !!transcriptId && isAuthenticated,
+    },
+  );
+}
+
+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) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}/audio/waveform",
+    {
+      params: {
+        path: { transcript_id: transcriptId || "" },
+      },
+    },
+    {
+      enabled: !!transcriptId && isAuthenticated,
+    },
+  );
+}
+
+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) {
+  const { isAuthenticated } = useAuthReady();
+
+  return $api.useQuery(
+    "get",
+    "/v1/transcripts/{transcript_id}/topics",
+    {
+      params: {
+        path: { transcript_id: transcriptId || "" },
+      },
+    },
+    {
+      enabled: !!transcriptId && isAuthenticated,
+    },
+  );
+}
+
+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/auth.ts

@@ -1,157 +1,13 @@
-// 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";
+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;
 
-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 LOGIN_REQUIRED_PAGES = [
+  "/transcripts/[!new]",
+  "/browse(.*)",
+  "/rooms(.*)",
+];
 
-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;
-    },
-  },
-};
-
-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;
-
-      // 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,178 @@
+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 } from "./utils";
+import {
+  REFRESH_ACCESS_TOKEN_BEFORE,
+  REFRESH_ACCESS_TOKEN_ERROR,
+} from "./auth";
+import {
+  getTokenCache,
+  setTokenCache,
+  deleteTokenCache,
+} from "./redisTokenCache";
+import { tokenCacheRedis } from "./redisClient";
+import { isBuildPhase } from "./next";
+
+// REFRESH_ACCESS_TOKEN_BEFORE because refresh is based on access token expiration (imagine we cache it 30 days)
+const TOKEN_CACHE_TTL = REFRESH_ACCESS_TOKEN_BEFORE;
+
+const refreshLocks = new Map<string, Promise<JWTWithAccessToken>>();
+
+const CLIENT_ID = !isBuildPhase
+  ? assertExistsAndNonEmptyString(process.env.AUTHENTIK_CLIENT_ID)
+  : "noop";
+const CLIENT_SECRET = !isBuildPhase
+  ? assertExistsAndNonEmptyString(process.env.AUTHENTIK_CLIENT_SECRET)
+  : "noop";
+
+export const authOptions: AuthOptions = {
+  providers: [
+    AuthentikProvider({
+      clientId: CLIENT_ID,
+      clientSecret: CLIENT_SECRET,
+      issuer: process.env.AUTHENTIK_ISSUER,
+      authorization: {
+        params: {
+          scope: "openid email profile offline_access",
+        },
+      },
+    }),
+  ],
+  session: {
+    strategy: "jwt",
+  },
+  callbacks: {
+    async jwt({ token, account, user }) {
+      const KEY = `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
+        const expiresAtS = assertExists(account.expires_at);
+        const expiresAtMs = expiresAtS * 1000;
+        if (!account.access_token) {
+          await deleteTokenCache(tokenCacheRedis, KEY);
+        } else {
+          const jwtToken: JWTWithAccessToken = {
+            ...token,
+            accessToken: account.access_token,
+            accessTokenExpires: expiresAtMs,
+            refreshToken: account.refresh_token,
+          };
+          await setTokenCache(tokenCacheRedis, KEY, {
+            token: jwtToken,
+            timestamp: Date.now(),
+          });
+          return jwtToken;
+        }
+      }
+
+      const currentToken = await getTokenCache(tokenCacheRedis, KEY);
+      if (currentToken && Date.now() < 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;
+    },
+  },
+};
+
+async function lockedRefreshAccessToken(
+  token: JWT,
+): Promise<JWTWithAccessToken> {
+  const lockKey = `${token.sub}-refresh`;
+
+  const existingRefresh = refreshLocks.get(lockKey);
+  if (existingRefresh) {
+    return await existingRefresh;
+  }
+
+  const refreshPromise = (async () => {
+    try {
+      const cached = await getTokenCache(tokenCacheRedis, `token:${token.sub}`);
+      if (cached) {
+        if (Date.now() - cached.timestamp > TOKEN_CACHE_TTL) {
+          await deleteTokenCache(tokenCacheRedis, `token:${token.sub}`);
+        } else if (Date.now() < cached.token.accessTokenExpires) {
+          return cached.token;
+        }
+      }
+
+      const currentToken = cached?.token || (token as JWTWithAccessToken);
+      const newToken = await refreshAccessToken(currentToken);
+
+      await setTokenCache(tokenCacheRedis, `token:${token.sub}`, {
+        token: newToken,
+        timestamp: Date.now(),
+      });
+
+      return newToken;
+    } finally {
+      setTimeout(() => refreshLocks.delete(lockKey), 100);
+    }
+  })();
+
+  refreshLocks.set(lockKey, refreshPromise);
+  return refreshPromise;
+}
+
+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 * 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,5 +1,5 @@
 import { get } from "@vercel/edge-config";
-import { isDevelopment } from "./utils";
+import { isBuildPhase } from "./next";
 
 type EdgeConfig = {
   [domainWithDash: string]: {
@@ -29,12 +29,18 @@ export function edgeDomainToKey(domain: string) {
 
 // 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;
+    try {
+      return require("../../config").localConfig;
+    } catch (e) {
+      // next build() WILL try to execute the require above even if conditionally protected
+      // but thank god it at least runs catch{} block properly
+      if (!isBuildPhase) throw new Error(e);
+      return require("../../config-template").localConfig;
+    }
   }
 
+  const domain = new URL(process.env.NEXT_PUBLIC_SITE_URL!).hostname;
   let config = await get(edgeDomainToKey(domain));
 
   if (typeof config !== "object") {

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,46 @@
+import Redis from "ioredis";
+import { isBuildPhase } from "./next";
+
+export type RedisClient = Pick<Redis, "get" | "setex" | "del">;
+
+const getRedisClient = (): RedisClient => {
+  const redisUrl = process.env.KV_URL;
+  if (!redisUrl) {
+    throw new Error("KV_URL environment variable is required");
+  }
+  const redis = new Redis(redisUrl, {
+    maxRetriesPerRequest: 3,
+    lazyConnect: true,
+  });
+
+  redis.on("error", (error) => {
+    console.error("Redis error:", error);
+  });
+
+  // not necessary but will indicate redis config errors by failfast at startup
+  // happens only once; after that connection is allowed to die and the lib is assumed to be able to restore it eventually
+  redis.connect().catch((e) => {
+    console.error("Failed to connect to Redis:", e);
+    process.exit(1);
+  });
+
+  return redis;
+};
+
+// 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,
+  };
+})();
+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(),
+    error: 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;
+  }
+}
+
+export async function setTokenCache(
+  redis: KV,
+  key: string,
+  value: TokenCacheEntry,
+): Promise<void> {
+  const encodedValue = TokenCacheEntryCodec.encode(value);
+  const ttlSeconds = Math.floor(REFRESH_ACCESS_TOKEN_BEFORE / 1000);
+  await redis.setex(key, ttlSeconds, encodedValue);
+}
+
+export async function deleteTokenCache(redis: KV, key: string): Promise<void> {
+  await redis.del(key);
+}

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,62 @@ 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: T,
+): 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: T,
+): T & {
+  accessTokenExpires: number;
+  accessToken: string;
+  user: U & {
+    id: string;
+  };
+} => {
+  const extendedToken = assertExtendedToken(t);
+  if (typeof (extendedToken.user as any)?.id === "string") {
+    return t as T & {
+      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 = <S extends Session>(s: S): CustomSession => {
+  const r = assertExtendedTokenAndUserId(s);
+  // no other checks for now
+  return r as CustomSession;
+};

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,7 @@
+import { useAuth } from "./AuthProvider";
+
+export const useUserName = (): string | null | undefined => {
+  const auth = useAuth();
+  if (auth.status !== "authenticated") return undefined;
+  return auth.user?.name || null;
+};

www/app/lib/utils.ts

@@ -137,9 +137,28 @@ 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 assertExistsAndNonEmptyString = (
+  value: string | null | undefined,
+): NonEmptyString =>
+  parseNonEmptyString(assertExists(value, "Expected non-empty string"));

www/app/providers.tsx

@@ -6,16 +6,26 @@ import system from "./styles/theme";
 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";
 
 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>
   );
 }