@manta-eu/react 0.12.0 → 0.13.0

package/src/lib/app-tools.ts

@@ -0,0 +1,63 @@
+import type { AITool, OnToolCallCallback } from "@cloudflare/think/react";
+import { requestUserInputToolName } from "@manta-eu/client/shared/questionnaire";
+import { isPresent } from "@manta-eu/lib/present";
+
+/** A tool the host app lends the agent. It runs in the browser, with the app's own access. */
+export type AppTool<Input = never, Output = unknown> = Required<
+  Pick<AITool<Input, Output>, "description" | "parameters">
+> & {
+  execute: (input: Input) => Output | Promise<Output>;
+};
+
+// oxlint-disable-next-line typescript/no-explicit-any -- each tool narrows its own input
+export type AppTools = Record<string, AppTool<any>>;
+
+type AppToolChatOptions = { tools?: AppTools; onToolCall?: OnToolCallCallback; body?: { clientTools: [] } };
+
+type AppToolCallEvent = Parameters<OnToolCallCallback>[0];
+
+// The pattern the model providers accept for a tool name.
+const validToolName = /^[a-zA-Z0-9_-]{1,64}$/;
+
+// The chat runs onToolCall for the agent's own tool calls too, so an app tool must not share a name with one.
+const reservedToolNames = new Set([requestUserInputToolName]);
+
+export function appToolChatOptions(appTools: AppTools | undefined): AppToolChatOptions {
+  // Think keeps the last tools a chat sent until a request sends an empty list.
+  if (!isPresent(appTools)) return { body: { clientTools: [] } };
+
+  refuseInvalidToolNames(appTools);
+  return { tools: appTools, onToolCall: (event) => runAppToolCall(appTools, event) };
+}
+
+export async function runAppToolCall(appTools: AppTools, event: AppToolCallEvent): Promise<void> {
+  const { toolCall, addToolOutput } = event;
+  const tool = appToolNamed(appTools, toolCall.toolName);
+  if (!isPresent(tool)) return;
+
+  try {
+    addToolOutput({ toolCallId: toolCall.toolCallId, output: await tool.execute(toolCall.input as never) });
+  } catch (error) {
+    // An "output-error" result ends the turn, so the agent gets the error as a normal output and can continue.
+    const errorText = error instanceof Error ? error.message : String(error);
+    addToolOutput({ toolCallId: toolCall.toolCallId, output: { error: errorText } });
+  }
+}
+
+function refuseInvalidToolNames(appTools: AppTools): void {
+  const names = Object.keys(appTools);
+
+  const invalid = names.find((name) => !validToolName.test(name));
+  if (invalid !== undefined) {
+    throw new Error(`The app tool name "${invalid}" is not valid. Use 1 to 64 letters, digits, underscores or dashes.`);
+  }
+
+  const reserved = names.find((name) => reservedToolNames.has(name));
+  if (reserved !== undefined) {
+    throw new Error(`The app tool name "${reserved}" is reserved for the agent's own tool.`);
+  }
+}
+
+function appToolNamed(appTools: AppTools, name: string): AppTools[string] | undefined {
+  return Object.hasOwn(appTools, name) ? appTools[name] : undefined;
+}

package/src/lib/chat-types.ts

@@ -19,6 +19,10 @@ import type { PageContext } from "@manta-eu/client/shared/page-context";
 
 export type { PageContext };
 
