@promptbook/cli 0.103.0-51 → 0.103.0-53

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

@@ -0,0 +1,47 @@
+// POST /api/agents/[agentName]/clone
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { AgentBasicInformation } from '../../../../../../../../src/book-2.0/agent-source/AgentBasicInformation';
+import { string_book } from '../../../../../../../../src/book-2.0/agent-source/string_book';
+import { TODO_any } from '@promptbook-local/types';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    const { agentName } = await params;
+    const collection = await $provideAgentCollectionForServer();
+
+    try {
+        const source = await collection.getAgentSource(agentName);
+
+        // Generate new name
+        // TODO: [🧠] Better naming strategy, maybe check for collisions
+        let newAgentName = `${agentName} (Copy)`;
+        let counter = 1;
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            try {
+                await collection.getAgentSource(newAgentName);
+                 // If success, it means it exists, so we try next one
+                 counter++;
+                 newAgentName = `${agentName} (Copy ${counter})`;
+             } catch (error) {
+                 // If error, it likely means it does not exist (NotFoundError), so we can use it
+                 // TODO: [🧠] Check if it is really NotFoundError
+                 break;
+             }
+        }
+
+        const lines = source.split('\n');
+        lines[0] = newAgentName;
+        const newSource = lines.join('\n') as string_book;
+
+        const newAgent = await collection.createAgent(newSource);
+        
+        return NextResponse.json(newAgent);
+    } catch (error) {
+        return NextResponse.json(
+            { success: false, error: (error as TODO_any)?.message || 'Failed to clone agent' },
+            { status: 500 },
+        );
+    }
+}

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

@@ -0,0 +1,19 @@
+// DELETE /api/agents/[agentName]
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { TODO_any } from '@promptbook-local/types';
+import { NextResponse } from 'next/server';
+
+export async function DELETE(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    const { agentName } = await params;
+    const collection = await $provideAgentCollectionForServer();
+
+    try {
+        await collection.deleteAgent(agentName);
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        return NextResponse.json(
+            { success: false, error: (error as TODO_any)?.message || 'Failed to delete agent' },
+            { status: 500 },
+        );
+    }
+}

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

@@ -1,6 +1,7 @@
+import { $provideServer } from '@/src/tools/$provideServer';
 import { NextResponse } from 'next/server';
-import { getMetadata } from '../../../database/getMetadata';
 import { $provideAgentCollectionForServer } from '../../../tools/$provideAgentCollectionForServer';
+import { getFederatedServersFromMetadata } from '../../../utils/getFederatedServersFromMetadata';
 
 export const dynamic = 'force-dynamic';
 
