Promise; register: (name: string, email: string, password: string) => Promise; logout: () => Promise; refreshUser: () => Promise; } export const AuthContext = createContext({ user: null, isLoading: true, isAdmin: false, login: async () => {}, register: async () => {}, logout: async () => {}, refreshUser: async () => {}, }); ``` Sources: [server/dashboard/src/lib/auth.tsx:13-39](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/lib/auth.tsx#L13-L39) When the component mounts, an effect hook invokes `refreshSession()` to exchange an HTTP-only refresh cookie for an access token. If successful, it calls `loadUser()` to fetch user details from `AUTH_ENDPOINTS.ME`. In case of failure or network rejection, `user` resets to `null`, and `isLoading` sets to `false`. ```tsx export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null); const [isLoading, setIsLoading] = useState(true); const loadUser = useCallback(async () => { const res = await api.get(AUTH_ENDPOINTS.ME); setUser(res.data); }, []); useEffect(() => { let active = true; (async () => { try { const ok = await refreshSession(); if (ok && active) await loadUser(); } catch { if (active) setUser(null); } finally { if (active) setIsLoading(false); } })(); return () => { active = false; }; }, [loadUser]); ``` Sources: [server/dashboard/src/lib/auth.tsx:64-88](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/lib/auth.tsx#L13-L88) > [!WARNING] > Component unmounting sets `active = false` to prevent asynchronous state updates on unmounted component instances during initial session validation. Sources: [server/dashboard/src/lib/auth.tsx:73-87](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/lib/auth.tsx#L73-L87) ### API Token Handlers and Cookie Routes Client authentication helpers communicate with Next.js API route handlers to read, write, and purge session tokens. The backend refresh route manages secure cookies named `mem0_refresh_token` using parameters configured in `COOKIE_OPTIONS`. ```typescript const COOKIE_NAME = "mem0_refresh_token"; function shouldUseSecureCookie() { const dashboardUrl = process.env.DASHBOARD_URL; if (!dashboardUrl) { return process.env.NODE_ENV === "production"; } try { return new URL(dashboardUrl).protocol === "https:"; } catch { return process.env.NODE_ENV === "production"; } } const COOKIE_OPTIONS = { httpOnly: true, secure: shouldUseSecureCookie(), sameSite: "lax" as const, path: "/", maxAge: 30 * 24 * 60 * 60, // 30 days }; ``` Sources: [server/dashboard/src/app/api/auth/refresh/route.ts:6-27](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/api/auth/refresh/route.ts#L6-L27) | Route Method | Action | Request Payload | Response | Error Code | | :--- | :--- | :--- | :--- | :--- | | **POST** | Validates existing refresh token and issues new tokens | None (reads cookie) | `{ access_token }` | `401` | | **PUT** | Stores refresh token in HTTP-only cookie | `{ refresh_token }` | `{ ok: true }` | `400` | | **DELETE** | Clears refresh token cookie | None | `{ ok: true }` | — | Sources: [server/dashboard/src/app/api/auth/refresh/route.ts:29-75](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/api/auth/refresh/route.ts#L29-L75) Authentication hooks like `useAuth` provide clean access to the context throughout component trees by wrapping `useContext(AuthContext)`. ```typescript export function useAuth() { return useContext(AuthContext); } ``` Sources: [server/dashboard/src/hooks/use-auth.ts:6-8](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-auth.ts#L6-L8) ## Route Protection and Edge Middleware ### Middleware Execution and Path Interception The dashboard relies on Next.js edge middleware running prior to route resolution to inspect incoming requests and enforce authentication policies. The middleware matches requests against paths excluding static assets and static files as defined by the matcher configuration. ```typescript export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|fonts|images|icons).*)"], }; ``` Sources: [server/dashboard/src/middleware.ts:65-67](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L65-L67) Incoming path evaluation begins by checking against a static array of public prefixes. If a request pathname starts with any entry in `PUBLIC_PATHS`, the middleware bypasses all checks and allows execution to proceed. ```typescript const PUBLIC_PATHS = [ "/_next", "/api/auth", "/api/health", "/fonts", "/favicon", ]; export async function middleware(request: NextRequest) { const { pathname } = request.nextUrl; if (PUBLIC_PATHS.some((p) => pathname.startsWith(p))) { return NextResponse.next(); } ``` Sources: [server/dashboard/src/middleware.ts:5-18](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L5-L18) | Public Path Prefix | Purpose | | :--- | :--- | | `/_next` | Next.js internal static chunks and assets | | `/api/auth` | Authentication endpoints and token refresh routes | | `/api/health` | System health check inspection route | | `/fonts` | Application font files | | `/favicon` | Browser icon assets | Sources: [server/dashboard/src/middleware.ts:5-11](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L5-L11) ### Setup Status Verification and Routing When a request targets root paths (`/`, `/login`, or `/setup`), the middleware queries the backend server setup status endpoint to determine whether initial deployment registration is required. ```typescript if (pathname === "/" || pathname === "/login" || pathname === "/setup") { try { const res = await fetch( `${getServerApiUrl()}${AUTH_ENDPOINTS.SETUP_STATUS}`, ); ``` Sources: [server/dashboard/src/middleware.ts:22-26](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L22-L26) > [!WARNING] > If the backend API is unreachable during setup status checks, the network request throws an error which is caught locally, causing the middleware to gracefully fall through to standard navigation rules without blocking requests. Sources: [server/dashboard/src/middleware.ts:37-39](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L37-L39) Depending on the boolean flag `needsSetup` returned from the API, the middleware enforces routing rules: ```typescript if (res.ok) { const { needsSetup } = await res.json(); if (needsSetup && pathname !== "/setup") { return NextResponse.redirect(new URL("/setup", request.url)); } if (!needsSetup && pathname === "/setup") { return NextResponse.redirect(new URL("/login", request.url)); } } ``` Sources: [server/dashboard/src/middleware.ts:27-36](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L27-L36) ### Token Verification and Protected Navigation For routes outside the public or setup pathways, the middleware checks for the presence of the HTTP-only refresh token cookie (`mem0_refresh_token`). ```typescript const hasRefreshToken = request.cookies.has("mem0_refresh_token"); ``` Sources: [server/dashboard/src/middleware.ts:20-20](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L20-L20) If a user visits the application root (`/`), redirection behavior branches based on whether the refresh token cookie exists. If present, the user is forwarded to `/dashboard/requests`; otherwise, they are routed to `/login`. Similarly, base dashboard paths (`/dashboard` or `/dashboard/`) automatically rewrite to `/dashboard/requests`. ```typescript if (pathname === "/") { return NextResponse.redirect( new URL(hasRefreshToken ? "/dashboard/requests" : "/login", request.url), ); } if (pathname === "/dashboard" || pathname === "/dashboard/") { return NextResponse.redirect(new URL("/dashboard/requests", request.url)); } ``` Sources: [server/dashboard/src/middleware.ts:46-54](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L46-L54) When a protected route is accessed without the `mem0_refresh_token` cookie, the middleware constructs a redirect response targeting `/login` and appends the original destination to a `next` query parameter so the client can resume its path after authentication. ```typescript if (!hasRefreshToken) { const loginUrl = new URL("/login", request.url); loginUrl.searchParams.set("next", pathname); return NextResponse.redirect(loginUrl); } ``` Sources: [server/dashboard/src/middleware.ts:56-60](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/middleware.ts#L56-L60) ## Axios Client and Token Interception ### Centralized API Client Setup and Bearer Token Injection The dashboard instantiates a centralized Axios instance configured with a base URL sourced from `process.env.NEXT_PUBLIC_API_URL`. To authenticate outgoing requests, a request interceptor inspects the in-memory token cache and injects a Bearer authorization header if a token exists. ```typescript let cachedToken: string | null = null; const LOGIN_PATH = "/login"; export const setAccessToken = (token: string | null) => { cachedToken = token; }; export const getAccessToken = (): string | null => { return cachedToken; }; ``` Sources: [server/dashboard/src/utils/api.ts:3-13](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L3-L13) ```typescript const api = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL, }); api.interceptors.request.use( async (config) => { if (cachedToken) { config.headers = config.headers ?? {}; config.headers.Authorization = `Bearer ${cachedToken}`; } return config; }, (error) => { return Promise.reject(error); }, ); ``` Sources: [server/dashboard/src/utils/api.ts:42-57](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L42-L57) > [!NOTE] > Tokens are held exclusively in runtime memory via `cachedToken` and manipulated using `setAccessToken` and `getAccessToken` helpers, preventing persistent storage vulnerabilities on the client side. Sources: [server/dashboard/src/utils/api.ts:3-12](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L3-L12) ### Response Interception and Token Refresh Flow When an API request encounters a 401 Unauthorized response, the response interceptor triggers an automated token recovery sequence. It first clears the stored token via `handleTokenError` and issues a POST request to `/api/auth/refresh` with credentials included. ```typescript const handleTokenError = () => { cachedToken = null; }; ``` Sources: [server/dashboard/src/utils/api.ts:14-16](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L14-L16) ```typescript const refreshAccessToken = async () => { const refreshResponse = await fetch("/api/auth/refresh", { method: "POST", credentials: "include", }); if (!refreshResponse.ok) { return null; } const data = await refreshResponse.json(); setAccessToken(data.access_token); return data.access_token as string; }; ``` Sources: [server/dashboard/src/utils/api.ts:24-37](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L24-L37) If the refresh endpoint returns a valid new access token, the client updates its cache, attaches the new Bearer token to the original request configuration, and retries the failed call. If the refresh attempt fails or throws an exception, the client clears the token cache and executes a window redirect to `/login`. ```typescript api.interceptors.response.use( (response) => response, async (error: AxiosError<{ error?: string }>) => { if (error.response?.status === 401) { handleTokenError(); try { const nextToken = await refreshAccessToken(); if (nextToken && error.config) { error.config.headers = error.config.headers ?? {}; error.config.headers.Authorization = `Bearer ${nextToken}`; return api.request(error.config); } } catch {} handleTokenError(); redirectToLogin(); } ``` Sources: [server/dashboard/src/utils/api.ts:59-76](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L59-L76) ```typescript const redirectToLogin = () => { if (typeof window !== "undefined") { window.location.href = LOGIN_PATH; } }; ``` Sources: [server/dashboard/src/utils/api.ts:18-22](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L18-L22) ### Streaming Request Handling Alongside the standard Axios instance, the API module exposes a custom `postStream` helper designed to handle server-sent event or streaming payload requests via the native `fetch` API. ```typescript const postStream = async (url: string, data: unknown): Promise => { const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${url}`, { method: "POST", headers: { "Content-Type": "application/json", Authorization: cachedToken ? `Bearer ${cachedToken}` : "", }, body: JSON.stringify(data), }); ``` Sources: [server/dashboard/src/utils/api.ts:86-94](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L86-L94) The `postStream` function evaluates response statuses explicitly, throwing an unauthorized error and triggering `redirectToLogin` if a 401 status code occurs, or parsing error payloads when requests fail. ```typescript if (response.status === 401) { handleTokenError(); redirectToLogin(); throw new Error("Unauthorized"); } if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.error || "Request failed"); } return response; }; ``` Sources: [server/dashboard/src/utils/api.ts:96-108](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api.ts#L96-L108) ## Data Fetching Hook Lifecycle ### The `useApiQuery` Execution Model The `useApiQuery` custom hook manages asynchronous data fetching, loading flags, error strings, and manual refetch capabilities for dashboard components like ApiKeysPage and ConfigurationPage. It accepts a generic `fetcher` function alongside a `UseApiQueryOptions` configuration object specifying `enabled`, `errorToast`, and `initialData`. ```typescript interface UseApiQueryOptions { enabled?: boolean; errorToast?: string; initialData?: T; } interface UseApiQueryResult { data: T | undefined; isLoading: boolean; error: string; refetch: () => Promise; } export function useApiQuery( fetcher: () => Promise, options: UseApiQueryOptions = {}, ): UseApiQueryResult { ``` Sources: [server/dashboard/src/hooks/use-api-query.ts:5-21](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts#L5-L21) State management tracks resolved items via `data`, active request status via `isLoading`, and failure messages via `error`. A React `useRef` tracks the latest `fetcher` reference so callbacks execute the most up-to-date query logic without capturing stale closures. ```typescript const [data, setData] = useState(initialData); const [isLoading, setIsLoading] = useState(enabled); const [error, setError] = useState(""); const fetcherRef = useRef(fetcher); fetcherRef.current = fetcher; ``` Sources: [server/dashboard/src/hooks/use-api-query.ts:24-30](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts#L24-L30) ### Call-Chain Execution Walkthrough 1. `ApiKeysPage` or `ConfigurationPage` invokes `useApiQuery` during component initialization, passing a custom async fetcher and options. 2. `useApiQuery` defines the `run` callback via `useCallback`, which marks `isLoading` as true and clears any existing `error` string. 3. `run` executes `fetcherRef.current()` to retrieve network data, storing the resolved value in `data` upon success. 4. If an exception occurs, `getErrorMessage` processes the error alongside any provided `errorToast` label, populates `error`, and invokes `toast()` if an error toast option was specified. 5. The `finally` block sets `isLoading` to false, and a `useEffect` hook triggers `run` automatically on mount if `enabled` is true. ```typescript const run = useCallback(async () => { setIsLoading(true); setError(""); try { setData(await fetcherRef.current()); } catch (err) { const message = getErrorMessage(err, errorToast || "Request failed"); setError(message); if (errorToast) { toast({ title: errorToast, description: message, variant: "destructive", }); } } finally { setIsLoading(false); } }, [errorToast]); useEffect(() => { if (enabled) void run(); }, [enabled, run]); ``` Sources: [server/dashboard/src/hooks/use-api-query.ts:31-53](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts#L31-L53) ```mermaid sequenceDiagram participant Page as ApiKeysPage / ConfigurationPage participant Hook as useApiQuery participant Run as run() participant Fetcher as fetcherRef.current() Page->>Hook: Invoke useApiQuery(fetcher, options) Hook->>Run: useEffect / refetch triggers run() Run->>Fetcher: Execute fetcherRef.current() Fetcher-->>Run: Resolve data or throw error Run->>Hook: Update data, isLoading, error state & toast ``` Sources: [server/dashboard/src/hooks/use-api-query.ts:31-55](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts#L31-L55), [server/dashboard/src/app/root/dashboard/api-keys/page.tsx:41-47](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/api-keys/page.tsx#L41-L47), [server/dashboard/src/app/root/dashboard/configuration/page.tsx:41-47](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/configuration/page.tsx#L41-L47) ### Options and Return Signature Reference | Property / Parameter | Type | Default | Description | | :--- | :--- | :--- | :--- | | `enabled` | `boolean` | `true` | Controls whether the query executes automatically on initial component mount. | | `errorToast` | `string` | `undefined` | Title string passed to the centralized notification toast if the request fails. | | `initialData` | `T` | `undefined` | Fallback data value assigned before the initial fetch completes. | | `data` | `T \| undefined` | `initialData` | The successfully resolved payload returned by the fetcher function. | | `isLoading` | `boolean` | `enabled` | Boolean flag tracking whether an asynchronous fetch operation is currently in flight. | | `error` | `string` | `""` | Formatted error message string populated when a fetch exception occurs. | | `refetch` | `() => Promise` | — | Manual trigger function to re-run the asynchronous fetcher on demand. | ```typescript interface UseApiQueryOptions { enabled?: boolean; errorToast?: string; initialData?: T; } interface UseApiQueryResult { data: T | undefined; isLoading: boolean; error: string; refetch: () => Promise; } export function useApiQuery( fetcher: () => Promise, options: UseApiQueryOptions = {}, ): UseApiQueryResult { ``` Sources: [server/dashboard/src/hooks/use-api-query.ts:5-21](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts#L5-L21) ```typescript return { data, isLoading, error, refetch: run }; ``` Sources: [server/dashboard/src/hooks/use-api-query.ts:55-55](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts#L55-L55) > [!NOTE] > If `errorToast` is omitted from `UseApiQueryOptions`, failure messages update the local `error` state variable without dispatching an intrusive toast notification to the user interface. Sources: [server/dashboard/src/hooks/use-api-query.ts:37-45](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts#L37-L45) ## Redux Toolkit State and Navigation ### Redux Store Configuration and Root Reducer The application state container is established using Redux Toolkit's `configureStore` helper, importing a consolidated `rootReducer` that merges all feature slices. Currently, the store manages a single slice under the `layout` key, and exports standard TypeScript definitions for `RootState` and `AppDispatch`. ```typescript import { configureStore } from "@reduxjs/toolkit"; import rootReducer from "./rootReducer"; const store = configureStore({ reducer: rootReducer, }); export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; export default store; ``` Sources: [server/dashboard/src/store/store.ts:1-10](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/store/store.ts#L1-L10) ```typescript import { combineReducers } from "redux"; import { layoutReducer } from "./reducers/layoutReducer"; const rootReducer = combineReducers({ layout: layoutReducer, }); export default rootReducer; ``` Sources: [server/dashboard/src/store/rootReducer.ts:1-8](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/store/rootReducer.ts#L1-L8) | Export Name | Return Type / Definition | Purpose | | :--- | :--- | :--- | | `store` | Return type of `configureStore` | The central Redux store instance wrapping `rootReducer`. | | `RootState` | `ReturnType` | Global state type used by selectors across components. | | `AppDispatch` | `typeof store.dispatch` | Dispatch type for triggering slice actions. | Sources: [server/dashboard/src/store/store.ts:8-10](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/store/store.ts#L8-L10) > [!NOTE] > `rootReducer` uses Redux's `combineReducers` function, making it easy to append new feature slices alongside `layout` as the dashboard architecture expands. Sources: [server/dashboard/src/store/rootReducer.ts:1-6](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/store/rootReducer.ts#L1-L6) ### Collapsible Sidebar Navigation and Layout State The sidebar navigation layout relies on the `isSidebarCollapsed` boolean flag retrieved from `state.layout.isSidebarCollapsed` via Redux's `useSelector`. Depending on this state, components like `MainNav` and `NavWrapper` dynamically adapt their width, hide or display text labels, and toggle collapsible trigger groups. ```tsx const pathname = usePathname(); const isSidebarCollapsed = useSelector( (state: RootState) => state.layout.isSidebarCollapsed, ); const [isCloudOpen, setIsCloudOpen] = React.useState(true); ``` Sources: [server/dashboard/src/app/root/dashboard/components/main-nav.tsx:43-48](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/main-nav.tsx#L43-L48) The navigation structure is divided into three primary sections: **Activity**, **Cloud Features** (wrapped in a local `Collapsible` component controlled by `isCloudOpen`), and **Account**. When the sidebar is collapsed, group labels are hidden, and menu items center their icons with tooltip text enabled. ```tsx

{!isSidebarCollapsed && ( ACTIVITY )} {[ { title: "Requests", url: "/dashboard/requests", icon: Activity, active: pathname === "/dashboard/requests", }, { title: "Memories", url: "/dashboard/memories", icon: GalleryVerticalEnd, active: pathname === "/dashboard/memories", }, { title: "Entities", url: "/dashboard/entities", icon: Users, active: pathname === "/dashboard/entities", }, ].map((item) => ( {!isSidebarCollapsed && {item.title}} ))}

{isSidebarCollapsed && (

)} {!isSidebarCollapsed && ( CLOUD FEATURES )} {[ { title: "Categories", url: "/dashboard/categories", icon: Tags, }, { ``` Sources: [server/dashboard/src/app/root/dashboard/components/main-nav.tsx:59-242](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/main-nav.tsx#L59-L242) ```tsx export default function NavWrapper() { const dispatch = useDispatch(); const isSidebarCollapsed = useSelector( (state: RootState) => state.layout.isSidebarCollapsed, ); const { user, logout } = useAuth(); const instanceName = process.env.NEXT_PUBLIC_INSTANCE_NAME || "Mem0"; const handleToggle = useCallback(() => { dispatch(toggleSidebar()); }, [dispatch]); ``` Sources: [server/dashboard/src/app/root/dashboard/components/nav-wrapper.tsx:31-43](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/nav-wrapper.tsx#L31-L43) > [!WARNING] > Toggling the sidebar state updates both the fixed container width and the adjacent content offset calculations using constants like `COLLAPSED_SIDEBAR_WIDTH` and `SIDEBAR_WIDTH`. Sources: [server/dashboard/src/app/root/dashboard/components/nav-wrapper.tsx:46-51](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/nav-wrapper.tsx#L46-L51), [server/dashboard/src/app/root/dashboard/components/nav-wrapper.tsx:136-141](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/nav-wrapper.tsx#L136-L141) ## First-Run Setup Wizard Flow ### Multi-Step Wizard and Account Registration The first-run setup wizard is orchestrated by `SetupPage`, which guides uninitialized server instances through a sequential five-step flow. The wizard tracks the active step index via local state and references an array of step titles defining the initialization lifecycle. ```tsx const STEP_TITLES = [ "Create your admin account", "Review provider configuration", "Your API key", "Tell us your use case", "Test your setup", ]; ``` Sources: [server/dashboard/src/app/setup/page.tsx:45-51](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L45-L51) | Step Index | Title | Primary Action / Handler | | :--- | :--- | :--- | | `0` | Create your admin account | `handleStep1` validates email format, confirms password matching, enforces a minimum length of 8 characters, and invokes `register(name, email, password)`. | | `1` | Review provider configuration | `handleStep2` checks if configuration fields are dirty, builds provider payloads, and posts updates to `MEMORY_ENDPOINTS.CONFIGURE`. | | `2` | Your API key | `handleStep3` requests a new API key from `API_KEY_ENDPOINTS.BASE` using the specified key label. | | `3` | Tell us your use case | Captures user use case selection from preset options and custom instructions. | | `4` | Test your setup | Executes a validation test message against the configured backend. | Sources: [server/dashboard/src/app/setup/page.tsx:45-51](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L45-L51), [server/dashboard/src/app/setup/page.tsx:157-186](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L157-L186), [server/dashboard/src/app/setup/page.tsx:188-235](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L188-L235), [server/dashboard/src/app/setup/page.tsx:237-246](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L237-L246) > [!WARNING] > Step 1 registration enforces strict client-side validation: `email` must satisfy `isValidEmail`, `password` must equal `confirmPassword`, and `password.length` must be at least 8 characters before submitting credentials to the authentication provider. Sources: [server/dashboard/src/app/setup/page.tsx:160-173](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L160-L173) ### Provider Configuration and Credentials When the wizard advances to step index `1`, `useEffect` triggers an asynchronous configuration loader. This routine fetches the effective server configuration and bundled providers concurrently using `MEMORY_ENDPOINTS.CONFIGURE` and `MEMORY_ENDPOINTS.CONFIGURE_PROVIDERS`. ```tsx const loadConfig = async () => { try { const [configRes, providersRes] = await Promise.all([ api.get(MEMORY_ENDPOINTS.CONFIGURE), api.get(MEMORY_ENDPOINTS.CONFIGURE_PROVIDERS), ]); ``` Sources: [server/dashboard/src/app/setup/page.tsx:112-117](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L112-L117) The configuration loader extracts provider identifiers and model names for both Language Model (`llm`) and `embedder` subsystems, storing both current state values and initial baselines to detect subsequent modifications. ```tsx const llmProv = config?.llm?.provider || ""; const llmMod = config?.llm?.config?.model || ""; const embProv = config?.embedder?.provider || ""; const embMod = config?.embedder?.config?.model || ""; setLlmProvider(llmProv); setLlmModel(llmMod); setEmbedderProvider(embProv); setEmbedderModel(embMod); setInitialLlmProvider(llmProv); setInitialLlmModel(llmMod); setInitialEmbedderProvider(embProv); setInitialEmbedderModel(embMod); setServerHasLlmKey(!!config?.llm?.config?.api_key); setProviders(providersRes.data); ``` Sources: [server/dashboard/src/app/setup/page.tsx:124-138](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L124-L138) ```tsx const USE_CASE_PRESETS = [ "Personal assistant", "Coding agent", "Customer support", "Research", "Therapy / journaling", ]; ``` Sources: [server/dashboard/src/app/setup/page.tsx:55-61](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L55-L61) > [!TIP] > If no changes are detected when submitting step 2 (`dirty` evaluates to `false`), the wizard bypasses the API save request and immediately advances to step 2. Sources: [server/dashboard/src/app/setup/page.tsx:192-202](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L192-L202) ## Related - [Dashboard Views](https://www.doc0.dev/docs/faa36707-7c28-4f69-a18f-700ff61c704e/technical/server-dashboard/dashboard-views) - [FastAPI Application](https://www.doc0.dev/docs/faa36707-7c28-4f69-a18f-700ff61c704e/technical/server-dashboard/fastapi-application) --- ## Technical docs: POST Change Password URL: https://www.doc0.dev/docs/faa36707-7c28-4f69-a18f-700ff61c704e/api/auth/change-password ## Request Body Change Password Request ## Responses ## Try It --- ## Technical docs: Dashboard Views URL: https://www.doc0.dev/docs/faa36707-7c28-4f69-a18f-700ff61c704e/technical/server-dashboard/dashboard-views

Relevant source files

The following files were used as context for generating this wiki page: - [server/dashboard/src/app/root/dashboard/memories/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/memories/page.tsx) - [server/dashboard/src/app/setup/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx) - [server/dashboard/src/app/root/dashboard/api-keys/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/api-keys/page.tsx) - [server/dashboard/src/app/root/dashboard/entities/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/entities/page.tsx) - [server/dashboard/src/app/root/dashboard/configuration/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/configuration/page.tsx) - [server/dashboard/src/app/root/dashboard/requests/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/requests/page.tsx) - [integrations/opencode-plugin/opencode-mem0.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/integrations/opencode-plugin/opencode-mem0.ts) - [server/dashboard/src/app/root/dashboard/components/main-nav.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/main-nav.tsx) - [mem0-ts/src/oss/src/memory/index.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/mem0-ts/src/oss/src/memory/index.ts) - [server/dashboard/src/app/root/dashboard/settings/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/settings/page.tsx) - [server/main.py](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/main.py) - [integrations/n8n-nodes-mem0/nodes/Mem0/Mem0.node.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/integrations/n8n-nodes-mem0/nodes/Mem0/Mem0.node.ts) - [server/dashboard/src/app/root/dashboard/analytics/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/analytics/page.tsx) - [server/routers/entities.py](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/routers/entities.py) - [integrations/antigravity-plugin/core/memory_core.py](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/integrations/antigravity-plugin/core/memory_core.py) - [mem0/memory/main.py](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/mem0/memory/main.py) - [integrations/agent-plugin-core/python/memory_core.py](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/integrations/agent-plugin-core/python/memory_core.py) - [server/dashboard/src/app/root/dashboard/components/nav-wrapper.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/nav-wrapper.tsx) - [cli/node/src/commands/memory.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/cli/node/src/commands/memory.ts) - [server/dashboard/src/app/root/dashboard/webhooks/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/webhooks/page.tsx) - [cli/node/src/commands/entities.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/cli/node/src/commands/entities.ts) - [server/dashboard/src/utils/api-endpoints.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api-endpoints.ts) - [server/dashboard/src/app/root/dashboard/export/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/export/page.tsx) - [server/dashboard/src/types/api.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/types/api.ts) - [mem0/client/main.py](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/mem0/client/main.py) - [cli/node/src/backend/platform.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/cli/node/src/backend/platform.ts) - [server/dashboard/src/components/ui/dialog.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/components/ui/dialog.tsx) - [server/dashboard/src/components/ui/use-toast.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/components/ui/use-toast.ts) - [server/dashboard/src/hooks/use-api-query.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts) - [server/dashboard/src/lib/error-message.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/lib/error-message.ts)

## Overview The administrative dashboard provides a centralized Next.js interface for managing self-hosted instances, monitoring runtime memory operations, inspecting stored entities, and configuring system-level parameters through authenticated API query hooks and state management providers. Sources: [server/dashboard/src/app/setup/page.tsx](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/setup/page.tsx#L45-L64), [server/dashboard/src/hooks/use-api-query.ts](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/hooks/use-api-query.ts#L18-L56) ## Navigation and Shell Layout ### Sidebar and Shell Structure The dashboard layout combines a fixed sidebar shell container managed by Redux layout state with collapsible navigation groups, instance branding, and a top-bar control header. The primary navigation shell uses `NavWrapper` to compute responsive positioning based on whether `isSidebarCollapsed` is active, utilizing layout widths defined by `SIDEBAR_WIDTH` and `COLLAPSED_SIDEBAR_WIDTH`. A toggle button rendered in the top header triggers the `toggleSidebar` Redux action, altering both the fixed container width and the adjacent main content offset. Sources: [server/dashboard/src/app/root/dashboard/components/nav-wrapper.tsx:31-51](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/nav-wrapper.tsx#L31-L51) > [!NOTE] > When the sidebar is collapsed, collapsible triggers and textual labels (such as group titles and user email identifiers) are hidden, while tooltips are automatically passed to `SidebarMenuButton` components to display the item titles on hover. Sources: [server/dashboard/src/app/root/dashboard/components/main-nav.tsx:44-64](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/main-nav.tsx#L44-L64) ### Navigation Item Routing and Categories The `MainNav` component organizes dashboard links into three distinct functional sections: **ACTIVITY**, **CLOUD FEATURES**, and **ACCOUNT**. Each section groups route definitions that map to Lucide icons and match the current router path via `usePathname`. | Section | Title | URL | Icon | | :--- | :--- | :--- | :--- | | **ACTIVITY** | Requests | `/dashboard/requests` | `Activity` | | **ACTIVITY** | Memories | `/dashboard/memories` | `GalleryVerticalEnd` | | **ACTIVITY** | Entities | `/dashboard/entities` | `Users` | | **CLOUD FEATURES** | Categories | `/dashboard/categories` | `Tags` | | **CLOUD FEATURES** | Webhooks | `/dashboard/webhooks` | `WebhookIcon` | | **CLOUD FEATURES** | Analytics | `/dashboard/analytics` | `ChartLine` | | **CLOUD FEATURES** | Export | `/dashboard/export` | `FolderInput` | | **ACCOUNT** | API Keys | `/dashboard/api-keys` | `KeyRound` | | **ACCOUNT** | Configuration | `/dashboard/configuration` | `Wrench` | | **ACCOUNT** | Settings | `/dashboard/settings` | `Settings` | ```tsx {[ { title: "Requests", url: "/dashboard/requests", icon: Activity, active: pathname === "/dashboard/requests", }, { title: "Memories", url: "/dashboard/memories", icon: GalleryVerticalEnd, active: pathname === "/dashboard/memories", }, { title: "Entities", url: "/dashboard/entities", icon: Users, active: pathname === "/dashboard/entities", }, ``` Sources: [server/dashboard/src/app/root/dashboard/components/main-nav.tsx:65-83](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/main-nav.tsx#L65-L83), [server/dashboard/src/app/root/dashboard/components/main-nav.tsx:132-152](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/main-nav.tsx#L132-L152), [server/dashboard/src/app/root/dashboard/components/main-nav.tsx:199-217](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/main-nav.tsx#L199-L217) ### User Profile and Dropdown Menu At the base of the expanded sidebar shell, `NavWrapper` renders a user profile widget connected to `useAuth`. Clicking the user trigger opens a `DropdownMenu` providing direct navigation to user settings and a `logout` handler. ```tsx

{user?.name}

{user?.email}

Settings Log out ``` Sources: [server/dashboard/src/app/root/dashboard/components/nav-wrapper.tsx:82-130](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/components/nav-wrapper.tsx#L82-L130) ## Memories Inspection and Deletion ### Data Table Rendering and Pagination The `MemoriesPage` component retrieves records from the backend API using `useApiQuery`, querying `MEMORY_ENDPOINTS.BASE` with an optional `user_id` query parameter and a maximum fetch limit (`MEMORY_FETCH_LIMIT`) set to `1000`. The raw response extracts results via `res.data?.results ?? res.data ?? []`. When total records reach or exceed `MEMORY_FETCH_LIMIT`, an `UpgradeBanner` renders with a cloud upgrade CTA. Client-side pagination slices the fetched list using a fixed `PAGE_SIZE` of `20` records per page. ```tsx const PAGE_SIZE = 20; // Keep in sync with ALL_MEMORIES_LIMIT in server/main.py. const MEMORY_FETCH_LIMIT = 1000; export default function MemoriesPage() { const [userId, setUserId] = useState(""); const [selectedMemory, setSelectedMemory] = useState(null); const [memoryToDelete, setMemoryToDelete] = useState(null); const [page, setPage] = useState(0); const apiUrl = process.env.NEXT_PUBLIC_API_URL || ""; const { data: memories = [], isLoading, refetch, } = useApiQuery( async () => { const params = userId.trim() ? { user_id: userId.trim(), top_k: MEMORY_FETCH_LIMIT } : { top_k: MEMORY_FETCH_LIMIT }; const res = await api.get(MEMORY_ENDPOINTS.BASE, { params }); const raw = res.data?.results ?? res.data ?? []; return Array.isArray(raw) ? raw : []; }, { errorToast: "Failed to load memories", initialData: [] }, ); const totalPages = Math.ceil(memories.length / PAGE_SIZE); const paginatedMemories = memories.slice( page * PAGE_SIZE, (page + 1) * PAGE_SIZE, ); ``` Sources: [server/dashboard/src/app/root/dashboard/memories/page.tsx:29-60](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/memories/page.tsx#L29-L60) The table columns display specific memory attributes mapped from the `Memory` interface: | Column Label | Key | Width | Render Behavior | | :--- | :--- | :--- | :--- | | **Content** | `memory` | `400` | Clamped to 2 lines (`line-clamp-2 text-sm`) | | **User** | `user_id` | `100` | Raw string rendering | | **Agent** | `agent_id` | `100` | Raw string rendering | | **Created** | `created_at` | `120` | Formatted via date-fns (`MMM d, yyyy`) or `--` | ```tsx const columns = [ { key: "memory" as keyof Memory, label: "Content", width: 400, render: (value: string) => ( {value} ), }, { key: "user_id" as keyof Memory, label: "User", width: 100 }, { key: "agent_id" as keyof Memory, label: "Agent", width: 100 }, { key: "created_at" as keyof Memory, label: "Created", width: 120, render: (value: string) => value ? format(new Date(value), "MMM d, yyyy") : "--", }, ]; ``` Sources: [server/dashboard/src/app/root/dashboard/memories/page.tsx:79-97](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/memories/page.tsx#L79-L97) > [!NOTE] > Pressing the Enter key while typing inside the User ID filter input resets the pagination index to `0` and triggers an immediate query refetch. ```tsx setUserId(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { setPage(0); refetch(); } }} className="w-64" />

``` Sources: [server/dashboard/src/app/root/dashboard/memories/page.tsx:114-126](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/memories/page.tsx#L114-L126) ### Inspection Sheet and Deletion Flow Clicking any row in the `DataTable` assigns the selected `Memory` object to local state via `onRowClick`, activating the inspection `Sheet` component. The sheet displays metadata and details for the selected memory item while highlighting the active row with a background utility class (`bg-surface-default-tertiary`). ```tsx row.id} onRowClick={(row) => setSelectedMemory(row)} getRowClassName={(row) => selectedMemory?.id === row.id ? "bg-surface-default-tertiary" : undefined } /> ``` Sources: [server/dashboard/src/app/root/dashboard/memories/page.tsx:152-164](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/memories/page.tsx#L152-L164), [server/dashboard/src/app/root/dashboard/memories/page.tsx:195-208](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/memories/page.tsx#L195-L208) Deletion actions execute against `MEMORY_ENDPOINTS.BY_ID(memoryToDelete.id)` using `api.delete`. Success responses trigger a toast notification with a `"success"` variant, clear the inspection sheet if the deleted memory was currently open, reset `memoryToDelete`, and invoke `refetch()`. Errors are intercepted by `getErrorMessage` and displayed via a destructive toast. ```tsx const handleDelete = async () => { if (!memoryToDelete) return; try { await api.delete(MEMORY_ENDPOINTS.BY_ID(memoryToDelete.id)); toast({ title: "Memory deleted", variant: "success" }); if (selectedMemory?.id === memoryToDelete.id) setSelectedMemory(null); setMemoryToDelete(null); void refetch(); } catch (error) { toast({ title: "Failed to delete memory", description: getErrorMessage(error), variant: "destructive", }); } }; ``` Sources: [server/dashboard/src/app/root/dashboard/memories/page.tsx:62-77](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/memories/page.tsx#L62-L77) ## Entity Exploration and Graph Cleanup ### Entities List Presentation and Metadata The `EntitiesPage` component queries `ENTITY_ENDPOINTS.BASE` via `useApiQuery` to fetch a collection of `Entity` records. While loading, it renders a `TableSkeleton` component with 5 rows and 5 columns. If the resulting entity array is empty, it displays an `EmptyState` component indicating that entities appear once memories are stored with a `user_id`, `agent_id`, or `run_id`. Otherwise, it wraps a `DataTable` component inside a styled `Card` element. ```tsx export default function EntitiesPage() { const [entityToDelete, setEntityToDelete] = useState(null); const { data: entities = [], isLoading, refetch, } = useApiQuery( async () => { const res = await api.get(ENTITY_ENDPOINTS.BASE); return res.data ?? []; }, { errorToast: "Failed to load entities", initialData: [] }, ); ``` Sources: [server/dashboard/src/app/root/dashboard/entities/page.tsx:20-33](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/entities/page.tsx#L20-L33), [server/dashboard/src/app/root/dashboard/entities/page.tsx:102-121](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/entities/page.tsx#L102-L121) The table structures entity records using the following column schema: | Column Label | Key | Width | Render Behavior | | :--- | :--- | :--- | :--- | | **Type** | `type` | `100` | Rendered as a capitalized outline `Badge` | | **ID** | `id` | `280` | Monospace truncated text (`font-mono text-sm truncate`) | | **Memories** | `total_memories` | `100` | Right-aligned numeric counter | | **Last Active** | `updated_at` | `140` | Formatted via date-fns (`MMM d, yyyy`) or `--` | | **Actions** | `id` | `40` | Ghost icon button rendering a `Trash2` trigger | ```tsx const columns = [ { key: "type" as keyof Entity, label: "Type", width: 100, render: (value: Entity["type"]) => ( {value} ), }, { key: "id" as keyof Entity, label: "ID", width: 280, render: (value: string) => ( {value} ), }, { key: "total_memories" as keyof Entity, label: "Memories", width: 100, align: "right" as const, }, { key: "updated_at" as keyof Entity, label: "Last Active", width: 140, render: (value: string | null) => value ? format(new Date(value), "MMM d, yyyy") : "--", }, { key: "id" as keyof Entity, label: "", width: 40, render: (_: string, row: Entity) => ( ), }, ]; ``` Sources: [server/dashboard/src/app/root/dashboard/entities/page.tsx:53-100](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/entities/page.tsx#L53-L100) > [!NOTE] > The `EntityType` definition strictly restricts entity classification values to three types: `"user"`, `"agent"`, and `"run"`. ```typescript export type EntityType = "user" | "agent" | "run"; ``` Sources: [server/dashboard/src/types/api.ts:36-36](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/types/api.ts#L36-L36) ### Entity Deletion and Cleanup Flow Clicking the trash icon button on any entity row sets that specific `Entity` object into the `entityToDelete` local state variable. This action opens the `DeleteConfirmationModal` component, which displays a warning description stating that all memories associated with the entity will be permanently removed. ```tsx key: "id" as keyof Entity, label: "", width: 40, render: (_: string, row: Entity) => ( ), }, ``` Sources: [server/dashboard/src/app/root/dashboard/entities/page.tsx:86-99](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/entities/page.tsx#L86-L99), [server/dashboard/src/app/root/dashboard/entities/page.tsx:123-131](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/entities/page.tsx#L123-L131) Confirming deletion triggers the `handleDelete` function, which issues an HTTP DELETE request to `ENTITY_ENDPOINTS.BY_ID(entityToDelete.type, entityToDelete.id)`. The endpoint dynamically formats the URL path using `encodeURIComponent(id)` to handle identifiers safely. On success, a toast notification displays `"Entity deleted"` with a `"success"` variant, the deletion modal state is cleared, and `refetch` is invoked to update the table data. ```tsx const handleDelete = async () => { if (!entityToDelete) return; try { await api.delete( ENTITY_ENDPOINTS.BY_ID(entityToDelete.type, entityToDelete.id), ); toast({ title: "Entity deleted", variant: "success" }); setEntityToDelete(null); void refetch(); } catch (error) { toast({ title: "Failed to delete entity", description: getErrorMessage(error), variant: "destructive", }); } }; ``` Sources: [server/dashboard/src/app/root/dashboard/entities/page.tsx:35-51](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/entities/page.tsx#L35-L51), [server/dashboard/src/utils/api-endpoints.ts:30-34](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/utils/api-endpoints.ts#L30-L34) > [!WARNING] > If the deletion request fails, `getErrorMessage(error)` extracts the server error detail or fallback message, displaying it inside a destructive toast notification. ```tsx } catch (error) { toast({ title: "Failed to delete entity", description: getErrorMessage(error), variant: "destructive", }); } ``` Sources: [server/dashboard/src/app/root/dashboard/entities/page.tsx:44-50](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/entities/page.tsx#L44-L50), [server/dashboard/src/lib/error-message.ts:3-19](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/lib/error-message.ts#L3-L19) ## API Key Management and Dialogs ### Table Listing and Column Configuration The `ApiKeysPage` component renders a data table displaying existing API keys retrieved from the backend. The underlying data query utilizes `useApiQuery` targeting `API_KEY_ENDPOINTS.BASE`, falling back to an empty array if no keys are returned. When three or more keys exist, an `UpgradeBanner` element is displayed above the table layout. ```tsx const { data: keys = [], isLoading, refetch, } = useApiQuery( async () => { const res = await api.get(API_KEY_ENDPOINTS.BASE); return res.data ?? []; }, { errorToast: "Failed to load API keys", initialData: [] }, ); ``` Sources: [server/dashboard/src/app/root/dashboard/api-keys/page.tsx:37-47](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/api-keys/page.tsx#L37-L47), [server/dashboard/src/app/root/dashboard/api-keys/page.tsx:206-210](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/api-keys/page.tsx#L206-L210) The table structures key records using the following column schema: | Column Label | Key | Width | Render Behavior | | :--- | :--- | :--- | :--- | | **Label** | `label` | `150` | Plain text label | | **Key** | `key_prefix` | `120` | Monospace code snippet rendering prefix with ellipsis (`...`) | | **Created** | `created_at` | `120` | Formatted via date-fns (`MMM d, yyyy`) | | **Last Used** | `last_used_at` | `120` | Formatted via date-fns or rendered as `"Never"` | | **Actions** | `id` | `40` | Ghost icon button rendering a `Trash2` trigger to assign `keyToRevoke` | ```tsx const columns = [ { key: "label" as keyof ApiKey, label: "Label", width: 150 }, { key: "key_prefix" as keyof ApiKey, label: "Key", width: 120, render: (value: string) => ( {value}... ), }, { key: "created_at" as keyof ApiKey, label: "Created", width: 120, render: (value: string) => format(new Date(value), "MMM d, yyyy"), }, { key: "last_used_at" as keyof ApiKey, label: "Last Used", width: 120, render: (value: string | null) => value ? format(new Date(value), "MMM d, yyyy") : "Never", }, { key: "id" as keyof ApiKey, label: "", width: 40, render: (_: string, row: ApiKey) => ( ), }, ]; ``` Sources: [server/dashboard/src/app/root/dashboard/api-keys/page.tsx:90-128](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/app/(root)/dashboard/api-keys/page.tsx#L90-L128) > [!NOTE] > The `ApiKey` TypeScript interface defines properties for `id`, `label`, `key_prefix`, `created_at`, and an optional `last_used_at` timestamp. ```typescript export interface ApiKey { id: string; label: string; key_prefix: string; created_at: string; last_used_at: string | null; } ``` Sources: [server/dashboard/src/types/api.ts:10-16](https://github.com/blade47/mem0/blob/b7ad69afda6b6ed030347c66d48a13e4de9dec08/server/dashboard/src/types/api.ts#L10-L16) ### Creation Dialog Modals and Clipboard Copying Clicking the "Create Key" button opens a Radix-backed `Dialog` component controlled by `createOpen` state. The dialog content transitions between two distinct states based on whether `newKey` has been populated by a successful creation response. ```tsx return (