@inkeep/agents-manage-ui 0.34.0 → 0.35.0

package/src/app/page.tsx

@@ -1,14 +1,110 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense, useEffect, useState } from 'react';
+import { useAuthSession } from '@/hooks/use-auth';
+import { getPendingInvitations } from '@/lib/actions/invitations';
+import { getUserOrganizations } from '@/lib/actions/user-organizations';
 import { DEFAULT_TENANT_ID } from '@/lib/runtime-config/defaults';
-import { redirectToProject } from '@/lib/utils/project-redirect';
 
-export const dynamic = 'force-dynamic';
+function HomeContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { user, session, isLoading, error } = useAuthSession();
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
+  const tenantId = process.env.NEXT_PUBLIC_TENANT_ID || DEFAULT_TENANT_ID;
+
+  useEffect(() => {
+    async function handleRedirect() {
+      // Prevent multiple redirects
+      if (isRedirecting) return;
+
+      // Auth disabled - go straight to default tenant
+      if (!isLoading && error?.status === 404 && !user) {
+        setIsRedirecting(true);
+        router.push(`/${tenantId}/projects`);
+        return;
+      }
+
+      // Still loading session
+      if (isLoading) return;
+
+      // Check for invitation in URL
+      const invitationId = searchParams.get('invitation');
+      if (invitationId) {
+        setIsRedirecting(true);
+        router.push(`/accept-invitation/${invitationId}`);
+        return;
+      }
+
+      // Not authenticated - redirect to login
+      if (!user) {
+        setIsRedirecting(true);
+        router.push('/login');
+        return;
+      }
+
+      // Authenticated - find their organization
+      try {
+        const userOrganizations = await getUserOrganizations(user.id);
 
-async function Home() {
-  if (!process.env.TENANT_ID) {
-    console.warn(`TENANT_ID is not set, using default tenantId: ${DEFAULT_TENANT_ID}`);
-  }
-  const tenantId = process.env.TENANT_ID || DEFAULT_TENANT_ID;
-  await redirectToProject(tenantId, 'agents');
+        // No organizations - check for pending invitations
+        if (!userOrganizations || userOrganizations.length === 0) {
+          const pendingInvitations = await getPendingInvitations(user.email);
+
+          if (pendingInvitations.length > 0) {
+            setIsRedirecting(true);
+            router.push(`/accept-invitation/${pendingInvitations[0].id}`);
+            return;
+          }
+
+          // No invitations either - show no-org page
+          setIsRedirecting(true);
+          router.push('/no-organization');
+          return;
+        }
+
+        // Determine which organization to use
+        let organizationId = tenantId;
+
+        if (session?.activeOrganizationId) {
+          organizationId = session.activeOrganizationId;
+        } else if (userOrganizations.length > 0) {
+          organizationId = userOrganizations[0].organizationId;
+        }
+
+        // Redirect to projects page
+        setIsRedirecting(true);
+        router.push(`/${organizationId}/projects`);
+      } catch (error) {
+        console.error(error);
+        setIsRedirecting(true);
+        router.push('/login');
+      }
+    }
+
+    handleRedirect();
+  }, [user, session, isLoading, error, isRedirecting, tenantId, searchParams, router]);
+
+  return (
+    <div className="flex items-center justify-center h-full">
+      <Loader2 className="size-4 animate-spin text-muted-foreground" />
+    </div>
+  );
 }
 
-export default Home;
+export default function Home() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center h-full">
+          <Loader2 className="size-4 animate-spin text-muted-foreground" />
+        </div>
+      }
+    >
+      <HomeContent />
+    </Suspense>
+  );
+}

package/src/components/agent/agent.tsx

@@ -778,6 +778,17 @@ export const Agent: FC<AgentProps> = ({
       }
       return true;
     }
