@inkeep/agents-manage-ui 0.38.3 → 0.39.1

package/src/components/errors/full-page-error.tsx

@@ -2,9 +2,12 @@
 
 import { AlertTriangle, ArrowLeft, type LucideIcon, RefreshCw } from 'lucide-react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { Button } from '@/components/ui/button';
+import { buildLoginUrlWithCurrentPath } from '@/lib/utils/auth-redirect';
 
 export default function FullPageError({ statusCode, errorCode, ...props }: FullPageErrorProps) {
   const resolvedStatusCode = statusCode ?? getStatusCodeFromErrorCode(errorCode);
@@ -153,6 +156,9 @@ export function ErrorContent({
   onRetry,
   context = 'resource',
 }: FullPageErrorProps) {
+  const router = useRouter();
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
   // Resolve error code from props or error object
   let errorCode = propErrorCode;
   let statusCode = propStatusCode;
@@ -174,6 +180,15 @@ export function ErrorContent({
     errorCode = getErrorCodeFromStatusCode(statusCode);
   }
 
+  // Handle 401 unauthorized errors by redirecting to login
+  useEffect(() => {
+    if ((statusCode === 401 || errorCode === 'unauthorized') && !isRedirecting) {
+      setIsRedirecting(true);
+      const loginUrl = buildLoginUrlWithCurrentPath();
+      router.push(loginUrl);
+    }
+  }, [statusCode, errorCode, router, isRedirecting]);
+
   // Generate title and description
   let title = propTitle;
   let description = propDescription;
@@ -200,6 +215,21 @@ export function ErrorContent({
     }
   };
 
+  // Show redirecting message for 401 errors
+  if (isRedirecting && (statusCode === 401 || errorCode === 'unauthorized')) {
+    return (
+      <main
+        aria-labelledby="redirect-title"
+        className="flex flex-col items-center justify-center h-full gap-10 px-4"
+      >
+        <h1 id="redirect-title" className="sr-only">
+          Redirecting to login
+        </h1>
+        <div className="text-muted-foreground text-sm">Redirecting to login...</div>
+      </main>
+    );
+  }
+
   return (
     <main
       aria-labelledby="error-title"

package/src/components/layout/header-menus.tsx

@@ -1,14 +1,23 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { useAuthSession } from '@/hooks/use-auth';
 import { UserMenu } from '../auth/user-menu';
 import { ThemeToggle } from '../theme-toggle';
 import { Skeleton } from '../ui/skeleton';
 
 export function HeaderMenus() {
+  const [hasMounted, setHasMounted] = useState(false);
   const { user, isLoading } = useAuthSession();
-  if (isLoading) {
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Always render skeleton on server and initial client render to prevent hydration mismatch
+  if (!hasMounted || isLoading) {
     return <Skeleton className="h-7 w-7" />;
   }
+
   return !user ? <ThemeToggle /> : <UserMenu />;
 }

package/src/components/providers/client-providers.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { AuthClientProvider } from '@/lib/auth-client';
+
+export function ClientProviders({ children }: { children: ReactNode }) {
+  return <AuthClientProvider>{children}</AuthClientProvider>;
+}

package/src/components/settings/members-table.tsx

@@ -1,3 +1,4 @@
+import { UserPlus } from 'lucide-react';
 import { useState } from 'react';
 import { InviteMemberDialog } from '@/components/auth/invite-member-dialog';
 import { Badge } from '@/components/ui/badge';
@@ -10,6 +11,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import type { useAuthClient } from '@/lib/auth-client';
+import { Button } from '../ui/button';
 
 type FullOrganization = NonNullable<
   Awaited<
@@ -32,10 +34,10 @@ export function MembersTable({ members }: MembersTableProps) {
             <h2 className="text-md font-medium text-gray-700 dark:text-white/70">Members</h2>
             <Badge variant="count">{members.length}</Badge>
           </div>
-          {/* <Button onClick={() => setInviteDialogOpen(true)} size="sm" variant="outline">
+          <Button onClick={() => setInviteDialogOpen(true)} size="sm" variant="outline">
             <UserPlus className="h-4 w-4 mr-2" />
             Invite
-          </Button> */}
+          </Button>
         </div>
         <Table>
           <TableHeader>

package/src/components/sidebar-nav/app-sidebar-provider.tsx

@@ -27,8 +27,8 @@ export const AppSidebarProvider: FC<{ children: ReactNode }> = ({ children }) =>
   return (
     <SidebarProvider
       style={{
-        '--sidebar-width': 'calc(var(--spacing) * 62)',
-        '--header-height': 'calc(var(--spacing) * 12)',
+        ['--sidebar-width' as string]: 'calc(var(--spacing) * 62)',
+        ['--header-height' as string]: 'calc(var(--spacing) * 12)',
       }}
       open={isOpen}
       onOpenChange={handleOpen}

package/src/components/ui/chart.tsx

@@ -186,16 +186,17 @@ function ChartTooltipContent({
                         className={cn(
                           'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
                           {
-                            'h-2.5 w-2.5': indicator === 'dot',
-                            'w-1': indicator === 'line',
-                            'w-0 border-[1.5px] border-dashed bg-transparent':
-                              indicator === 'dashed',
-                            'my-0.5': nestLabel && indicator === 'dashed',
-                          }
+                            dot: 'h-2.5 w-2.5',
+                            line: 'w-1',
+                            dashed: [
+                              'w-0 border-[1.5px] border-dashed bg-transparent',
+                              nestLabel && 'my-0.5',
+                            ],
+                          }[indicator]
                         )}
                         style={{
-                          '--color-bg': indicatorColor,
-                          '--color-border': indicatorColor,
+                          ['--color-bg' as string]: indicatorColor,
+                          ['--color-border' as string]: indicatorColor,
                         }}
                       />
                     )

package/src/components/ui/sidebar.tsx

@@ -123,8 +123,8 @@ function SidebarProvider({
         <div
           data-slot="sidebar-wrapper"
           style={{
-            '--sidebar-width': SIDEBAR_WIDTH,
-            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+            ['--sidebar-width' as string]: SIDEBAR_WIDTH,
+            ['--sidebar-width-icon' as string]: SIDEBAR_WIDTH_ICON,
             ...style,
           }}
           className={cn(
@@ -180,7 +180,7 @@ function Sidebar({
           data-mobile="true"
           className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={{
-            '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            ['--sidebar-width' as string]: SIDEBAR_WIDTH_MOBILE,
           }}
           side={side}
         >
@@ -601,7 +601,7 @@ function SidebarMenuSkeleton({
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
         style={{
-          '--skeleton-width': width,
+          ['--skeleton-width' as string]: width,
         }}
       />
     </div>

package/src/components/ui/sonner.tsx

@@ -11,9 +11,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
       theme={resolvedTheme as ToasterProps['theme']}
       className="toaster group"
       style={{
-        '--normal-bg': 'var(--popover)',
-        '--normal-text': 'var(--popover-foreground)',
-        '--normal-border': 'var(--border)',
+        ['--normal-bg' as string]: 'var(--popover)',
+        ['--normal-text' as string]: 'var(--popover-foreground)',
+        ['--normal-border' as string]: 'var(--border)',
       }}
       {...props}
     />

package/src/env.d.ts

@@ -11,9 +11,3 @@ declare module '*.svg?svgr' {
 
   export default ReactComponent;
 }
-
-declare namespace React {
-  interface CSSProperties {
-    [key: `--${string}`]: string | number;
-  }
-}

package/src/lib/auth-client.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { ssoClient } from '@better-auth/sso/client';
+import { ac, adminRole, memberRole, ownerRole } from '@inkeep/agents-core/auth/permissions';
+import { deviceAuthorizationClient, organizationClient } from 'better-auth/client/plugins';
+import { createAuthClient } from 'better-auth/react';
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+
+// Create a factory function to get the proper inferred type
+const createConfiguredAuthClient = (baseURL: string) =>
+  createAuthClient({
+    baseURL,
+    fetchOptions: {
+      credentials: 'include',
+    },
+    plugins: [
+      ssoClient(),
+      organizationClient({
+        ac,
+        roles: {
+          member: memberRole,
+          admin: adminRole,
+          owner: ownerRole,
+        },
+      }),
+      deviceAuthorizationClient(),
+    ],
+  });
+
+// Infer the full client type including all plugin methods
+type AuthClientType = ReturnType<typeof createConfiguredAuthClient>;
+
+const AuthClientContext = createContext<AuthClientType | null>(null);
+
+export function AuthClientProvider({ children }: { children: ReactNode }) {
+  const { PUBLIC_INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
+
+  const authClient = useMemo(
+    () => createConfiguredAuthClient(PUBLIC_INKEEP_AGENTS_MANAGE_API_URL),
+    [PUBLIC_INKEEP_AGENTS_MANAGE_API_URL]
+  );
+
+  return <AuthClientContext.Provider value={authClient}>{children}</AuthClientContext.Provider>;
+}
+
+export function useAuthClient() {
+  const client = useContext(AuthClientContext);
+  if (!client) {
+    throw new Error('useAuthClient must be used within <AuthClientProvider>');
+  }
+  return client;
+}

package/src/lib/utils/auth-redirect.ts

@@ -0,0 +1,95 @@
+/**
+ * Utility functions for handling authentication redirects.
+ * Provides consistent login URL building with return URL support.
+ */
+
+/**
+ * Builds a login URL with an optional return URL parameter.
+ * After successful login, the user will be redirected to the return URL.
+ *
+ * @param returnUrl - The URL to redirect to after login (optional)
+ * @returns The login URL with encoded return URL parameter
+ */
+export function buildLoginUrl(returnUrl?: string): string {
+  const loginPath = '/login';
+
+  if (!returnUrl) {
+    return loginPath;
+  }
+
+  const encodedReturnUrl = encodeURIComponent(returnUrl);
+  return `${loginPath}?returnUrl=${encodedReturnUrl}`;
+}
+
+/**
+ * Gets the current URL path for use as a return URL.
+ * Works only on the client side.
+ *
+ * @returns The current pathname and search string, or undefined if on server
+ */
+export function getCurrentPath(): string | undefined {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  return window.location.pathname + window.location.search;
+}
+
+/**
+ * Builds a login URL with the current page as the return URL.
+ * Works only on the client side.
+ *
+ * @returns The login URL with the current path as return URL
+ */
+export function buildLoginUrlWithCurrentPath(): string {
+  const currentPath = getCurrentPath();
+  return buildLoginUrl(currentPath);
+}
+
+/**
+ * Validates a return URL to ensure it's safe to redirect to.
+ * Only allows relative paths (starting with /) to prevent open redirect vulnerabilities.
+ *
+ * @param returnUrl - The return URL to validate
+ * @returns Whether the return URL is safe to use
+ */
+export function isValidReturnUrl(returnUrl: string | null | undefined): returnUrl is string {
+  if (!returnUrl) {
+    return false;
+  }
+
+  // Must start with / (relative path)
+  if (!returnUrl.startsWith('/')) {
+    return false;
+  }
+
+  // Reject protocol-relative URLs (//example.com)
+  if (returnUrl.startsWith('//')) {
+    return false;
+  }
+
+  // Reject URLs that try to break out with encoded characters
+  try {
+    const decoded = decodeURIComponent(returnUrl);
+    if (decoded.startsWith('//') || decoded.includes('://')) {
+      return false;
+    }
+  } catch {
+    // If decoding fails, reject the URL
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Gets a safe return URL from a search param value.
+ * Returns the returnUrl if valid, or the fallback (default '/').
+ *
+ * @param returnUrl - The return URL from search params
+ * @param fallback - The fallback URL if returnUrl is invalid
+ * @returns A safe URL to redirect to
+ */
+export function getSafeReturnUrl(returnUrl: string | null | undefined, fallback = '/'): string {
+  return isValidReturnUrl(returnUrl) ? returnUrl : fallback;
+}