chronicle-ai 0.0.1

package/packages/ui/components/HeaderWithThinking.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Brain } from 'lucide-react';
+import { ThinkingDrawer } from './ThinkingDrawer';
+import { clsx } from 'clsx';
+
+interface AIActivity {
+    id: number;
+    project_id: number | null;
+    version_id: number | null;
+    activity_type: 'analyze' | 'generate' | 'plan' | 'embed' | '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 {
+    initialActivities: AIActivity[];
+}
+
+export function HeaderWithThinking({ initialActivities }: Props) {
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const [activities, setActivities] = useState<AIActivity[]>(initialActivities);
+
+    // Poll for new activities every 3 seconds
+    useEffect(() => {
+        const interval = setInterval(async () => {
+            try {
+                const res = await fetch('/api/ai-activity');
+                if (res.ok) {
+                    const data = await res.json();
+                    setActivities(data);
+                }
+            } catch {
+                // Silently fail
+            }
+        }, 3000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const runningCount = activities.filter(a => a.status === 'running').length;
+
+    return (
+        <>
+            <header className="h-12 border-b border-gray-200 flex items-center justify-between px-4 bg-gray-50 flex-none select-none">
+                <div className="flex items-center gap-2">
+                    <img src="/logo.png" alt="Chronicle Logo" className="w-6 h-6 object-contain" />
+                    <h1 className="font-bold text-lg tracking-tight text-gray-800">
+                        Chronicle <span className="text-gray-400 font-normal text-sm">Daemon</span>
+                    </h1>
+                </div>
+                <div className="flex gap-3 items-center">
+                    {/* Thinking Toggle Button */}
+                    <button
+                        onClick={() => setIsDrawerOpen(true)}
+                        className={clsx(
+                            "flex items-center gap-1.5 px-2.5 py-1.5 rounded text-xs font-medium transition-all",
+                            runningCount > 0
+                                ? "bg-purple-100 text-purple-700 hover:bg-purple-200 ring-2 ring-purple-300 ring-offset-1"
+                                : activities.length > 0
+                                    ? "bg-purple-50 text-purple-600 hover:bg-purple-100"
+                                    : "bg-gray-100 text-gray-500 hover:bg-gray-200"
+                        )}
+                        title="Open Thinking Platform"
+                    >
+                        <Brain size={14} className={runningCount > 0 ? 'animate-pulse' : ''} />
+                        <span>Thinking</span>
+                        {activities.length > 0 && (
+                            <span className={clsx(
+                                "text-[9px] px-1.5 py-0.5 rounded-full font-bold",
+                                runningCount > 0
+                                    ? "bg-purple-500 text-white animate-pulse"
+                                    : "bg-purple-200 text-purple-700"
+                            )}>
+                                {runningCount > 0 ? `${runningCount} ACTIVE` : activities.length}
+                            </span>
+                        )}
+                    </button>
+
+                    {/* Status Indicator */}
+                    <div className="flex items-center gap-1.5 opacity-60">
+                        <div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
+                        <span className="text-xs font-bold text-gray-600">ONLINE</span>
+                    </div>
+                </div>
+            </header>
+
+            <ThinkingDrawer
+                isOpen={isDrawerOpen}
+                onClose={() => setIsDrawerOpen(false)}
+                activities={activities}
+            />
+        </>
+    );
+}

package/packages/ui/components/JobQueue.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { Activity, ChevronUp, ChevronDown, CheckCircle2, AlertCircle, Clock, Loader2, XCircle, Trash2 } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { useState } from 'react';
+import { clsx } from 'clsx';
+
+interface JobRecord {
+    id: number;
+    name: string;
+    data: string;
+    status: string;
+    created_at: number;
+    updated_at: number;
+}
+
+interface Props {
+    jobs: JobRecord[];
+    onKillJob?: () => void;
+    onClearQueue?: () => void;
+}
+
+// Format job data into readable text
+function formatJobData(data: string): string {
+    try {
+        const parsed = JSON.parse(data);
+        if (parsed.filePath) {
+            const filename = parsed.filePath.split('/').pop();
+            return `${filename}${parsed.event ? ` (${parsed.event})` : ''}`;
+        }
+        if (parsed.projectPath) {
+            const folder = parsed.projectPath.split('/').pop();
+            return folder || 'project';
+        }
+        if (parsed.path) {
+            const folder = parsed.path.split('/').pop();
+            return folder || 'path';
+        }
+        const keys = Object.keys(parsed);
+        if (keys.length > 0) {
+            const firstKey = keys[0];
+            const value = String(parsed[firstKey]).split('/').pop();
+            return value || parsed[firstKey];
+        }
+        return '';
+    } catch {
+        return data.slice(0, 50);
+    }
+}
+
+export function JobQueue({ jobs, onKillJob, onClearQueue }: Props) {
+    // false = collapsed (header only), true = expanded
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    // Get processing job for collapsed view
+    const processingJob = jobs.find(j => j.status === 'processing');
+
+    // Also find recently completed/failed jobs (last 5 seconds) to show activity even if fast
+    const recentJob = jobs.find(j =>
+        j.status !== 'pending' &&
+        j.status !== 'processing' &&
+        (Date.now() - (j.updated_at * 1000)) < 5000
+    );
+
+    const activeJob = processingJob || recentJob;
+    const pendingCount = jobs.filter(j => j.status === 'pending').length;
+
+    return (
+        <div className={clsx(
+            "bg-gray-900 text-gray-400 flex flex-col transition-all duration-300 ease-in-out",
+            isExpanded ? "h-72" : "h-10"
+        )}>
+            {/* Header - always visible */}
+            <div className="px-4 py-2.5 bg-gray-950 border-b border-gray-800 flex justify-between items-center select-none flex-none">
+                <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2">
+                        <Activity size={14} className={clsx(activeJob ? "text-blue-400 animate-pulse" : "text-gray-600")} />
+                        <span className="text-xs font-bold uppercase tracking-wider font-mono text-gray-500">System Jobs</span>
+                    </div>
+                    {pendingCount > 0 && (
+                        <span className="px-1.5 py-0.5 rounded-full bg-blue-500/10 text-blue-400 text-[10px] font-mono border border-blue-500/20">
+                            {pendingCount} pending
+                        </span>
+                    )}
+                </div>
+                <div className="text-[9px] text-gray-700 font-mono">
+                    Updated: {new Date().toLocaleTimeString()}
+                </div>
+
+                {/* Active job shown in header when collapsed */}
+                {!isExpanded && activeJob && (
+                    <div className="flex items-center gap-2 flex-1 justify-center mx-4">
+                        {activeJob.status === 'processing' ? (
+                            <Loader2 size={12} className="text-blue-400 animate-spin" />
+                        ) : (
+                            <CheckCircle2 size={12} className="text-green-500" />
+                        )}
+                        <span className="font-mono text-xs text-blue-300">{activeJob.name}</span>
+                        <span className="text-xs text-gray-500">{formatJobData(activeJob.data)}</span>
+                    </div>
+                )}
+
+                {!isExpanded && !processingJob && (
+                    <div className="flex-1 text-center">
+                        <span className="text-[10px] text-gray-600 font-mono">Idle</span>
+                    </div>
+                )}
+
+                {/* Action buttons */}
+                <div className="flex items-center gap-1">
+                    {processingJob && (
+                        <button
+                            onClick={onKillJob}
+                            className="px-2 py-1 text-[10px] font-mono text-red-400 hover:bg-red-500/20 rounded transition-colors flex items-center gap-1"
+                            title="Kill current job"
+                        >
+                            <XCircle size={12} />
+                            Kill
+                        </button>
+                    )}
+                    {pendingCount > 0 && (
+                        <button
+                            onClick={onClearQueue}
+                            className="px-2 py-1 text-[10px] font-mono text-orange-400 hover:bg-orange-500/20 rounded transition-colors flex items-center gap-1"
+                            title="Clear all pending jobs"
+                        >
+                            <Trash2 size={12} />
+                            Clear
+                        </button>
+                    )}
+
+                    {/* Chevron button - only this controls expand/collapse */}
+                    <button
+                        onClick={() => setIsExpanded(!isExpanded)}
+                        className="p-1.5 hover:bg-gray-800 rounded transition-colors ml-1"
+                        title={isExpanded ? "Collapse" : "Expand"}
+                    >
+                        {isExpanded ? <ChevronDown size={16} className="text-gray-400" /> : <ChevronUp size={16} className="text-gray-400" />}
+                    </button>
+                </div>
+            </div>
+
+            {/* Content Area - only visible when expanded */}
+            {isExpanded && (
+                <div className="flex-1 overflow-y-auto p-2 space-y-0.5 bg-gray-900">
+                    {jobs.map(job => (
+                        <div
+                            key={job.id}
+                            className={clsx(
+                                "group flex items-center justify-between px-3 py-2 rounded transition-colors border border-transparent",
+                                job.status === 'processing' ? "bg-blue-500/10 border-blue-500/20" : "hover:bg-white/5 hover:border-white/5"
+                            )}
+                        >
+                            <div className="flex items-center gap-3 overflow-hidden">
+                                <StatusIcon status={job.status} />
+                                <span className={clsx(
+                                    "font-mono text-xs font-bold whitespace-nowrap",
+                                    job.status === 'processing' ? "text-blue-300" : "text-gray-300"
+                                )}>
+                                    {job.name}
+                                </span>
+                                <span className="text-xs text-gray-500 truncate max-w-[400px] group-hover:text-gray-400 transition-colors">
+                                    {formatJobData(job.data)}
+                                </span>
+                            </div>
+                            <span className="text-[10px] text-gray-600 font-mono whitespace-nowrap pl-4 flex items-center gap-1" suppressHydrationWarning>
+                                <Clock size={10} />
+                                {formatDistanceToNow(job.created_at * 1000, { addSuffix: true })}
+                            </span>
+                        </div>
+                    ))}
+                    {jobs.length === 0 && (
+                        <div className="p-8 text-center text-gray-700 text-xs font-mono">
+                            System idle. No jobs.
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+function StatusIcon({ status }: { status: string }) {
+    switch (status) {
+        case 'processing':
+            return <Loader2 size={14} className="text-blue-400 animate-spin" />;
+        case 'completed':
+            return <CheckCircle2 size={14} className="text-emerald-500" />;
+        case 'failed':
+            return <AlertCircle size={14} className="text-red-500" />;
+        default:
+            return <div className="w-2 h-2 rounded-full bg-gray-600" />;
+    }
+}

package/packages/ui/components/JobQueueWrapper.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { JobQueue } from './JobQueue';
+import { clearQueueAction, killCurrentJobAction } from '../app/actions';
+
+interface JobRecord {
+    id: number;
+    name: string;
+    data: string;
+    status: string;
+    created_at: number;
+    updated_at: number;
+}
+
+export function JobQueueWrapper({ jobs }: { jobs: JobRecord[] }) {
+    const handleKillJob = async () => {
+        await killCurrentJobAction();
+    };
+
+    const handleClearQueue = async () => {
+        await clearQueueAction();
+    };
+
+    return (
+        <JobQueue
+            jobs={jobs}
+            onKillJob={handleKillJob}
+            onClearQueue={handleClearQueue}
+        />
+    );
+}

package/packages/ui/components/MermaidInit.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export function MermaidInit() {
+    useEffect(() => {
+        // Wait for mermaid to load and initialize
+        const initMermaid = () => {
+            if (typeof window !== 'undefined' && (window as any).mermaid) {
+                (window as any).mermaid.initialize({
+                    startOnLoad: true,
+                    theme: 'neutral',
+                    securityLevel: 'loose'
+                });
+            } else {
+                // Retry if mermaid isn't loaded yet
+                setTimeout(initMermaid, 100);
+            }
+        };
+        initMermaid();
+    }, []);
+
+    return null;
+}

package/packages/ui/components/ProjectContentArea.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useState } from 'react';
+import { FileText, Clock, RefreshCw } from 'lucide-react';
+import { clsx } from 'clsx';
+import { DocumentationViewer } from './DocumentationViewer';
+import { FileList } from './FileList';
+import { TriggerSettings } from './TriggerSettings';
+
+interface DocFile {
+    name: string;
+    path: string;
+    content: string;
+    type: 'root' | 'docs';
+}
+
+interface FileRecord {
+    id: number;
+    path: string;
+    hash: string;
+    last_modified: number;
+    last_indexed: number;
+}
+
+interface TriggerConfig {
+    on_change: { enabled: boolean; debounce_ms: number };
+    on_commit: { enabled: boolean };
+    schedule: { enabled: boolean; interval_hours: number };
+}
+
+interface DocVersion {
+    id: number;
+    version_number: number;
+    trigger_type: string;
+    commit_hash: string | null;
+    status: 'draft' | 'pending_review' | 'active' | 'archived';
+    created_at: number;
+}
+
+interface ThoughtLog {
+    doc_path: string;
+    thinking_summary: string;
+}
+
+interface Props {
+    docs: DocFile[];
+    files: FileRecord[];
+    projectName: string;
+    projectPath: string;
+    hasProject: boolean;
+    triggerConfig: TriggerConfig | null;
+    docStage?: { currentStage: number; totalStages: number } | null;
+    isPaused: boolean;
+    docVersions?: DocVersion[];
+    activeVersionId?: number | null;
+    thoughtLogs?: ThoughtLog[];
+}
+
+type Tab = 'docs' | 'files';
+
+export function ProjectContentArea({
+    docs,
+    files,
+    projectName,
+    projectPath,
+    hasProject,
+    triggerConfig,
+    docStage,
+    isPaused,
+    docVersions = [],
+    activeVersionId = null,
+    thoughtLogs = []
+}: Props) {
+    const [activeTab, setActiveTab] = useState<Tab>('docs');
+    const [isUpdating, setIsUpdating] = useState(false);
+
+    if (!hasProject) {
+        return <FileList files={files} title="Recent Files" />;
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Tab Header */}
+            <div className="flex items-center gap-1 px-2 py-1.5 border-b border-gray-200 bg-gray-50 flex-none">
+                <button
+                    onClick={() => setActiveTab('docs')}
+                    className={clsx(
+                        "flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors",
+                        activeTab === 'docs'
+                            ? "bg-white shadow-sm text-blue-600 ring-1 ring-gray-200"
+                            : "text-gray-600 hover:bg-gray-100"
+                    )}
+                >
+                    <FileText size={12} />
+                    Documentation
+                </button>
+                <button
+                    onClick={() => setActiveTab('files')}
+                    className={clsx(
+                        "flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors",
+                        activeTab === 'files'
+                            ? "bg-white shadow-sm text-blue-600 ring-1 ring-gray-200"
+                            : "text-gray-600 hover:bg-gray-100"
+                    )}
+                >
+                    <Clock size={12} />
+                    Recent Files
+                </button>
+                <div className="flex-1" />
+
+                {/* Trigger Settings */}
+                {triggerConfig && (
+                    <TriggerSettings
+                        config={triggerConfig}
+                        projectPath={projectPath}
+                    />
+                )}
+
+                {/* Update Docs Button */}
+                {hasProject && (
+                    <button
+                        onClick={async () => {
+                            setIsUpdating(true);
+                            try {
+                                const { triggerDocUpdate } = await import('../app/actions');
+                                await triggerDocUpdate(projectPath);
+                            } finally {
+                                // Small delay so user sees the feedback
+                                setTimeout(() => setIsUpdating(false), 1000);
+                            }
+                        }}
+                        disabled={isUpdating}
+                        className={clsx(
+                            "flex items-center gap-1.5 px-2 py-1 rounded ml-2 text-[10px] font-bold uppercase tracking-wider transition-colors",
+                            isUpdating
+                                ? "bg-blue-200 text-blue-500 cursor-wait"
+                                : "bg-blue-100 text-blue-700 hover:bg-blue-200"
+                        )}
+                        title="Trigger incremental doc update"
+                    >
+                        <RefreshCw size={10} className={isUpdating ? 'animate-spin' : ''} />
+                        {isUpdating ? 'Updating...' : 'Update'}
+                    </button>
+                )}
+
+                {/* Pause/Resume Control */}
+                {hasProject && (
+                    <button
+                        onClick={async () => {
+                            const { togglePause } = await import('../app/actions');
+                            await togglePause(projectPath, !isPaused);
+                        }}
+                        className={clsx(
+                            "flex items-center gap-1.5 px-2 py-1 rounded ml-2 text-[10px] font-bold uppercase tracking-wider transition-colors",
+                            isPaused
+                                ? "bg-amber-100 text-amber-700 hover:bg-amber-200"
+                                : "bg-gray-100 text-gray-500 hover:bg-gray-200"
+                        )}
+                        title={isPaused ? "Resume Updates" : "Pause Updates"}
+                    >
+                        {isPaused ? "Paused" : "Active"}
+                    </button>
+                )}
+
+                <span className="text-[10px] text-gray-400 font-mono ml-2 truncate max-w-[200px]">{projectName}</span>
+            </div>
+
+            {/* Tab Content */}
+            <div className="flex-1 overflow-hidden">
+                {activeTab === 'docs' ? (
+                    <DocumentationViewer
+                        docs={docs}
+                        projectName={projectName}
+                        docStage={docStage}
+                        versions={docVersions}
+                        currentVersionId={activeVersionId}
+                        thoughtLogs={thoughtLogs}
+                    />
+                ) : (
+                    <FileList files={files} title={projectName} />
+                )}
+            </div>
+        </div>
+    );
+}
+

package/packages/ui/components/ProjectList.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { Folder, ExternalLink, Plus, Trash2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { clsx } from 'clsx';
+import { addProjectAction, removeProjectAction } from '../app/actions';
+import { useState } from 'react';
+
+interface Project {
+    id: number;
+    path: string;
+    created_at: number;
+}
+
+export function ProjectList({ projects, activeProjectId }: { projects: Project[], activeProjectId?: string }) {
+    const router = useRouter();
+    const [isAdding, setIsAdding] = useState(false);
+    const [removingPath, setRemovingPath] = useState<string | null>(null);
+
+    const handleRemove = async (projectPath: string) => {
+        await removeProjectAction(projectPath);
+        setRemovingPath(null);
+        router.push('/');
+    };
+
+    return (
+        <div className="flex flex-col h-full bg-gray-50 border-r border-gray-200">
+            {/* Confirmation Modal */}
+            {removingPath && (
+                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+                    <div className="bg-white rounded-lg shadow-xl p-4 max-w-sm mx-4">
+                        <h3 className="font-bold text-gray-800 mb-2">Remove Project?</h3>
+                        <p className="text-sm text-gray-600 mb-4">
+                            Stop monitoring <span className="font-mono text-xs bg-gray-100 px-1 rounded">{removingPath.split('/').pop()}</span>?
+                            <br />
+                            <span className="text-xs text-gray-400">Files will remain on disk but won&apos;t be tracked.</span>
+                        </p>
+                        <div className="flex justify-end gap-2">
+                            <button
+                                onClick={() => setRemovingPath(null)}
+                                className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={() => handleRemove(removingPath)}
+                                className="px-3 py-1.5 text-sm bg-red-500 text-white rounded hover:bg-red-600"
+                            >
+                                Remove
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div className="p-3 border-b border-gray-200 bg-gray-100 flex items-center justify-between">
+                <h2 className="text-xs font-bold uppercase tracking-wider text-gray-500 flex items-center gap-2">
+                    <Folder size={14} />
+                    <span>Projects</span>
+                </h2>
+                <button
+                    onClick={() => setIsAdding(!isAdding)}
+                    className="p-1 hover:bg-gray-200 rounded text-gray-600 transition-colors"
+                    title="Add Project"
+                >
+                    <Plus size={14} />
+                </button>
+            </div>
+
+            {isAdding && (
+                <form action={async (formData) => {
+                    await addProjectAction(formData);
+                    setIsAdding(false);
+                }} className="p-2 border-b border-gray-200 bg-white">
+                    <input
+                        name="path"
+                        autoFocus
+                        placeholder="/absolute/path/to/repo"
+                        className="w-full text-xs font-mono border border-gray-300 rounded px-2 py-1 mb-1 focus:outline-none focus:border-blue-500"
+                    />
+                    <div className="flex justify-end gap-2">
+                        <button type="button" onClick={() => setIsAdding(false)} className="text-[10px] text-gray-500 hover:text-gray-800">Cancel</button>
+                        <button type="submit" className="text-[10px] bg-blue-500 text-white px-2 py-0.5 rounded hover:bg-blue-600">Add</button>
+                    </div>
+                </form>
+            )}
+
+            <div className="flex-1 overflow-y-auto p-1 space-y-0.5">
+                <div
+                    onClick={() => router.push('/')}
+                    className={clsx(
+                        "group flex items-center gap-2 p-2 rounded cursor-pointer transition-all",
+                        !activeProjectId ? "bg-white shadow-sm ring-1 ring-gray-200" : "hover:bg-gray-100 text-gray-600"
+                    )}
+                >
+                    <Folder size={14} className={clsx(!activeProjectId ? "text-blue-500" : "text-gray-400")} />
+                    <span className="font-mono text-xs font-medium">All Projects</span>
+                </div>
+
+                {projects.map(project => {
+                    const isActive = activeProjectId === String(project.id);
+                    return (
+                        <div
+                            key={project.id}
+                            onClick={() => router.push(`/?projectId=${project.id}`)}
+                            className={clsx(
+                                "group flex items-center gap-2 p-2 rounded cursor-pointer transition-all",
+                                isActive ? "bg-white shadow-sm ring-1 ring-gray-200" : "hover:bg-gray-100 text-gray-600"
+                            )}
+                        >
+                            <Folder size={14} className={clsx(isActive ? "text-blue-500" : "text-gray-400")} />
+                            <div className="flex flex-col min-w-0 flex-1">
+                                <span className="font-mono text-xs font-medium truncate" title={project.path}>
+                                    {project.path.split('/').pop()}
+                                </span>
+                                <span className="text-[10px] text-gray-400 truncate hidden group-hover:block">
+                                    {project.path}
+                                </span>
+                            </div>
+                            <button
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setRemovingPath(project.path);
+                                }}
+                                className="opacity-0 group-hover:opacity-100 p-1 hover:bg-red-100 rounded text-gray-400 hover:text-red-500 transition-all"
+                                title="Remove project"
+                            >
+                                <Trash2 size={12} />
+                            </button>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}