@promptbook/cli 0.103.0-52 → 0.103.0-53

package/apps/agents-server/src/app/admin/metadata/MetadataClient.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { metadataDefaults } from '../../../database/metadataDefaults';
+import { FileText, Hash, Image, Shield, ToggleLeft, Type, Upload } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { metadataDefaults, MetadataType } from '../../../database/metadataDefaults';
 
 type MetadataEntry = {
     id: number;
@@ -11,17 +12,53 @@ type MetadataEntry = {
     createdAt: string;
     updatedAt: string;
     isDefault?: boolean;
+    type?: MetadataType;
 };
 
+function mergeMetadataWithDefaults(data: MetadataEntry[]): MetadataEntry[] {
+    const byKey = new Map<string, MetadataEntry>();
+
+    // First prefer existing (non-default) metadata coming from the database
+    for (const entry of data) {
+        const existing = byKey.get(entry.key);
+        if (!existing || existing.isDefault) {
+            // Find type from defaults
+            const def = metadataDefaults.find((d) => d.key === entry.key);
+            byKey.set(entry.key, { ...entry, type: def?.type });
+        }
+    }
+
+    // Then add defaults only for keys that are missing
+    for (const def of metadataDefaults) {
+        if (!byKey.has(def.key)) {
+            byKey.set(def.key, {
+                id: -1,
+                key: def.key,
+                value: def.value,
+                note: def.note,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                isDefault: true,
+                type: def.type,
+            });
+        }
+    }
+
+    return Array.from(byKey.values()).sort((a, b) => a.key.localeCompare(b.key));
+}
+
 export function MetadataClient() {
     const [metadata, setMetadata] = useState<MetadataEntry[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [editingId, setEditingId] = useState<number | null>(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
     const [formState, setFormState] = useState<{
         key: string;
         value: string;
         note: string;
+        type?: MetadataType;
     }>({ key: '', value: '', note: '' });
 
     const fetchMetadata = async () => {
@@ -33,23 +70,7 @@ export function MetadataClient() {
             }
             const data: MetadataEntry[] = await response.json();
 
-            // Merge defaults
-            const mergedData = [...data];
-            for (const def of metadataDefaults) {
-                if (!mergedData.find((m) => m.key === def.key)) {
-                    mergedData.push({
-                        id: -1,
-                        key: def.key,
-                        value: def.value,
-                        note: def.note,
-                        createdAt: new Date().toISOString(),
-                        updatedAt: new Date().toISOString(),
-                        isDefault: true,
-                    });
-                }
-            }
-            // Sort by key
-            mergedData.sort((a, b) => a.key.localeCompare(b.key));
+            const mergedData = mergeMetadataWithDefaults(data);
 
             setMetadata(mergedData);
         } catch (err) {
@@ -96,6 +117,7 @@ export function MetadataClient() {
             key: entry.key,
             value: entry.value,
             note: entry.note || '',
+            type: entry.type,
         });
     };
 
@@ -123,6 +145,77 @@ export function MetadataClient() {
         setFormState({ key: '', value: '', note: '' });
     };
 
+    const getTypeIcon = (type?: MetadataType) => {
+        switch (type) {
+            case 'TEXT_SINGLE_LINE':
+                return <Type className="w-4 h-4" />;
+            case 'TEXT':
+                return <FileText className="w-4 h-4" />;
+            case 'NUMBER':
+                return <Hash className="w-4 h-4" />;
+            case 'BOOLEAN':
+                return <ToggleLeft className="w-4 h-4" />;
+            case 'IMAGE_URL':
+                return <Image className="w-4 h-4" />;
+            case 'IP_RANGE':
+                return <Shield className="w-4 h-4" />;
+            default:
+                return <Type className="w-4 h-4" />;
+        }
+    };
+
+    const validateIpOrCidr = (ip: string) => {
+        const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+        const cidrV4Regex =
+            /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(?:3[0-2]|[12]?[0-9])$/;
+        // Simple IPv6 check (allows :: abbreviation)
+        const ipv6Regex =
+            /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
+        const cidrV6Regex = /^([0-9a-fA-F:.]{2,})\/(12[0-8]|1[0-1][0-9]|[1-9][0-9]|[0-9])$/;
+
+        if (ip.includes('/')) {
+            return cidrV4Regex.test(ip) || cidrV6Regex.test(ip);
+        }
+        return ipv4Regex.test(ip) || ipv6Regex.test(ip);
+    };
+
+    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        try {
+            setIsUploading(true);
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const response = await fetch('/api/upload', {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to upload file: ${response.statusText}`);
+            }
+
+            const { fileUrl: longFileUrl } = await response.json();
+
+            const LONG_URL = `${process.env.NEXT_PUBLIC_CDN_PUBLIC_URL!}/${process.env
+                .NEXT_PUBLIC_CDN_PATH_PREFIX!}/user/files/`;
+            const SHORT_URL = `https://ptbk.io/k/`;
+            // <- TODO: [🌍] Unite this logic in one place
+
+            const shortFileUrl = longFileUrl.split(LONG_URL).join(SHORT_URL);
+            setFormState((prev) => ({ ...prev, value: shortFileUrl }));
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to upload image');
+        } finally {
+            setIsUploading(false);
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    };
+
     if (loading && metadata.length === 0) {
         return <div className="p-8 text-center">Loading metadata...</div>;
     }
@@ -158,14 +251,127 @@ export function MetadataClient() {
                         <label htmlFor="value" className="block text-sm font-medium text-gray-700 mb-1">
                             Value
                         </label>
-                        <textarea
-                            id="value"
-                            value={formState.value}
-                            onChange={(e) => setFormState({ ...formState, value: e.target.value })}
-                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[100px]"
-                            required
-                            placeholder="Metadata value..."
-                        />
+                        {formState.type === 'TEXT_SINGLE_LINE' ? (
+                            <input
+                                type="text"
+                                id="value"
+                                value={formState.value}
+                                onChange={(e) => setFormState({ ...formState, value: e.target.value })}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                required
+                                placeholder="Metadata value..."
+                            />
+                        ) : formState.type === 'IMAGE_URL' ? (
+                            <div className="space-y-2">
+                                <div className="flex space-x-2">
+                                    <input
+                                        type="text"
+                                        id="value"
+                                        value={formState.value}
+                                        onChange={(e) => setFormState({ ...formState, value: e.target.value })}
+                                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                        placeholder="Image URL..."
+                                    />
+                                    <input
+                                        type="file"
+                                        accept="image/*"
+                                        className="hidden"
+                                        ref={fileInputRef}
+                                        onChange={handleFileUpload}
+                                    />
+                                    <button
+                                        type="button"
+                                        onClick={() => fileInputRef.current?.click()}
+                                        disabled={isUploading}
+                                        className="bg-gray-100 text-gray-700 px-3 py-2 rounded-md border border-gray-300 hover:bg-gray-200 flex items-center space-x-2 min-w-max"
+                                    >
+                                        <Upload className="w-4 h-4" />
+                                        <span>{isUploading ? 'Uploading...' : 'Upload Image'}</span>
+                                    </button>
+                                </div>
+                                {formState.value && (
+                                    <div className="mt-2 p-2 border border-gray-200 rounded-md bg-gray-50 inline-block">
+                                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                                        <img
+                                            src={formState.value}
+                                            alt="Preview"
+                                            className="max-w-full h-auto max-h-[200px] object-contain"
+                                            onError={(e) => {
+                                                (e.target as HTMLImageElement).style.display = 'none';
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        ) : formState.type === 'BOOLEAN' ? (
+                            <select
+                                id="value"
+                                value={formState.value}
+                                onChange={(e) => setFormState({ ...formState, value: e.target.value })}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value="true">True</option>
+                                <option value="false">False</option>
+                            </select>
+                        ) : formState.type === 'NUMBER' ? (
+                            <input
+                                type="number"
+                                id="value"
+                                value={formState.value}
+                                onChange={(e) => setFormState({ ...formState, value: e.target.value })}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                required
+                                placeholder="Metadata value..."
+                            />
+                        ) : formState.type === 'IP_RANGE' ? (
+                            <div className="space-y-2">
+                                <textarea
+                                    id="value"
+                                    value={formState.value.split(',').join('\n')}
+                                    onChange={(e) => {
+                                        const newValue = e.target.value
+                                            .split('\n')
+                                            .map((line) => line.trim())
+                                            .filter((line) => line !== '')
+                                            .join(',');
+                                        setFormState({ ...formState, value: newValue });
+                                    }}
+                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[100px] font-mono"
+                                    placeholder="e.g. 192.168.1.1&#10;10.0.0.0/24"
+                                />
+                                <div className="flex flex-wrap gap-2">
+                                    {formState.value
+                                        .split(',')
+                                        .filter((ip) => ip.trim() !== '')
+                                        .map((ip, i) => {
+                                            const isValid = validateIpOrCidr(ip.trim());
+                                            return (
+                                                <span
+                                                    key={i}
+                                                    className={`px-2 py-1 rounded text-xs font-mono border ${
+                                                        isValid
+                                                            ? 'bg-green-100 text-green-800 border-green-200'
+                                                            : 'bg-red-100 text-red-800 border-red-200'
+                                                    }`}
+                                                >
+                                                    {ip}
+                                                    {!isValid && ' (Invalid)'}
+                                                </span>
+                                            );
+                                        })}
+                                </div>
+                                <p className="text-xs text-gray-500">Enter each IP or CIDR range on a new line.</p>
+                            </div>
+                        ) : (
+                            <textarea
+                                id="value"
+                                value={formState.value}
+                                onChange={(e) => setFormState({ ...formState, value: e.target.value })}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[100px]"
+                                required
+                                placeholder="Metadata value..."
+                            />
+                        )}
                     </div>
                     <div>
                         <label htmlFor="note" className="block text-sm font-medium text-gray-700 mb-1">
@@ -204,6 +410,9 @@ export function MetadataClient() {
                 <table className="min-w-full divide-y divide-gray-200">
                     <thead className="bg-gray-50">
                         <tr>
+                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Type
+                            </th>
                             <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                 Key
                             </th>
@@ -228,6 +437,11 @@ export function MetadataClient() {
                         ) : (
                             metadata.map((entry) => (
                                 <tr key={entry.id}>
+                                    <td className="px-6 py-4 whitespace-nowrap text-gray-500">
+                                        <div className="flex items-center" title={entry.type || 'Unknown'}>
+                                            {getTypeIcon(entry.type)}
+                                        </div>
+                                    </td>
                                     <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                         {entry.key}
                                     </td>

package/apps/agents-server/src/app/admin/models/page.tsx

@@ -0,0 +1,22 @@
+import { getSingleLlmExecutionTools } from '@promptbook-local/core';
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { ModelsSection } from '../../../components/Homepage/ModelsSection';
+import { $provideExecutionToolsForServer } from '../../../tools/$provideExecutionToolsForServer';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+
+export default async function AdminModelsPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    const executionTools = await $provideExecutionToolsForServer();
+    const models = await getSingleLlmExecutionTools(executionTools.llm).listModels();
+
+    return (
+        <div className="container mx-auto px-4 py-8">
+            <ModelsSection models={models} />
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/users/[userId]/UserDetailClient.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useMemo } from 'react';
+import { Card } from '../../../../components/Homepage/Card';
+import { Section } from '../../../../components/Homepage/Section';
+import { useUsersAdmin } from '../../../../components/UsersList/useUsersAdmin';
+
+type UserDetailClientProps = {
+    /**
+     * User identifier from the URL.
+     *
+     * In practice this is the username (see Header links), but we also
+     * gracefully handle the case where a numeric ID is used.
+     */
+    userId: string;
+};
+
+export function UserDetailClient({ userId }: UserDetailClientProps) {
+    const router = useRouter();
+    const { users, loading, error, deleteUser, toggleAdmin } = useUsersAdmin();
+
+    const user = useMemo(
+        () => users.find((u) => u.username === userId || String(u.id) === userId) ?? null,
+        [users, userId],
+    );
+
+    const handleDelete = async () => {
+        if (!user) return;
+
+        await deleteUser(user.username);
+        router.push('/admin/users');
+    };
+
+    const handleToggleAdmin = async () => {
+        if (!user) return;
+
+        await toggleAdmin(user.username, user.isAdmin);
+    };
+
+    if (loading && !user) {
+        return <div className="container mx-auto px-4 py-8">Loading user...</div>;
+    }
+
+    if (error && !user) {
+        return (
+            <div className="container mx-auto px-4 py-8">
+                <div className="bg-red-100 text-red-700 p-3 rounded">{error}</div>
+            </div>
+        );
+    }
+
+    if (!user) {
+        return (
+            <div className="container mx-auto px-4 py-8">
+                <p className="text-gray-600">User not found.</p>
+                <Link href="/admin/users" className="mt-4 inline-block text-blue-600 hover:text-blue-800 text-sm">
+                    &larr; Back to users
+                </Link>
+            </div>
+        );
+    }
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            <Link href="/admin/users" className="text-sm text-blue-600 hover:text-blue-800">
+                &larr; Back to users
+            </Link>
+
+            <Section title={`User profile: ${user.username}`}>
+                <Card>
+                    <div className="flex justify-between items-start">
+                        <div>
+                            <h2 className="text-2xl font-semibold text-gray-900">{user.username}</h2>
+                            {user.isAdmin && (
+                                <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mt-1">
+                                    Admin
+                                </span>
+                            )}
+                            <p className="text-gray-500 text-sm mt-2">ID: {user.id}</p>
+                            <p className="text-gray-500 text-sm mt-1">
+                                Created:{' '}
+                                {user.createdAt
+                                    ? new Date(user.createdAt).toLocaleString()
+                                    : 'Unknown'}
+                            </p>
+                            <p className="text-gray-500 text-sm mt-1">
+                                Last updated:{' '}
+                                {user.updatedAt
+                                    ? new Date(user.updatedAt).toLocaleString()
+                                    : 'Unknown'}
+                            </p>
+                        </div>
+                        <div className="space-x-2">
+                            <button
+                                onClick={handleToggleAdmin}
+                                className="text-sm text-blue-600 hover:text-blue-800"
+                            >
+                                {user.isAdmin ? 'Remove admin' : 'Make admin'}
+                            </button>
+                            <button
+                                onClick={handleDelete}
+                                className="text-sm text-red-600 hover:text-red-800"
+                            >
+                                Delete user
+                            </button>
+                        </div>
+                    </div>
+                </Card>
+
+                <Card>
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Created agents</h3>
+                    <p className="text-gray-600 text-sm">
+                        Listing agents created by users is not wired to the data model yet.
+                        {/* TODO: [🧠] Once agents are linked to users, show their agents here. */}
+                    </p>
+                </Card>
+
+                <Card>
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Activity</h3>
+                    <p className="text-gray-600 text-sm">
+                        Detailed activity tracking is not implemented yet. For now, you can use the
+                        created/updated timestamps above as a basic signal of recent changes.
+                        {/* TODO: [🧠] Implement user activity timeline once events are stored. */}
+                    </p>
+                </Card>
+            </Section>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/users/[userId]/page.tsx

@@ -0,0 +1,21 @@
+'use server';
+
+import { ForbiddenPage } from '../../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../../utils/isUserAdmin';
+import { UserDetailClient } from './UserDetailClient';
+
+export default async function UserDetailPage({
+    params,
+}: {
+    params: Promise<{ userId: string }>;
+}) {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    const { userId } = await params;
+
+    return <UserDetailClient userId={decodeURIComponent(userId)} />;
+}

package/apps/agents-server/src/app/admin/users/page.tsx

@@ -0,0 +1,18 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { UsersList } from '../../../components/UsersList/UsersList';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+
+export default async function AdminUsersPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    // Full users management (list + create) is only available on this page
+    return (
+        <div className="container mx-auto px-4 py-8">
+            <UsersList allowCreate />
+        </div>
+    );
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState } from 'react';
+import { $clearAgentChatFeedback } from '../../../utils/chatFeedbackAdmin';
+
+type ClearAgentChatFeedbackButtonProps = {
+    /**
+     * Agent name for which the chat feedback should be cleared.
+     */
+    agentName: string;
+
+    /**
+     * Optional callback invoked after successful clearing.
+     */
+    onCleared?: () => void;
+};
+
+/**
+ * Admin-only button to clear chat feedback for a specific agent.
+ *
+ * This is intentionally small and self-contained so it can be reused
+ * from different admin-oriented surfaces without duplicating logic.
+ */
+export function ClearAgentChatFeedbackButton({ agentName, onCleared }: ClearAgentChatFeedbackButtonProps) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleClick = async () => {
+        if (!agentName) return;
+
+        const confirmed = window.confirm(
+            `Are you sure you want to permanently delete all feedback for agent "${agentName}"?`,
+        );
+        if (!confirmed) return;
+
+        try {
+            setLoading(true);
+            setError(null);
+            await $clearAgentChatFeedback(agentName);
+            if (onCleared) {
+                onCleared();
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to clear chat feedback');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            <button
+                type="button"
+                onClick={handleClick}
+                disabled={loading}
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-semibold text-red-700 shadow-sm hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+                {loading ? 'Clearing feedback…' : 'Clear chat feedback'}
+            </button>
+            {error && <div className="text-xs text-red-600">{error}</div>}
+        </div>
+    );
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState } from 'react';
+import { $clearAgentChatHistory } from '../../../utils/chatHistoryAdmin';
+
+type ClearAgentChatHistoryButtonProps = {
+    /**
+     * Agent name for which the chat history should be cleared.
+     */
+    agentName: string;
+
+    /**
+     * Optional callback invoked after successful clearing.
+     */
+    onCleared?: () => void;
+};
+
+/**
+ * Admin-only button to clear chat history for a specific agent.
+ *
+ * This is intentionally small and self-contained so it can be reused
+ * from different admin-oriented surfaces without duplicating logic.
+ */
+export function ClearAgentChatHistoryButton({ agentName, onCleared }: ClearAgentChatHistoryButtonProps) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleClick = async () => {
+        if (!agentName) return;
+
+        const confirmed = window.confirm(
+            `Are you sure you want to permanently delete all chat history for agent "${agentName}"?`,
+        );
+        if (!confirmed) return;
+
+        try {
+            setLoading(true);
+            setError(null);
+            await $clearAgentChatHistory(agentName);
+            if (onCleared) {
+                onCleared();
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to clear chat history');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            <button
+                type="button"
+                onClick={handleClick}
+                disabled={loading}
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-semibold text-red-700 shadow-sm hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+                {loading ? 'Clearing history…' : 'Clear chat history'}
+            </button>
+            {error && <div className="text-xs text-red-600">{error}</div>}
+        </div>
+    );
+}