chronicle-ai 0.0.1

package/packages/ui/components/VersionSelector.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState } from 'react';
+import { Clock, GitCommit, CheckCircle, AlertCircle, Archive } from 'lucide-react';
+import { clsx } from 'clsx';
+
+interface DocVersion {
+    id: number;
+    version_number: number;
+    trigger_type: string;
+    commit_hash: string | null;
+    status: 'draft' | 'pending_review' | 'active' | 'archived';
+    created_at: number;
+}
+
+interface Props {
+    versions: DocVersion[];
+    currentVersionId: number | null;
+    onVersionChange: (versionId: number) => void;
+}
+
+const statusIcons = {
+    draft: Clock,
+    pending_review: AlertCircle,
+    active: CheckCircle,
+    archived: Archive
+};
+
+const statusColors = {
+    draft: 'text-gray-400',
+    pending_review: 'text-amber-500',
+    active: 'text-green-500',
+    archived: 'text-gray-300'
+};
+
+export function VersionSelector({ versions, currentVersionId, onVersionChange }: Props) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const currentVersion = versions.find(v => v.id === currentVersionId) || versions[0];
+
+    if (!currentVersion) return null;
+
+    const StatusIcon = statusIcons[currentVersion.status];
+
+    return (
+        <div className="relative">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className={clsx(
+                    "flex items-center gap-1.5 px-2 py-1 rounded text-[10px] font-mono",
+                    "bg-gray-100 hover:bg-gray-200 transition-colors"
+                )}
+            >
+                <StatusIcon size={12} className={statusColors[currentVersion.status]} />
+                <span>v{currentVersion.version_number}</span>
+                {currentVersion.commit_hash && (
+                    <span className="text-gray-400">
+                        ({currentVersion.commit_hash.slice(0, 7)})
+                    </span>
+                )}
+            </button>
+
+            {isOpen && (
+                <>
+                    <div
+                        className="fixed inset-0 z-10"
+                        onClick={() => setIsOpen(false)}
+                    />
+                    <div className="absolute right-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg min-w-[200px] max-h-[300px] overflow-y-auto">
+                        <div className="p-2 border-b border-gray-100">
+                            <span className="text-[10px] font-bold uppercase tracking-wider text-gray-400">
+                                Versions
+                            </span>
+                        </div>
+                        <div className="py-1">
+                            {versions.map((version) => {
+                                const Icon = statusIcons[version.status];
+                                const isActive = version.id === currentVersionId;
+                                const date = new Date(version.created_at * 1000);
+
+                                return (
+                                    <button
+                                        key={version.id}
+                                        onClick={() => {
+                                            onVersionChange(version.id);
+                                            setIsOpen(false);
+                                        }}
+                                        className={clsx(
+                                            "w-full px-3 py-2 flex items-center gap-2 hover:bg-gray-50 text-left",
+                                            isActive && "bg-blue-50"
+                                        )}
+                                    >
+                                        <Icon size={14} className={statusColors[version.status]} />
+                                        <div className="flex-1 min-w-0">
+                                            <div className="flex items-center gap-2">
+                                                <span className="text-xs font-medium">
+                                                    v{version.version_number}
+                                                </span>
+                                                {version.status === 'active' && (
+                                                    <span className="text-[9px] bg-green-100 text-green-600 px-1 rounded">
+                                                        CURRENT
+                                                    </span>
+                                                )}
+                                                {version.status === 'pending_review' && (
+                                                    <span className="text-[9px] bg-amber-100 text-amber-600 px-1 rounded">
+                                                        REVIEW
+                                                    </span>
+                                                )}
+                                            </div>
+                                            <div className="text-[10px] text-gray-400 flex items-center gap-1">
+                                                <span>{version.trigger_type}</span>
+                                                <span>•</span>
+                                                <span>{date.toLocaleDateString()}</span>
+                                                {version.commit_hash && (
+                                                    <>
+                                                        <span>•</span>
+                                                        <GitCommit size={10} />
+                                                        <span>{version.commit_hash.slice(0, 7)}</span>
+                                                    </>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}

package/packages/ui/lib/db.ts

@@ -0,0 +1,521 @@
+import Database from 'better-sqlite3';
+import path from 'path';
+import fs from 'fs';
+import { marked } from 'marked';
+
+// Configure marked to render mermaid blocks as divs
+const renderer = new marked.Renderer();
+renderer.code = ({ text, lang, escaped }: any) => {
+    const code = text;
+    const language = (lang || '').match(/\S*/)[0];
+
+    if (language === 'mermaid') {
+        return `<div class="mermaid">${code}</div>`;
+    }
+
+    const className = language ? `class="language-${language}"` : '';
+    return `<pre><code ${className}>${code}</code></pre>\n`;
+};
+
+marked.use({ renderer });
+
+// Connect to the Daemon's DB
+// Assumes UI and Daemon are in the same mono-repo structure
+const DB_PATH = path.resolve(process.cwd(), '../daemon/.chronicle/db.sqlite');
+
+// Lazy database connection - handle build-time scenarios where DB doesn't exist
+let _db: Database.Database | null = null;
+
+function getDb(): Database.Database | null {
+    if (_db) return _db;
+
+    // Check if database file exists before attempting to open
+    if (!require('fs').existsSync(DB_PATH)) {
+        console.warn('Database not found at:', DB_PATH);
+        return null;
+    }
+
+    try {
+        _db = new Database(DB_PATH, {
+            readonly: false,
+            fileMustExist: true
+        });
+        return _db;
+    } catch (error) {
+        console.error('Failed to connect to database:', error);
+        return null;
+    }
+}
+
+// For backward compatibility - functions will check if db is null
+const db = {
+    prepare: (sql: string) => {
+        const database = getDb();
+        if (!database) {
+            throw new Error('Database not available');
+        }
+        return database.prepare(sql);
+    }
+};
+
+// ===== Stats =====
+
+export interface FileRecord {
+    id: number;
+    path: string;
+    hash: string;
+    last_modified: number;
+    last_indexed: number;
+}
+
+export interface JobRecord {
+    id: number;
+    name: string;
+    data: string;
+    status: string;
+    created_at: number;
+    updated_at: number;
+}
+
+export function getStats() {
+    const fileCount = db.prepare('SELECT COUNT(*) as count FROM files').get() as { count: number };
+    const jobStats = db.prepare(`
+        SELECT status, COUNT(*) as count 
+        FROM jobs 
+        GROUP BY status
+    `).all() as { status: string; count: number }[];
+
+    return {
+        files: fileCount.count,
+        jobs: jobStats
+    };
+}
+
+export function getRecentFiles(limit = 50, projectPath?: string) {
+    let query = 'SELECT * FROM files';
+    const args: any[] = [];
+
+    if (projectPath) {
+        query += ' WHERE path LIKE ?';
+        args.push(`${projectPath}%`);
+    }
+
+    query += ' ORDER BY last_indexed DESC LIMIT ?';
+    args.push(limit);
+
+    return db.prepare(query).all(...args) as FileRecord[];
+}
+
+export function getProjects() {
+    return db.prepare('SELECT * FROM projects ORDER BY created_at DESC').all() as any[];
+}
+
+export function getProjectConfig(projectPath: string): any | null {
+    try {
+        const configPath = path.join(projectPath, '.chronicle.json');
+        if (!fs.existsSync(configPath)) {
+            return null;
+        }
+        const content = fs.readFileSync(configPath, 'utf-8');
+        return JSON.parse(content);
+    } catch {
+        return null;
+    }
+}
+
+export function getProjectConfigRaw(projectPath: string): string | null {
+    try {
+        const configPath = path.join(projectPath, '.chronicle.json');
+        if (!fs.existsSync(configPath)) {
+            return null;
+        }
+        return fs.readFileSync(configPath, 'utf-8');
+    } catch {
+        return null;
+    }
+}
+
+export function saveProjectConfig(projectPath: string, content: string): boolean {
+    try {
+        const configPath = path.join(projectPath, '.chronicle.json');
+        fs.writeFileSync(configPath, content, 'utf-8');
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+export function enqueueJob(name: string, data: any) {
+    return db.prepare(`
+        INSERT INTO jobs (name, data, status, created_at, updated_at)
+        VALUES (?, ?, 'pending', unixepoch(), unixepoch())
+    `).run(name, JSON.stringify(data));
+}
+
+export function clearQueue() {
+    // Get all doc jobs that will be cancelled to reset their stages
+    const docJobs = db.prepare(`
+        SELECT data FROM jobs 
+        WHERE (name = 'doc:initialize' OR name = 'doc:update')
+        AND (status = 'pending' OR status = 'processing')
+    `).all() as { data: string }[];
+
+    // Cancel current job
+    db.prepare(`
+        UPDATE jobs 
+        SET status = 'failed', error = 'Cancelled by user', updated_at = unixepoch()
+        WHERE status = 'processing'
+    `).run();
+
+    // Clear pending jobs
+    const result = db.prepare(`DELETE FROM jobs WHERE status = 'pending'`).run();
+
+    // Reset doc stages for affected projects
+    for (const job of docJobs) {
+        try {
+            const jobData = JSON.parse(job.data);
+            if (jobData.projectPath) {
+                const project = db.prepare(`
+                    SELECT id FROM projects WHERE path = ?
+                `).get(jobData.projectPath) as { id: number } | undefined;
+                if (project) {
+                    resetDocStage(project.id);
+                }
+            }
+        } catch {
+            // Skip invalid JSON
+        }
+    }
+
+    return result;
+}
+
+export function killCurrentJob() {
+    // Get the current processing job to reset its stage if it's a doc job
+    const currentJob = db.prepare(`
+        SELECT name, data FROM jobs WHERE status = 'processing'
+    `).get() as { name: string; data: string } | undefined;
+
+    const result = db.prepare(`
+        UPDATE jobs 
+        SET status = 'failed', error = 'Killed by user', updated_at = unixepoch()
+        WHERE status = 'processing'
+    `).run();
+
+    // Reset doc stage if we killed a doc job
+    if (currentJob && (currentJob.name === 'doc:initialize' || currentJob.name === 'doc:update')) {
+        try {
+            const jobData = JSON.parse(currentJob.data);
+            if (jobData.projectPath) {
+                const project = db.prepare(`
+                    SELECT id FROM projects WHERE path = ?
+                `).get(jobData.projectPath) as { id: number } | undefined;
+                if (project) {
+                    resetDocStage(project.id);
+                }
+            }
+        } catch {
+            // Skip invalid JSON
+        }
+    }
+
+    return result;
+}
+
+export function toggleProjectPaused(path: string, paused: boolean) {
+    return db.prepare('UPDATE projects SET is_paused = ? WHERE path = ?').run(paused ? 1 : 0, path);
+}
+
+export function getJobs(limit = 20) {
+    // Get recent jobs
+    return db.prepare('SELECT * FROM jobs ORDER BY created_at DESC LIMIT ?').all(limit) as JobRecord[];
+}
+
+/**
+ * Reads documentation files from a project's filesystem.
+ * Recursively reads all .md files from docs/ folder and subfolders.
+ */
+export function getProjectDocs(projectPath: string): DocFile[] {
+    const docs: DocFile[] = [];
+
+    // Root level docs
+    const rootDocs = ['README.md', 'chronicle.md'];
+    for (const docName of rootDocs) {
+        const docPath = path.join(projectPath, docName);
+        if (fs.existsSync(docPath)) {
+            const content = fs.readFileSync(docPath, 'utf-8');
+            docs.push({
+                name: docName,
+                path: docPath,
+                content: marked.parse(content) as string,
+                type: 'root'
+            });
+        }
+    }
+
+    // Recursively read docs folder
+    const docsDir = path.join(projectPath, 'docs');
+    if (fs.existsSync(docsDir) && fs.statSync(docsDir).isDirectory()) {
+        readDocsRecursively(docsDir, docsDir, docs);
+    }
+
+    return docs;
+}
+
+function readDocsRecursively(baseDir: string, currentDir: string, docs: DocFile[]): void {
+    const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const fullPath = path.join(currentDir, entry.name);
+
+        if (entry.isDirectory()) {
+            // Skip hidden folders
+            if (!entry.name.startsWith('.')) {
+                readDocsRecursively(baseDir, fullPath, docs);
+            }
+        } else if (entry.name.endsWith('.md') && !entry.name.startsWith('.')) {
+            const relativePath = path.relative(baseDir, fullPath);
+            const content = fs.readFileSync(fullPath, 'utf-8');
+            docs.push({
+                name: entry.name,
+                path: fullPath,
+                content: marked.parse(content) as string,
+                type: 'docs'
+            });
+        }
+    }
+}
+
+export interface DocFile {
+    name: string;
+    path: string;
+    content: string;
+    type: 'root' | 'docs';
+}
+
+/**
+ * Checks if there's an active doc job (pending or processing) for a project.
+ */
+function hasActiveDocJob(projectPath: string): boolean {
+    try {
+        const jobs = db.prepare(`
+            SELECT name, data, status 
+            FROM jobs 
+            WHERE (name = 'doc:initialize' OR name = 'doc:update')
+            AND (status = 'pending' OR status = 'processing')
+        `).all() as { name: string; data: string; status: string }[];
+
+        for (const job of jobs) {
+            try {
+                const jobData = JSON.parse(job.data);
+                if (jobData.projectPath === projectPath) {
+                    return true;
+                }
+            } catch {
+                // Skip invalid JSON
+            }
+        }
+        return false;
+    } catch {
+        return false;
+    }
+}
+
+/**
+ * Gets the documentation stage progress for a project.
+ * Only returns stage if there's an active doc job running.
+ */
+export function getDocStage(projectId: number, projectPath?: string): { currentStage: number; totalStages: number } | null {
+    try {
+        const result = db.prepare(`
+            SELECT current_stage, total_stages FROM doc_stages WHERE project_id = ?
+        `).get(projectId) as { current_stage: number; total_stages: number } | undefined;
+
+        if (!result) return null;
+
+        // Only show stage if there's an active doc job
+        if (projectPath && !hasActiveDocJob(projectPath)) {
+            return null;
+        }
+
+        return {
+            currentStage: result.current_stage,
+            totalStages: result.total_stages
+        };
+    } catch {
+        return null;
+    }
+}
+
+/**
+ * Resets the doc stage for a project (sets current_stage to 0).
+ */
+export function resetDocStage(projectId: number): void {
+    try {
+        db.prepare(`
+            UPDATE doc_stages 
+            SET current_stage = 0, last_updated = unixepoch()
+            WHERE project_id = ?
+        `).run(projectId);
+    } catch {
+        // Ignore errors
+    }
+}
+
+// ===== Doc Version Functions =====
+
+export interface DocVersion {
+    id: number;
+    version_number: number;
+    trigger_type: string;
+    commit_hash: string | null;
+    status: 'draft' | 'pending_review' | 'active' | 'archived';
+    created_at: number;
+}
+
+export function getDocVersions(projectId: number): DocVersion[] {
+    try {
+        return db.prepare(`
+            SELECT id, version_number, trigger_type, commit_hash, status, created_at
+            FROM doc_versions
+            WHERE project_id = ?
+            ORDER BY version_number DESC
+        `).all(projectId) as DocVersion[];
+    } catch {
+        return [];
+    }
+}
+
+export function getActiveDocVersion(projectId: number): DocVersion | null {
+    try {
+        return db.prepare(`
+            SELECT id, version_number, trigger_type, commit_hash, status, created_at
+            FROM doc_versions
+            WHERE project_id = ? AND status = 'active'
+            ORDER BY version_number DESC
+            LIMIT 1
+        `).get(projectId) as DocVersion | null;
+    } catch {
+        return null;
+    }
+}
+
+export function getThoughtLogsForVersion(versionId: number): { doc_path: string; thinking_summary: string }[] {
+    try {
+        return db.prepare(`
+            SELECT doc_path, thinking_summary
+            FROM thought_logs
+            WHERE version_id = ?
+            ORDER BY created_at ASC
+        `).all(versionId) as { doc_path: string; thinking_summary: string }[];
+    } catch {
+        return [];
+    }
+}
+
+export function getThoughtLogForDoc(versionId: number, docPath: string): string | null {
+    try {
+        const result = db.prepare(`
+            SELECT thinking_summary
+            FROM thought_logs
+            WHERE version_id = ? AND doc_path = ?
+            LIMIT 1
+        `).get(versionId, docPath) as { thinking_summary: string } | undefined;
+        return result?.thinking_summary || null;
+    } catch {
+        return null;
+    }
+}
+
+// ===== AI Activity (Phase 1.6) =====
+
+export 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; // milliseconds
+    project_path?: string;
+}
+
+/**
+ * Gets recent AI activity for the thinking drawer.
+ */
+export function getRecentAIActivity(limit: number = 20): AIActivity[] {
+    try {
+        return db.prepare(`
+            SELECT 
+                a.*,
+                p.path as project_path
+            FROM ai_activity a
+            LEFT JOIN projects p ON a.project_id = p.id
+            ORDER BY a.created_at DESC
+            LIMIT ?
+        `).all(limit) as AIActivity[];
+    } catch {
+        return [];
+    }
+}
+
+/**
+ * Gets AI activity for a specific version.
+ */
+export function getActivityForVersion(versionId: number): AIActivity[] {
+    try {
+        return db.prepare(`
+            SELECT * FROM ai_activity 
+            WHERE version_id = ? 
+            ORDER BY created_at ASC
+        `).all(versionId) as AIActivity[];
+    } catch {
+        return [];
+    }
+}
+
+/**
+ * Kills/cancels a running AI activity by marking it as error.
+ */
+export function killAIActivity(activityId: number): boolean {
+    const database = getDb();
+    if (!database) return false;
+    
+    try {
+        const result = database.prepare(`
+            UPDATE ai_activity 
+            SET status = 'error', 
+                response_preview = 'Cancelled by user',
+                thinking_summary = 'Activity was cancelled.'
+            WHERE id = ? AND status = 'running'
+        `).run(activityId);
+        return result.changes > 0;
+    } catch {
+        return false;
+    }
+}
+
+/**
+ * Kills all running AI activities.
+ */
+export function killAllRunningAIActivities(): number {
+    const database = getDb();
+    if (!database) return 0;
+    
+    try {
+        const result = database.prepare(`
+            UPDATE ai_activity 
+            SET status = 'error', 
+                response_preview = 'Cancelled by user',
+                thinking_summary = 'Activity was cancelled.'
+            WHERE status = 'running'
+        `).run();
+        return result.changes;
+    } catch {
+        return 0;
+    }
+}

package/packages/ui/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/packages/ui/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

package/packages/ui/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@chronicle/ui",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@types/marked": "^5.0.2",
+        "better-sqlite3": "^11.10.0",
+        "clsx": "^2.1.1",
+        "date-fns": "^2.30.0",
+        "lucide-react": "^0.562.0",
+        "marked": "^17.0.1",
+        "next": "14.0.3",
+        "react": "^18",
+        "react-dom": "^18",
+        "tailwind-merge": "^3.4.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "autoprefixer": "^10.0.1",
+        "postcss": "^8",
+        "tailwindcss": "^3.3.0",
+        "typescript": "^5"
+    }
+}

package/packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}