@@ -8,27 +9,35 @@ export async function GET() {
     try {
         const collection = await $provideAgentCollectionForServer();
         const agents = await collection.listAgents();
-        const serverUrl = (await getMetadata('SERVER_URL')) || '';
-        const federatedServersString = (await getMetadata('FEDERATED_SERVERS')) || '';
-        const federatedServers = federatedServersString
-            .split(',')
-            .map((s) => s.trim())
-            .filter((s) => s !== '');
+        const federatedServers = await getFederatedServersFromMetadata();
+        const { publicUrl } = await $provideServer();
 
         const agentsWithUrl = agents.map((agent) => ({
             ...agent,
-            url: `${serverUrl}/${agent.agentName}`,
+            url: `${publicUrl.href}agents/${encodeURIComponent(agent.agentName)}`,
         }));
 
-        return NextResponse.json({
+        const response = NextResponse.json({
             agents: agentsWithUrl,
             federatedServers,
         });
+
+        // Add CORS headers
+        response.headers.set('Access-Control-Allow-Origin', '*');
+        response.headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
+        response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+        return response;
     } catch (error) {
         console.error('Error fetching agents:', error);
-        return NextResponse.json(
-            { error: 'Failed to fetch agents' },
-            { status: 500 },
-        );
+        return NextResponse.json({ error: 'Failed to fetch agents' }, { status: 500 });
     }
 }
+
+export async function OPTIONS() {
+    const response = new NextResponse(null, { status: 200 });
+    response.headers.set('Access-Control-Allow-Origin', '*');
+    response.headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+    return response;
+}

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

@@ -1,7 +1,4 @@
-import { $getTableName } from '@/src/database/$getTableName';
-import { $provideSupabaseForServer } from '../../../../database/$provideSupabaseForServer';
-import { AgentsServerDatabase } from '../../../../database/schema';
-import { verifyPassword } from '../../../../utils/auth';
+import { authenticateUser } from '../../../../utils/authenticateUser';
 import { setSession } from '../../../../utils/session';
 import { NextResponse } from 'next/server';
 
@@ -14,50 +11,15 @@ export async function POST(request: Request) {
             return NextResponse.json({ error: 'Username and password are required' }, { status: 400 });
         }
 
-        // 1. Check if it's the environment admin
-        if (process.env.ADMIN_PASSWORD && password === process.env.ADMIN_PASSWORD && username === 'admin') {
-             // Or maybe allow any username if password matches admin password? 
-             // The task says "process.env.ADMIN_PASSWORD is like one of the admin users"
-             // Assuming username 'admin' for environment password login.
-             await setSession({ username: 'admin', isAdmin: true });
-             return NextResponse.json({ success: true });
-        }
-        
-        // 2. Check DB users
-        const supabase = $provideSupabaseForServer();
-        const { data: user, error } = await supabase
-            .from(await $getTableName('User'))
-            .select('*')
-            .eq('username', username)
-            .single();
-
-        if (error || !user) {
-            // Check if password matches ADMIN_PASSWORD even if user doesn't exist?
-            // "The table User should work together with the process.env.ADMIN_PASSWORD"
-            // If the user enters a password that matches process.env.ADMIN_PASSWORD, should they get admin access regardless of username?
-            // "process.env.ADMIN_PASSWORD is like one of the admin users" implies it's a specific credential.
-            // Let's stick to: if username is 'admin' and password is ADMIN_PASSWORD, it works.
-            // Or if the password matches ADMIN_PASSWORD, maybe we grant admin access? 
-            // "Non-admin users can only log in... cannot see list of users"
-            
-            // Re-reading: "process.env.ADMIN_PASSWORD is like one of the admin users in the User table"
-            // This suggests it's treated as a user.
-            
-            // If I login with a valid user from DB, I check password hash.
-            // If I login with 'admin' and ADMIN_PASSWORD, I get admin.
+        const user = await authenticateUser(username, password);
 
+        if (user) {
+            await setSession(user);
+            return NextResponse.json({ success: true });
+        } else {
             return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 });
         }
 
-        const isValid = await verifyPassword(password, (user as AgentsServerDatabase['public']['Tables']['User']['Row']).passwordHash);
-
-        if (!isValid) {
-             return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 });
-        }
-
-        await setSession({ username: (user as AgentsServerDatabase['public']['Tables']['User']['Row']).username, isAdmin: (user as AgentsServerDatabase['public']['Tables']['User']['Row']).isAdmin });
-        return NextResponse.json({ success: true });
-
     } catch (error) {
         console.error('Login error:', error);
         return NextResponse.json({ error: 'Internal server error' }, { status: 500 });

package/apps/agents-server/src/app/api/chat-feedback/[id]/route.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { $getTableName } from '../../../../database/$getTableName';
+import { $provideSupabase } from '../../../../database/$provideSupabase';
+import { isUserAdmin } from '../../../../utils/isUserAdmin';
+
+/**
+ * Delete a single chat feedback entry by ID.
+ */
+export async function DELETE(request: NextRequest, context: { params: Promise<{ id: string }> }) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+
+    const rawId = (await context.params).id;
+    const id = Number.parseInt(rawId, 10);
+
+    if (!Number.isFinite(id) || id <= 0) {
+        return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+    }
+
+    try {
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ChatFeedback');
+
+        const { error } = await supabase.from(table).delete().eq('id', id);
+
+        if (error) {
+            console.error('Delete chat feedback row error:', error);
+            return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Delete chat feedback row error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

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

@@ -0,0 +1,157 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { $getTableName } from '../../../database/$getTableName';
+import { $provideSupabase } from '../../../database/$provideSupabase';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+
+const DEFAULT_PAGE_SIZE = 20;
+const MAX_PAGE_SIZE = 100;
+
+type SortField = 'createdAt' | 'agentName' | 'id';
+type SortOrder = 'asc' | 'desc';
+
+function parsePositiveInt(value: string | null, fallback: number): number {
+    if (!value) return fallback;
+    const parsed = parseInt(value, 10);
+    if (Number.isNaN(parsed) || parsed <= 0) return fallback;
+    return parsed;
+}
+
+function parseSortField(value: string | null): SortField {
+    if (value === 'agentName' || value === 'id') return value;
+    return 'createdAt';
+}
+
+function parseSortOrder(value: string | null): SortOrder {
+    return value === 'asc' ? 'asc' : 'desc';
+}
+
+/**
+ * List chat feedback with filters, search and pagination.
+ *
+ * Query params:
+ * - page: number (1-based)
+ * - pageSize: number (items per page)
+ * - agentName: filter by agent name
+ * - search: free-text search across agentName, url, ip, textRating, userNote and expectedAnswer
+ * - sortBy: createdAt | agentName | id (default: createdAt)
+ * - sortOrder: asc | desc (default: desc)
+ */
+export async function GET(request: NextRequest) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    try {
+        const searchParams = request.nextUrl.searchParams;
+
+        const page = parsePositiveInt(searchParams.get('page'), 1);
+        const pageSize = Math.min(
+            MAX_PAGE_SIZE,
+            parsePositiveInt(searchParams.get('pageSize'), DEFAULT_PAGE_SIZE),
+        );
+        const agentName = searchParams.get('agentName');
+        const search = searchParams.get('search')?.trim() || '';
+        const sortBy = parseSortField(searchParams.get('sortBy'));
+        const sortOrder = parseSortOrder(searchParams.get('sortOrder'));
+
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ChatFeedback');
+
+        let query = supabase
+            .from(table)
+            .select('*', { count: 'exact' });
+
+        if (agentName) {
+            query = query.eq('agentName', agentName);
+        }
+
+        if (search) {
+            // Note: We intentionally limit search to simple text columns
+            // to keep the query portable and efficient.
+            //
+            // This searches across:
+            // - agentName
+            // - url
+            // - ip
+            // - textRating
+            // - userNote
+            // - expectedAnswer
+            const escaped = search.replace(/%/g, '\\%').replace(/_/g, '\\_');
+            query = query.or(
+                [
+                    `agentName.ilike.%${escaped}%`,
+                    `url.ilike.%${escaped}%`,
+                    `ip.ilike.%${escaped}%`,
+                    `textRating.ilike.%${escaped}%`,
+                    `userNote.ilike.%${escaped}%`,
+                    `expectedAnswer.ilike.%${escaped}%`,
+                ].join(','),
+            );
+        }
+
+        query = query.order(sortBy, { ascending: sortOrder === 'asc' });
+
+        const from = (page - 1) * pageSize;
+        const to = from + pageSize - 1;
+
+        query = query.range(from, to);
+
+        const { data, error, count } = await query;
+
+        if (error) {
+            console.error('List chat feedback error:', error);
+            return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+        }
+
+        return NextResponse.json({
+            items: data ?? [],
+            total: count ?? 0,
+            page,
+            pageSize,
+            sortBy,
+            sortOrder,
+        });
+    } catch (error) {
+        console.error('List chat feedback error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}
+
+/**
+ * Delete chat feedback for a specific agent.
+ *
+ * Query params:
+ * - agentName: name of the agent whose feedback should be removed
+ */
+export async function DELETE(request: NextRequest) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const searchParams = request.nextUrl.searchParams;
+    const agentName = searchParams.get('agentName');
+
+    if (!agentName) {
+        return NextResponse.json({ error: 'agentName is required' }, { status: 400 });
+    }
+
+    try {
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ChatFeedback');
+
+        const { error } = await supabase
+            .from(table)
+            .delete()
+            .eq('agentName', agentName);
+
+        if (error) {
+            console.error('Clear chat feedback error:', error);
+            return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Clear chat feedback error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/chat-history/[id]/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { $getTableName } from '../../../../database/$getTableName';
+import { $provideSupabase } from '../../../../database/$provideSupabase';
+import { isUserAdmin } from '../../../../utils/isUserAdmin';
+
+/**
+ * Delete a single chat history entry by ID.
+ */
+export async function DELETE(request: NextRequest, context: { params: Promise<{ id: string }> }) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const rawId = (await context.params).id;
+    const id = Number.parseInt(rawId, 10);
+
+    if (!Number.isFinite(id) || id <= 0) {
+        return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+    }
+
+    try {
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ChatHistory');
+
+        const { error } = await supabase.from(table).delete().eq('id', id);
+
+        if (error) {
+            console.error('Delete chat history row error:', error);
+            return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Delete chat history row error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

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

@@ -0,0 +1,147 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { $getTableName } from '../../../database/$getTableName';
+import { $provideSupabase } from '../../../database/$provideSupabase';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+
+const DEFAULT_PAGE_SIZE = 20;
+const MAX_PAGE_SIZE = 100;
+
+type SortField = 'createdAt' | 'agentName' | 'id';
+type SortOrder = 'asc' | 'desc';
+
+function parsePositiveInt(value: string | null, fallback: number): number {
+    if (!value) return fallback;
+    const parsed = parseInt(value, 10);
+    if (Number.isNaN(parsed) || parsed <= 0) return fallback;
+    return parsed;
+}
+
+function parseSortField(value: string | null): SortField {
+    if (value === 'agentName' || value === 'id') return value;
+    return 'createdAt';
+}
+
+function parseSortOrder(value: string | null): SortOrder {
+    return value === 'asc' ? 'asc' : 'desc';
+}
+
+/**
+ * List chat history with filters, search and pagination.
+ *
+ * Query params:
+ * - page: number (1-based)
+ * - pageSize: number (items per page)
+ * - agentName: filter by agent name
+ * - search: free-text search across agentName, url and ip
+ * - sortBy: createdAt | agentName | id (default: createdAt)
+ * - sortOrder: asc | desc (default: desc)
+ */
+export async function GET(request: NextRequest) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    try {
+        const searchParams = request.nextUrl.searchParams;
+
+        const page = parsePositiveInt(searchParams.get('page'), 1);
+        const pageSize = Math.min(
+            MAX_PAGE_SIZE,
+            parsePositiveInt(searchParams.get('pageSize'), DEFAULT_PAGE_SIZE),
+        );
+        const agentName = searchParams.get('agentName');
+        const search = searchParams.get('search')?.trim() || '';
+        const sortBy = parseSortField(searchParams.get('sortBy'));
+        const sortOrder = parseSortOrder(searchParams.get('sortOrder'));
+
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ChatHistory');
+
+        let query = supabase
+            .from(table)
+            .select('*', { count: 'exact' });
+
+        if (agentName) {
+            query = query.eq('agentName', agentName);
+        }
+
+        if (search) {
+            // Note: We intentionally limit search to simple text columns
+            // to keep the query portable and efficient.
+            //
+            // This searches across:
+            // - agentName
+            // - url
+            // - ip
+            const escaped = search.replace(/%/g, '\\%').replace(/_/g, '\\_');
+            query = query.or(
+                `agentName.ilike.%${escaped}%,url.ilike.%${escaped}%,ip.ilike.%${escaped}%`,
+            );
+        }
+
+        query = query.order(sortBy, { ascending: sortOrder === 'asc' });
+
+        const from = (page - 1) * pageSize;
+        const to = from + pageSize - 1;
+
+        query = query.range(from, to);
+
+        const { data, error, count } = await query;
+
+        if (error) {
+            console.error('List chat history error:', error);
+            return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+        }
+
+        return NextResponse.json({
+            items: data ?? [],
+            total: count ?? 0,
+            page,
+            pageSize,
+            sortBy,
+            sortOrder,
+        });
+    } catch (error) {
+        console.error('List chat history error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}
+
+/**
+ * Delete chat history for a specific agent.
+ *
+ * Query params:
+ * - agentName: name of the agent whose history should be removed
+ */
+export async function DELETE(request: NextRequest) {
+    if (!(await isUserAdmin())) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const searchParams = request.nextUrl.searchParams;
+    const agentName = searchParams.get('agentName');
+
+    if (!agentName) {
+        return NextResponse.json({ error: 'agentName is required' }, { status: 400 });
+    }
+
+    try {
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ChatHistory');
+
+        const { error } = await supabase
+            .from(table)
+            .delete()
+            .eq('agentName', agentName);
+
+        if (error) {
+            console.error('Clear chat history error:', error);
+            return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Clear chat history error:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/federated-agents/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+import { getFederatedServersFromMetadata } from '../../../utils/getFederatedServersFromMetadata';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    try {
+        const federatedServers = await getFederatedServersFromMetadata();
+
+        return NextResponse.json({
+            federatedServers,
+        });
+    } catch (error) {
+        console.error('Error fetching federated servers:', error);
+        return NextResponse.json({ error: 'Failed to fetch federated servers' }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/upload/route.ts

@@ -11,6 +11,7 @@ import { keepUnused } from '../../../../../../src/utils/organization/keepUnused'
 import { $provideCdnForServer } from '../../../../src/tools/$provideCdnForServer';
 import { getUserFileCdnKey } from '../../../../src/utils/cdn/utils/getUserFileCdnKey';
 import { validateMimeType } from '../../../../src/utils/validators/validateMimeType';
+import { getMetadata } from '../../../database/getMetadata';
 
 export async function POST(request: NextRequest) {
     try {
@@ -18,9 +19,16 @@ export async function POST(request: NextRequest) {
         // await forTime(5000);
 
         const nodeRequest = await nextRequestToNodeRequest(request);
+        let maxFileSizeMb = Number((await getMetadata('MAX_FILE_UPLOAD_SIZE_MB')) || '50'); // <- TODO: [🌲] To /config.ts
+
+        if (Number.isNaN(maxFileSizeMb)) {
+            maxFileSizeMb = 50; // <- TODO: [🌲] To /config.ts
+        }
+
+        const maxFileSize = maxFileSizeMb * 1024 * 1024;
 
         const files = await new Promise<formidable.Files>((resolve, reject) => {
-            const form = formidable({});
+            const form = formidable({ maxFileSize });
             form.parse(nodeRequest as TODO_any, (error, fields, files) => {
                 keepUnused(fields);
 

package/apps/agents-server/src/app/docs/[docId]/page.tsx

@@ -0,0 +1,62 @@
+import { notFound } from 'next/navigation';
+import ReactMarkdown from 'react-markdown';
+import { BookCommitment } from '../../../../../../src/commitments/_base/BookCommitment';
+import { getVisibleCommitmentDefinitions } from '../../../utils/getVisibleCommitmentDefinitions';
+
+type DocPageProps = {
+    params: Promise<{
+        docId: string;
+    }>;
+};
+
+export default async function DocPage(props: DocPageProps) {
+    const { docId } = await props.params;
+
+    // Decode the docId in case it contains encoded characters (though types usually don't)
+    const commitmentType = decodeURIComponent(docId) as BookCommitment;
+    const groupedCommitments = getVisibleCommitmentDefinitions();
+    const group = groupedCommitments.find((g) => g.primary.type === commitmentType || g.aliases.includes(commitmentType));
+
+    if (!group) {
+        notFound();
+    }
+
+    const { primary, aliases } = group;
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+            <div className="container mx-auto px-4 py-16">
+                <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
+                    <div className="p-8 border-b border-gray-100 bg-gray-50/50">
+                        <div className="flex items-center gap-4 mb-4">
+                            <h1 className="text-4xl font-bold text-gray-900 tracking-tight">
+                                {primary.type}
+                                {aliases.length > 0 && (
+                                    <span className="text-gray-400 font-normal ml-4 text-2xl">
+                                        / {aliases.join(' / ')}
+                                    </span>
+                                )}
+                            </h1>
+                            <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                                Commitment
+                            </span>
+                        </div>
+                        {primary.description && (
+                            <p className="text-xl text-gray-600 leading-relaxed max-w-3xl">
+                                {primary.description}
+                            </p>
+                        )}
+                    </div>
+                    
+                    <div className="p-8">
+                        <article className="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-h2:text-2xl prose-h2:mt-8 prose-h2:mb-4 prose-p:text-gray-600 prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:text-gray-800">
+                            <ReactMarkdown>
+                                {primary.documentation}
+                            </ReactMarkdown>
+                        </article>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}