+import type { AppTool, AppTools } from "#lib/app-tools";
+
+export type { AppTool, AppTools };
+
 export type CopilotMenuDefaults = {
   openInManta: ReactNode | null;
   debugMessages: ReactNode | null;
@@ -55,6 +59,7 @@ export type AuthenticatedChatProps = {
   collapsible?: boolean;
   isCollapsed?: boolean;
   pageContext?: PageContext;
+  appTools?: AppTools;
   mode?: ConversationMode;
   allowedModels?: MantaModelId[];
   initialPrompt?: string;

package/src/lib/datastore-route-table.ts

@@ -11,10 +11,13 @@ export type RouteElements = {
   Explain?: ReactNode;
   Streams?: ReactNode;
   Datastores?: ReactNode;
+  Group?: ReactNode;
   Memories?: ReactNode;
   Activity?: ReactNode;
   ActivityDetail?: ReactNode;
   Integrations?: ReactNode;
+  IntegrationsMcp?: ReactNode;
+  IntegrationsMcpServer?: ReactNode;
   ShopifyConnect?: ReactNode;
   Team?: ReactNode;
   CustomApps?: ReactNode;
@@ -48,6 +51,7 @@ export const notFoundRoutePath = "*";
 
 export const globalRoutes: RouteDefinition[] = [
   { path: "/datastores", render: (e) => e.Datastores || notFoundElement(e) },
+  { path: "/g/:group", render: (e) => e.Group || notFoundElement(e) },
   // Global, not datastore-scoped: Shopify sends the merchant here before any datastore is known.
   { path: "/shopify/connect", render: (e) => e.ShopifyConnect || notFoundElement(e) },
   { path: "/custom-apps", render: (e) => e.CustomApps || notFoundElement(e) },
@@ -64,9 +68,14 @@ export const datastoreRoutes: RouteDefinition[] = [
   { path: "/explain", render: (e) => e.Explain || e.Chat },
   { path: "/streams", render: (e) => e.Streams || notFoundElement(e) },
   { path: "/memories", render: (e) => e.Memories || e.Chat },
+  { path: "/memories/schemas/new", render: (e) => e.Memories || e.Chat },
+  { path: "/memories/schemas/:schemaName", render: (e) => e.Memories || e.Chat },
+  { path: "/memories/schemas/:schemaName/edit", render: (e) => e.Memories || e.Chat },
   { path: "/activity", render: (e) => e.Activity || notFoundElement(e) },
   { path: "/activity/:id", render: (e) => e.ActivityDetail || notFoundElement(e) },
   { path: "/integrations", render: (e) => e.Integrations || e.Chat },
+  { path: "/integrations/mcp", render: (e) => e.IntegrationsMcp || notFoundElement(e) },
+  { path: "/integrations/mcp/:serverId", render: (e) => e.IntegrationsMcpServer || notFoundElement(e) },
   { path: "/team", render: (e) => e.Team || notFoundElement(e) },
   {
     path: "/data",

package/src/lib/graphql-error.ts

@@ -0,0 +1,7 @@
+import { ClientError } from "graphql-request";
+
+export function graphqlErrorMessage(error: unknown, fallback: string): string {
+  if (error instanceof ClientError) return error.response.errors?.[0]?.message ?? fallback;
+
+  return error instanceof Error ? error.message : fallback;
+}

package/src/lib/update-notice.ts

@@ -22,6 +22,14 @@ export type Channel = "none" | "toast" | "screen";
 
 let shown: Channel = "none";
 
+const defaultAppName = "Manta";
+
+let appName = defaultAppName;
+
+export function updateNoticeAppName() {
+  return appName;
+}
+
 export function announceUpdate(channel: Exclude<Channel, "none">) {
   if (channel === "screen") {
     if (shown === "toast") toast.dismiss(noticeId);
@@ -35,7 +43,7 @@ export function announceUpdate(channel: Exclude<Channel, "none">) {
 
   shown = "toast";
 
-  toast("A new version of Manta is available", {
+  toast(`A new version of ${appName} is available`, {
     id: noticeId,
     description: "Parts of the app can't load until you reload the page.",
     duration: Number.POSITIVE_INFINITY,
@@ -44,7 +52,9 @@ export function announceUpdate(channel: Exclude<Channel, "none">) {
   });
 }
 
-export function installUpdateNotice() {
+export function installUpdateNotice(name = defaultAppName) {
+  appName = name;
+
   window.addEventListener("vite:preloadError", () => {
     announceUpdate("toast");
   });

package/src/providers/ActiveChatProvider.tsx

@@ -12,6 +12,7 @@ import { createChatReconnectRecoveryTracker } from "./chat-reconnect-recovery";
 import { useChatSocketAuth, useChatTokenRefresh } from "./chat-socket-auth";
 import { prepareThinkChatSendRequest } from "./think-chat-request";
 import { useGraphRefreshAfterTurn } from "#hooks/use-graph-refresh-after-turn";
+import { appToolChatOptions, type AppTools } from "#lib/app-tools";
 
 export type { ActiveChatConnectionState } from "./chat-connection-lifecycle";
 
@@ -29,8 +30,8 @@ export function useActiveChatConnection(): ActiveChatConnectionContextValue | un
   return useContext(ActiveChatConnectionContext);
 }
 
-export function ActiveChatProvider(props: { children: ReactNode }) {
-  const { children } = props;
+export function ActiveChatProvider(props: { appTools?: AppTools; children: ReactNode }) {
+  const { appTools, children } = props;
   const { session } = useChatManagerContext();
   const recoveredResponsesRef = useRef(new Set<string>());
   const [sessionGeneration, setSessionGeneration] = useState(0);
@@ -58,6 +59,7 @@ export function ActiveChatProvider(props: { children: ReactNode }) {
       key={`${session.activeConversationId}:${sessionGeneration}`}
       conversationId={session.activeConversationId}
       session={session}
+      appTools={appTools}
       onStaleTerminalResponse={recoverStaleTerminalResponse}
     >
       {children}
@@ -68,12 +70,13 @@ export function ActiveChatProvider(props: { children: ReactNode }) {
 type ThinkChatSessionProps = {
   conversationId: string;
   session: ThinkChatSessionConfig;
+  appTools: AppTools | undefined;
   onStaleTerminalResponse: (assistantMessageId: string) => void;
   children: ReactNode;
 };
 
 function ThinkChatSession(props: ThinkChatSessionProps) {
-  const { conversationId, session, onStaleTerminalResponse, children } = props;
+  const { conversationId, session, appTools, onStaleTerminalResponse, children } = props;
   const { host, datastoreQuery, messageHandoff, consumeMessageHandoff } = session;
   const wasCompactingRef = useRef(false);
   const sentHandoffMessageIdRef = useRef<string | undefined>(undefined);
@@ -117,12 +120,14 @@ function ThinkChatSession(props: ThinkChatSessionProps) {
   });
   useChatTokenRefresh(childAgent);
 
+  const appToolOptions = useMemo(() => appToolChatOptions(appTools), [appTools]);
   const chatData = useAgentChat<ThinkChatState, ChatUIMessage>({
     agent: childAgent,
     credentials: socketAuth.credentials,
     getInitialMessages: null,
     prepareSendMessagesRequest: prepareThinkChatSendRequest,
     resume: true,
+    ...appToolOptions,
   });
 
   useGraphRefreshAfterTurn(chatData.isStreaming);

package/src/providers/ActiveDatastoreProvider.tsx

@@ -1,7 +1,18 @@
 import { datastoreBasename, parseDatastorePath, withDatastorePrefix } from "@manta-eu/client/shared/datastore-path";
-import { createContext, use, useCallback, useLayoutEffect, useMemo, useState, type ReactNode } from "react";
+import {
+  createContext,
+  use,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import {
   createPath,
+  NavigationType as NavigationAction,
   Router,
   UNSAFE_createBrowserHistory as createBrowserHistory,
   useNavigate,
@@ -17,7 +28,31 @@ export type ActiveDatastoreState = {
   navigateAbsolute: (path: string, options?: { replace?: boolean }) => void;
 };
 
-type RouterState = { history: ReturnType<typeof createBrowserHistory>; action: NavigationType; location: Location };
+type BrowserHistory = ReturnType<typeof createBrowserHistory>;
+
+type RouterState = { history: BrowserHistory; navigator: Navigator; action: NavigationType; location: Location };
+
+type Navigator = Pick<BrowserHistory, "createHref" | "encodeLocation" | "go" | "push" | "replace">;
+
+type NavigationGuard = {
+  hold: () => () => void;
+  pending: boolean;
+  proceed: () => void;
+  reset: () => void;
+  bypass: (navigation: () => void) => void;
+  confirmLeave: () => Promise<boolean>;
+};
+
+type HeldNavigation = { resume: () => void; cancel?: () => void };
+
+const NavigationGuardContext = createContext<NavigationGuard>({
+  hold: () => () => {},
+  pending: false,
+  proceed: () => {},
+  reset: () => {},
+  bypass: (navigation) => navigation(),
+  confirmLeave: async () => true,
+});
 
 const ActiveDatastoreContext = createContext<ActiveDatastoreState>({
   datastoreId: undefined,
@@ -44,17 +79,124 @@ export function ActiveDatastoreProvider(props: ActiveDatastoreProviderProps) {
     action: history.action,
     location: history.location,
   }));
+  const holds = useRef(0);
+  const bypassing = useRef(false);
+  const passingDelta = useRef<number | null>(null);
+  const revertingPop = useRef(false);
+  const heldRef = useRef<HeldNavigation | null>(null);
+  const [held, setHeld] = useState<HeldNavigation | null>(null);
+
+  const replaceHeld = useCallback((next: HeldNavigation | null) => {
+    const previous = heldRef.current;
+    heldRef.current = next;
+    setHeld(next);
+    return previous;
+  }, []);
+
+  const attempt = useCallback(
+    (navigation: () => void) => {
+      if (holds.current > 0 && !bypassing.current) replaceHeld({ resume: navigation })?.cancel?.();
+      else navigation();
+    },
+    [replaceHeld],
+  );
+
+  // A bypassed step lands on a later popstate, so the next update passes only if it moves by the same delta.
+  const step = useCallback(
+    (delta: number) => {
+      if (bypassing.current) passingDelta.current = delta;
+      history.go(delta);
+    },
+    [history],
+  );
+
+  // A back or forward step has already moved the URL, so a held one is stepped back first and replayed on proceed.
+  useLayoutEffect(
+    () =>
+      history.listen((update) => {
+        if (revertingPop.current) {
+          revertingPop.current = false;
+          return;
+        }
+        const passing = passingDelta.current;
+        passingDelta.current = null;
+        if (update.action === NavigationAction.Pop && holds.current > 0 && update.delta && update.delta !== passing) {
+          const { delta } = update;
+          revertingPop.current = true;
+          history.go(-delta);
+          replaceHeld({ resume: () => step(delta) })?.cancel?.();
+          return;
+        }
+        setRouterState(update);
+      }),
+    [history, replaceHeld, step],
+  );
 
-  useLayoutEffect(() => history.listen(setRouterState), [history]);
+  const navigator = useMemo<Navigator>(
+    () => ({
+      createHref: history.createHref,
+      encodeLocation: history.encodeLocation,
+      go: (delta) => attempt(() => step(delta)),
+      push: (to, state) => attempt(() => history.push(to, state)),
+      replace: (to, state) => attempt(() => history.replace(to, state)),
+    }),
+    [history, attempt, step],
+  );
+
+  const bypass = useCallback((navigation: () => void) => {
+    bypassing.current = true;
+    try {
+      navigation();
+    } finally {
+      bypassing.current = false;
+    }
+  }, []);
+
+  // For a caller that must act before it navigates, such as switching the session's datastore.
+  const confirmLeave = useCallback(
+    () =>
+      holds.current > 0
+        ? new Promise<boolean>((resolve) => {
+            replaceHeld({ resume: () => resolve(true), cancel: () => resolve(false) })?.cancel?.();
+          })
+        : Promise.resolve(true),
+    [replaceHeld],
+  );
+
+  // Once no page guards, nothing can proceed or reset a held navigation, so it is dropped and its caller hears no.
+  const hold = useCallback(() => {
+    holds.current += 1;
+    return () => {
+      holds.current -= 1;
+      if (holds.current === 0) replaceHeld(null)?.cancel?.();
+    };
+  }, [replaceHeld]);
+
+  const guard = useMemo<NavigationGuard>(
+    () => ({
+      hold,
+      pending: held !== null,
+      proceed: () => {
+        const current = replaceHeld(null);
+        if (current) bypass(current.resume);
+      },
+      reset: () => replaceHeld(null)?.cancel?.(),
+      bypass,
+      confirmLeave,
+    }),
+    [hold, held, bypass, confirmLeave, replaceHeld],
+  );
 
   const moveTo = useCallback(
     (target: string, replace: boolean) => {
       if (createPath(history.location) === target) return;
 
-      if (replace) history.replace(target);
-      else history.push(target);
+      attempt(() => {
+        if (replace) history.replace(target);
+        else history.push(target);
+      });
     },
-    [history],
+    [history, attempt],
   );
 
   const enterDatastore = useCallback(
@@ -76,11 +218,13 @@ export function ActiveDatastoreProvider(props: ActiveDatastoreProviderProps) {
     [datastoreId, enterDatastore, navigateAbsolute],
   );
 
-  const routerState = useMemo(() => ({ history, action, location }), [history, action, location]);
+  const routerState = useMemo(() => ({ history, navigator, action, location }), [history, navigator, action, location]);
 
   return (
     <ActiveDatastoreContext.Provider value={value}>
-      <RouterStateContext.Provider value={routerState}>{children}</RouterStateContext.Provider>
+      <NavigationGuardContext.Provider value={guard}>
+        <RouterStateContext.Provider value={routerState}>{children}</RouterStateContext.Provider>
+      </NavigationGuardContext.Provider>
     </ActiveDatastoreContext.Provider>
   );
 }
@@ -101,7 +245,7 @@ export function ActiveDatastoreRouter(props: ActiveDatastoreRouterProps) {
       basename={basename}
       location={routerState.location}
       navigationType={routerState.action}
-      navigator={routerState.history}
+      navigator={routerState.navigator}
     >
       {children}
     </Router>
@@ -121,3 +265,29 @@ export function useAbsoluteNavigate(): (path: string) => void {
     [datastoreId, navigateAbsolute, navigate],
   );
 }
+
+export type NavigationBlocker = {
+  blocked: boolean;
+  proceed: () => void;
+  reset: () => void;
+  bypass: (navigation: () => void) => void;
+};
+
+export type LeaveConfirmation = {
+  confirmLeave: () => Promise<boolean>;
+  bypass: (navigation: () => void) => void;
+};
+
+export function useLeaveConfirmation(): LeaveConfirmation {
+  const { confirmLeave, bypass } = use(NavigationGuardContext);
+  return useMemo(() => ({ confirmLeave, bypass }), [confirmLeave, bypass]);
+}
+
+export function useNavigationBlocker(when: boolean): NavigationBlocker {
+  const guard = use(NavigationGuardContext);
+  const { hold } = guard;
+
+  useEffect(() => (when ? hold() : undefined), [when, hold]);
+
+  return { blocked: guard.pending, proceed: guard.proceed, reset: guard.reset, bypass: guard.bypass };
+}

package/src/providers/AuthContext.ts

@@ -18,6 +18,7 @@ export type AuthContextValue = Pick<
   | "allowedModels"
 > & {
   user: User;
+  canManageDatastores?: boolean;
   // Only Manta's own web app may list the apps connected to someone; any other host's token is refused.
   canDisconnectCustomApps?: boolean;
   hasProfilePage?: boolean;

package/src/providers/MantaClientProvider.tsx

@@ -1,5 +1,10 @@
 import { bearerFetch, mantaGQLPath, mantaGraphQLClient, type AccessTokenSource } from "@manta-eu/client";
-import { datastoreHeader, withDatastorePrefix } from "@manta-eu/client/shared/datastore-path";
+import {
+  datastoreHeader,
+  sparqlRoutePath,
+  uploadPartRoutePath,
+  withDatastorePrefix,
+} from "@manta-eu/client/shared/datastore-path";
 import { ontologyGraphIri as defaultOntologyGraphIri } from "@manta-eu/client/shared/rdf-namespaces";
 import type { ReactNode } from "react";
 import { use, useCallback, useMemo } from "react";
@@ -46,7 +51,7 @@ export function MantaClientProvider(props: MantaClientProviderProps) {
   } = props;
 
   const mantaBaseUrl = useMemo(() => new URL(mantaGQLPath, baseUrl), [baseUrl]);
-  const sparqlUrl = useMemo(() => new URL("/sparql", baseUrl), [baseUrl]);
+  const sparqlUrl = useMemo(() => new URL(sparqlRoutePath, baseUrl), [baseUrl]);
   const datastoreHeaders = useMemo(() => datastoreHeader(datastoreId), [datastoreId]);
   const datastorePath = useCallback(
     (path: string) => (datastoreId ? withDatastorePrefix(datastoreId, path) : path),
@@ -78,7 +83,7 @@ export function MantaClientProvider(props: MantaClientProviderProps) {
       getAccessToken
         ? {
             partUrl: (presignedUrl: string) => {
-              const url = new URL(datastorePath("/agents/uploads/part"), baseUrl);
+              const url = new URL(datastorePath(uploadPartRoutePath), baseUrl);
               url.searchParams.set("url", presignedUrl);
               return url.toString();
             },

package/src/providers/index.tsx

@@ -6,7 +6,7 @@ import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { Link } from "react-router";
-import { EntityLinkProvider, type EntityLinkProps } from "../graph/entity-link";
+import { EntityLinkProvider, type EntityLinkComponent, type EntityLinkProps } from "../graph/entity-link";
 import { ActiveDatastoreProvider, ActiveDatastoreRouter, useActiveDatastore } from "./ActiveDatastoreProvider";
 import { GenerateStructuredDataProvider } from "./GenerateStructuredDataProvider";
 import { KnowledgeGraphPollingProvider } from "./KnowledgeGraphPollingProvider";
@@ -40,6 +40,7 @@ export type ProvidersProps = {
   getAccessToken?: AccessTokenSource;
   /** What Log out does for a getAccessToken host; see MantaClientProvider. */
   onSignOut?: () => void;
+  entityLink?: EntityLinkComponent;
 };
 
 // Each datastore gets its own cache, but passing through "no datastore" (the global picker) must not discard it.
@@ -103,7 +104,7 @@ function RecordEntityLink(props: EntityLinkProps) {
 }
 
 export function Providers(props: ProvidersProps) {
-  const { children, ...coreProps } = props;
+  const { children, entityLink = RecordEntityLink, ...coreProps } = props;
 
   return (
     <ActiveDatastoreProvider>
@@ -111,7 +112,7 @@ export function Providers(props: ProvidersProps) {
         <CoreProviders {...coreProps}>
           <ActiveDatastoreRouter>
             <NuqsAdapter>
-              <EntityLinkProvider component={RecordEntityLink}>{children}</EntityLinkProvider>
+              <EntityLinkProvider component={entityLink}>{children}</EntityLinkProvider>
             </NuqsAdapter>
           </ActiveDatastoreRouter>
         </CoreProviders>
@@ -120,7 +121,9 @@ export function Providers(props: ProvidersProps) {
   );
 }
 
-export type EmbeddedChatProvidersProps = Omit<ProvidersProps, "mantaBaseUrl"> & { mantaBaseUrl?: string };
+export type EmbeddedChatProvidersProps = Omit<ProvidersProps, "mantaBaseUrl" | "entityLink"> & {
+  mantaBaseUrl?: string;
+};
 
 // IMPORTANT: Avoid redirects from embedded manta client
 export function EmbeddedChatProviders(props: EmbeddedChatProvidersProps) {

package/src/routes/activity/detail/ActivityDetailRoute.tsx

@@ -7,12 +7,10 @@ import { useLocalStorage } from "usehooks-ts";
 import { ActivityDetail, activityLayoutValues, type ActivityLayout } from "./ActivityDetail";
 import { Button } from "#components/button/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
-import { useAuthContext } from "#providers/AuthContext";
 
 const layoutStorageKey = "activity-detail-layout";
 
 export function ActivityDetailRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
   const navigate = useNavigate();
   // The URL param is the IRI local name; buildActivityIri rebuilds the full IRI.
   const { id } = useParams();
@@ -27,14 +25,7 @@ export function ActivityDetailRoute() {
   );
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <ActivityDetail
         activityIri={activityIri}
         leading={

package/src/routes/activity/index.tsx

@@ -14,7 +14,6 @@ import { PageBody, PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
 import { useFittedPagination } from "#hooks/useFittedPagination";
 import { type ActivityFeedFilters, type ActivityStatusFilter, useActivityFeed } from "#ldo-ui";
-import { useAuthContext } from "#providers/AuthContext";
 
 const activityTableGeometry = {
   headerRowHeight: 52,
@@ -25,7 +24,6 @@ const activityTableGeometry = {
 const statusValues = ["all", "completed", "failed", "running"] as const;
 
 export function ActivityRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
   const navigate = useNavigate();
 
   const [page, setPage] = useQueryState("page", parseAsInteger.withDefault(1));
@@ -82,14 +80,7 @@ export function ActivityRoute() {
   }
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <PageHeader title="Activity" icon={ActivityIcon} />
       <PageBody className="flex min-h-0 flex-col gap-4">
         <ActivityFilters

package/src/routes/chat/index.tsx

@@ -1,60 +1,24 @@
-import type { MantaModelId } from "@manta-eu/client/shared/model";
-import type { ReactNode } from "react";
 import { Chat } from "#components/chat-view/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
-import type { ChatDraft, Datastore, User } from "#lib/chat-types";
-import { AssistantIconProvider, type AssistantIcon } from "#providers/AssistantIconProvider";
+import type { AuthenticatedChatProps } from "#lib/chat-types";
+import { AssistantIconProvider } from "#providers/AssistantIconProvider";
 import { AssistantNameProvider } from "#providers/AssistantNameProvider";
+import { useAuthContext } from "#providers/AuthContext";
 
-type ChatRouteProps = {
-  datastore?: Datastore;
-  user: User;
-  logout?: () => void;
-  isOperator: boolean;
-  canSwitchDatastore?: boolean;
-  datastores?: Datastore[];
-  allowedModels?: MantaModelId[];
-  initialPrompt?: string;
-  initialDraft?: ChatDraft;
-  title?: string;
-  welcomeSubtitle?: string;
-  assistantName?: string;
-  assistantIcon?: AssistantIcon;
-  mark?: ReactNode;
-};
+export type ChatRouteProps = Pick<
+  AuthenticatedChatProps,
+  "initialPrompt" | "initialDraft" | "title" | "welcomeSubtitle" | "assistantName" | "assistantIcon" | "mark"
+>;
 
 export function ChatRoute(props: ChatRouteProps) {
-  const {
-    datastore,
-    user,
-    logout,
-    isOperator,
-    canSwitchDatastore,
-    datastores,
-    allowedModels,
-    initialPrompt,
-    initialDraft,
-    title,
-    welcomeSubtitle,
-    assistantName,
-    assistantIcon,
-    mark,
-  } = props;
+  const { initialPrompt, initialDraft, title, welcomeSubtitle, assistantName, assistantIcon, mark } = props;
+
+  const { datastore, user, logout, isOperator, allowedModels } = useAuthContext();
 
   return (
     <AssistantNameProvider name={assistantName}>
       <AssistantIconProvider icon={assistantIcon}>
-        <RouteLayout
-          user={user}
-          datastore={datastore}
-          datastores={datastores}
-          isOperator={isOperator}
-          canSwitchDatastore={canSwitchDatastore}
-          logout={logout}
-          floatingMobileMenu
-          title={title}
-          mark={mark}
-        >
+        <RouteLayout floatingMobileMenu title={title} mark={mark}>
           <Chat
             datastore={datastore}
             user={user}