@promptbook/cli 0.103.0-54 → 0.103.0-55

package/apps/agents-server/src/app/agents/[agentName]/api/modelRequirements/systemMessage/route.ts

@@ -1,4 +1,5 @@
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { resolveInheritedAgentSource } from '@/src/utils/resolveInheritedAgentSource';
 import { createAgentModelRequirements } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
 import { assertsError } from '../../../../../../../../../src/errors/assertsError';
@@ -12,7 +13,8 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
     try {
         const collection = await $provideAgentCollectionForServer();
         const agentSource = await collection.getAgentSource(agentName);
-        const modelRequirements = await createAgentModelRequirements(agentSource);
+        const effectiveAgentSource = await resolveInheritedAgentSource(agentSource, collection);
+        const modelRequirements = await createAgentModelRequirements(effectiveAgentSource);
         const { systemMessage } = modelRequirements;
 
         return new Response(systemMessage, {

package/apps/agents-server/src/app/agents/[agentName]/api/openai/chat/completions/route.ts

@@ -1,176 +1,10 @@
-import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
-import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
-import { Agent } from '@promptbook-local/core';
-import { ChatMessage, ChatPromptResult, Prompt, TODO_any } from '@promptbook-local/types';
-import { NextRequest, NextResponse } from 'next/server';
+import { handleChatCompletion } from '@/src/utils/handleChatCompletion';
+import { NextRequest } from 'next/server';
 
 export async function POST(
     request: NextRequest,
     { params }: { params: Promise<{ agentName: string }> },
 ) {
     const { agentName } = await params;
-    
-    // Note: Authentication is handled by middleware
-    // If we are here, the request is either authenticated or public access is allowed (but middleware blocks it if not)
-
-    try {
-        const body = await request.json();
-        const { messages, stream, model } = body;
-
-        if (!messages || !Array.isArray(messages) || messages.length === 0) {
-            return NextResponse.json(
-                { error: { message: 'Messages array is required and cannot be empty.', type: 'invalid_request_error' } },
-                { status: 400 },
-            );
-        }
-
-        const collection = await $provideAgentCollectionForServer();
-        let agentSource;
-        try {
-            agentSource = await collection.getAgentSource(agentName);
-        } catch (error) {
-            return NextResponse.json(
-                { error: { message: `Agent '${agentName}' not found.`, type: 'invalid_request_error' } },
-                { status: 404 },
-            );
-        }
-
-        if (!agentSource) {
-            return NextResponse.json(
-                { error: { message: `Agent '${agentName}' not found.`, type: 'invalid_request_error' } },
-                { status: 404 },
-            );
-        }
-
-        const executionTools = await $provideExecutionToolsForServer();
-        const agent = new Agent({
-            agentSource,
-            executionTools,
-            isVerbose: true, // or false
-        });
-
-        // Prepare thread and content
-        const lastMessage = messages[messages.length - 1];
-        const previousMessages = messages.slice(0, -1);
-
-        const thread: ChatMessage[] = previousMessages.map((msg: TODO_any, index: number) => ({
-            id: `msg-${index}`, // Placeholder ID
-            from: msg.role === 'assistant' ? 'agent' : 'user', // Mapping standard OpenAI roles
-            content: msg.content,
-            isComplete: true,
-            date: new Date(), // We don't have the real date, using current
-        }));
-
-        const prompt: Prompt = {
-            title: 'OpenAI API Chat Completion',
-            content: lastMessage.content,
-            modelRequirements: {
-                modelVariant: 'CHAT',
-                // We could pass 'model' from body if we wanted to enforce it, but Agent usually has its own config
-            },
-            parameters: {},
-            thread,
-        } as Prompt; 
-        // Note: Casting as Prompt because the type definition might require properties we don't strictly use or that are optional but TS complains
-
-        if (stream) {
-            const encoder = new TextEncoder();
-            const readableStream = new ReadableStream({
-                async start(controller) {
-                    const runId = `chatcmpl-${Math.random().toString(36).substring(2, 15)}`;
-                    const created = Math.floor(Date.now() / 1000);
-
-                    let previousContent = '';
-
-                    try {
-                        await agent.callChatModelStream(prompt, (chunk: ChatPromptResult) => {
-                            const fullContent = chunk.content;
-                            const deltaContent = fullContent.substring(previousContent.length);
-                            previousContent = fullContent;
-
-                            if (deltaContent) {
-                                const chunkData = {
-                                    id: runId,
-                                    object: 'chat.completion.chunk',
-                                    created,
-                                    model: model || 'promptbook-agent',
-                                    choices: [
-                                        {
-                                            index: 0,
-                                            delta: {
-                                                content: deltaContent,
-                                            },
-                                            finish_reason: null,
-                                        },
-                                    ],
-                                };
-                                controller.enqueue(encoder.encode(`data: ${JSON.stringify(chunkData)}\n\n`));
-                            }
-                        });
-
-                        const doneChunkData = {
-                            id: runId,
-                            object: 'chat.completion.chunk',
-                            created,
-                            model: model || 'promptbook-agent',
-                            choices: [
-                                {
-                                    index: 0,
-                                    delta: {},
-                                    finish_reason: 'stop',
-                                },
-                            ],
-                        };
-                        controller.enqueue(encoder.encode(`data: ${JSON.stringify(doneChunkData)}\n\n`));
-                        controller.enqueue(encoder.encode('[DONE]'));
-                    } catch (error) {
-                        console.error('Error during streaming:', error);
-                        // OpenAI stream doesn't usually send error JSON in stream, just closes or sends error text?
-                        // But we should try to close gracefully or error.
-                        controller.error(error);
-                    }
-                    controller.close();
-                },
-            });
-
-            return new Response(readableStream, {
-                headers: {
-                    'Content-Type': 'text/event-stream',
-                    'Cache-Control': 'no-cache',
-                    Connection: 'keep-alive',
-                },
-            });
-        } else {
-             const result = await agent.callChatModel(prompt);
-             
-             return NextResponse.json({
-                id: `chatcmpl-${Math.random().toString(36).substring(2, 15)}`,
-                object: 'chat.completion',
-                created: Math.floor(Date.now() / 1000),
-                model: model || 'promptbook-agent',
-                choices: [
-                    {
-                        index: 0,
-                        message: {
-                            role: 'assistant',
-                            content: result.content,
-                        },
-                        finish_reason: 'stop',
-                    },
-                ],
-                usage: {
-                    prompt_tokens: result.usage?.input?.tokensCount?.value || 0,
-                    completion_tokens: result.usage?.output?.tokensCount?.value || 0,
-                    total_tokens: (result.usage?.input?.tokensCount?.value || 0) + (result.usage?.output?.tokensCount?.value || 0),
-                },
-             });
-        }
-
-    } catch (error) {
-        console.error('Error in OpenAI API handler:', error);
-        return NextResponse.json(
-            { error: { message: (error as Error).message || 'Internal Server Error', type: 'server_error' } },
-            { status: 500 },
-        );
-    }
+    return handleChatCompletion(request, { agentName }, 'OpenAI API Chat Completion');
 }

package/apps/agents-server/src/app/agents/[agentName]/api/openrouter/chat/completions/route.ts

@@ -0,0 +1,10 @@
+import { handleChatCompletion } from '@/src/utils/handleChatCompletion';
+import { NextRequest } from 'next/server';
+
+export async function POST(
+    request: NextRequest,
+    { params }: { params: Promise<{ agentName: string }> },
+) {
+    const { agentName } = await params;
+    return handleChatCompletion(request, { agentName }, 'OpenRouter API Chat Completion');
+}

package/apps/agents-server/src/app/agents/[agentName]/links/page.tsx

@@ -0,0 +1,218 @@
+'use server';
+
+import { $provideServer } from '@/src/tools/$provideServer';
+import { Color } from '../../../../../../../src/utils/color/Color';
+import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { ArrowLeftIcon, BookOpenIcon, CodeIcon, HistoryIcon, HomeIcon, LinkIcon, MessageSquareIcon, ShareIcon } from 'lucide-react';
+import { headers } from 'next/headers';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { CopyField } from '../CopyField';
+import { getAgentName, getAgentProfile } from '../_utils';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentLinksPage({
+    params,
+}: {
+    params: Promise<{ agentName: string }>;
+}) {
+    $sideEffect(headers());
+    const agentName = await getAgentName(params);
+
+    let agentProfile;
+    try {
+        agentProfile = await getAgentProfile(agentName);
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            (error.message.includes('Cannot coerce the result to a single JSON object') ||
+                error.message.includes('JSON object requested, multiple (or no) results returned'))
+        ) {
+            notFound();
+        }
+        throw error;
+    }
+
+    const { publicUrl } = await $provideServer();
+    const baseUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+    
+    // Extract brand color from meta
+    const brandColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+    const backgroundColor = (await brandColor.then(withAlpha(0.05))).toHex();
+    const borderColor = (await brandColor.then(withAlpha(0.1))).toHex();
+    const primaryColor = (await brandColor).toHex();
+
+    return (
+        <div 
+            className="min-h-screen p-6 md:p-12 flex flex-col items-center"
+            style={{
+                backgroundColor,
+            }}
+        >
+            <div className="w-full max-w-3xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                
+                {/* Header */}
+                <div 
+                    className="p-6 border-b flex items-center gap-4"
+                    style={{ borderColor }}
+                >
+                    {agentProfile.meta.image && (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                            src={agentProfile.meta.image as string}
+                            alt={agentProfile.meta.fullname || agentName}
+                            className="w-16 h-16 rounded-full object-cover border-2"
+                            style={{ borderColor: primaryColor }}
+                        />
+                    )}
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold text-gray-900">
+                            {agentProfile.meta.fullname || agentName}
+                        </h1>
+                        <p className="text-gray-500 flex items-center gap-2">
+                            <LinkIcon className="w-4 h-4" />
+                            Signpost & Links
+                        </p>
+                    </div>
+                    <Link 
+                        href={`/agents/${encodeURIComponent(agentName)}`}
+                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
+                        title="Back to Agent"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </div>
+
+                <div className="divide-y divide-gray-100">
+                    
+                    {/* API Endpoints */}
+                    <div className="p-6">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <CodeIcon className="w-5 h-5 text-gray-500" />
+                            API Endpoints
+                        </h2>
+                        <div className="grid gap-4">
+                            <div>
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">OpenAI Compatible Chat Completion</h3>
+                                <p className="text-xs text-gray-500 mb-2">Standard OpenAI API endpoint for chat completions.</p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/openai/chat/completions`} />
+                            </div>
+                            
+                            <div>
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">OpenRouter Compatible</h3>
+                                <p className="text-xs text-gray-500 mb-2">Endpoint compatible with OpenRouter API format.</p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/openrouter/chat/completions`} />
+                            </div>
+
+                            <div>
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">Model Context Protocol (MCP)</h3>
+                                <p className="text-xs text-gray-500 mb-2">Endpoint for Model Context Protocol integration.</p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/mcp`} />
+                            </div>
+
+                            <div>
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">Model Requirements</h3>
+                                <p className="text-xs text-gray-500 mb-2">Get requirements and capabilities of the model.</p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/modelRequirements`} />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Agent Resources */}
+                    <div className="p-6">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <HomeIcon className="w-5 h-5 text-gray-500" />
+                            Agent Resources
+                        </h2>
+                        <div className="grid md:grid-cols-2 gap-4">
+                            <Link 
+                                href={`/agents/${encodeURIComponent(agentName)}`}
+                                className="block p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all group bg-white"
+                            >
+                                <div className="flex items-center gap-3 mb-2">
+                                    <div className="p-2 rounded-lg bg-blue-50 text-blue-600 group-hover:bg-blue-100 transition-colors">
+                                        <MessageSquareIcon className="w-5 h-5" />
+                                    </div>
+                                    <span className="font-medium text-gray-900">Chat with Agent</span>
+                                </div>
+                                <p className="text-sm text-gray-500">
+                                    Direct interface to converse with {agentProfile.meta.fullname || agentName}.
+                                </p>
+                            </Link>
+
+                            <Link 
+                                href={`/agents/${encodeURIComponent(agentName)}/history`}
+                                className="block p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all group bg-white"
+                            >
+                                <div className="flex items-center gap-3 mb-2">
+                                    <div className="p-2 rounded-lg bg-purple-50 text-purple-600 group-hover:bg-purple-100 transition-colors">
+                                        <HistoryIcon className="w-5 h-5" />
+                                    </div>
+                                    <span className="font-medium text-gray-900">History & Feedback</span>
+                                </div>
+                                <p className="text-sm text-gray-500">
+                                    View past conversations and provide feedback.
+                                </p>
+                            </Link>
+
+                            <Link 
+                                href={`/agents/${encodeURIComponent(agentName)}/integration`}
+                                className="block p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all group bg-white"
+                            >
+                                <div className="flex items-center gap-3 mb-2">
+                                    <div className="p-2 rounded-lg bg-green-50 text-green-600 group-hover:bg-green-100 transition-colors">
+                                        <CodeIcon className="w-5 h-5" />
+                                    </div>
+                                    <span className="font-medium text-gray-900">Integration Guide</span>
+                                </div>
+                                <p className="text-sm text-gray-500">
+                                    Learn how to integrate this agent into your applications.
+                                </p>
+                            </Link>
+                        </div>
+                    </div>
+
+                    {/* Ecosystem */}
+                    <div className="p-6 bg-gray-50">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <ShareIcon className="w-5 h-5 text-gray-500" />
+                            Promptbook Ecosystem
+                        </h2>
+                        <div className="grid md:grid-cols-2 gap-4">
+                            <a 
+                                href="https://promptbook.studio"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center gap-3 p-3 rounded-lg bg-white border border-gray-200 hover:border-gray-300 transition-colors"
+                            >
+                                <BookOpenIcon className="w-5 h-5 text-gray-400" />
+                                <div>
+                                    <div className="font-medium text-gray-900">Promptbook Studio</div>
+                                    <div className="text-xs text-gray-500">Create and manage your own agents</div>
+                                </div>
+                            </a>
+                            
+                            <a 
+                                href="https://github.com/webgptorg/promptbook"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center gap-3 p-3 rounded-lg bg-white border border-gray-200 hover:border-gray-300 transition-colors"
+                            >
+                                <CodeIcon className="w-5 h-5 text-gray-400" />
+                                <div>
+                                    <div className="font-medium text-gray-900">GitHub Repository</div>
+                                    <div className="text-xs text-gray-500">Star us and contribute to the project</div>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/app/api/auth/change-password/route.ts

@@ -0,0 +1,75 @@
+import { NextResponse } from 'next/server';
+import { $getTableName } from '../../../../database/$getTableName';
+import { $provideSupabaseForServer } from '../../../../database/$provideSupabaseForServer';
+import { AgentsServerDatabase } from '../../../../database/schema';
+import { hashPassword, verifyPassword } from '../../../../utils/auth';
+import { getCurrentUser } from '../../../../utils/getCurrentUser';
+
+export async function POST(request: Request) {
+    try {
+        const user = await getCurrentUser();
+        if (!user) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await request.json();
+        const { currentPassword, newPassword } = body;
+
+        if (!currentPassword || !newPassword) {
+            return NextResponse.json({ error: 'Missing password fields' }, { status: 400 });
+        }
+
+        // Special check for environment admin
+        if (user.username === 'admin' && process.env.ADMIN_PASSWORD) {
+            // Environment admin cannot change password through this API
+            // They must change the env variable
+            return NextResponse.json(
+                {
+                    error: 'You cannot change the admin password. Please update the `ADMIN_PASSWORD` environment variable.',
+                },
+                { status: 403 },
+            );
+        }
+
+        const supabase = $provideSupabaseForServer();
+        const { data: userData, error: fetchError } = await supabase
+            .from(await $getTableName('User'))
+            .select('*')
+            .eq('username', user.username)
+            .single();
+
+        if (fetchError || !userData) {
+            return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        }
+
+        const userRow = userData as AgentsServerDatabase['public']['Tables']['User']['Row'];
+
+        // Verify current password
+        const isValid = await verifyPassword(currentPassword, userRow.passwordHash);
+        if (!isValid) {
+            return NextResponse.json({ error: 'Invalid current password' }, { status: 401 });
+        }
+
+        // Hash new password
+        const newPasswordHash = await hashPassword(newPassword);
+
+        // Update password
+        const { error: updateError } = await supabase
+            .from(await $getTableName('User'))
+            .update({
+                passwordHash: newPasswordHash,
+                updatedAt: new Date().toISOString(),
+            })
+            .eq('id', userRow.id);
+
+        if (updateError) {
+            console.error('Error updating password:', updateError);
+            return NextResponse.json({ error: 'Failed to update password' }, { status: 500 });
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Change password error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/chat-feedback/export/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { $getTableName } from '../../../../database/$getTableName';
+import { $provideSupabase } from '../../../../database/$provideSupabase';
+import { convertToCsv } from '../../../../utils/convertToCsv';
+import { isUserAdmin } from '../../../../utils/isUserAdmin';
+
+/**
+ * Export chat feedback as CSV.
+ *
+ * Query params:
+ * - agentName: filter by agent name (optional)
+ */
+export async function GET(request: NextRequest) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    try {
+        const searchParams = request.nextUrl.searchParams;
+        const agentName = searchParams.get('agentName');
+
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ChatFeedback');
+
+        let query = supabase.from(table).select('*');
+
+        if (agentName) {
+            query = query.eq('agentName', agentName);
+        }
+
+        query = query.order('createdAt', { ascending: false });
+
+        const { data, error } = await query;
+
+        if (error) {
+            console.error('Export chat feedback error:', error);
+            return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+        }
+
+        const csv = convertToCsv((data || []) as Record<string, unknown>[]);
+        const filename = agentName
+            ? `chat-feedback-${agentName}-${new Date().toISOString()}.csv`
+            : `chat-feedback-${new Date().toISOString()}.csv`;
+
+        return new NextResponse(csv, {
+            headers: {
+                'Content-Type': 'text/csv',
+                'Content-Disposition': `attachment; filename="${filename}"`,
+            },
+        });
+    } catch (error) {
+        console.error('Export chat feedback error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/chat-history/export/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { $getTableName } from '../../../../database/$getTableName';
+import { $provideSupabase } from '../../../../database/$provideSupabase';
+import { convertToCsv } from '../../../../utils/convertToCsv';
+import { isUserAdmin } from '../../../../utils/isUserAdmin';
+
+/**
+ * Export chat history as CSV.
+ *
+ * Query params:
+ * - agentName: filter by agent name (optional)
+ */
+export async function GET(request: NextRequest) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    try {
+        const searchParams = request.nextUrl.searchParams;
+        const agentName = searchParams.get('agentName');
+
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ChatHistory');
+
+        let query = supabase.from(table).select('*');
+
+        if (agentName) {
+            query = query.eq('agentName', agentName);
+        }
+
+        query = query.order('createdAt', { ascending: false });
+
+        const { data, error } = await query;
+
+        if (error) {
+            console.error('Export chat history error:', error);
+            return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+        }
+
+        const csv = convertToCsv((data || []) as Record<string, unknown>[]);
+        const filename = agentName
+            ? `chat-history-${agentName}-${new Date().toISOString()}.csv`
+            : `chat-history-${new Date().toISOString()}.csv`;
+
+        return new NextResponse(csv, {
+            headers: {
+                'Content-Type': 'text/csv',
+                'Content-Disposition': `attachment; filename="${filename}"`,
+            },
+        });
+    } catch (error) {
+        console.error('Export chat history error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

package/apps/agents-server/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { ChangePasswordForm } from '../ChangePasswordForm/ChangePasswordForm';
+import { Portal } from '../Portal/Portal';
+
+type ChangePasswordDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export function ChangePasswordDialog(props: ChangePasswordDialogProps) {
+    const { isOpen, onClose } = props;
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <Portal>
+            <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
+                <div className="relative w-full max-w-md bg-white rounded-lg shadow-lg border border-gray-200 p-6 animate-in zoom-in-95 duration-200">
+                    <button
+                        onClick={onClose}
+                        className="absolute top-4 right-4 text-gray-400 hover:text-gray-500 transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                        <span className="sr-only">Close</span>
+                    </button>
+
+                    <div className="mb-6">
+                        <h2 className="text-xl font-semibold text-gray-900">Change Password</h2>
+                        <p className="text-sm text-gray-500 mt-1">Update your password to keep your account secure</p>
+                    </div>
+
+                    <ChangePasswordForm onSuccess={onClose} />
+                </div>
+            </div>
+        </Portal>
+    );
+}