+    
+    // Handle non-validation errors (permission, auth, not found, server errors)
+    const nonValidationErrors = ['forbidden', 'unauthorized', 'not_found', 'internal_server_error', 'bad_request'];
+    if (res.code && nonValidationErrors.includes(res.code)) {
+      toast.error(res.error || 'An error occurred while saving the agent', {
+        closeButton: true,
+      });
+      return false;
+    }
+    
+    // Handle validation errors (422 status - unprocessable_entity)
     try {
       const errorSummary = parseAgentValidationErrors(res.error);
       setErrors(errorSummary);

package/src/components/auth/invite-member-dialog.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { Check, Copy, UserPlus } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { authClient } from '@/lib/auth-client';
+
+interface InviteMemberDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function InviteMemberDialog({ open, onOpenChange }: InviteMemberDialogProps) {
+  const params = useParams();
+  const organizationId = params.tenantId as string;
+  
+  const [email, setEmail] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [invitationLink, setInvitationLink] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!email) {
+      setError('Email is required');
+      return;
+    }
+
+    if (!organizationId) {
+      setError('No organization selected');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const result = await authClient.organization.inviteMember({
+        email,
+        role: 'member',
+        organizationId,
+      });
+
+      if ('error' in result && result.error) {
+        setError(result.error.message || 'Failed to create invitation');
+        return;
+      }
+
+      // Extract invitation ID from result
+      if ('data' in result && result.data && 'id' in result.data) {
+        const invitationId = result.data.id;
+        const baseUrl = window.location.origin;
+        const link = `${baseUrl}/accept-invitation/${invitationId}`;
+        setInvitationLink(link);
+      } else {
+        setError('Failed to generate invitation link');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create invitation');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCopyLink = async () => {
+    if (!invitationLink) return;
+    
+    try {
+      await navigator.clipboard.writeText(invitationLink);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setError('Failed to copy to clipboard');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!isSubmitting) {
+      setEmail('');
+      setError(null);
+      setInvitationLink(null);
+      setCopied(false);
+      onOpenChange(newOpen);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <UserPlus className="h-5 w-5" />
+            {invitationLink ? 'Invitation Created' : 'Invite Team Member'}
+          </DialogTitle>
+          <DialogDescription>
+            {invitationLink 
+              ? 'Share this link with the user to accept the invitation.'
+              : 'Create an invitation link for a new member to join your organization.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {!invitationLink ? (
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email address</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  disabled={isSubmitting}
+                  autoFocus
+                  required
+                />
+              </div>
+              
+              <div className="rounded-md bg-muted p-3 text-sm">
+                <p className="text-muted-foreground">
+                  <span className="font-medium">Role:</span> Member (read-only access)
+                </p>
+              </div>
+
+              {error && (
+                <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                  {error}
+                </div>
+              )}
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleOpenChange(false)}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting || !email}>
+                {isSubmitting ? 'Creating...' : 'Create Invitation'}
+              </Button>
+            </DialogFooter>
+          </form>
+        ) : (
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>Invitation Link</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={invitationLink}
+                  readOnly
+                  className="font-mono text-xs"
+                  onClick={(e) => e.currentTarget.select()}
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={handleCopyLink}
+                  className="shrink-0"
+                >
+                  {copied ? (
+                    <Check className="h-4 w-4 text-green-600" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {copied ? 'Link copied to clipboard!' : 'Click to select or use the copy button'}
+              </p>
+            </div>
+
+            <div className="rounded-md bg-blue-500/10 p-3 text-sm text-blue-600 dark:text-blue-400">
+              <p className="font-medium mb-1">Next Steps:</p>
+              <ol className="list-decimal list-inside space-y-1 text-xs">
+                <li>Share this link with <span className="font-medium">{email}</span></li>
+                <li>They'll sign in or create an account</li>
+                <li>They'll click "Accept Invitation" to join your organization</li>
+              </ol>
+            </div>
+
+            {error && (
+              <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <DialogFooter>
+              <Button
+                type="button"
+                onClick={() => handleOpenChange(false)}
+              >
+                Done
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+

package/src/components/auth/user-menu.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { LogOut, User } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAuthSession } from '@/hooks/use-auth';
+import { authClient } from '@/lib/auth-client';
+
+export function UserMenu() {
+  const { user, isLoading } = useAuthSession();
+  const router = useRouter();
+
+  if (isLoading || !user) {
+    return null;
+  }
+
+  const handleSignOut = async () => {
+    await authClient.signOut();
+    router.push('/login');
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sidebar-foreground/80 dark:text-sidebar-foreground"
+        >
+          <User className="h-4 w-4" />
+          <span className="sr-only">User menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-xs text-muted-foreground">{user.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleSignOut} className="gap-2">
+          <LogOut className="h-4 w-4" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -3,6 +3,7 @@ import type { BreadcrumbItem } from '@/components/ui/breadcrumbs';
 import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
+import { UserMenu } from '../auth/user-menu';
 
 export function SiteHeader({ breadcrumbs }: { breadcrumbs?: BreadcrumbItem[] }) {
   return (
@@ -16,6 +17,7 @@ export function SiteHeader({ breadcrumbs }: { breadcrumbs?: BreadcrumbItem[] })
           className="mx-2 data-[orientation=vertical]:h-4 ml-auto"
         />
         <ThemeToggle />
+        <UserMenu />
       </div>
     </header>
   );

package/src/hooks/use-auth.ts

@@ -0,0 +1,15 @@
+import { authClient } from '@/lib/auth-client';
+
+export function useAuthSession() {
+  const client = authClient;
+
+  const { data: session, isPending, error } = client.useSession();
+
+  return {
+    user: session?.user ?? null,
+    session: session?.session ?? null,
+    isLoading: isPending,
+    isAuthenticated: !!session,
+    error,
+  };
+}

package/src/lib/actions/invitations.ts

@@ -0,0 +1,26 @@
+'use server';
+
+import { makeManagementApiRequest } from "../api/api-config";
+
+export interface PendingInvitation {
+  id: string;
+  email: string;
+  organizationId: string;
+  organizationName: string | null;
+  organizationSlug: string | null;
+  role: string | null;
+  status: string;
+  expiresAt: number;
+  inviterId: string;
+}
+
+export async function getPendingInvitations(email: string): Promise<PendingInvitation[]> {
+  try {
+    return await makeManagementApiRequest<PendingInvitation[]>(
+      `api/invitations/pending?email=${encodeURIComponent(email)}`
+    );
+  } catch {
+    return [];
+  }
+}
+

package/src/lib/actions/user-organizations.ts

@@ -0,0 +1,28 @@
+'use server';
+
+import type { AddUserToOrganizationResponse, UserOrganizationsResponse } from '@inkeep/agents-core/auth/validation';
+import { makeManagementApiRequest } from '../api/api-config';
+
+export interface CreateUserOrganizationParams {
+  userId: string;
+  organizationId: string;
+  role: string;
+}
+
+export async function addUserToOrganization(params: CreateUserOrganizationParams) {
+  const { userId, organizationId, role } = params;
+
+  return await makeManagementApiRequest<AddUserToOrganizationResponse>(
+    `api/users/${userId}/organizations`,
+    {
+      method: 'POST',
+      body: JSON.stringify({ organizationId, role }),
+    }
+  );
+}
+
+export async function getUserOrganizations(userId: string) {
+  return await makeManagementApiRequest<UserOrganizationsResponse>(
+    `api/users/${userId}/organizations`
+  );
+}

package/src/lib/api/api-config.ts

@@ -11,7 +11,7 @@ import { ApiError } from '../types/errors';
 let INKEEP_AGENTS_MANAGE_API_URL: string | null = null;
 let hasWarnedManageApi = false;
 
-function getManageApiUrl(): string {
+export function getManageApiUrl(): string {
   if (INKEEP_AGENTS_MANAGE_API_URL === null) {
     INKEEP_AGENTS_MANAGE_API_URL =
       process.env.INKEEP_AGENTS_MANAGE_API_URL || DEFAULT_INKEEP_AGENTS_MANAGE_API_URL;
@@ -32,9 +32,25 @@ async function makeApiRequestInternal<T>(
   options: RequestInit = {}
 ): Promise<T> {
   const url = `${baseUrl}/${endpoint}`;
-  const defaultHeaders = {
+
+  let cookieHeader: string | undefined;
+  if (typeof window === 'undefined') {
+    try {
+      const { cookies } = await import('next/headers');
+      const cookieStore = await cookies();
+      const allCookies = cookieStore.getAll();
+      // Only forward Better Auth cookies for security
+      const authCookies = allCookies.filter((c) => c.name.startsWith('better-auth.'));
+      cookieHeader = authCookies.map((c) => `${c.name}=${c.value}`).join('; ');
+    } catch {
+      // Not in a server component context, skip cookie forwarding
+    }
+  }
+
+  const defaultHeaders: HeadersInit = {
     'Content-Type': 'application/json',
     ...options.headers,
+    ...(cookieHeader && { Cookie: cookieHeader }),
     ...(process.env.INKEEP_AGENTS_MANAGE_API_BYPASS_SECRET && {
       Authorization: `Bearer ${process.env.INKEEP_AGENTS_MANAGE_API_BYPASS_SECRET}`,
     }),
@@ -48,7 +64,8 @@ async function makeApiRequestInternal<T>(
 
     if (!response.ok) {
       const errorData = await response.json().catch(() => ({
-        error: { code: 'unknown', message: 'Unknown error occurred' },
+        code: 'unknown',
+        message: 'Unknown error occurred',
       }));
 
       throw new ApiError(

package/src/lib/auth-client.ts

@@ -0,0 +1,25 @@
+import { ssoClient } from '@better-auth/sso/client';
+import { ac, adminRole, memberRole, ownerRole } from '@inkeep/agents-core/auth/permissions';
+import { organizationClient } from 'better-auth/client/plugins';
+import { createAuthClient } from 'better-auth/react';
+import { getManageApiUrl } from './api/api-config';
+
+export const authClient = createAuthClient({
+  baseURL: getManageApiUrl(),
+  fetchOptions: {
+    credentials: 'include',
+  },
+  plugins: [
+    ssoClient(),
+    organizationClient({
+      ac,
+      roles: {
+        member: memberRole,
+        admin: adminRole,
+        owner: ownerRole,
+      },
+    }),
+  ],
+});
+
+export type AuthClient = typeof authClient;

package/src/lib/mcp-tools/nango.ts

@@ -131,7 +131,7 @@ export async function fetchNangoIntegration(
 /**
  * Create a new Nango integration
  */
-export async function createNangoIntegration(params: {
+async function createNangoIntegration(params: {
   provider: string;
   uniqueKey: string;
   displayName?: string;