chronicle-ai 0.0.1

package/packages/ui/components/ThinkingDrawer.tsx

@@ -0,0 +1,377 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Brain, X, Activity, Clock, Sparkles, AlertCircle, ChevronDown, ChevronRight, Wrench, CheckCircle2, XCircle } from 'lucide-react';
+import { clsx } from 'clsx';
+
+interface AIActivity {
+    id: number;
+    project_id: number | null;
+    version_id: number | null;
+    activity_type: 'analyze' | 'generate' | 'plan' | 'embed' | 'action' | 'other';
+    prompt_summary: string | null;
+    response_preview: string | null;
+    thinking_summary: string | null;
+    tokens_used: number | null;
+    duration_ms: number | null;
+    status: 'running' | 'completed' | 'error';
+    created_at: number;
+    project_path?: string;
+}
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    activities: AIActivity[];
+}
+
+const activityIcons = {
+    analyze: Activity,
+    generate: Sparkles,
+    plan: Brain,
+    embed: Brain,
+    action: Wrench,
+    other: Brain
+};
+
+const activityColors = {
+    analyze: 'text-blue-500',
+    generate: 'text-purple-500',
+    plan: 'text-indigo-500',
+    embed: 'text-gray-500',
+    action: 'text-orange-500',
+    other: 'text-gray-500'
+};
+
+const statusColors = {
+    running: 'text-blue-500 animate-pulse',
+    completed: 'text-green-500',
+    error: 'text-red-500'
+};
+
+function formatTimeAgo(timestamp: number): string {
+    const diff = Date.now() - timestamp;
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) return `${days}d ago`;
+    if (hours > 0) return `${hours}h ago`;
+    if (minutes > 0) return `${minutes}m ago`;
+    if (seconds > 0) return `${seconds}s ago`;
+    return 'just now';
+}
+
+function ActivityCard({ activity, onKill }: { activity: AIActivity; onKill?: (id: number) => void }) {
+    const [expanded, setExpanded] = useState(false);
+    const [timeAgo, setTimeAgo] = useState<string>('');
+    const [isKilling, setIsKilling] = useState(false);
+    const [showConfirm, setShowConfirm] = useState(false);
+    const Icon = activityIcons[activity.activity_type] || Brain;
+
+    // Client-side only time formatting to avoid hydration mismatch
+    useEffect(() => {
+        // created_at is in seconds (Unix timestamp), convert to milliseconds
+        const timestampMs = activity.created_at * 1000;
+        setTimeAgo(formatTimeAgo(timestampMs));
+        const interval = setInterval(() => {
+            setTimeAgo(formatTimeAgo(timestampMs));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [activity.created_at]);
+
+    const handleKillClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (!onKill || isKilling) return;
+        setShowConfirm(true);
+    };
+
+    const handleKillConfirm = async () => {
+        if (!onKill || isKilling) return;
+        setShowConfirm(false);
+        setIsKilling(true);
+        try {
+            await onKill(activity.id);
+        } finally {
+            setIsKilling(false);
+        }
+    };
+
+    return (
+        <>
+            {/* Confirmation Modal */}
+            {showConfirm && (
+                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60]" onClick={() => setShowConfirm(false)}>
+                    <div className="bg-white rounded-lg shadow-xl p-4 max-w-sm mx-4" onClick={e => e.stopPropagation()}>
+                        <h3 className="font-bold text-gray-800 mb-2 text-sm">Kill Activity?</h3>
+                        <p className="text-xs text-gray-600 mb-4">
+                            Cancel this running AI activity?
+                            <br />
+                            <span className="text-[10px] text-gray-400">This action cannot be undone.</span>
+                        </p>
+                        <div className="flex justify-end gap-2">
+                            <button
+                                onClick={() => setShowConfirm(false)}
+                                className="px-3 py-1.5 text-xs text-gray-600 hover:bg-gray-100 rounded transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={handleKillConfirm}
+                                disabled={isKilling}
+                                className={clsx(
+                                    "px-3 py-1.5 text-xs bg-red-500 text-white rounded hover:bg-red-600 transition-colors",
+                                    isKilling && "opacity-50 cursor-wait"
+                                )}
+                            >
+                                {isKilling ? 'Killing...' : 'Kill'}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div className="border-b border-gray-100 last:border-0">
+                <div className="flex items-start gap-2 p-3 hover:bg-gray-50 transition-colors">
+                    <button
+                        onClick={() => setExpanded(!expanded)}
+                        className="flex-1 text-left"
+                    >
+                        <div className="flex items-start gap-2">
+                            <div className={clsx(
+                                "mt-0.5",
+                                statusColors[activity.status],
+                                activity.status === 'completed' && activityColors[activity.activity_type]
+                            )}>
+                                <Icon size={14} />
+                            </div>
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2">
+                                    <span className="text-xs font-medium text-gray-700 capitalize">
+                                        {activity.activity_type}
+                                    </span>
+                                    <span className="text-[10px] text-gray-400">
+                                        {timeAgo || '...'}
+                                    </span>
+                                    {activity.duration_ms && (
+                                        <span className="text-[10px] text-gray-300">
+                                            {activity.duration_ms}ms
+                                        </span>
+                                    )}
+                                </div>
+                                {activity.prompt_summary && (
+                                    <p className="text-[11px] text-gray-500 truncate mt-0.5">
+                                        {activity.prompt_summary}
+                                    </p>
+                                )}
+                            </div>
+                            {activity.thinking_summary && (
+                                expanded ? <ChevronDown size={12} className="text-gray-400" />
+                                    : <ChevronRight size={12} className="text-gray-400" />
+                            )}
+                        </div>
+                    </button>
+                    {activity.status === 'running' && onKill && (
+                        <button
+                            onClick={handleKillClick}
+                            disabled={isKilling}
+                            className={clsx(
+                                "p-1 rounded hover:bg-red-100 transition-colors",
+                                isKilling && "opacity-50 cursor-wait"
+                            )}
+                            title="Kill this activity"
+                        >
+                            <XCircle size={14} className="text-red-500" />
+                        </button>
+                    )}
+                </div>
+
+            {expanded && activity.thinking_summary && (
+                <div className="px-3 pb-3">
+                    <div className="bg-purple-50 border border-purple-100 rounded p-2">
+                        <div className="flex items-center gap-1 mb-1">
+                            <Brain size={10} className="text-purple-500" />
+                            <span className="text-[9px] font-bold text-purple-600 uppercase">Chain of Thought</span>
+                        </div>
+                        <p className="text-[11px] text-gray-700 font-mono whitespace-pre-wrap leading-relaxed">
+                            {activity.thinking_summary}
+                        </p>
+                    </div>
+                    {activity.response_preview && (
+                        <div className="mt-2 bg-gray-50 border border-gray-100 rounded p-2">
+                            <span className="text-[9px] font-bold text-gray-500 uppercase">Response</span>
+                            <p className="text-[11px] text-gray-600 mt-0.5 line-clamp-3">
+                                {activity.response_preview}
+                            </p>
+                        </div>
+                    )}
+                </div>
+            )}
+            </div>
+        </>
+    );
+}
+
+export function ThinkingDrawer({ isOpen, onClose, activities }: Props) {
+    const runningCount = activities.filter(a => a.status === 'running').length;
+    const [isKillingAll, setIsKillingAll] = useState(false);
+    const [showKillAllConfirm, setShowKillAllConfirm] = useState(false);
+
+    const handleKillActivity = async (activityId: number) => {
+        try {
+            const { killAIActivityAction } = await import('../app/actions');
+            await killAIActivityAction(activityId);
+        } catch (error) {
+            console.error('Failed to kill activity:', error);
+        }
+    };
+
+    const handleKillAllClick = () => {
+        if (isKillingAll) return;
+        setShowKillAllConfirm(true);
+    };
+
+    const handleKillAllConfirm = async () => {
+        if (isKillingAll) return;
+        setShowKillAllConfirm(false);
+        setIsKillingAll(true);
+        try {
+            const { killAllRunningAIActivitiesAction } = await import('../app/actions');
+            await killAllRunningAIActivitiesAction();
+        } catch (error) {
+            console.error('Failed to kill all activities:', error);
+        } finally {
+            setIsKillingAll(false);
+        }
+    };
+
+    return (
+        <>
+            {/* Kill All Confirmation Modal */}
+            {showKillAllConfirm && (
+                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60]" onClick={() => setShowKillAllConfirm(false)}>
+                    <div className="bg-white rounded-lg shadow-xl p-4 max-w-sm mx-4" onClick={e => e.stopPropagation()}>
+                        <h3 className="font-bold text-gray-800 mb-2 text-sm">Kill All Activities?</h3>
+                        <p className="text-xs text-gray-600 mb-4">
+                            Cancel all {runningCount} running AI {runningCount === 1 ? 'activity' : 'activities'}?
+                            <br />
+                            <span className="text-[10px] text-gray-400">This action cannot be undone.</span>
+                        </p>
+                        <div className="flex justify-end gap-2">
+                            <button
+                                onClick={() => setShowKillAllConfirm(false)}
+                                className="px-3 py-1.5 text-xs text-gray-600 hover:bg-gray-100 rounded transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={handleKillAllConfirm}
+                                disabled={isKillingAll}
+                                className={clsx(
+                                    "px-3 py-1.5 text-xs bg-red-500 text-white rounded hover:bg-red-600 transition-colors",
+                                    isKillingAll && "opacity-50 cursor-wait"
+                                )}
+                            >
+                                {isKillingAll ? 'Killing...' : 'Kill All'}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Backdrop */}
+            {isOpen && (
+                <div
+                    className="fixed inset-0 bg-black/20 z-40"
+                    onClick={onClose}
+                />
+            )}
+
+            {/* Drawer */}
+            <div className={clsx(
+                "fixed top-0 right-0 h-full w-96 bg-white shadow-2xl z-50",
+                "transform transition-transform duration-300 ease-in-out",
+                isOpen ? "translate-x-0" : "translate-x-full"
+            )}>
+                {/* Header */}
+                <div className="h-12 border-b border-gray-200 flex items-center justify-between px-4 bg-gradient-to-r from-purple-50 to-blue-50">
+                    <div className="flex items-center gap-2">
+                        <Brain size={18} className="text-purple-600" />
+                        <h2 className="font-bold text-sm text-gray-800">Thinking Platform</h2>
+                        {runningCount > 0 && (
+                            <>
+                                <span className="px-1.5 py-0.5 bg-blue-100 text-blue-600 text-[9px] font-bold rounded animate-pulse">
+                                    {runningCount} ACTIVE
+                                </span>
+                                <button
+                                    onClick={handleKillAllClick}
+                                    disabled={isKillingAll}
+                                    className={clsx(
+                                        "px-2 py-0.5 text-[9px] font-bold rounded transition-colors",
+                                        "bg-red-100 text-red-600 hover:bg-red-200",
+                                        isKillingAll && "opacity-50 cursor-wait"
+                                    )}
+                                    title="Kill all running activities"
+                                >
+                                    {isKillingAll ? 'KILLING...' : 'KILL ALL'}
+                                </button>
+                            </>
+                        )}
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="p-1 hover:bg-gray-200 rounded transition-colors"
+                    >
+                        <X size={16} className="text-gray-500" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="h-[calc(100%-48px)] overflow-y-auto">
+                    {activities.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-full text-gray-400">
+                            <Brain size={40} className="mb-3 opacity-50" />
+                            <p className="text-sm">No AI activity yet</p>
+                            <p className="text-xs mt-1">Run `chronicle init` or `chronicle diff`</p>
+                        </div>
+                    ) : (
+                        <div>
+                            {activities.map((activity) => (
+                                <ActivityCard 
+                                    key={activity.id} 
+                                    activity={activity} 
+                                    onKill={handleKillActivity}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+}
+
+// Toggle button component for the header
+export function ThinkingToggle({ onClick, activityCount }: { onClick: () => void; activityCount: number }) {
+    return (
+        <button
+            onClick={onClick}
+            className={clsx(
+                "flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors",
+                activityCount > 0
+                    ? "bg-purple-100 text-purple-700 hover:bg-purple-200"
+                    : "bg-gray-100 text-gray-500 hover:bg-gray-200"
+            )}
+            title="Open Thinking Platform"
+        >
+            <Brain size={14} />
+            <span className="hidden md:inline">Thinking</span>
+            {activityCount > 0 && (
+                <span className="bg-purple-500 text-white text-[9px] px-1 rounded">
+                    {activityCount}
+                </span>
+            )}
+        </button>
+    );
+}

package/packages/ui/components/ThinkingPanel.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState } from 'react';
+import { Brain, ChevronDown, ChevronUp } from 'lucide-react';
+import { clsx } from 'clsx';
+
+interface Props {
+    thinkingSummary: string | null;
+    docPath: string;
+}
+
+export function ThinkingPanel({ thinkingSummary, docPath }: Props) {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    return (
+        <div className="border-t border-gray-200 bg-gradient-to-r from-purple-50 to-blue-50">
+            <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="w-full px-4 py-2 flex items-center gap-2 hover:bg-white/50 transition-colors"
+            >
+                <Brain size={14} className="text-purple-500" />
+                <span className="text-[11px] font-medium text-purple-700">
+                    Chain of Thought
+                </span>
+                <span className="text-[10px] text-purple-400 flex-1 text-left truncate">
+                    {docPath.split('/').pop()}
+                </span>
+                {thinkingSummary ? (
+                    <span className="text-[9px] bg-purple-100 text-purple-600 px-1.5 rounded">
+                        Available
+                    </span>
+                ) : (
+                    <span className="text-[9px] bg-gray-100 text-gray-400 px-1.5 rounded">
+                        Not yet captured
+                    </span>
+                )}
+                {isExpanded ? (
+                    <ChevronUp size={14} className="text-purple-400" />
+                ) : (
+                    <ChevronDown size={14} className="text-purple-400" />
+                )}
+            </button>
+
+            {isExpanded && (
+                <div className="px-4 pb-4">
+                    <div className={clsx(
+                        "p-3 rounded-lg bg-white border border-purple-100",
+                        "text-xs text-gray-700 leading-relaxed",
+                        "max-h-[300px] overflow-y-auto",
+                        "font-mono whitespace-pre-wrap"
+                    )}>
+                        {thinkingSummary || (
+                            <span className="text-gray-400 italic">
+                                Chain of thought will appear here after running `chronicle init` or `chronicle diff`
+                                with the new versioning system.
+                            </span>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/packages/ui/components/TriggerSettings.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Settings, GitCommit, Timer, Save, RefreshCw, Edit3, X } from 'lucide-react';
+import { clsx } from 'clsx';
+import { getConfigAction, saveConfigAction } from '../app/actions';
+
+interface TriggerConfig {
+    on_change: { enabled: boolean; debounce_ms: number };
+    on_commit: { enabled: boolean };
+    schedule: { enabled: boolean; interval_hours: number };
+}
+
+interface Props {
+    config: TriggerConfig;
+    projectPath: string;
+    onSave?: (config: TriggerConfig) => void;
+}
+
+export function TriggerSettings({ config, projectPath, onSave }: Props) {
+    const [triggers, setTriggers] = useState<TriggerConfig>(config);
+    const [isOpen, setIsOpen] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [showEditor, setShowEditor] = useState(false);
+    const [configContent, setConfigContent] = useState('');
+    const [editorError, setEditorError] = useState('');
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                if (!showEditor) setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [showEditor]);
+
+    const handleToggle = (key: 'on_change' | 'on_commit' | 'schedule') => {
+        setTriggers(prev => ({
+            ...prev,
+            [key]: { ...prev[key], enabled: !prev[key].enabled }
+        }));
+    };
+
+    const handleSave = async () => {
+        setSaving(true);
+        if (onSave) onSave(triggers);
+        setTimeout(() => {
+            setSaving(false);
+            setIsOpen(false);
+        }, 500);
+    };
+
+    const openEditor = async () => {
+        const content = await getConfigAction(projectPath);
+        if (content) {
+            setConfigContent(content);
+            setShowEditor(true);
+            setEditorError('');
+        }
+    };
+
+    const saveEditorContent = async () => {
+        try {
+            JSON.parse(configContent);
+            setEditorError('');
+            const success = await saveConfigAction(projectPath, configContent);
+            if (success) {
+                setShowEditor(false);
+                setIsOpen(false);
+            } else {
+                setEditorError('Failed to save');
+            }
+        } catch {
+            setEditorError('Invalid JSON');
+        }
+    };
+
+    return (
+        <>
+            <div className="relative" ref={dropdownRef}>
+                <button
+                    onClick={() => setIsOpen(!isOpen)}
+                    className={clsx(
+                        "flex items-center gap-1.5 px-2 py-1 text-xs rounded transition-colors",
+                        isOpen ? "bg-blue-100 text-blue-700" : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+                    )}
+                >
+                    <Settings size={12} />
+                    Triggers
+                </button>
+
+                {isOpen && !showEditor && (
+                    <div className="absolute right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl p-3 min-w-[280px] z-50">
+                        <div className="flex items-center justify-between mb-3">
+                            <h3 className="font-semibold text-sm text-gray-800 flex items-center gap-1.5">
+                                <Settings size={14} />
+                                Trigger Settings
+                            </h3>
+                            <button onClick={() => setIsOpen(false)} className="text-gray-400 hover:text-gray-600 text-xs">✕</button>
+                        </div>
+
+                        <div className="space-y-2">
+                            <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                                <div className="flex items-center gap-2">
+                                    <RefreshCw size={14} className={clsx(triggers.on_change.enabled ? 'text-blue-500' : 'text-gray-400')} />
+                                    <div>
+                                        <div className="text-xs font-medium text-gray-700">On File Change</div>
+                                        <div className="text-[10px] text-gray-500">Debounce: {triggers.on_change.debounce_ms / 1000}s</div>
+                                    </div>
+                                </div>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" checked={triggers.on_change.enabled} onChange={() => handleToggle('on_change')} className="sr-only peer" />
+                                    <div className="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div>
+                                </label>
+                            </div>
+
+                            <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                                <div className="flex items-center gap-2">
+                                    <GitCommit size={14} className={clsx(triggers.on_commit.enabled ? 'text-green-500' : 'text-gray-400')} />
+                                    <div>
+                                        <div className="text-xs font-medium text-gray-700">On Git Commit</div>
+                                        <div className="text-[10px] text-gray-500">Polls every 30s</div>
+                                    </div>
+                                </div>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" checked={triggers.on_commit.enabled} onChange={() => handleToggle('on_commit')} className="sr-only peer" />
+                                    <div className="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-500"></div>
+                                </label>
+                            </div>
+
+                            <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                                <div className="flex items-center gap-2">
+                                    <Timer size={14} className={clsx(triggers.schedule.enabled ? 'text-purple-500' : 'text-gray-400')} />
+                                    <div>
+                                        <div className="text-xs font-medium text-gray-700">Scheduled</div>
+                                        <div className="text-[10px] text-gray-500">Every {triggers.schedule.interval_hours}h</div>
+                                    </div>
+                                </div>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" checked={triggers.schedule.enabled} onChange={() => handleToggle('schedule')} className="sr-only peer" />
+                                    <div className="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-purple-500"></div>
+                                </label>
+                            </div>
+                        </div>
+
+                        <div className="mt-3 pt-2 border-t border-gray-200 flex justify-between items-center">
+                            <button onClick={openEditor} className="flex items-center gap-1 px-2 py-1 text-[10px] text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded">
+                                <Edit3 size={10} />
+                                Edit JSON
+                            </button>
+                            <button onClick={handleSave} disabled={saving} className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50">
+                                <Save size={12} />
+                                {saving ? 'Saving...' : 'Save'}
+                            </button>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {showEditor && (
+                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100]" onClick={() => setShowEditor(false)}>
+                    <div className="bg-white rounded-lg shadow-2xl w-[500px] max-h-[80vh] flex flex-col" onClick={e => e.stopPropagation()}>
+                        <div className="flex items-center justify-between p-3 border-b">
+                            <h3 className="font-semibold text-sm">.chronicle.json</h3>
+                            <button onClick={() => setShowEditor(false)} className="p-1 hover:bg-gray-100 rounded"><X size={16} /></button>
+                        </div>
+                        <textarea
+                            value={configContent}
+                            onChange={e => setConfigContent(e.target.value)}
+                            className="flex-1 p-3 font-mono text-xs resize-none focus:outline-none min-h-[300px]"
+                            spellCheck={false}
+                        />
+                        {editorError && <div className="px-3 py-1 text-xs text-red-500">{editorError}</div>}
+                        <div className="flex justify-end gap-2 p-3 border-t">
+                            <button onClick={() => setShowEditor(false)} className="px-3 py-1.5 text-xs text-gray-600 hover:bg-gray-100 rounded">Cancel</button>
+                            <button onClick={saveEditorContent} className="px-3 py-1.5 text-xs bg-blue-500 text-white rounded hover:bg-blue-600">Save</button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}